/* =============================================================== /weddings/ ==
   The three sections BELOW the approved hero: the trades mosaic, the map
   spread, and the towns index.

   The brief these replace was a grid of bordered grey text boxes — the exact
   programmer-art failure the design rules name first. The fix is not better
   copy, it is photographs: every tile here is a real picture of a real listed
   business or a real place in the market. Nothing is stock, nothing is
   generated, and no tile exists that we could not put a name to.

   Type follows the theme rather than importing a new face: 'PT Serif' is the
   theme's display serif and Montserrat is what its buttons and meta already
   use, so the uppercase labels here are the same voice as the hero's button.

   Loaded only on /weddings/ by lc-wedding-hub.php.
   ========================================================================== */

:root {
  --wed-ink:    #191c17;
  --wed-green:  #2f6f57;
  --wed-gold:   #b8863b;
  --wed-paper:  #faf8f4;
  --wed-line:   #e4e0d8;
  --wed-well:   #101310;          /* the colour a photo fades into, never #000 */
  --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 --
   One gold rule + one small uppercase word, above each section title. It is
   the only ornament on the page and it repeats three times, which is what
   makes the three sections read as one magazine rather than three plugins. */
.lc-wed-eyebrow {
  font-family: var(--wed-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--wed-gold);
}
.lc-wed-eyebrow::after {
  content: '';
  display: block;
  width: 34px;
  height: 1px;
  margin-top: 12px;
  background: var(--wed-gold);
}
/* The measure is set here rather than with YOOtheme's max-width control, which
   emits `uk-width-xlarge` — a FIXED 600px width, not a maximum. A ch-based
   max-width is what a line length actually wants, and it costs nothing on a
   phone. */
.lc-wed-lede { color: #4a4f47; }
.lc-wed-lede p { max-width: 62ch; }

/* ================================================================ 1. TRADES ==
   An 11-cell mosaic, deliberately not 11 equal cells. Venues carries a
   double-square because the venue IS the decision every other booking hangs
   off; the other ten are peers. The twelfth cell is a colour field, not a
   photo — it gives the eye somewhere to rest and it is where the "all of
   them" link lives. */
.lc-wed-trades {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.lc-wed-tile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--wed-well);
  text-decoration: none;
  isolation: isolate;
}
.lc-wed-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* A hair of desaturation pulls 11 photographs from 11 different cameras and
     11 different white balances into something that looks curated. */
  filter: saturate(.94);
  transition: transform 1.1s var(--wed-ease), filter .55s ease;
}
/* Bottom-up, vertical, desaturated. A 45-degree saturated gradient is the
   naive tell; a legibility scrim should go unnoticed. */
.lc-wed-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(16,19,16,.88) 0%, rgba(16,19,16,.46) 32%,
    rgba(16,19,16,.08) 64%, rgba(16,19,16,0) 100%);
}

.lc-wed-tile__label {
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
  bottom: 20px;
  color: #fff;
  font-family: var(--wed-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.lc-wed-tile__label::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -9px;
  height: 1px;
  width: 20px;
  background: var(--wed-gold);
  transition: width .55s var(--wed-ease);
}

/* the lead cell — Venues */
.lc-wed-tile--lead {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}
.lc-wed-tile--lead .lc-wed-tile__label {
  left: 32px;
  right: 32px;
  bottom: 34px;
  font-family: var(--wed-serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
  text-transform: none;
}
.lc-wed-tile__kicker {
  display: block;
  margin-bottom: 10px;
  font-family: var(--wed-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
}
.lc-wed-tile--lead .lc-wed-tile__label::before { bottom: -14px; width: 30px; }

/* the colour field — "every wedding pro" */
.lc-wed-tile--all {
  grid-column: span 2;
  aspect-ratio: auto;
  background: var(--wed-green);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 30px;
}
.lc-wed-tile--all::after { display: none; }
.lc-wed-tile--all .lc-wed-tile__kicker { color: rgba(255,255,255,.72); margin-bottom: 8px; }
.lc-wed-all__t {
  font-family: var(--wed-serif);
  font-size: 25px;
  line-height: 1.15;
  color: #fff;
}
.lc-wed-all__t span {
  display: inline-block;
  transition: transform .45s var(--wed-ease);
}
/* The panel is the one cell with no photograph in it, so it was also the one
   cell with nothing to look at. A real number does that job better than more
   green does — and 274 is a number worth printing. */
.lc-wed-all__n {
  margin-top: 12px;
  font-family: var(--wed-sans);
  font-size: 11px;
  letter-spacing: .06em;
  line-height: 1.6;
  color: rgba(255,255,255,.7);
}

/* hover — one slow push in, one rule that grows. Nothing bounces. */
.lc-wed-tile:hover img,
.lc-wed-tile:focus-visible img { transform: scale(1.055); filter: saturate(1); }
.lc-wed-tile:hover .lc-wed-tile__label::before,
.lc-wed-tile:focus-visible .lc-wed-tile__label::before { width: 56px; }
.lc-wed-tile--lead:hover .lc-wed-tile__label::before { width: 74px; }
.lc-wed-tile--all:hover .lc-wed-all__t span { transform: translateX(9px); }
.lc-wed-tile:focus-visible { outline: 2px solid var(--wed-gold); outline-offset: 3px; }

/* =================================================================== 2. MAP ==
   The chapter break. Full-bleed, and a spread rather than another centred
   band: photograph on the left, a field of the house green on the right. It
   is the only place on the page where colour, not a picture, does the work —
   which is what stops it reading as a second hero. */
.lc-wed-mapsection { padding-top: 0 !important; padding-bottom: 0 !important; }
.lc-wed-mapsection .uk-container { padding-left: 0; padding-right: 0; max-width: none; }

.lc-wed-split {
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: stretch;
  background: var(--wed-green);
}
.lc-wed-split__fig {
  position: relative;
  overflow: hidden;
  min-height: 480px;
  background: var(--wed-well);
}
.lc-wed-split__fig img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lc-wed-split__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 6% 64px 60px;
  color: #fff;
}
.lc-wed-split__panel .lc-wed-eyebrow { color: rgba(255,255,255,.66); }
.lc-wed-split__panel .lc-wed-eyebrow::after { background: var(--wed-gold); }
.lc-wed-split__title {
  margin: 22px 0 0;
  font-family: var(--wed-serif);
  font-size: 42px;
  line-height: 1.12;
  font-weight: 400;
  color: #fff;
}
.lc-wed-split__text {
  margin: 18px 0 0;
  max-width: 30em;
  color: rgba(255,255,255,.84);
  line-height: 1.65;
}
.lc-wed-btn {
  align-self: flex-start;
  margin-top: 32px;
  padding: 14px 26px;
  background: #fff;
  color: var(--wed-ink);
  font-family: var(--wed-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .3s ease, color .3s ease, transform .3s var(--wed-ease);
}
.lc-wed-btn:hover { background: var(--wed-gold); color: #fff; transform: translateY(-2px); }
.lc-wed-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ================================================================= 3. TOWNS ==
   The old version of this was three rows of link soup. Same links, but each
   town gets its own photograph, so the section answers "where" before it
   answers "what". Links resolve to the real geo pages that exist; the
   "everyone in <town>" line catches the rest. */
.lc-wed-townsection { background: var(--wed-paper); }

.lc-wed-towns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 38px 28px;
}
.lc-wed-town { display: flex; flex-direction: column; }
.lc-wed-town__fig {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background: var(--wed-well);
}
.lc-wed-town__fig img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.94);
  transition: transform 1.1s var(--wed-ease);
}
.lc-wed-town__fig::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(16,19,16,.8) 0%, rgba(16,19,16,.3) 38%, rgba(16,19,16,0) 70%);
}
.lc-wed-town__name {
  position: absolute;
  z-index: 2;
  left: 22px;
  bottom: 16px;
  color: #fff;
  font-family: var(--wed-serif);
  font-size: 27px;
  line-height: 1.1;
}
.lc-wed-town__fig:hover img { transform: scale(1.05); }
.lc-wed-town__fig:focus-visible { outline: 2px solid var(--wed-gold); outline-offset: 3px; }

/* A fixed min-height so six cards of unequal link counts still bottom out on
   the same line — ragged is ragged, not design. */
.lc-wed-town__links {
  padding-top: 16px;
  min-height: 74px;
  font-family: var(--wed-sans);
  font-size: 12px;
  line-height: 2;
  color: #6d7268;
}
.lc-wed-town__links a {
  color: #3d4139;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.lc-wed-town__links a:hover { color: var(--wed-green); border-bottom-color: var(--wed-green); }
.lc-wed-town__links .sep { color: var(--wed-gold); padding: 0 .35em; }
.lc-wed-town__all {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wed-green) !important;
  border-bottom: 1px solid transparent !important;
}
.lc-wed-town__all:hover { border-bottom-color: var(--wed-green) !important; }

/* ============================================================ breakpoints ==*/
@media (max-width: 1199px) {
  .lc-wed-tile--lead .lc-wed-tile__label { font-size: 28px; }
  .lc-wed-split__title { font-size: 34px; }
  .lc-wed-split__panel { padding: 52px 42px; }
}

@media (max-width: 959px) {
  .lc-wed-trades { grid-template-columns: repeat(2, 1fr); }
  .lc-wed-tile--lead { grid-row: span 1; aspect-ratio: 16 / 10; }
  .lc-wed-towns { grid-template-columns: repeat(2, 1fr); }
  .lc-wed-split { grid-template-columns: 1fr; }
  /* min-height MUST go to 0 here. Left at 300px it combines with aspect-ratio
     to derive the WIDTH from the height (300 x 16/9 = 533px), so the figure
     silently grew wider than the phone and the photo lost its right third. */
  .lc-wed-split__fig { min-height: 0; aspect-ratio: 16 / 9; }
  .lc-wed-split__panel { padding: 44px 34px 52px; }
}

@media (max-width: 639px) {
  .lc-wed-trades { gap: 8px; }
  .lc-wed-tile__label { left: 14px; right: 14px; bottom: 17px; font-size: 10px; letter-spacing: .14em; }
  .lc-wed-tile--lead .lc-wed-tile__label { left: 18px; right: 18px; bottom: 24px; font-size: 26px; }
  .lc-wed-tile--all { padding: 20px 18px; }
  .lc-wed-all__t { font-size: 20px; }
  .lc-wed-towns { grid-template-columns: 1fr; gap: 30px; }
  .lc-wed-town__fig { aspect-ratio: 16 / 10; }
  .lc-wed-town__links { min-height: 0; }
  .lc-wed-split__title { font-size: 29px; }
}

/* ======================================================= reduced motion ==
   Parallax and slow scale-ins cause real vestibular nausea. Everything above
   is decoration on top of a layout that is already correct, so the honest
   branch is to remove the movement and keep every state reachable. */
@media (prefers-reduced-motion: reduce) {
  .lc-wed-tile img,
  .lc-wed-town__fig img,
  .lc-wed-tile__label::before,
  .lc-wed-all__t span,
  .lc-wed-btn { transition: none !important; }
  .lc-wed-tile:hover img,
  .lc-wed-town__fig:hover img { transform: none; }
  .lc-wed-btn:hover { transform: none; }
}