/* ===========================================================================
   Booked Wild — /who-we-serve/destination-food-drink/

   The shortest brief in the Who We Serve family, so this page is deliberately
   more compact than its siblings: six sections rather than nine, with the
   Stakes and the Prize set side by side as a single argument instead of two
   full-height sections. Nothing is padded out to make the page longer.

   Page-scoped; no shared stylesheet is modified.
   =========================================================================== */

/* ---- hero ---------------------------------------------------------------- */
.hero h1 { max-width: 18ch; }
.hero__lede { max-width: 60ch; }
.hero .btn--ghost, .hero .btn--ghost:hover { color: var(--white); }
/* the lit tables sit centre-right; keep the copy on the darker side */
.hero__img { object-position: 56% 52%; }
/* A left-to-right layer over the shared top-to-bottom one, so the copy column
   is held down while the warm lamps stay visible. Same device as the Glamping
   and Retreat Hosts heroes. */
.hero__scrim {
  background:
    linear-gradient(90deg, rgba(6,26,17,.80) 0%, rgba(6,26,17,.62) 46%,
                           rgba(6,26,17,.20) 74%, rgba(6,26,17,0) 100%),
    linear-gradient(180deg, rgba(6,26,17,.66) 0%, rgba(6,26,17,.28) 42%,
                            rgba(6,26,17,.44) 66%, rgba(6,26,17,.90) 100%);
}

/* ---- key takeaways ------------------------------------------------------- */
.kt { background: var(--field); color: var(--cream); padding: 74px var(--pad); }
.kt .wrap { max-width: var(--max); margin: 0 auto; }
.kt__h {
  margin: 0 0 20px;
  font-family: 'Karla', sans-serif;
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700; color: var(--accent-soft);
}
/* the brief opens this section with a statement rather than a bullet, so it is
   typeset as one */
.kt__lead {
  margin: 0 0 40px;
  font-size: clamp(21px, 2vw, 31px); line-height: 1.22; letter-spacing: -0.03em;
  font-weight: 800; color: var(--white); max-width: 30ch;
}
.kt__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 34px;
}
.kt__item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding-top: 20px; border-top: 2px solid rgba(159, 220, 169, 0.5);
}
.kt__icon { color: var(--accent-soft); flex: none; display: block; }
.kt__t {
  margin: 0; font-family: 'Karla', sans-serif;
  font-size: 16px; line-height: 1.6; color: rgba(242, 246, 238, 0.86);
}

/* ---- the reality (empathy) ----------------------------------------------- */
.emphead { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: 60px; align-items: center; }
.emphead__media { margin: 0; border-radius: var(--r-card); overflow: hidden; }
.emphead__media img { display: block; width: 100%; aspect-ratio: 8 / 5; object-fit: cover; }

.pains {
  list-style: none; margin: 50px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 56px;
}
.pain {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 18px;
  padding: 24px 0; border-top: 1px solid var(--line);
}
.pain__n { margin: 0; font-family: 'Chivo', sans-serif; font-weight: 900; font-size: 25px; line-height: 1.1; color: var(--accent-mid); }
.pain__t { margin: 0; font-family: 'Karla', sans-serif; font-size: 16.5px; line-height: 1.68; color: var(--body); }
.emp__close {
  margin: 46px 0 0; padding-top: 30px; border-top: 3px solid var(--accent-mid);
  font-size: clamp(20px, 1.9vw, 29px); line-height: 1.3; letter-spacing: -0.025em;
  font-weight: 700; color: var(--ink);
}

/* ---- the stakes / the prize, set against each other ---------------------- */
.twos .wrap { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; }
.two {
  background: var(--card);
  border: 1px solid rgba(159, 220, 169, 0.18);
  border-radius: var(--r-card);
  padding: 40px 40px 44px;
}
/* the prize is the turn in the argument, so it carries the accent edge */
.two--prize { border-color: rgba(159, 220, 169, 0.34); border-top: 4px solid var(--accent); }
.two .rule { background: var(--accent-mid); }
.two .eyebrow { color: var(--accent-soft); }
.two__h {
  margin: 0; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.12;
  letter-spacing: -0.03em; font-weight: 800; color: var(--white); max-width: 22ch;
}
.two__b {
  margin: 20px 0 0; font-family: 'Karla', sans-serif;
  font-size: 16.5px; line-height: 1.7; color: rgba(242, 246, 238, 0.84);
}

/* ---- closing ------------------------------------------------------------- */
/* The copy only ever filled the left half, so the conversion moment sits beside
   a picture rather than trailing off into empty green. Same rounded, cropped
   treatment as the other images on the page. */
.closx { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: 60px; align-items: center; }
.closx__media { margin: 0; border-radius: var(--r-card); overflow: hidden; }
.closx__media img { display: block; width: 100%; aspect-ratio: 8 / 5; object-fit: cover; }
.clos .h2 { max-width: 22ch; }
.clos__b {
  margin: 20px 0 0; font-family: 'Karla', sans-serif;
  font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.68;
  color: rgba(242, 246, 238, 0.9); max-width: 60ch;
}
.clos .actions { margin-top: 34px; }

/* ---- FAQs ---------------------------------------------------------------- */
.faqx { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr); gap: 64px; align-items: start; margin-top: 52px; }
.faqx .faq { margin: 0; max-width: none; }
.faqx__media { margin: 0; border-radius: var(--r-card); overflow: hidden; position: sticky; top: 108px; }
.faqx__media img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.faq { max-width: none; margin: 0; }
.faq__row { border-top: 1px solid var(--line-2); }
.faq__row:last-child { border-bottom: 1px solid var(--line-2); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 0; background: none; border: 0; text-align: left; cursor: pointer;
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(17.5px, 1.4vw, 22px);
  line-height: 1.28; letter-spacing: -0.025em; font-weight: 700; color: var(--ink);
}
.faq__icon {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--line-2); display: grid; place-items: center;
  font-family: 'Karla', sans-serif; font-size: 18px; line-height: 1; color: var(--muted);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.faq__q:hover .faq__icon { border-color: var(--accent); color: var(--ink); }
.faq__q:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: -3px; }
.faq__icon::before { content: "+"; }
.faq__q[aria-expanded="true"] .faq__icon { background: var(--accent); border-color: var(--accent); color: var(--white); }
.faq__q[aria-expanded="true"] .faq__icon::before { content: "\2212"; }
/* the authored padding would otherwise outrank the UA [hidden] rule */
.faq__a { padding: 0 0 30px; max-width: 76ch; }
.faq__a[hidden] { display: none; }
.faq__a p { font-family: 'Karla', sans-serif; font-size: clamp(16px, 1.2vw, 17.5px); line-height: 1.66; color: var(--body); margin: 0; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .kt__grid { grid-template-columns: minmax(0,1fr); gap: 26px; }
  /* the picture drops below the copy rather than squeezing into a narrow column */
  .closx { grid-template-columns: minmax(0,1fr); gap: 36px; }
  .closx__media img { aspect-ratio: 16 / 9; }
  .emphead { grid-template-columns: minmax(0,1fr); gap: 36px; }
  .emphead__media img { aspect-ratio: 16 / 9; }
  .pains { grid-template-columns: minmax(0,1fr); gap: 0; }
  .twos .wrap { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .faqx { grid-template-columns: minmax(0,1fr); gap: 40px; }
  .faqx__media { position: static; }
  .faqx__media img { aspect-ratio: 16 / 10; }
}

@media (max-width: 768px) {
  /* stacked, the copy spans the full width, so the horizontal layer stops being
     the right tool — even it out top-to-bottom instead */
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(6,26,17,.74) 0%, rgba(6,26,17,.62) 60%, rgba(6,26,17,.48) 100%),
      linear-gradient(180deg, rgba(6,26,17,.70) 0%, rgba(6,26,17,.40) 42%,
                              rgba(6,26,17,.56) 66%, rgba(6,26,17,.92) 100%);
  }
  .kt { padding: 58px var(--pad); }
  .two { padding: 30px 28px 32px; }
  .faq__q { padding: 22px 0; gap: 16px; }
  .faq__icon { width: 30px; height: 30px; font-size: 16px; }
  .faq__a { padding-bottom: 24px; }
}

@media (max-width: 560px) {
  .pain { grid-template-columns: 38px minmax(0,1fr); gap: 0 12px; }
  .pain__n { font-size: 21px; }
  .emphead__media img { aspect-ratio: 4 / 3; }
  .closx__media img { aspect-ratio: 4 / 3; }
}