/* ===========================================================================
   Booked Wild — /who-we-serve/

   Loaded after services.css and offer.css, which already carry the header,
   grid, type scale, buttons, rule treatment, .sec grounds, .hero, .close and
   the contact panel. This page reuses all of it.

   What it adds is one component: the numbered category row. Seven categories
   printed as seven identical cards would be a list, not a page — so instead
   they run as editorial rows with an oversized number in the margin, each
   paired with a photograph and set on an alternating ground. One system,
   seven entries, no repetition fatigue.
   =========================================================================== */

/* ---- hero ---------------------------------------------------------------- *
   the h1 is a two-sentence line rather than a short label, so it keeps
   services.css's own hero h1 metrics — same face, weight, clamp, line-height
   and tracking as every other page — and only gains a balanced wrap. */
.hero h1 { text-wrap: balance; }
.hero__lede { max-width: 52ch; }

/* ---- hero scrim ---------------------------------------------------------- *
   The replacement photograph is an inn at night: dark nearly everywhere, with
   its bright values in the lamps and lit windows on the right, away from the
   text column. Measured under the real glyph rects the h1 still crossed the lit
   windows at 3.52:1, so the horizontal layer carries a little more weight than
   the photograph alone needs, and the foot is deepened so the buttons stay
   legible. Both layers
   use the same scrim colour, so their alphas compose cleanly: 1-(1-av)(1-ah). */
.hero__scrim {
  background:
    linear-gradient(90deg,
      rgba(6, 26, 17, 0.44) 0%, rgba(6, 26, 17, 0.32) 52%, rgba(6, 26, 17, 0) 90%),
    linear-gradient(180deg,
      rgba(6, 26, 17, 0.62) 0%, rgba(6, 26, 17, 0.34) 42%,
      rgba(6, 26, 17, 0.50) 68%, rgba(6, 26, 17, 0.90) 100%);
}
@media (max-width: 768px) {
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(6, 26, 17, 0.44) 0%, rgba(6, 26, 17, 0.38) 100%),
      linear-gradient(180deg, rgba(6, 26, 17, 0.62) 0%, rgba(6, 26, 17, 0.34) 42%,
        rgba(6, 26, 17, 0.50) 68%, rgba(6, 26, 17, 0.90) 100%);
  }
}

/* ---- the hero's ghost button --------------------------------------------- *
   services.css:242 a:hover{color:var(--ink)} at (0,1,1) outranks
   .btn--ghost{color:var(--white)} at (0,1,0), and .btn--ghost:hover changes
   only the background — so the label turns dark ink over a dark photograph.
   Fixed page-scoped, identical to the rule already on the other five pages. */
.hero .btn--ghost:hover,
.hero .btn--ghost:focus-visible,
.sec--dark .btn--ghost:hover,
.sec--dark .btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  border-color: #FFFFFF;
  color: var(--white);
}

/* ---- the category rows --------------------------------------------------- */
.cats { list-style: none; margin: 0; padding: 0; }
.cat {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 0 40px;
  align-items: start;
  padding: 44px 0;
  border-top: 2px solid var(--line-2);
}
.cat:first-child { border-top: 0; padding-top: 8px; }

/* the number carries the sequence, so it is set large and quiet rather than as
   a badge — it reads as a page number, not a bullet */
.cat__n {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(38px, 4.2vw, 62px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-weight: 800;
  color: var(--line-2);
  margin: 0;
}
.cat__name {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(25px, 2.5vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
}
.cat__desc {
  font-family: 'Karla', sans-serif;
  font-size: clamp(16.5px, 1.3vw, 19px);
  line-height: 1.62;
  color: var(--body);
  margin: 16px 0 0;
  max-width: 68ch;
}
/* the examples are a different kind of information from the definition above
   them, so they sit on the section's tint behind a short accent rule rather
   than reading as a second paragraph */
.cat__eg {
  font-family: 'Karla', sans-serif;
  font-size: clamp(15.5px, 1.15vw, 17px);
  line-height: 1.6;
  color: var(--muted);
  margin: 18px 0 0;
  padding: 14px 0 0 18px;
  border-left: 3px solid var(--accent-mid);
  max-width: 74ch;
}

/* the child-page link under category 03. margin-top only, so the block above it
   keeps the spacing that was approved. */
.cat__more { margin: 26px 0 0; }
.cat__more .btn { padding: 12px 22px; font-size: 15px; }

/* Category 07. sits on .sec--white. services.css gives .btn--ghost white text
   and a white border for dark grounds and recolours it for .sec--cream, but
   never for .sec--white — so the Explore button there rendered white-on-white
   and was invisible despite being present and clickable. Same treatment as the
   cream sections, so all the category CTAs match. */
.sec--white .btn--ghost { border-color: var(--line-2); color: var(--ink); }
.sec--white .btn--ghost:hover,
.sec--white .btn--ghost:focus-visible { background: var(--tint); color: var(--ink); }

/* dark and field-green grounds recolour the row */
.sec--dark .cat, .sec--field .cat { border-top-color: rgba(159, 220, 169, 0.28); }
.sec--dark .cat__n, .sec--field .cat__n { color: rgba(159, 220, 169, 0.45); }
.sec--dark .cat__name, .sec--field .cat__name { color: var(--white); }
.sec--dark .cat__desc, .sec--field .cat__desc { color: rgba(242, 246, 238, 0.88); }
.sec--dark .cat__eg, .sec--field .cat__eg {
  color: rgba(242, 246, 238, 0.72);
  border-left-color: var(--accent-mid);
}

/* ---- a category paired with a photograph --------------------------------- *
   Every category section is a copy-and-picture pair, alternating ground and
   side so the seven entries share one system without repeating a card. */
/* The media used to carry aspect-ratio:4/5, which at 1440 made a 489px column
   611px tall — 361px more than the 250px of copy beside it, and the row (and so
   the section) inherited that. The copy now sets the height and the picture
   stretches to meet it, which is what keeps the seven categories on one
   vertical rhythm instead of two. A min-height stops a short entry collapsing
   the picture into a letterbox. */
.catx {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 56px;
  align-items: stretch;
}
.catx__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  margin: 0;
  min-height: 300px;
  box-shadow: 0 30px 70px rgba(12, 42, 28, 0.22);
}
/* absolute, so the box takes its height from the ratio rather than the file */
.catx__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.catx .cats { margin: 0; }
.catx--media-left .catx__media { grid-column: 1; grid-row: 1; }
.catx--media-left .catx__body  { grid-column: 2; grid-row: 1; }
.catx--media-left { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }

/* ---- the closing statement ----------------------------------------------- */
.rented {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(28px, 3.4vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: var(--white);
  margin: 0;
  max-width: 20ch;
}

/* ---- FAQs beside a photograph -------------------------------------------- *
   Two questions alone would leave most of the band empty, so the page uses the
   same accordion-and-image pairing already approved on /services/,
   /lodges-log-cabins/ and /short-term-rentals/, ported in the same
   page-scoped form. */
.faqx {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 64px;
  align-items: stretch;
  margin-top: 52px;
}
.faqx .faq { margin-top: 0; max-width: none; }
.faqx__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  margin: 0;
  min-height: 340px;
  box-shadow: 0 34px 80px rgba(12, 42, 28, 0.22);
}
/* services-ridge-path is a 1400x2100 portrait: the top third is sky, so at
   50% 42% a landscape frame cropped almost entirely to cloud. Pulled down to
   50% 76%, which lands on the walker and the path — the subject of the
   photograph — and gives the accordion something to balance against. */
.faqx__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 76%;
  display: block;
}

/* ---- FAQ accordion -------------------------------------------------------- *
   The treatment approved on /lodges-log-cabins/ and since carried to
   /services/. The open state lives on the button's aria-expanded and the
   panel's hidden attribute follows it, so the marker and assistive tech can
   never disagree. */
.faq { max-width: 980px; margin: 52px 0 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(18px, 1.5vw, 23px);
  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"; }
/* authored display rules outrank the UA's [hidden]{display:none} */
.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) {
  /* copy first, photograph beneath — the categories are the point here */
  .catx, .catx--media-left { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .catx--media-left .catx__media,
  .catx--media-left .catx__body { grid-column: 1; grid-row: auto; }
  .catx__media { aspect-ratio: 16 / 9; min-height: 0; }
  .faqx { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .faqx__media { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 768px) {
  /* the number moves above the name rather than shrinking a 128px margin
     column down to something that fits neither */
  .cat { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 34px 0; }
  .cat__n { font-size: 30px; margin-bottom: 12px; }
  .cat__desc { margin-top: 12px; }
  .cat__eg { padding-left: 14px; margin-top: 16px; }
  .catx__media { aspect-ratio: 3 / 2; }
  .faqx { margin-top: 40px; gap: 30px; }
  .faqx__media { aspect-ratio: 3 / 2; }
  .faq { margin-top: 40px; }
  .faq__q { padding: 22px 0; gap: 16px; }
  .faq__icon { width: 30px; height: 30px; font-size: 16px; }
  .faq__a { padding-bottom: 24px; }
}