/* ================================================= single venue / vendor ==
   The pages /weddings/ sends people to. The hub is photographic and confident;
   before this file the details it linked to were a centred H1 over grey and a
   two-column "About / Details" — the generic detail page, and the reason the
   hub was writing a cheque these pages did not cash.

   Tokens are the hub's, restated rather than imported: lc-wedding-hub.css is
   enqueued only on /weddings/, so a single that referenced its variables would
   fall back to browser defaults. Same values, same voice, one file.

   Loaded on is_singular(['venue','vendor']) by lc-wedding-single.php.
   The hero scrim itself comes from lc-motion.css (.lc-hero-scrim) — not
   repeated here, or the photograph would be darkened twice.
   ======================================================================== */

.lc-wed-single {
  --wed-ink:   #191c17;
  --wed-green: #2f6f57;
  --wed-gold:  #b8863b;
  --wed-paper: #faf8f4;
  --wed-line:  #e4e0d8;
  --wed-well:  #101310;
  --wed-ease:  cubic-bezier(.22,.72,0,1);
  --wed-serif: 'PT Serif', Georgia, 'Times New Roman', serif;
  --wed-sans:  Montserrat, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* --------------------------------------------------------- the eyebrow --
   Carried over from the hub unchanged so the two pages read as one
   publication: a gold rule under one small uppercase line. */
.lc-wed-single .lc-wed-eyebrow,
.lc-wed-hero .lc-wed-eyebrow {
  font-family: Montserrat, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #b8863b;
  margin: 0 0 14px;
}
.lc-wed-single .lc-wed-eyebrow::after {
  content: '';
  display: block;
  width: 34px;
  height: 1px;
  margin-top: 12px;
  background: #b8863b;
}

/* ================================================================ HERO ==
   The section carries the house formula (dynamic image, cover, expand,
   transparent header, overlap). This file only sets what sits on top of it.

   The name is the page: PT Serif, tight, big enough to read at a glance from
   across a room, capped by measure rather than by font-size alone so a long
   resort name does not run the full 1440. */
/* padding=xlarge alone gave a 449px hero on a 900px viewport — half a screen,
   which is the "content occupying a third of the viewport" failure by another
   name. A hero has to own the first screen; 74svh (not vh) keeps it honest on
   a phone, where the browser chrome makes vh lie. */
.lc-wed-hero > .uk-section,
.lc-wed-hero.uk-section {
  min-height: 74svh;
  display: flex;
  align-items: center;
}
@supports not (height: 1svh) {
  .lc-wed-hero > .uk-section,
  .lc-wed-hero.uk-section { min-height: 74vh; }
}
/* Both shapes: with a photograph YOOtheme nests the section inside a background
   wrapper, without one it does not. Missing the second selector left the
   no-photo hero's container to centre itself while the photographed one ran
   full bleed — the same page in two alignments. */
.lc-wed-hero > .uk-section > *,
.lc-wed-hero.uk-section > * { width: 100%; }

/* YOOtheme only attaches uk-light alongside a background image, so on a vendor
   with no photograph the H1 was rendering near-black on the dark fallback —
   invisible, and returning 200 the whole time. Colour is set here instead so it
   holds in both states. */
.lc-wed-hero .lc-wed-hero-eyebrow {
  color: #e8d7b4;
  margin-bottom: 18px;
  text-shadow: 0 1px 14px rgba(0,0,0,.5);
}
.lc-wed-hero h1,
.lc-wed-hero .uk-heading-medium,
.lc-wed-hero .uk-h1 { color: #fff; }
.lc-wed-hero h1 {
  font-family: 'PT Serif', Georgia, 'Times New Roman', serif;
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  font-weight: 400;
  max-width: 18ch;
  margin: 0;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0,0,0,.45);
  /* Imported names are not all sentences: "Weddings+Events+Retreats" is one
     unbreakable token and ran off the right edge on a phone, silently, because
     the hero clips for the ghost word. Break inside a word only when there is
     no other way to fit it. */
  overflow-wrap: anywhere;
}

/* The figures a venue is chosen on, on one line under the name. Separated by
   hairlines rather than bullets, and tabular so two venues compare cleanly. */
.lc-wed-herostats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 18px;
  margin: 22px 0 0;
  font-family: Montserrat, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 13px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
.lc-wed-herostats > span { display: inline-flex; align-items: center; }
.lc-wed-herostats > span + span::before {
  content: '';
  width: 1px;
  height: 13px;
  margin-right: 18px;
  background: rgba(255,255,255,.36);
}
.lc-wed-herostats b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-right: .35em;
}
.lc-wed-herostats .lc-wed-tier { letter-spacing: .12em; color: #e8d7b4; }

/* Wrapped, the hairline divider becomes an orphan rule at the start of the
   second line. Below the fold-width the figures stack instead. */
@media (max-width: 639px) {
  .lc-wed-herostats { gap: 6px 0; flex-direction: column; align-items: flex-start; }
  .lc-wed-herostats > span + span::before { display: none; }
}

/* ------------------------------------------------ hero without a photo --
   Two of 274 vendors have no photograph and more will arrive that way. A
   missing dynamic image leaves YOOtheme with a bare section, so the ground is
   set here instead: the well colour the hub fades photographs into, plus a
   single off-centre gold arc so the frame is composed rather than empty. It
   is a deliberate state, not a gap.
   Applies only when UIkit did NOT attach a background image. */
.lc-wed-hero > .uk-section-default:not(.uk-background-cover),
.lc-wed-hero.uk-section-default:not(.uk-background-cover) {
  background-color: #101310;
  background-image:
    radial-gradient(120% 90% at 78% 12%, rgba(184,134,59,.30) 0%, rgba(184,134,59,0) 58%),
    radial-gradient(90% 70% at 8% 100%, rgba(47,111,87,.34) 0%, rgba(47,111,87,0) 62%);
  min-height: 58svh;   /* nothing to show, so it does not claim the whole screen */
}
@supports not (height: 1svh) {
  .lc-wed-hero > .uk-section-default:not(.uk-background-cover),
  .lc-wed-hero.uk-section-default:not(.uk-background-cover) { min-height: 58vh; }
}

/* The trade, set as the ground the name sits on. Clipped by the hero, bled off
   the right edge on purpose so it reads as a cover device rather than a label. */
.lc-wed-hero { overflow: hidden; }
.lc-wed-ghost {
  position: absolute;
  right: -.08em;
  bottom: -.22em;
  font-family: 'PT Serif', Georgia, 'Times New Roman', serif;
  font-size: clamp(5rem, 15vw, 14rem);
  line-height: .82;
  letter-spacing: -.045em;
  white-space: nowrap;
  color: rgba(255,255,255,.055);
  pointer-events: none;
  user-select: none;
}
.lc-wed-hero .uk-container { position: relative; }
@media (max-width: 639px) { .lc-wed-ghost { display: none; } }

/* ================================================================ BODY ==
   Paper, not white — the hub's ground, so the click does not change material.
   The column split is 1.55fr / 1fr rather than a symmetrical pair: the prose
   is the reading and the sheet is the reference, and they are not equals. */
.uk-section.lc-wed-single,
.lc-wed-single {
  background: #faf8f4;
  color: #191c17;
}
.lc-wed-body {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 64px;
  align-items: start;
}
/* Sticky lives on the grid ITEM, not on the sheet inside it: with align-items
   start the item sits at the top of a full-height row track, which is the
   height sticky needs to travel. */
.lc-wed-col-sheet { position: sticky; top: 96px; }
@media (max-width: 959px) {
  .lc-wed-body { grid-template-columns: 1fr; gap: 44px; }
  .lc-wed-col-sheet { position: static; }
}

/* The sparse case — no prose and no trade fields. One narrow column instead of
   a grid, because a two-column layout with nothing in the left one reads as
   broken rather than as spare. */
.lc-wed-body--sparse {
  grid-template-columns: minmax(0, 640px);
  gap: 36px;
}
.lc-wed-body--sparse .lc-wed-col-sheet { position: static; }
.lc-wed-body--sparse .lc-wed-story > p:first-of-type { font-size: 1.18rem; color: #4a4f47; }
.lc-wed-body--sparse .lc-wed-sheet { border-top-width: 1px; }

.lc-wed-story {
  font-family: 'PT Serif', Georgia, 'Times New Roman', serif;
  font-size: 1.125rem;
  line-height: 1.72;
  color: #33382f;
}
/* Measure is set here, not with YOOtheme's max-width control, which emits
   uk-width-* — a FIXED width, not a maximum. */
.lc-wed-story > p { max-width: 62ch; margin: 0 0 1.15em; text-wrap: pretty; }
.lc-wed-story > p:first-of-type { font-size: 1.28rem; line-height: 1.6; color: #22261f; }
.lc-wed-story > p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- the sheet --
   Hairline rows, not a card. A bordered box with a shadow would be the third
   container on the page and would say nothing the rules do not. */
.lc-wed-sheet {
  position: sticky;
  top: 96px;
  padding: 26px 0 0;
  border-top: 2px solid #191c17;
}
@media (max-width: 959px) { .lc-wed-sheet { position: static; } }

.lc-wed-rail { margin: 0; }
.lc-wed-rail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid #e4e0d8;
}
.lc-wed-rail-row dt {
  font-family: Montserrat, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7d8177;
  white-space: nowrap;
}
.lc-wed-rail-row dd {
  margin: 0;
  font-family: 'PT Serif', Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  color: #191c17;
  text-align: right;
}
.lc-wed-num {
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  margin-right: .15em;
}
.lc-wed-tier { font-family: Montserrat, sans-serif; font-weight: 600; letter-spacing: .14em; color: #2f6f57; }

/* Capabilities that are simply true. A tick column of "Yes" repeated four
   times is noise; these read as a short list of what is included. */
.lc-wed-marks { list-style: none; margin: 20px 0 0; padding: 0; }
.lc-wed-marks li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 9px;
  font-family: Montserrat, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  color: #33382f;
}
.lc-wed-marks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .52em;
  width: 11px;
  height: 5px;
  border-left: 1.5px solid #2f6f57;
  border-bottom: 1.5px solid #2f6f57;
  transform: rotate(-45deg);
}

/* --------------------------------------------------------- contact ----
   The end of the sheet, not a floating button. Links carry the underline
   they earn on hover; nothing here opens a form we do not send. */
.lc-wed-contact { margin-top: 34px; padding-top: 26px; border-top: 1px solid #e4e0d8; }
.lc-wed-address {
  font-family: 'PT Serif', Georgia, serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #33382f;
  margin: 0 0 14px;
  max-width: 30ch;
}
.lc-wed-contact-links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.lc-wed-contact-link {
  font-family: Montserrat, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #191c17;
  text-decoration: none;
  border-bottom: 1px solid rgba(25,28,23,.22);
  padding-bottom: 2px;
  transition: color .2s var(--wed-ease, ease), border-color .2s var(--wed-ease, ease);
  word-break: break-word;
}
.lc-wed-contact-link:hover,
.lc-wed-contact-link:focus-visible { color: #2f6f57; border-bottom-color: #2f6f57; }
.lc-wed-contact-link:active { color: #234f3e; }
.lc-wed-map-link {
  display: inline-block;
  margin-top: 16px;
  font-family: Montserrat, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #b8863b;
  text-decoration: none;
}
.lc-wed-map-link:hover { color: #8f6729; }
.lc-wed-contact-link:focus-visible,
.lc-wed-map-link:focus-visible,
.lc-wed-peer:focus-visible,
.lc-wed-back:focus-visible { outline: 2px solid #2f6f57; outline-offset: 3px; }

/* =========================================================== THE SPREAD ==
   Five frames, not five equal squares: the first is given two columns and the
   height, which is what a photograph of a room needs and what a thumbnail
   grid refuses to give it. */
.lc-wed-spread { margin-top: 72px; }
.lc-wed-spread-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 168px;
  gap: 12px;
}
.lc-wed-spread-grid .lc-wed-frame:first-child { grid-column: span 2; grid-row: span 2; }
.lc-wed-spread-grid .lc-wed-frame:nth-child(4) { grid-column: span 2; }
.lc-wed-spread--even .lc-wed-spread-grid { grid-auto-rows: 210px; }
.lc-wed-spread--even .lc-wed-spread-grid .lc-wed-frame:first-child { grid-column: span 2; grid-row: span 1; }
.lc-wed-spread--even .lc-wed-spread-grid .lc-wed-frame:nth-child(4) { grid-column: span 1; }

.lc-wed-frame { margin: 0; overflow: hidden; background: #e9e5dd; }
.lc-wed-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s var(--wed-ease, ease);
}
.lc-wed-frame:hover img { transform: scale(1.035); }

@media (max-width: 767px) {
  .lc-wed-spread-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 132px; gap: 8px; }
  .lc-wed-spread-grid .lc-wed-frame:first-child,
  .lc-wed-spread--even .lc-wed-spread-grid .lc-wed-frame:first-child { grid-column: span 2; grid-row: span 2; }
  .lc-wed-spread-grid .lc-wed-frame:nth-child(4) { grid-column: span 2; }
}

/* =========================================================== THE ONWARD ==
   No detail page ends in a wall. Same town for a venue, same trade for a
   vendor, three of them, photographed — and a rule back to the hub. */
.lc-wed-onward { margin-top: 78px; padding-top: 30px; border-top: 1px solid #e4e0d8; }
.lc-wed-onward-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 26px;
}
.lc-wed-onward-head .lc-wed-eyebrow { margin-bottom: 0; }
.lc-wed-back {
  font-family: Montserrat, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #191c17;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid rgba(25,28,23,.25);
  padding-bottom: 3px;
  transition: color .2s var(--wed-ease, ease), border-color .2s var(--wed-ease, ease);
}
.lc-wed-back::before { content: '\2190'; margin-right: 8px; }
.lc-wed-back:hover { color: #2f6f57; border-bottom-color: #2f6f57; }

.lc-wed-peers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.lc-wed-peer { display: block; text-decoration: none; color: inherit; }
.lc-wed-peer-img {
  display: block;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: #e9e5dd;
  transition: filter .35s var(--wed-ease, ease);
}
.lc-wed-peer:hover .lc-wed-peer-img { filter: brightness(1.06); }
.lc-wed-peer-name {
  display: block;
  margin-top: 12px;
  font-family: 'PT Serif', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.3;
  color: #191c17;
}
.lc-wed-peer:hover .lc-wed-peer-name { color: #2f6f57; }
.lc-wed-peer-sub {
  display: block;
  margin-top: 5px;
  font-family: Montserrat, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* Was #8d9187, which measured 3.1:1 on the paper — under the 4.5:1 small-text
     floor, and this line now carries a fact (how far a hotel is) rather than a
     label. Same hue, taken down to 4.7:1. */
  color: #6e7268;
}
@media (max-width: 639px) {
  .lc-wed-peers { grid-template-columns: 1fr 1fr; gap: 14px; }
  .lc-wed-peer:nth-child(3) { display: none; }
  /* space-between squeezed the eyebrow into two lines under the return link,
     and the two ran into each other. They stack instead. */
  .lc-wed-onward-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .lc-wed-onward-head .lc-wed-eyebrow::after { display: none; }
  /* The desktop rhythm left a dead band between the last photograph and the
     rule; a phone has no width to justify that much air. */
  .lc-wed-spread { margin-top: 48px; }
  .lc-wed-onward { margin-top: 44px; padding-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .lc-wed-frame img,
  .lc-wed-peer-img { transition: none; }
  .lc-wed-frame:hover img { transform: none; }
}

/* ============================================================== THE STAY ==
   The question a venue raises that nothing else on the page answers: the couple
   has chosen the place, and the people travelling in need a bed near it.

   The peer card is reused whole — photograph, serif name, one line of small caps
   — so the two closing rails read as one publication, and the differences carry
   the meaning: four across rather than three, a wider frame, and the distance
   where the town would be, because distance is what this choice turns on. */
.lc-wed-stay-h { margin: 0 0 26px; line-height: 1.35; }
.lc-wed-stay-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* A short row is a real outcome — a hotel's photograph can be gone by the time the
   page is drawn, and the card leaves with it. Two or three cards on four tracks read
   as a grid with holes in it; on three they sit at the width of the venue cards below
   and the band reads as a row that happens to have two entries. The count is only
   known after the images resolve, so the grid answers it rather than the markup.

   Held above the phone breakpoint deliberately: :not(:has(...)) carries the
   specificity of its argument, so left unscoped it outranks the two-column rule
   below and would put three cards across a 414px screen. */
@media (min-width: 640px) {
  .lc-wed-stay-grid:not(:has(.lc-wed-stay-card:nth-child(4))) { grid-template-columns: repeat(3, 1fr); }
}
/* The frame keeps the fill and the hover it shares with the peer rail; the photograph
   sits inside it as an <img> so a URL that has expired can take its own card away
   instead of painting that fill as a grey rectangle. */
.lc-wed-stay-img { aspect-ratio: 3 / 2; overflow: hidden; }
.lc-wed-stay-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Hotel names run long enough that one in four wraps, and a distance printed at
   four different heights stops being a row you can compare across. The card takes
   the full height of the row and the distances settle on one line. */
.lc-wed-stay-card { display: flex; flex-direction: column; height: 100%; }
.lc-wed-stay-card .lc-wed-peer-name { flex: 0 0 auto; }
.lc-wed-stay-card .lc-wed-peer-sub { margin-top: auto; padding-top: 5px; }

@media (max-width: 639px) {
  /* The peer rail drops its third card so a phone gets one clean row of two.
     These four are four answers to a single question and none of them is
     surplus, so the grid runs 2x2 instead. */
  .lc-wed-stay-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .lc-wed-stay-grid .lc-wed-peer:nth-child(3) { display: block; }
}