/* ============================================================
   Lady Lee's — Extended site styles
   Adds page headers + Home sections (quick info, services,
   featured, reviews, events, location, FAQ) + Billiards/Events
   Builds on site.css + colors_and_type.css
   ============================================================ */

/* image-slot defaults so it fills its framed parent */
image-slot { display: block; width: 100%; height: 100%; }
.hero__photo image-slot,
.split__photo image-slot,
.gtile image-slot { position: absolute; inset: 0; }
/* lighten the empty slot interior so the dark "drop a photo" hint stays legible
   against our photo frames (image covers this once filled) */
.hero__photo, .gtile { background: var(--pd-teal-soft) !important; }
image-slot::part(frame) { background: var(--pd-teal-soft); }

/* keep header nav from crowding with 7 links */
.hdr__nav { gap: clamp(14px, 1.9vw, 28px); }
.hdr__link { font-size: .85rem; letter-spacing: .05em; white-space: nowrap; }
@media (max-width: 1180px){ .hdr__link { font-size: .78rem; } }

/* teal-filled button — reference "Reserve a Booth" */
.btn--teal { background: var(--pd-teal); color: #fff; box-shadow: var(--pd-shadow-sm); }
.btn--teal:hover { background: #3aa49a; }

/* wider hero lede to match the reference layout */
.hero--bleed .hero__lede { max-width: 46ch; margin-left: 232px; }
.hero--bleed .hero__cta { margin-left: 232px; flex-wrap: nowrap; }
.hero--bleed .hero__cta .btn { white-space: nowrap; }

/* About section — photo bleeds to the right viewport edge, enlarged, 2cm below the strip above */
.split--feature { padding-top: 76px; overflow: visible; }
.split--feature .split__inner { grid-template-columns: 0.85fr 1.55fr; align-items: center; }
.split--feature .split__photo {
  min-height: 680px;
  margin-right: calc(-1 * clamp(20px, 4vw, 48px) - max(0px, (100vw - 1760px) / 2));
}
@media (max-width: 900px){
  .split--feature .split__inner { grid-template-columns: 1fr; }
  .split--feature .split__photo { min-height: 320px; margin-right: 0; }
}
/* tilt the hero headline along the 7:30 → 2:30 axis (right side lifts ~15°) */
.hero--bleed .hero__title { transform: rotate(-15deg); transform-origin: center; margin: -24px 0 3.4rem; font-size: clamp(3rem, 6.2vw, 5.6rem); letter-spacing: 0.02em; white-space: nowrap; text-shadow: 0 1px 0 #fff8ec, 3px 5px 0 rgba(23, 56, 59, .2), 0 12px 24px rgba(44, 44, 44, .2); }
.hero--bleed .hero__title em { color: var(--pd-red); font-style: normal; text-shadow: 0 1px 0 #fff, 3px 5px 0 rgba(192, 57, 43, .26), 0 12px 22px rgba(192, 57, 43, .2); }

/* Trim the big left/right margins — widen the main content containers toward full-bleed */
.hero--bleed .hero__inner,
.fstrip__inner, .split__inner, .services__inner, .featured__inner,
.reviews__inner, .loc__inner, .ftr__inner, .ftr__copy, .contactpg__inner,
.pgsplit__inner, .gal__inner { max-width: 1760px; }
.specials__inner, .rates__inner, .stats__inner, .menu__inner { max-width: 1500px; }

/* ---------- Oversized logo that overhangs the checker bar & shrinks on scroll ---------- */
.hdr { overflow: visible; }
.hdr__bar { position: relative; z-index: 2; align-items: flex-start; max-width: 1760px; }
.hdr__nav { margin-top: 14px; margin-right: calc(28px - clamp(20px, 4vw, 48px) + min(0px, (1760px - 100vw) / 2)); }
.hdr__burger { margin-top: 10px; }
.hdr__logo { position: relative; z-index: 4; margin-top: -22px; margin-left: -130px; transform: rotate(-2deg); transform-origin: center; }
.hdr--scrolled .hdr__logo { margin-top: 0; margin-left: 0; transform: rotate(0deg); }
.hdr__logo img {
  height: 300px; width: auto; display: block;
  margin-bottom: -238px;
  transition: height .25s ease, margin-bottom .25s ease;
  filter: drop-shadow(0 8px 14px rgba(44,44,44,.18));
}
.hdr--scrolled .hdr__bar { align-items: center; }
.hdr--scrolled .hdr__nav { margin-top: 0; }
.hdr--scrolled .hdr__burger { margin-top: 0; }
.hdr--scrolled .hdr__logo img { height: 104px; margin-bottom: -26px; }
.hdr__checker { position: relative; z-index: 1; }

/* ---------- Mobile header — static small logo + burger only ---------- */
@media (max-width: 900px) {
  .hdr { overflow: hidden; }
  .hdr__bar { align-items: center; }
  .hdr__logo { margin-top: 0; margin-left: 0; transform: none; }
  .hdr--scrolled .hdr__logo { margin-top: 0; margin-left: 0; transform: none; }
  .hdr__logo img { height: 56px; margin-bottom: 0; transition: none; filter: drop-shadow(0 2px 4px rgba(44,44,44,.14)); }
  .hdr--scrolled .hdr__logo img { height: 56px; margin-bottom: 0; }
  .hdr__nav { display: none !important; }
  .hdr__burger { display: flex !important; margin-top: 0; }
}

/* ---------- Full-bleed hero photo (bleeds to right edge, tucks behind feature strip) ---------- */
.hero--bleed { position: relative; background: var(--pd-cream); overflow: visible; }
.hero--bleed::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='hg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23hg)'/%3E%3C/svg%3E");
}
.hero--bleed .hero__inner {
  max-width: 1760px; margin: 0 auto;
  padding: clamp(200px, 18vw, 228px) clamp(20px, 4vw, 48px) clamp(2.25rem, 3.5vw, 3.25rem);
}
.hero--bleed .hero__copy { max-width: 640px; position: relative; z-index: var(--z-hero-grid); margin-left: max(-96px, calc(120px - max(0px, (100vw - 1760px) / 2) - clamp(20px, 4vw, 48px))); }
.hero--bleed .hero__photo {
  position: absolute;
  top: clamp(12px, 1.8vw, 22px);   /* sits just below the checker bar */
  right: 0;
  bottom: -52px;                   /* bottom tucks behind the teal feature strip */
  width: clamp(420px, 50vw, 1040px);
  min-height: 0;
  border: 8px solid var(--pd-teal); border-right: none;
  border-radius: 48% 0 0 48%;
  background: var(--pd-teal-soft);
  box-shadow: var(--pd-shadow);
  overflow: hidden;
  z-index: var(--z-hero-photo);
}
.hero--bleed .hero__photo image-slot { position: absolute; inset: 0; }
/* photo extends downward on its own, so the strip no longer pulls up over the copy/buttons */
.hero--bleed + .fstrip { margin-top: 0; }
@media (max-width: 900px){
  .hero--bleed { overflow: hidden; }

  /* push content well below the fixed header */
  .hero--bleed .hero__inner { padding-top: 160px; padding-bottom: 24px; }

  /* reset all desktop copy offsets */
  .hero--bleed .hero__copy { margin-left: 0; }
  .hero--bleed .hero__lede { margin-left: 0; max-width: 100%; }
  .hero--bleed .hero__cta { margin-left: 0; flex-wrap: wrap; }
  .hero--bleed .hero__cta .btn { white-space: normal; flex: 1 1 auto; }

  /* title: keep font, rotation, size — main text cream, em stays red */
  .hero--bleed .hero__title { color: var(--pd-cream); text-shadow: none; }
  .hero--bleed .hero__title em { color: var(--pd-red); text-shadow: none; }

  /* paragraph: white with dark shadow so it reads over the burger photo */
  .hero--bleed .hero__lede { color: #fff; font-weight: 800; text-shadow: 0 2px 8px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.9); }

  .hero--bleed .hero__photo {
    position: static; width: auto; top: auto; right: auto; bottom: auto;
    height: 260px; margin: 24px 0 0 clamp(20px, 6vw, 48px);
    border-radius: 40% 0 0 40%;
  }
}

/* mobile nav drawer — mobile only, desktop unchanged */
.hdr__drawer { display: none; }
@media (max-width: 900px) {
  .hdr__drawer {
    display: flex; flex-direction: column; gap: 0;
    background: var(--pd-teal-dark);
    border-top: 3px solid var(--pd-teal);
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
    overflow: hidden;
    max-height: 0;
    transition: max-height .32s cubic-bezier(.4,0,.2,1);
  }
  .hdr__drawer:not([hidden]) { max-height: 500px; }
  /* override browser hidden so CSS max-height drives the animation */
  .hdr__drawer[hidden] { display: flex !important; }

  .hdr__drawerlink {
    text-align: left; background: none; border: none;
    padding: 16px clamp(20px,4vw,48px);
    font-family: var(--font-label); font-weight: 800; text-transform: uppercase;
    letter-spacing: .06em; font-size: .88rem; color: var(--pd-cream);
    border-bottom: 1px solid rgba(255,243,222,.12);
    transition: background .14s ease, color .14s ease;
  }
  .hdr__drawerlink:hover,
  .hdr__drawerlink:active { background: rgba(255,255,255,.08); }
  .hdr__drawerlink.is-active { color: var(--pd-red); }
  .hdr__drawer .btn {
    margin: 14px clamp(20px,4vw,48px) 18px;
    width: calc(100% - 2 * clamp(20px,4vw,48px));
  }

  /* burger lines → X when open */
  .hdr__burger span { transition: transform .22s ease, opacity .22s ease; transform-origin: center; }
  .hdr__burger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .hdr__burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .hdr__burger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
}

/* ---------- Decorative: starburst field & checker divider ---------- */
.checkrule {
  height: 14px;
  background-image:
    linear-gradient(45deg, var(--pd-teal) 25%, transparent 25%, transparent 75%, var(--pd-teal) 75%),
    linear-gradient(45deg, var(--pd-teal) 25%, transparent 25%, transparent 75%, var(--pd-teal) 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px;
  background-color: var(--pd-cream); opacity: .5;
}
.checkrule--solid { opacity: 1; }

/* ============================================================
   PAGE HEADER (sub-pages)
   ============================================================ */
.pagehead {
  position: relative; background: var(--pd-teal-dark); overflow: hidden;
  padding: clamp(3rem, 6vw, 5.5rem) clamp(20px, 4vw, 48px) clamp(2.6rem, 5vw, 4rem);
  text-align: center;
}
.pagehead__inner { max-width: 900px; margin: 0 auto; position: relative; z-index: 2; }
.pagehead__eyebrow { font-family: var(--font-script); color: var(--pd-pink); font-size: clamp(1.4rem, 2.6vw, 2.2rem); }
.pagehead__title { font-family: var(--font-display); font-weight: 800; color: var(--pd-cream); font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1; margin: 2px 0 0; letter-spacing: -.015em; }
.pagehead__title em { font-style: italic; color: var(--pd-red); }
.pagehead__sub { font-family: var(--font-body); font-weight: 600; color: var(--pd-cream-82); margin: 18px auto 0; max-width: 54ch; line-height: 1.6; font-size: clamp(.95rem, 1.3vw, 1.08rem); }
.pagehead__star { position: absolute; z-index: 1; opacity: .9; }
.pagehead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background-image:
    linear-gradient(45deg, var(--pd-teal) 25%, transparent 25%, transparent 75%, var(--pd-teal) 75%),
    linear-gradient(45deg, var(--pd-teal) 25%, transparent 25%, transparent 75%, var(--pd-teal) 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px; opacity: .9;
}

/* ============================================================
   QUICK INFO BAR (home, under feature strip)
   ============================================================ */
.qinfo { background: var(--pd-cream); padding: clamp(2rem,4vw,3rem) clamp(20px,4vw,48px); }
.qinfo__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.qcard {
  display: flex; align-items: flex-start; gap: 18px;
  background: #fff; border: 1px solid var(--pd-cream-deep); border-radius: var(--r-md);
  padding: 24px 26px; box-shadow: var(--pd-shadow-sm);
}
.qcard__ic { width: 52px; height: 52px; flex-shrink: 0; border-radius: var(--r-pill); background: var(--pd-teal); color: var(--pd-cream); display: flex; align-items: center; justify-content: center; }
.qcard__ic svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qcard__k { font-family: var(--font-label); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; color: var(--pd-red); margin-bottom: 6px; }
.qcard__v { font-family: var(--font-display); font-weight: 700; color: var(--pd-teal-dark); font-size: 1.12rem; line-height: 1.25; }
.qcard__sub { font-family: var(--font-body); font-size: .82rem; color: var(--pd-ink-60); margin-top: 4px; }

/* ============================================================
   SERVICES / OFFERINGS  (teal band, 4 cards w/ token icons)
   ============================================================ */
.services { background: var(--pd-teal); padding: var(--sp-section) clamp(20px,4vw,48px); position: relative; }
.services__inner { max-width: 1180px; margin: 0 auto; }
.services .shead__eyebrow { color: var(--pd-cream); }
.services .shead__title { color: #fff; }
.services .shead__sub { color: var(--pd-cream-82); }
.services__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.scard { background: var(--pd-cream); border-radius: var(--r-md); padding: 30px 24px; box-shadow: var(--pd-shadow-card); text-align: center; transition: transform .15s ease, box-shadow .15s ease; }
.scard:hover { transform: translateY(-5px); box-shadow: var(--pd-shadow); }
.scard__ic { width: 72px; height: 72px; border-radius: var(--r-pill); background: var(--pd-cream); border: 2px solid var(--pd-teal); margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-family: var(--font-label); font-weight: 900; color: var(--pd-teal-dark); font-size: .8rem; }
.scard__h { font-family: var(--font-display); font-weight: 800; font-style: italic; color: var(--pd-teal-dark); font-size: 1.35rem; margin-bottom: 10px; }
.scard__p { font-family: var(--font-body); font-size: .86rem; color: var(--pd-ink); line-height: 1.55; }

/* ============================================================
   FEATURED ITEMS  (food cards w/ image slot)
   ============================================================ */
.featured { background: var(--pd-cream); padding: var(--sp-section) clamp(20px,4vw,48px); }
.featured__inner { max-width: 1180px; margin: 0 auto; }
.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.fcard { background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--pd-shadow-card); display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.fcard:hover { transform: translateY(-6px); box-shadow: var(--pd-shadow); }
.fcard__photo { position: relative; aspect-ratio: 4/3; background: var(--pd-teal-soft); overflow: hidden; }
.fcard__photo image-slot { position: absolute; inset: 0; }
.fcard__tag { position: absolute; top: 14px; left: 14px; z-index: 3; font-family: var(--font-label); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: .6rem; color: #fff; background: var(--pd-red); padding: 6px 11px; border-radius: var(--r-sm); box-shadow: var(--pd-shadow-sm); }
.fcard__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.fcard__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fcard__name { flex: 1; min-width: 0; }
.fcard__price { position: relative; top: 4px; flex-shrink: 0; }
.fcard__name { font-family: var(--font-display); font-weight: 800; color: var(--pd-teal-dark); font-size: 1.4rem; line-height: 1.1; }
.fcard__price { font-family: var(--font-label); font-weight: 900; color: var(--pd-red); font-size: 1.2rem; white-space: nowrap; }
.fcard__desc { font-family: var(--font-body); font-size: .9rem; color: var(--pd-ink-60); line-height: 1.55; margin: 10px 0 0; }

/* ============================================================
   REVIEWS  (card grid w/ stars, on cream)
   ============================================================ */
.reviews { background: var(--pd-cream); padding: var(--sp-section) clamp(20px,4vw,48px); position: relative; }
.reviews__inner { max-width: 1180px; margin: 0 auto; }
.rgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rcard { background: #fff; border: 1px solid var(--pd-cream-deep); border-radius: var(--r-lg); padding: 28px 26px; box-shadow: var(--pd-shadow-sm); display: flex; flex-direction: column; }
.rcard__stars { color: var(--pd-gold); font-size: 1.05rem; letter-spacing: 2px; margin-bottom: 14px; }
.rcard__quote { font-family: var(--font-display); font-weight: 500; font-style: italic; color: var(--pd-teal-dark); font-size: 1.08rem; line-height: 1.5; flex: 1; }
.rcard__who { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.rcard__av { width: 44px; height: 44px; border-radius: var(--r-pill); background: var(--pd-pink); color: var(--pd-teal-dark); display: flex; align-items: center; justify-content: center; font-family: var(--font-label); font-weight: 900; font-size: .85rem; flex-shrink: 0; }
.rcard__who > div { min-width: 0; }
.rcard__name { font-family: var(--font-label); font-weight: 900; text-transform: uppercase; letter-spacing: .04em; font-size: .74rem; color: var(--pd-teal-dark); white-space: nowrap; }
.rcard__meta { font-family: var(--font-body); font-size: .76rem; color: var(--pd-ink-60); margin-top: 2px; }

/* ============================================================
   SPECIALS / EVENTS  (teal-dark band, event rows)
   ============================================================ */
.specials { background: var(--pd-teal-dark); padding: var(--sp-section) clamp(20px,4vw,48px); }
.specials__inner { max-width: 1080px; margin: 0 auto; }
.specials .shead__eyebrow { color: var(--pd-pink); }
.specials .shead__title { color: var(--pd-cream); }
.specials .shead__sub { color: var(--pd-cream-82); }
.elist { display: flex; flex-direction: column; gap: 16px; }
.erow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px; background: var(--pd-cream); border-radius: var(--r-md); padding: 22px 28px; box-shadow: var(--pd-shadow-card); }
.edate { text-align: center; min-width: 64px; }
.edate__d { font-family: var(--font-display); font-weight: 800; color: var(--pd-red); font-size: 2rem; line-height: .95; }
.edate__m { font-family: var(--font-label); font-weight: 900; text-transform: uppercase; letter-spacing: .1em; font-size: .66rem; color: var(--pd-teal-dark); }
.einfo__day { font-family: var(--font-label); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: .66rem; color: var(--pd-teal); margin-bottom: 4px; }
.einfo__t { font-family: var(--font-display); font-weight: 800; color: var(--pd-teal-dark); font-size: 1.35rem; line-height: 1.1; }
.einfo__d { font-family: var(--font-body); font-size: .86rem; color: var(--pd-ink-60); margin-top: 4px; line-height: 1.5; }
.etag { font-family: var(--font-label); font-weight: 900; text-transform: uppercase; letter-spacing: .05em; font-size: .66rem; color: var(--pd-teal-dark); background: var(--pd-teal-soft); padding: 8px 14px; border-radius: var(--r-pill); white-space: nowrap; }
.etag--free { background: var(--pd-red); color: #fff; }

/* ============================================================
   LOCATION  (map slot + info, on cream)
   ============================================================ */
.loc { background: var(--pd-cream); padding: var(--sp-section) clamp(20px,4vw,48px); }
.loc__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px,4vw,48px); align-items: stretch; }
.loc__map { position: relative; min-height: 380px; border-radius: var(--r-lg); overflow: hidden; border: 6px solid var(--pd-teal); box-shadow: var(--pd-shadow); background:
  repeating-linear-gradient(0deg, #e9eef0 0 1px, transparent 1px 38px),
  repeating-linear-gradient(90deg, #e9eef0 0 1px, transparent 1px 38px), #f3f6f6; }
.loc__pin { position: absolute; top: 46%; left: 52%; transform: translate(-50%,-100%); display: flex; flex-direction: column; align-items: center; }
.loc__pin svg { width: 44px; height: 44px; filter: drop-shadow(0 6px 8px rgba(44,44,44,.25)); }
.loc__pinlabel { margin-top: 6px; font-family: var(--font-label); font-weight: 900; text-transform: uppercase; letter-spacing: .05em; font-size: .62rem; color: #fff; background: var(--pd-teal-dark); padding: 5px 11px; border-radius: var(--r-pill); }
.loc__road { position: absolute; inset: 0; }
.loc__panel { background: #fff; border: 1px solid var(--pd-cream-deep); border-radius: var(--r-lg); padding: clamp(26px,3vw,38px); box-shadow: var(--pd-shadow-card); display: flex; flex-direction: column; }
.loc__panel h3 { font-family: var(--font-display); font-weight: 800; color: var(--pd-teal-dark); font-size: 1.7rem; margin: 0 0 6px; }
.loc__panel .pd-script { font-family: var(--font-script); color: var(--pd-red); font-size: 1.3rem; }
.locrow { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px dashed var(--pd-cream-deep); }
.locrow:last-of-type { border-bottom: none; }
.locrow__ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--r-pill); background: var(--pd-teal-soft); color: var(--pd-teal-dark); display: flex; align-items: center; justify-content: center; }
.locrow__ic svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.locrow__k { font-family: var(--font-label); font-weight: 900; text-transform: uppercase; letter-spacing: .05em; font-size: .64rem; color: var(--pd-red); }
.locrow__v { font-family: var(--font-body); font-weight: 600; color: var(--pd-teal-dark); font-size: .94rem; line-height: 1.45; margin-top: 2px; }

/* ============================================================
   FAQ  (accordion, on cream w/ teal accents)
   ============================================================ */
.faq { background: var(--pd-cream); padding: var(--sp-section) clamp(20px,4vw,48px); position: relative; overflow: hidden; box-shadow: inset 0 0 clamp(90px,14vw,200px) rgba(44,44,44,.14); }
.faq::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='fg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fg)'/%3E%3C/svg%3E");
}
.faq__inner { max-width: 1080px; margin: 0 auto; position: relative; z-index: 1; }
.faq__list { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 12px; align-items: start; }
.faqitem { background: #fff; border: 1px solid var(--pd-cream-deep); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--pd-shadow-sm); }
.faqitem.is-open { border-color: var(--pd-teal); }
.faqq { width: 100%; text-align: left; background: none; border: none; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--font-display); font-weight: 700; color: var(--pd-teal-dark); font-size: 1.12rem; }
.faqq__plus { width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--r-pill); background: var(--pd-teal-soft); color: var(--pd-teal-dark); display: flex; align-items: center; justify-content: center; font-family: var(--font-label); font-weight: 900; font-size: 1.1rem; transition: transform .2s ease, background .2s ease; }
.faqitem.is-open .faqq__plus { background: var(--pd-red); color: #fff; transform: rotate(45deg); }
.faqa { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.faqa__inner { padding: 0 24px 22px; font-family: var(--font-body); color: var(--pd-ink); line-height: 1.65; font-size: .95rem; }
@media (max-width: 720px) { .faq__list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; } }

/* mobile: show only first 3 FAQs */
@media (max-width: 900px) {
  .faqitem:nth-child(n+4) { display: none; }
}

/* ============================================================
   CTA BANNER (reusable, before footer)
   ============================================================ */
.ctaband { background: var(--pd-red); padding: clamp(2.6rem,5vw,4rem) clamp(20px,4vw,48px); position: relative; overflow: hidden; text-align: center; }
.ctaband__inner { max-width: 820px; margin: 0 auto; position: relative; z-index: 2; }
.ctaband__t { font-family: var(--font-display); font-weight: 800; color: #fff; font-size: clamp(2rem,4.5vw,3.2rem); line-height: 1.02; margin: 0; }
.ctaband__t em { font-style: italic; color: var(--pd-teal-dark); }
.ctaband__p { font-family: var(--font-body); font-weight: 700; color: #fff; opacity: .92; margin: 14px auto 26px; max-width: 46ch; line-height: 1.55; }
.ctaband__btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.ctaband .btn--secondary { background: #fff; border-color: #fff; color: var(--pd-red); }
.ctaband .btn--secondary:hover { background: var(--pd-teal-dark); border-color: var(--pd-teal-dark); color: #fff; }
.ctaband .btn--ghost { border-color: #fff; color: #fff; }
.ctaband .btn--ghost:hover { background: #fff; color: var(--pd-red); }
.ctaband__star { position: absolute; opacity: .55; color: #fff; }

/* ============================================================
   BILLIARDS — rates + leagues
   ============================================================ */
.rates { background: var(--pd-cream); padding: var(--sp-section) clamp(20px,4vw,48px); }
.rates__inner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,3vw,40px); align-items: start; }
.ratecard { background: #fff; border: 1px solid var(--pd-cream-deep); border-radius: var(--r-lg); padding: clamp(26px,3vw,38px); box-shadow: var(--pd-shadow-card); }
.ratecard--feature { background: var(--pd-teal-dark); border-color: var(--pd-teal-dark); }
.ratecard h3 { font-family: var(--font-display); font-weight: 800; color: var(--pd-teal-dark); font-size: 1.6rem; margin: 0 0 4px; }
.ratecard--feature h3 { color: var(--pd-cream); }
.ratecard .pd-script { display: block; font-family: var(--font-script); color: var(--pd-red); font-size: 1.25rem; margin-bottom: 18px; }
.ratecard--feature .pd-script { color: var(--pd-pink); }
.raterow { display: flex; align-items: baseline; gap: 12px; padding: 15px 0; border-bottom: 1px dashed var(--pd-cream-deep); }
.ratecard--feature .raterow { border-color: rgba(255,243,222,.22); }
.raterow:last-child { border-bottom: none; }
.raterow__t { font-family: var(--font-display); font-weight: 700; color: var(--pd-teal-dark); font-size: 1.08rem; }
.ratecard--feature .raterow__t { color: var(--pd-cream); }
.raterow__sub { font-family: var(--font-body); font-size: .78rem; color: var(--pd-ink-60); display: block; margin-top: 2px; }
.ratecard--feature .raterow__sub { color: var(--pd-cream-82); }
.raterow__dots { flex: 1; border-bottom: 2px dotted var(--pd-cream-deep); transform: translateY(-4px); }
.ratecard--feature .raterow__dots { border-color: rgba(255,243,222,.3); }
.raterow__p { font-family: var(--font-label); font-weight: 900; color: var(--pd-red); font-size: 1.1rem; white-space: nowrap; }
.ratecard--feature .raterow__p { color: var(--pd-pink); }

/* generic two-col feature within pages */
.pgsplit { background: var(--pd-cream); padding: var(--sp-section) clamp(20px,4vw,48px); }
.pgsplit--teal { background: var(--pd-teal); }
.pgsplit__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,4vw,60px); align-items: center; }
.pgsplit--rev .pgsplit__copy { order: 2; }
.pgsplit__eyebrow { font-family: var(--font-script); color: var(--pd-red); font-size: clamp(1.3rem,2.4vw,2rem); }
.pgsplit--teal .pgsplit__eyebrow { color: var(--pd-cream); }
.pgsplit__title { font-family: var(--font-display); font-weight: 800; color: var(--pd-teal-dark); font-size: clamp(2rem,4vw,3.2rem); line-height: 1.02; margin: 2px 0 0; }
.pgsplit--teal .pgsplit__title { color: #fff; }
.pgsplit__p { font-family: var(--font-body); color: var(--pd-ink); line-height: 1.65; margin: 18px 0 0; max-width: 42ch; }
.pgsplit--teal .pgsplit__p { color: var(--pd-cream); }
.pgsplit__p + .pgsplit__p { margin-top: 14px; }
.pgsplit__photo { position: relative; min-height: 420px; border-radius: var(--r-lg); border: 6px solid var(--pd-teal); background: var(--pd-teal-soft); box-shadow: var(--pd-shadow); overflow: hidden; }
.pgsplit__photo image-slot { position: absolute; inset: 0; }
/* real <img> photos fill their frame completely */
.split__photo { position: relative; }
.pgsplit__photo > img, .split__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pgsplit--teal .pgsplit__photo { border-color: var(--pd-cream); }
.pgsplit__list { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 12px; }
.pgsplit__list li { display: flex; gap: 12px; align-items: flex-start; font-family: var(--font-body); font-size: .95rem; line-height: 1.5; color: var(--pd-teal-dark); }
.pgsplit--teal .pgsplit__list li { color: var(--pd-cream); }
.pgsplit__list .star { flex-shrink: 0; position: relative; top: 2px; }
.pgsplit__cta { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; }

/* stat row */
.stats { background: var(--pd-teal-dark); padding: clamp(2.4rem,4vw,3.4rem) clamp(20px,4vw,48px); }
.stats__inner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; text-align: center; }
.stat__n { font-family: var(--font-display); font-weight: 800; color: var(--pd-cream); font-size: clamp(2.2rem,4vw,3.2rem); line-height: 1; }
.stat__n em { font-style: normal; color: var(--pd-red); }
.stat__l { font-family: var(--font-label); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; color: var(--pd-pink); margin-top: 8px; }

/* menu page closing CTA */
.menucta { text-align: center; margin-top: clamp(40px,5vw,60px); }
.menucta .pd-script { display:block; font-family: var(--font-script); color: var(--pd-red); font-size: 1.6rem; margin-bottom: 14px; }

/* events page tabs/filter pills reuse .mtab */
.events-page .menu__tabs { margin-bottom: 32px; }

/* contact page two-column */
.contactpg { background: var(--pd-cream); padding: var(--sp-section) clamp(20px,4vw,48px); }
.contactpg__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px,4vw,56px); align-items: start; }
.cinfo__block { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px dashed var(--pd-cream-deep); }
.cinfo__block:last-child { border-bottom: none; }
.cinfo__ic { width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--r-pill); background: var(--pd-teal); color: var(--pd-cream); display: flex; align-items: center; justify-content: center; }
.cinfo__ic svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cinfo__k { font-family: var(--font-label); font-weight: 900; text-transform: uppercase; letter-spacing: .05em; font-size: .66rem; color: var(--pd-red); }
.cinfo__v { font-family: var(--font-body); font-weight: 600; color: var(--pd-teal-dark); font-size: .98rem; line-height: 1.5; margin-top: 3px; }
.cinfo__v a:hover { color: var(--pd-red); }

/* responsive overrides for new sections */
@media (max-width: 980px){
  .qinfo__inner { grid-template-columns: 1fr; }
  .services__grid { grid-template-columns: 1fr 1fr; }
  .fgrid { grid-template-columns: 1fr 1fr; }
  .rgrid { grid-template-columns: 1fr; }
  .loc__inner { grid-template-columns: 1fr; }
  .rates__inner { grid-template-columns: 1fr; }
  .pgsplit__inner { grid-template-columns: 1fr; }
  .pgsplit--rev .pgsplit__copy { order: 0; }
  .stats__inner { grid-template-columns: 1fr 1fr; }
  .contactpg__inner { grid-template-columns: 1fr; }
}
@media (max-width: 620px){
  .services__grid { grid-template-columns: 1fr; }
  .fgrid { grid-template-columns: 1fr; }
  .erow { grid-template-columns: auto 1fr; }
  .erow .etag { grid-column: 2; justify-self: start; }
  .stats__inner { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   STATIC BUILD — image-slot replacements
   The design used <image-slot> placeholders; the production
   build uses real <img>. These rules make those <img> tags
   fill and crop their frames exactly as the slots did.
   ============================================================ */
.mgs__interior img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  border-radius: 12px; display: block;
}
.hero__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.edp-circle img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  border-radius: 50%;
}
.rvcircle img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.pola__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.sp__posterframe img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}