/* ==========================================================================
   Sri Lanka Travel Tours — Wedding detail page (tours/wedding-view.php)
   Loaded alongside tour-detail.css, which supplies .td-facts/.td-fact,
   .td-stepper and .td-btn-book — reused here as-is. Everything specific to
   this page is prefixed .wd-.
   ========================================================================== */

/* ---- Hero — bento-style photo mosaic (Airbnb-listing style). One
   photo collapses to a single full-width tile (count-1); each variant
   below just changes how the grid divides once .wd-hero__gallery-tile
   --main claims its share, so tiles 2+ auto-place into what's left. ---- */
.wd-hero {
  position: relative;
  margin-bottom: 28px;
}

.wd-hero__gallery {
  position: relative;
  display: grid;
  gap: 4px;
  aspect-ratio: 3 / 1;
  border-radius: var(--slt-radius-sm);
  overflow: hidden;
}

.wd-hero__gallery-tile {
  position: relative;
  padding: 0;
  margin: 0;
  border: none;
  background: var(--slt-surface-subtle);
  cursor: pointer;
  overflow: hidden;
}

.wd-hero__gallery-tile:disabled {
  cursor: default;
}

.wd-hero__gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.wd-hero__gallery-tile:hover img {
  transform: scale(1.04);
}

.wd-hero__gallery-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 14, 0.55);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
}

.wd-hero__gallery-viewall {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--slt-border-strong);
  background: var(--slt-surface);
  color: var(--slt-text-primary);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.wd-hero__gallery-viewall svg {
  width: 16px;
  height: 16px;
}

.wd-hero__gallery--count-1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.wd-hero__gallery--count-2 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr;
}

.wd-hero__gallery--count-3 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.wd-hero__gallery--count-4,
.wd-hero__gallery--count-5 {
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.wd-hero__gallery--count-2 .wd-hero__gallery-tile--main,
.wd-hero__gallery--count-3 .wd-hero__gallery-tile--main,
.wd-hero__gallery--count-4 .wd-hero__gallery-tile--main,
.wd-hero__gallery--count-5 .wd-hero__gallery-tile--main {
  grid-row: 1 / -1;
}

.wd-hero__body {
  padding-top: 22px;
}

/* Matches .td-title__h1's size/weight/tracking (tour + destination pages'
   shared H1) so this page's title doesn't read smaller than the rest of
   the site's detail pages. */
.wd-hero__title {
  font-size: 3.5rem;
  line-height: 4rem;
  font-weight: 700;
  letter-spacing: -2px;
  margin: 6px 0 10px;
  color: var(--slt-text-primary);
}

.wd-hero__intro {
  max-width: 720px;
  color: var(--slt-text-secondary);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

/* ---- Page grid — mirrors .td-page__inner's 1fr / 340px split ---- */
.wd-page {
  padding-block: 32px 60px;
}

.wd-page__inner {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
}

.wd-page__main {
  display: flex;
  flex-direction: column;
  gap: 40px;
  /* #wdMapBlock (the final block) is [hidden] until a destination is
     picked — as a display:none flex item it doesn't count toward the
     gap above, so with no destination selected, "Extend Your Wedding
     Holiday" was left with zero trailing space instead of the usual
     40px every other section gets before what follows. This keeps that
     same 40px at the end regardless of whether the map ends up shown. */
  padding-bottom: 40px;
}

.wd-block h2 {
  font-size: 1.6rem;
  margin: 0 0 6px;
  color: var(--slt-text-primary);
}

/* Marks Choose Your Venue as the one mandatory step, so it doesn't read
   with the same weight as the optional Add-ons/Destinations blocks below
   — previously the only sign a venue was required was an error note that
   appeared after trying to enquire without one. */
.wd-required-badge {
  flex: none;
  padding: 3px 10px;
  border-radius: var(--slt-radius-sm);
  background: var(--slt-surface-subtle);
  border: 1px solid var(--slt-urgent);
  color: var(--slt-urgent);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.wd-block__lede {
  max-width: 640px;
  color: var(--slt-text-secondary);
  margin: 0 0 18px;
  font-size: 0.95rem;
}

/* ---- Complimentary benefits — any number of banners (admin/index.php's
   Wedding Page Banners section). auto-fit means 1 banner spans the full
   width, 2 sit side by side, 3+ wrap onto additional rows — no fixed
   column count baked in. ---- */
.wd-benefits__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.wd-benefits__slot {
  aspect-ratio: 16 / 6;
  border-radius: var(--slt-radius-sm);
  overflow: hidden;
  background: var(--slt-surface-subtle);
}

.wd-benefits__slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 575.98px) {
  .wd-benefits__grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Two Ways to Marry — a simple two-up card row, not the photo-card
   pattern used by venues/add-ons below since there's no imagery here. ---- */
.wd-ways {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.wd-way-card {
  padding: 20px;
  border: 1px solid var(--slt-border);
  border-radius: var(--slt-radius-sm);
  background: var(--slt-surface);
}

.wd-way-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wd-way-card__icon {
  font-size: 1.3rem;
  line-height: 1;
}

.wd-way-card__head h3 {
  flex: 1 1 auto;
  margin: 0;
  font-size: 1.05rem;
  color: var(--slt-text-primary);
}

.wd-way-card__desc {
  margin: 10px 0 0;
  color: var(--slt-text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* "?" help toggle — reveals the Legal Marriage requirements panel below
   the card instead of showing that detail inline for every visitor. */
.wd-way-help {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--slt-radius-sm);
  border: 1.5px solid var(--slt-border-strong);
  background: var(--slt-surface-subtle);
  color: var(--slt-text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.wd-way-help:hover,
.wd-way-help[aria-expanded="true"] {
  border-color: var(--slt-blue);
  color: var(--slt-blue);
}

.wd-way-help__panel {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--slt-border);
}

.wd-way-help__panel[hidden] {
  display: none;
}

.wd-way-help__panel p {
  margin: 0;
  color: var(--slt-text-secondary);
  font-size: 0.85rem;
  line-height: 1.5;
}

.wd-way-help__panel p + p {
  margin-top: 10px;
}

@media (max-width: 640px) {
  .wd-ways {
    grid-template-columns: 1fr;
  }
}

.wd-block__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  /* .wd-block__head h2 zeroes its own margin below (needed so a wrapped
     badge/button stays vertically centered on the title), which left
     sections using this wrapper (Venue, Destinations) with no space
     before their lede text — unlike the plain-<h2> sections, which get
     .wd-block h2's 6px bottom margin. Restores that same 6px here. */
  margin-bottom: 6px;
}

.wd-block__head h2 {
  margin: 0;
}

/* A real pill button (not a text link) with its own live count, so it
   reads as a clear, prominent action once something is selected —
   matches the visual weight of .wd-dest-tab next to it. */
.wd-dest-clear {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--slt-radius-sm);
  border: 1.5px solid var(--slt-urgent);
  background: var(--slt-surface);
  color: var(--slt-urgent);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

/* Its own display: inline-flex above otherwise beats the [hidden]
   attribute's default UA display:none. */
.wd-dest-clear[hidden] {
  display: none;
}

.wd-dest-clear svg {
  width: 13px;
  height: 13px;
  flex: none;
}

.wd-dest-clear:hover {
  background: var(--slt-urgent);
  color: var(--slt-text-on-brand);
}

/* Extra breathing room before the region tab bar — this lede is
   followed by a busy row of tabs plus the destination grid, so the
   default 18px .wd-block__lede spacing (fine before a plain card grid)
   read as cramped here. */
#destinations .wd-block__lede {
  margin-bottom: 28px;
}

/* ---- Destination region tabs (Continue the Celebration) — one
   region's grid visible at a time, same data-panel toggle pattern as
   the header's mega-menu tabs. ---- */
.wd-dest-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.wd-dest-tab {
  padding: 8px 16px;
  border-radius: var(--slt-radius-sm);
  border: 1px solid var(--slt-border);
  background: var(--slt-surface);
  color: var(--slt-text-secondary);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wd-dest-tab:hover {
  border-color: var(--slt-border-strong);
  color: var(--slt-text-primary);
}

.wd-dest-tab.is-active {
  background: var(--slt-action);
  border-color: var(--slt-action);
  color: var(--slt-text-on-brand);
}

/* Overrides .tours-links__grid's plain flex-wrap (fine for a short list,
   but here a region can hold 15+ destinations with names of very
   different lengths — wrapped as free-width chips it read as a ragged,
   cluttered wall of pills). A grid of equal-width cells lines everything
   up cleanly; long names truncate instead of stretching their chip. */
.wd-dest-region__grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}

.wd-dest-pill {
  width: 100%;
}

/* text-overflow: ellipsis on the flex row itself (.tours-links__label)
   doesn't reliably truncate one flex child while leaving another alone —
   on a long name like "Yala National Park" the checkmark got pushed
   past the pill's right edge instead of the name shrinking. Truncating
   the name in its own child span keeps the checkmark's width fixed and
   always inside the pill. */
.wd-dest-pill .tours-links__label {
  min-width: 0;
}

.wd-dest-pill__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Map (See It on the Map) ---- */
.wd-map {
  position: relative;
  border-radius: var(--slt-radius-sm);
  overflow: hidden;
  border: 1px solid var(--slt-border);
}

.wd-map iframe {
  display: block;
  width: 100%;
  height: 360px;
}

/* Floating label over the map's pin — the plain keyless embed doesn't
   reliably show its own place-name popup, so this stands in as the
   visible "pin label" for whichever destination was picked. */
.wd-map__pin-label {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 28px);
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  background: var(--slt-surface);
  color: var(--slt-text-primary);
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.wd-map__pin-label svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--slt-urgent);
}

.wd-map__pin-label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* .tours-links__grid sets its own display: flex, which otherwise beats
   the [hidden] attribute's default UA display:none. */
.wd-dest-region__grid[hidden] {
  display: none;
}

/* ---- Venues — one card per venue type (Beach / Tea Estate / Heritage
   / Blessing), same layout as .wd-addon-card below: photo, name,
   description, plus the location names for that type. Single choice
   (role="radio" in a radiogroup), so the check badge is a plain filled
   circle rather than the add-ons' plus/check swap. ---- */
.wd-venues {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.wd-venue-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  border: 1px solid var(--slt-border);
  border-radius: var(--slt-radius-sm);
  background: var(--slt-surface);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  font: inherit;
  color: inherit;
}

.wd-venue-card:hover {
  border-color: var(--slt-border-strong);
}

.wd-venue-card.is-selected {
  border-color: var(--slt-success);
  box-shadow: 0 0 0 1.5px var(--slt-success);
}

.wd-venue-card__media {
  aspect-ratio: 16 / 10;
  background: var(--slt-surface-subtle);
}

.wd-venue-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wd-venue-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 40px 14px 14px;
}

.wd-venue-card__body strong {
  font-size: 1rem;
  color: var(--slt-text-primary);
}

.wd-venue-card__desc {
  font-size: 0.86rem;
  color: var(--slt-text-secondary);
  line-height: 1.4;
}

.wd-venue-card__locations {
  font-size: 0.78rem;
  color: var(--slt-text-muted);
  font-style: italic;
}

.wd-venue-card__check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--slt-surface);
  border: 1px solid var(--slt-border-strong);
  color: transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wd-venue-card__check svg {
  width: 15px;
  height: 15px;
}

.wd-venue-card.is-selected .wd-venue-card__check {
  background: var(--slt-success);
  border-color: var(--slt-success);
  color: var(--slt-text-on-brand);
}

/* ---- Add-ons — multi-choice cards ---- */
.wd-addons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.wd-addon-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  border: 1px solid var(--slt-border);
  border-radius: var(--slt-radius-sm);
  background: var(--slt-surface);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  font: inherit;
  color: inherit;
}

.wd-addon-card:hover {
  border-color: var(--slt-border-strong);
}

.wd-addon-card.is-selected {
  border-color: var(--slt-success);
  box-shadow: 0 0 0 1.5px var(--slt-success);
}

.wd-addon-card__media {
  aspect-ratio: 16 / 10;
  background: var(--slt-surface-subtle);
}

.wd-addon-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wd-addon-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 40px 14px 14px;
}

.wd-addon-card__body strong {
  font-size: 0.94rem;
  color: var(--slt-text-primary);
}

.wd-addon-card__desc {
  font-size: 0.8rem;
  color: var(--slt-text-secondary);
  line-height: 1.4;
}

.wd-addon-card__toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--slt-surface);
  border: 1px solid var(--slt-border-strong);
  color: var(--slt-text-secondary);
}

.wd-addon-card__toggle svg {
  width: 15px;
  height: 15px;
  position: absolute;
  transition: opacity 0.1s ease;
}

.wd-addon-card__added {
  opacity: 0;
}

.wd-addon-card.is-selected .wd-addon-card__toggle {
  background: var(--slt-success);
  border-color: var(--slt-success);
  color: var(--slt-text-on-brand);
}

.wd-addon-card.is-selected .wd-addon-card__plus {
  opacity: 0;
}

.wd-addon-card.is-selected .wd-addon-card__added {
  opacity: 1;
}

/* ---- Continue the Celebration — the same thumb+label pill used for
   Destinations/Things to Do on tours/index.php (.tours-links__item,
   defined in tours.css), wrapped in .tours-links__grid so every option
   shows at once with no horizontal scroll. .wd-dest-pill only resets the
   <button> (that pill is normally an <a>) and adds the selected state —
   everything else (thumb size, gradient placeholder, label chip) is
   inherited as-is for visual consistency with the rest of the site. ---- */
.wd-dest-pill {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.wd-dest-pill .tours-links__label {
  transition: background-color 0.15s ease, color 0.15s ease;
}

.wd-dest-pill .tours-links__label {
  gap: 8px;
}

/* Check circle after the destination name (not on the photo) — same
   checkmark idea as .wd-venue-card__check, an outline ring that fills
   solid once selected. */
.wd-dest-pill__check {
  flex: none;
  width: 17px;
  height: 17px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid currentColor;
  opacity: 0.35;
  color: inherit;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.wd-dest-pill__check svg {
  width: 10px;
  height: 10px;
}

.wd-dest-pill.is-selected .tours-links__label {
  background-color: var(--slt-success);
  color: var(--slt-text-on-brand);
}

.wd-dest-pill.is-selected .wd-dest-pill__check {
  background: var(--slt-text-on-brand);
  border-color: var(--slt-text-on-brand);
  color: var(--slt-success);
  opacity: 1;
}

/* ---- Sticky enquiry card — same sticky offset as .td-sidebar ---- */
.wd-sidebar {
  position: sticky;
  top: 84px;
}

/* Plain block flow, not flex+gap — same rhythm as .td-booking-card
   (tour-detail.css): each child controls its own margin-bottom instead
   of one flat gap value applying evenly everywhere. */
.wd-enquiry-card {
  position: relative;
  border-radius: var(--slt-radius-sm);
  padding: 22px;
  background: var(--slt-slate-200);
}

:root[data-theme="dark"] .wd-enquiry-card {
  background: var(--slt-slate-900);
}

.wd-enquiry-card__title {
  margin: 0 0 14px;
  font-size: 1.2rem;
  color: var(--slt-text-primary);
}

.wd-enquiry-card .mct-shell {
  margin-bottom: 12px;
}

/* Comfort tier field itself reuses plan-my-trip/index.php's exact
   #ttdTierWrap markup + my-custom-trip.css/style.css styling (loaded
   above) — nothing wedding-specific to add here.

   Guest count is a real number input (typed values, not just +/- taps),
   styled to sit inline with .td-stepper's buttons like the plain count
   span it replaces. */
.wd-stepper__input {
  flex: none;
  width: 44px;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--slt-text-primary);
  font: inherit;
  -moz-appearance: textfield;
}

.wd-stepper__input::-webkit-inner-spin-button,
.wd-stepper__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Arrival Date uses the same .td-datepicker trigger button as tour-view.php
   (a full-width block, not a compact right-aligned control), so its field
   stacks the label above it instead of the row layout above. */

.wd-enquiry-card__selection {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--slt-border);
}

.wd-enquiry-card__selection[hidden] {
  display: none;
}

.wd-enquiry-card__selection-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
}

.wd-enquiry-card__selection-row[hidden] {
  display: none;
}

.wd-enquiry-card__selection-row span {
  color: var(--slt-text-secondary);
  flex: 0 0 auto;
}

.wd-enquiry-card__selection-row strong {
  color: var(--slt-text-primary);
  text-align: right;
  font-weight: 600;
}

.wd-enquiry-card__note {
  margin: 0 0 10px;
  font-size: 0.8rem;
  color: var(--slt-urgent);
}

#wdEnquiryBtn {
  margin-bottom: 10px;
}

.wd-enquiry-card__footnote {
  margin: 0;
  font-size: 0.75rem;
  color: var(--slt-text-muted);
  text-align: center;
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (max-width: 991.98px) {
  .wd-page__inner {
    grid-template-columns: 1fr;
  }

  /* No order: -1 here (unlike .td-sidebar on regular tour pages) — that
     pattern suits a price card that's meaningful before you scroll, but
     the enquiry card is a selection-dependent form (venue/add-ons/date)
     that's empty until the couple has made choices below. Jumping it
     above Two Ways to Marry/Venues/Add-ons put an unfillable form right
     after the hero, so it stays in natural document order instead —
     after the content it depends on. */
  .wd-sidebar {
    position: static;
  }

  .wd-hero__title {
    font-size: 2.75rem;
    line-height: 1.25;
  }
}

@media (max-width: 575.98px) {
  .wd-hero__title {
    font-size: 2.25rem;
    line-height: 2.75rem;
  }

  .wd-venues,
  .wd-addons {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 420px) {
  .wd-venues,
  .wd-addons {
    grid-template-columns: 1fr;
  }
}