/* ===========================================================================
   Booked Wild — /lodges-log-cabins/

   Loaded after services.css and offer.css. Almost everything on this page is
   already solved somewhere on the site and is reused unchanged:

     .hdr .hero .sec .wrap .btn .rule .h2 .lede .eyebrow .close  services.css
     .usp .usp__grid .usp__item                                  /services/
     .steps .step .step__n .step__t .step__b                     /services/
     .sec__head (heading beside content)                         /services/
     .split .split__media .ohead .core .why3 .whyus              offer.css
     .pgform split-card contact block                            pageform.css

   This file adds only the three things none of them provide: a three-up
   variant of .steps, the hairline paragraph stack used by section 02, and the
   FAQ accordion — which exists on /short-term-rentals/ but only inside that
   page's generated bundle as inline styles, so there is nothing to import.
   =========================================================================== */

/* ---- hero ---------------------------------------------------------------- *
   Balanced so the page title never breaks to a one-word last line. */
/* balanced so the title never breaks to a one-word last line */
.hero h1 { text-wrap: balance; }

/* ---- 01 · Get Bookable: three panels instead of four -------------------- *
   .steps is a four-up on /services/. THE GAP / THE PURPOSE / THE PORTFOLIO is
   three, and each carries a full sentence as its title rather than a two-word
   label, so the title steps down a size in this variant only. */
.steps--three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 52px; }
.steps--three .step__t { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.24; }

/* ---- the USP strip: the established numbered cards ---------------------- *
   .usp__grid is four 16px lines under hairlines, which on this band left 204px
   of a 300px section empty — four paragraphs floating in a green rectangle.

   Replaced with .aud from offer.css, the site's existing numbered-card
   treatment (/website-redesign-offer/ uses it for "Who it's for"): a dark
   --card panel, a 4px accent top border, the number in Chivo and the statement
   in the display face. Nothing new is invented — only the number sizing and the
   statement measure are tuned, because these four run longer than the two- and
   three-word labels .aud was cut for. */
.aud--usp { margin-top: 0; gap: 22px; }
.aud--usp .aud__name { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.28; }
.aud--usp li { padding: 26px 24px 28px; }

/* The icons replace the 01-04 numerals. There is no icon library in the
   project, so these are inline SVGs drawn to the idiom already used by
   .incl__tick on the offer pages: a 24x24 box, fill:none, round caps and
   joins, one stroke weight across the set. Colour comes from currentColor,
   so they take the same --accent-mid the numerals used.

   28px block + 12px margin matches the 39px the numerals occupied (34px at
   line-height .8, plus their 12px margin), so no card changes height. */
.aud--usp .aud__icon {
  display: block;
  width: 28px; height: 28px;
  margin: 0 0 12px;
  color: var(--accent-mid);
}
.aud--usp .aud__icon svg { width: 100%; height: 100%; display: block; }
/* the cards now carry the weight, so the band itself can close up */
.usp { padding: 64px var(--pad); }

/* ---- FAQs beside a photograph ------------------------------------------- *
   The accordion left a third of the band empty on desktop. The photograph now
   fills it, sized by the grid rather than by its own 5:7 ratio: the row
   stretches, the media declares no aspect, and the image is absolutely
   positioned so it contributes no intrinsic height. The accordion sets the
   height and the picture follows it — including as rows open and close — so no
   padding is ever added to make the two match. */
.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);
  min-height: 420px;
  box-shadow: 0 34px 80px rgba(12, 42, 28, 0.22);
}
.faqx__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  display: block;
}

/* ---- 02 · Get Found: heading beside a hairline stack -------------------- *
   Deliberately not cards: 01 above is panels and 03 below is an image band, so
   this one carries its copy as an editorial stack. Hairlines only — the same
   rule weight .why3 and .usp__item use. */
.stack { list-style: none; margin: 0; padding: 0; }
.stack li {
  border-top: 2px solid rgba(159, 220, 169, 0.45);
  padding: 24px 0 0;
  margin: 0 0 28px;
  font-family: 'Karla', sans-serif;
  font-size: clamp(16px, 1.25vw, 18.5px);
  line-height: 1.62;
  color: rgba(242, 246, 238, 0.88);
}
.stack li:last-child { margin-bottom: 0; }

/* ---- FAQs ---------------------------------------------------------------- *
   Rebuilt from the accordion on /short-term-rentals/ — same hairline rows, same
   32px circular +/− marker, same type — because that page is a generated bundle
   carrying its styles inline, with nothing shareable to import. Real <button>s
   so it is keyboard operable; the open state is driven by [aria-expanded], so
   the attribute and the visual state cannot drift apart. */
.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: flex-start;
  justify-content: space-between;
  gap: 24px;
  text-align: left;
  background: none;
  border: 0;
  padding: 28px 0;
  cursor: pointer;
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(19px, 1.6vw, 25px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink);
}
.faq__icon {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Karla', sans-serif;
  font-size: 18px; line-height: 1;
  color: var(--muted);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.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; }
/* the marker is CSS, so it always agrees with the attribute the button reports */
.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"; }

.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, 18px);
  line-height: 1.68;
  color: var(--body);
  margin: 0;
}

/* ---- 03 · Bring Guests Back Direct -------------------------------------- *
   .whyus (offer.css) is the textured green band: a photograph at low opacity
   under a field-green scrim. Warmer than a hard-edged image panel, and it keeps
   this section visually distinct from the split above it. */
.whyus .why3 { margin-top: 52px; }

/* ---- section heights ----------------------------------------------------- *
   The recurring failure on this site is an image with a fixed aspect ratio
   making a section far taller than its copy. .split__media is 4/3; where the
   copy beside it is shorter, the row stretches and the media takes its height
   from the grid instead, with the image absolutely positioned so it contributes
   no intrinsic height of its own. Desktop only — stacked, the natural ratio is
   what you want. */
@media (min-width: 1025px) {
  #reality .split { align-items: stretch; }
  #reality .split__media { aspect-ratio: auto; min-height: 380px; }
  #reality .split__media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-position: 50% 46%;
  }
  #reality .split__copy { align-self: center; }
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
  .steps--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  /* accordion first, photograph beneath — the questions are the point here */
  .faqx { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .faqx__media { min-height: 0; aspect-ratio: 16 / 9; }
  .faqx__media img { position: absolute; }
}
@media (max-width: 768px) {
  .steps--three { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .faq { margin-top: 40px; }
  .faq__q { padding: 22px 0; gap: 16px; }
  .faq__icon { width: 28px; height: 28px; font-size: 16px; }
  .faq__a { padding-bottom: 24px; }
  .stack li { margin-bottom: 22px; padding-top: 20px; }
  .faqx { margin-top: 40px; gap: 30px; }
  .faqx__media { aspect-ratio: 3 / 2; }
  .aud--usp li { padding: 22px 20px 24px; }
  .usp { padding: 56px var(--pad); }
  /* .aud goes single-column at this width for the four-word audience labels it
     was built for. These four are statements and hold a 2x2 comfortably on a
     tablet, which keeps the strip compact rather than four full-width rows. */
  .aud--usp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- contrast on the two photographic sections -------------------------- *
   services.css sets .close h2 to white but leaves .lede at --body, a dark green
   built for cream grounds. On the meadow photograph it measured 1.0:1 — the
   supporting line was invisible. Same cream treatment the contact block and
   /direct-booking-guarantee/ already use for copy on dark. */
.close .lede { color: rgba(242, 246, 238, 0.92); }

/* purpose-tent-lake carries blown highlights through the tent opening, exactly
   where the hero copy sits. Against its brightest patches the shared scrim left
   the H1 at 2.98:1, the supporting line at 4.28:1 and the subhead at 3.90:1 —
   all under AA. Rather than flatten the photograph, a horizontal wash sits under
   the text column only, so the left carries the contrast and the right of the
   picture stays open. Both layers use the scrim's own colour, so their alphas
   compose cleanly. Same fix /direct-booking-guarantee/ uses for this image. */
.hero__scrim {
  background:
    linear-gradient(90deg,
      rgba(6, 26, 17, 0.50) 0%, rgba(6, 26, 17, 0.34) 48%, rgba(6, 26, 17, 0) 80%),
    linear-gradient(180deg,
      rgba(6, 26, 17, 0.74) 0%, rgba(6, 26, 17, 0.42) 42%,
      rgba(6, 26, 17, 0.56) 66%, rgba(6, 26, 17, 0.92) 100%);
}
.close__scrim {
  background:
    linear-gradient(90deg,
      rgba(6, 25, 15, 0.46) 0%, rgba(6, 25, 15, 0.30) 52%, rgba(6, 25, 15, 0) 84%),
    linear-gradient(180deg,
      rgba(6, 25, 15, 0.70) 0%, rgba(6, 25, 15, 0.48) 42%, rgba(6, 25, 15, 0.94) 100%);
}
/* stacked, the copy runs the full width, so the wash has to as well */
@media (max-width: 768px) {
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(6, 26, 17, 0.50) 0%, rgba(6, 26, 17, 0.42) 100%),
      linear-gradient(180deg, rgba(6, 26, 17, 0.74) 0%, rgba(6, 26, 17, 0.42) 42%,
        rgba(6, 26, 17, 0.56) 66%, rgba(6, 26, 17, 0.92) 100%);
  }
  .close__scrim {
    background:
      linear-gradient(90deg, rgba(6, 25, 15, 0.46) 0%, rgba(6, 25, 15, 0.38) 100%),
      linear-gradient(180deg, rgba(6, 25, 15, 0.70) 0%, rgba(6, 25, 15, 0.48) 42%,
        rgba(6, 25, 15, 0.94) 100%);
  }
}

@media (max-width: 560px) {
  .aud--usp { grid-template-columns: minmax(0, 1fr); }
}


/* ---- secondary hero button: hover and focus ----------------------------- *
   services.css carries a generic a:hover { color: var(--ink) } at specificity
   (0,1,1), which outranks .btn--ghost's own (0,1,0) white. Its :hover rule sets
   only a background, so on hover the label fell to dark green over a
   translucent white wash on a dark photograph — measured at 1.6:1.

   .btn--solid:hover already declares its colour explicitly; this does the same
   for the ghost variant and adds the focus ring the keyboard state was
   missing. Scoped to this page's hero, matching the fix on
   /website-redesign-offer/ — correcting services.css itself would change
   pages that are already approved. */
.hero .btn--ghost:hover,
.hero .btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  border-color: #FFFFFF;
  color: var(--white);
}
.hero .btn--ghost:focus-visible {
  outline: 3px solid var(--accent-soft);
  outline-offset: 2px;
}