/* Homepage (front-page.php) — High Street heritage skin (Option B):
   hero + collage, category tiles, booking-window stats, proof strip, gold CTA.
   Mobile-first: base rules serve small screens; min-width layers upward
   at 640 → 900 → 1100 → 1440 → 1800 → 2200. */

/* --- hero --- */
.home-hero { overflow: hidden; }
.home-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
  padding-top: clamp(36px, 5vw, 64px);
  padding-bottom: clamp(44px, 5.5vw, 72px);
}
.home-hero__copy { display: flex; flex-direction: column; gap: 26px; }
.home-hero__badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.home-hero__badge {
  display: inline-block;
  padding: 7px 14px;
  border: 2px solid var(--green);
  border-radius: 999px;
  background: var(--green);
  color: var(--cream);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.3;
}
.home-hero__badge--outline { background: transparent; color: var(--green); }
/* h1-prefixed: must outrank base.css `h1.display` or its 5.2vw/88px sizing wins */
h1.home-hero__title { font-size: clamp(34px, 4vw, 62px); line-height: 1.06; color: var(--green); text-wrap: balance; }
.home-hero__em { font-style: normal; color: var(--red); }
.home-hero__lede {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  font-weight: 500;
  max-width: 480px;
}
.home-hero__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.home-hero__phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font-size: 17px;
  font-weight: 800;
  color: var(--green);
  white-space: nowrap;
}
.home-hero__phone:hover { color: var(--red); }

/* --- hero collage (simplified on small screens: no overlap, compact sticker) --- */
.home-collage { position: relative; padding: 10px 0 0 0; max-width: 560px; }
.home-collage__main {
  width: 100%;
  height: clamp(300px, 34vw, 440px);
  object-fit: cover;
  box-shadow: 0 14px 34px rgba(20, 68, 43, 0.16);
}
.home-collage__overlap {
  display: none;
  position: absolute;
  bottom: 0;
  left: -28px;
  width: 240px;
  height: 170px;
  object-fit: cover;
  background: var(--paper);
  box-shadow: 0 14px 34px rgba(20, 68, 43, 0.16);
  transform: rotate(-4deg);
}
.home-collage__sticker {
  position: absolute;
  top: -4px;
  right: -4px;
  max-width: 150px;
  padding: 9px 14px;
}

/* --- category tiles --- */
.home-tiles__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 2px solid var(--green);
  border-radius: 12px;
  overflow: hidden; /* clips the image tiles to the rounded frame */
  background: var(--green);
  gap: 2px; /* green shows through as the internal rules */
}
.home-tile {
  position: relative;
  display: block;
  background: var(--cream);
  min-height: clamp(220px, 24vw, 340px);
  overflow: hidden;
}
.home-tile__img {
  width: 100%;
  height: 100%;
  min-height: clamp(220px, 24vw, 340px);
  object-fit: cover;
  transition: transform 0.25s ease;
}
.home-tile:hover .home-tile__img { transform: scale(1.03); }
.home-tile__plate {
  position: absolute;
  bottom: 0;
  left: 0;
  display: inline-flex;
  flex-wrap: wrap; /* long term names ("Christmas Entertainment") wrap at 320px instead of clipping */
  align-items: center;
  max-width: 100%;
  gap: 8px 12px;
  font-family: var(--body);
  font-weight: 800;
  font-size: clamp(15px, 1.4vw, 18px);
  padding: clamp(10px, 1.2vw, 14px) clamp(14px, 1.6vw, 22px);
  border-top-right-radius: 10px;
}
.home-tile__plate--green { background: var(--green); color: var(--cream); }
.home-tile__plate--red { background: var(--red); color: var(--cream); }
.home-tile__plate--gold { background: var(--gold); color: var(--ink); }
.home-tile__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 5px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-size: 13px;
}
.home-tile__plate--gold .home-tile__count { background: var(--green); color: var(--cream); }

.home-tile--panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  min-height: 0; /* content-sized when stacked; picks up tile height from 640px up */
  background: var(--green);
  color: var(--cream);
  padding: clamp(24px, 3vw, 36px) clamp(20px, 2.6vw, 32px);
}
.home-tile--panel:hover { color: var(--cream); }
.home-tile__panel-title {
  font-size: clamp(20px, 2.1vw, 29px);
  line-height: 1.15;
}
.home-tile__panel-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  font-weight: 700;
}
.home-tile__arrow { color: var(--gold); flex: none; transition: transform 0.2s ease; }
.home-tile--panel:hover .home-tile__arrow { transform: translateX(6px); }

/* --- booking-window stats (deep-green velvet band, gold serif numerals) --- */
.home-stats { background: var(--green); color: var(--cream); margin-top: clamp(44px, 6vw, 80px); }
.home-stats__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3vw, 36px);
  padding-top: clamp(52px, 6vw, 76px);
  padding-bottom: clamp(52px, 6vw, 76px);
}
h2.home-stats__title { text-align: center; font-size: clamp(24px, 3vw, 40px); line-height: 1.15; }
.home-stats__title-gold { color: var(--gold); }
.home-stats__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.home-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
  border: 2px solid rgba(250, 245, 236, 0.3);
  border-radius: 12px;
  padding: clamp(22px, 2.4vw, 34px) clamp(16px, 1.8vw, 28px);
}
.home-stat__num {
  font-family: var(--display);
  font-size: clamp(36px, 3.6vw, 47px);
  line-height: 1;
  color: var(--gold);
}
.home-stat__label {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.home-stats__note { margin: 0; text-align: center; font-size: 16px; font-weight: 700; color: #E7C878; }

/* --- proof strip (holly-red band so it reads against the green stats above) --- */
.home-proof { background: var(--red); }
.home-proof__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 16px;
  padding-top: 34px;
  padding-bottom: 34px;
  color: var(--cream);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}
.home-proof__inner:hover { color: var(--cream); }
.home-proof__inner:hover span { text-decoration: underline; text-underline-offset: 3px; }
.home-proof__star { color: var(--gold); flex: none; }

/* --- gold CTA --- */
.home-cta { background: var(--gold); }
.home-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-top: clamp(52px, 6vw, 80px);
  padding-bottom: clamp(52px, 6vw, 80px);
  text-align: center;
}
h2.home-cta__title { font-size: clamp(26px, 3.2vw, 48px); line-height: 1.1; max-width: 900px; color: var(--green); text-wrap: balance; }
.home-cta__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.home-cta__phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink); /* on the gold band: green misses AA (4.34:1), ink passes */
  white-space: nowrap;
}
.home-cta__phone:hover { color: var(--red-dark); }

/* --- ≥640: collage gains the overlap + roomier sticker; tiles go 2-up --- */
@media (min-width: 640px) {
  .home-collage { padding: 14px 0 34px 0; }
  .home-collage__overlap { display: block; }
  .home-collage__sticker {
    top: -8px;
    right: -12px;
    max-width: 180px;
    padding: 10px 16px;
  }
  .home-tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-tile--panel { min-height: clamp(220px, 24vw, 340px); }
}

/* --- ≥900: stats sit three across --- */
@media (min-width: 900px) {
  .home-stats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- ≥1100: hero becomes copy + collage side by side.
   Client requirement (2026-08-21): the WHOLE first composition — hero AND the
   category tile strip — lands inside the first viewport at 100% zoom. Type never
   shrinks; the .home-fold wrapper owns (viewport − chrome ~158px) and every
   image height follows viewport HEIGHT, so whitespace and image crop flex
   instead of the content. Strict fit ≥1500px wide (tiles one row); 1100–1500
   keeps 2×2 tiles and fits where the screen allows. --- */
@media (min-width: 1100px) {
  .home-fold { display: flex; flex-direction: column; min-height: calc(100svh - 158px); }
  .home-fold .home-hero { flex: 1 1 auto; display: flex; align-items: center; }
  .home-fold .home-hero > .wrap { width: 100%; }
  .home-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    padding-top: clamp(6px, 1.5svh, 28px);
    padding-bottom: clamp(8px, 2svh, 32px);
  }
  .home-hero__copy { gap: clamp(16px, 2.4svh, 26px); }
  .home-collage { max-width: none; padding-bottom: clamp(12px, 2.2svh, 30px); }
  .home-collage__main { height: min(42svh, 560px); }
  .home-tiles { padding-bottom: clamp(14px, 2.5svh, 40px); }
  .home-tile,
  .home-tile__img { min-height: min(21svh, 300px); }
  /* Serif sets wider than the old display face: keep both h1 segments to one
     line each in the narrower shared-row copy column. */
  h1.home-hero__title { font-size: clamp(34px, 3.5vw, 50px); }
}

/* --- ≥1500: tiles run four across in ONE row — the strict-fold layout --- */
@media (min-width: 1500px) {
  .home-tiles__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-tile--panel { min-height: 0; } /* equal-height row; grid stretches it */
  .home-tile,
  .home-tile__img { min-height: min(22svh, 340px); }
  .home-collage__main { height: min(42svh, 560px); }
}

/* --- ≥1440: collage column widens; image stays viewport-height-driven --- */
@media (min-width: 1440px) {
  .home-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 640px); }
  h1.home-hero__title { font-size: clamp(50px, 4vw, 62px); } /* 4vw@1440 = 57.6 — "You take the credit." fits the ~636px column */
}

/* --- ≥1800: superwide — tiles run four across in a single row --- */
@media (min-width: 1800px) {
  .home-tiles__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-tile--panel { min-height: 0; } /* equal-height row; grid stretches it to match the image tiles */
}

/* --- ≥2200: display type keeps growing (values continuous at the boundary) --- */
@media (min-width: 2200px) {
  h1.home-hero__title { font-size: clamp(62px, 2.9vw, 72px); } /* 2.9vw@2200 ≈ 64 — column is capped by the 1720px wrap */
  .home-hero__lede { font-size: 20px; max-width: 560px; }
  h2.home-cta__title { font-size: clamp(48px, 2.4vw, 56px); max-width: 1100px; } /* 2.4vw@2200 ≈ 53 */
  .home-stat__num { font-size: clamp(47px, 2.2vw, 56px); }     /* 2.2vw@2200 ≈ 48 */
}

/* ---------- what we do (SEO copy block) ---------- */
.home-about { background: var(--paper); border-top: 2px solid var(--green); border-bottom: 2px solid var(--green); }
.home-about__inner { display: flex; flex-direction: column; gap: 18px; }
.home-about__title { max-width: 22ch; }
.home-about__cols { display: grid; gap: clamp(18px, 2.4vw, 40px); grid-template-columns: 1fr; }
@media (min-width: 900px) { .home-about__cols { grid-template-columns: 1fr 1fr; } }
.home-about__cols p { margin: 0; font-size: 17px; line-height: 1.7; max-width: 62ch; }
.home-about__cols a { font-weight: 700; text-decoration: underline; text-decoration-color: rgba(179, 40, 45, 0.4); text-underline-offset: 2px; }
.home-about__cols a:hover { text-decoration-color: var(--red); }

/* ---------- FAQs (native details/summary accordion) ---------- */
.home-faq__title { max-width: 20ch; margin-bottom: clamp(20px, 2.6vw, 34px); }
.home-faq__list { display: flex; flex-direction: column; gap: 12px; max-width: 880px; }
.home-faq__item { background: var(--paper); border: 2px solid var(--green); border-radius: 12px; overflow: hidden; }
.home-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  min-height: 44px;
  font-family: var(--display);
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--green);
  cursor: pointer;
  list-style: none;
}
.home-faq__q::-webkit-details-marker { display: none; }
.home-faq__q:hover { color: var(--red); }
.home-faq__chev { flex-shrink: 0; transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1); }
.home-faq__item[open] .home-faq__chev { transform: rotate(180deg); }
.home-faq__a { padding: 0 20px 18px 20px; }
.home-faq__a p { margin: 0; font-size: 15.5px; line-height: 1.65; max-width: 66ch; }
.home-faq__a a { font-weight: 700; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .home-faq__chev { transition: none; }
}

/* superwide balance fixes (client 2026-08-21): breathing room under the tiles;
   copy + FAQ blocks width-capped and centred instead of left-pinned in the 1720 wrap */
.home-tiles { padding-bottom: clamp(48px, 6vw, 88px); }
.home-about__inner { max-width: 1100px; margin: 0 auto; }
.home-faq__inner { max-width: 940px; margin: 0 auto; }