/* ================================================= 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;
  color: #8d9187;
}
@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; }
}