/* ===========================================================================
   Booked Wild — /short-term-rentals/

   Loaded after services.css and offer.css. The chrome, grid, type scale,
   buttons, rules, .sec grounds, .hero, .close, .sec__head, .split, .offerx,
   .aud, .why3 and the shared contact block all come from those unchanged.

   This page and /lodges-log-cabins/ share a content hierarchy, so the
   composition is deliberately varied rather than cloned:

     section            here                          lodges
     Reality            portrait image LEFT, cream    landscape image RIGHT
     USP                icon cards over a texture     icon cards, flat green
     01 Get Bookable    labelled editorial rows, dark three white cards, cream
     02 Get Found       three columns, cream          heading + stack, dark
     03 Bring Guests    heading + stack, field green  three columns, textured
     FAQs               accordion beside an image     the same (as briefed)

   The accordion, the FAQ split and the USP card tuning are repeated here
   rather than shared, because lodges.css is scoped to that page and lifting
   them into a common sheet would change a page that is already approved.
   =========================================================================== */

/* ---- hero ---------------------------------------------------------------- *
   Balanced so the page title never breaks to a one-word last line. */
.hero h1 { text-wrap: balance; }
/* the supplied one-line proposition, a step below the H1 and above the body */
.hero__claim {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.24;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--white);
  margin: 26px 0 0;
  max-width: 30ch;
}

/* ---- Reality: portrait photograph beside the copy ------------------------ *
   .offerx is the copy-and-tall-image split from offer.css; only the side it
   sits on is new here. */
.offerx--media-left { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }
.offerx--media-left .offerx__media { grid-column: 1; grid-row: 1; }
.offerx--media-left .offerx__copy  { grid-column: 2; grid-row: 1; }

/* ---- USP strip over a photograph ---------------------------------------- *
   Lodges runs these cards on flat field green. Here the same cards sit over a
   property at low opacity, so the two strips read as the same component doing
   the same job on two pages rather than one page copied. */
.usp { position: relative; overflow: hidden; padding: 64px var(--pad); }
.usp__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 55%;
  opacity: 0.16;
}
.usp__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(30, 107, 60, 0.94) 0%, rgba(30, 107, 60, 0.86) 100%);
}
.usp > .wrap { position: relative; }

/* .aud from offer.css at four across, tuned for statements rather than the
   two- and three-word labels it was cut for. Icons replace the numerals, as
   approved on the Lodges page. */
.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; }
.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; }

/* ---- 01 · Get Bookable: labelled editorial rows -------------------------- *
   THE GAP / THE PURPOSE / THE PORTFOLIO each carry a full paragraph, which
   three side-by-side cards would make very tall. Full-width rows with the
   label in its own column read faster and keep the section shallow. */
.rows { list-style: none; margin: 56px 0 0; padding: 0; }
.rows li {
  display: grid;
  grid-template-columns: minmax(0, 0.26fr) minmax(0, 1fr);
  gap: 48px;
  border-top: 2px solid rgba(159, 220, 169, 0.42);
  padding: 30px 0 34px;
}
.rows li:last-child { border-bottom: 2px solid rgba(159, 220, 169, 0.42); }
.rows__label {
  font-family: 'Karla', sans-serif;
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700; color: var(--accent-mid);
  margin: 0;
}
.rows__body {
  font-family: 'Karla', sans-serif;
  font-size: clamp(16px, 1.25vw, 18.5px);
  line-height: 1.62;
  color: rgba(242, 246, 238, 0.88);
  margin: 0;
}

/* ---- 02 · Get Found: three columns on cream ------------------------------ */
.tri {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  margin: 56px 0 0; padding: 0;
  list-style: none;
}
.tri li {
  border-top: 2px solid var(--line-2);
  padding-top: 24px;
  font-family: 'Karla', sans-serif;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.62;
  color: var(--body);
}

/* ---- 03 · Bring Guests Back Direct: hairline stack on field green ------- *
   Lodges carries this section as three columns on a textured band; here it is
   a full-width stack, so the two pages present the same content differently.
   Named separately from lodges.css's .stack because that sheet is scoped to
   that page and is not loaded here. */
.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.9);
}
.stack li:last-child { margin-bottom: 0; }

/* ---- FAQs ---------------------------------------------------------------- *
   The accordion pattern from /short-term-rentals/'s own previous bundle and
   /lodges-log-cabins/: hairline rows, a 32px circular +/- marker, real
   buttons. The open state is driven by [aria-expanded], so the attribute and
   the marker cannot disagree. */
.faq { 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: 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(18px, 1.5vw, 23px);
  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; }
.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: 72ch; }
.faq__a[hidden] { display: none; }
.faq__a p {
  font-family: 'Karla', sans-serif;
  font-size: clamp(16px, 1.15vw, 17.5px);
  line-height: 1.68;
  color: var(--body);
  margin: 0;
}

/* accordion beside a photograph. The row stretches, the media declares no
   aspect ratio and takes its height from the grid, and the image is absolutely
   positioned so it contributes none of its own — the accordion sets the height
   and the picture follows it, including as rows open. */
.faqx {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 64px;
  align-items: stretch;
  margin-top: 52px;
}
.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% 45%;
  display: block;
}

/* ---- section heights ----------------------------------------------------- *
   The recurring failure on this site is a fixed aspect ratio making a section
   far taller than its copy. Same treatment as the FAQ media: desktop only,
   because stacked the natural ratio is what you want. */
@media (min-width: 1025px) {
  #reality .offerx { align-items: stretch; }
  #reality .offerx__media { aspect-ratio: auto; min-height: 420px; }
  #reality .offerx__media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-position: 50% 50%;
  }
  #reality .offerx__copy { align-self: center; }
}

/* ---- contrast on the photographic sections ------------------------------- *
   services.css sets .close h2 white but leaves .lede at --body, a dark green
   built for cream grounds, which disappears on a photograph. */
.close .lede { color: rgba(242, 246, 238, 0.92); }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
  .tri { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
@media (max-width: 1024px) {
  .offerx--media-left { grid-template-columns: minmax(0, 1fr); }
  .offerx--media-left .offerx__media,
  .offerx--media-left .offerx__copy { grid-column: 1; grid-row: auto; }
  .offerx--media-left .offerx__copy { order: 1; }
  .offerx--media-left .offerx__media { order: 2; }
  /* accordion first, photograph beneath — the questions are the point */
  .faqx { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .faqx__media { min-height: 0; aspect-ratio: 16 / 9; }
  .rows li { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 768px) {
  .aud--usp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aud--usp li { padding: 22px 20px 24px; }
  .usp { padding: 56px var(--pad); }
  .faqx { margin-top: 40px; gap: 30px; }
  .faqx__media { aspect-ratio: 3 / 2; }
  .faq__q { padding: 22px 0; gap: 16px; }
  .faq__icon { width: 28px; height: 28px; font-size: 16px; }
  .faq__a { padding-bottom: 24px; }
  .rows { margin-top: 40px; }
  .rows li { padding: 24px 0 28px; }
  .hero__claim { margin-top: 20px; }
}
@media (max-width: 560px) {
  .aud--usp { grid-template-columns: minmax(0, 1fr); }
}

/* ---- scrims for the two photographic sections --------------------------- *
   The shared scrims in services.css are tuned for darker images. The cottage
   carries a bright twilight sky and lit windows exactly where the H1 sits —
   measured against its brightest patches the H1 came out at 2.06:1, under the
   3:1 large-text floor — and the close was tight at 3.16:1.

   Rather than flatten either picture, each gains a horizontal wash under the
   text column only, so the left carries the contrast and the right of the
   photograph stays open. Both layers use the section's own scrim colour, so
   their alphas compose cleanly. Same fix the Lodges and offer pages use. */
.hero__scrim {
  background:
    linear-gradient(90deg,
      rgba(6, 26, 17, 0.66) 0%, rgba(6, 26, 17, 0.48) 48%, rgba(6, 26, 17, 0) 80%),
    linear-gradient(180deg,
      rgba(6, 26, 17, 0.74) 0%, rgba(6, 26, 17, 0.44) 42%,
      rgba(6, 26, 17, 0.58) 66%, rgba(6, 26, 17, 0.92) 100%);
}
.close__scrim {
  background:
    linear-gradient(90deg,
      rgba(6, 25, 15, 0.52) 0%, rgba(6, 25, 15, 0.36) 50%, rgba(6, 25, 15, 0) 82%),
    linear-gradient(180deg,
      rgba(6, 25, 15, 0.72) 0%, rgba(6, 25, 15, 0.52) 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.66) 0%, rgba(6, 26, 17, 0.56) 100%),
      linear-gradient(180deg, rgba(6, 26, 17, 0.74) 0%, rgba(6, 26, 17, 0.44) 42%,
        rgba(6, 26, 17, 0.58) 66%, rgba(6, 26, 17, 0.92) 100%);
  }
  .close__scrim {
    background:
      linear-gradient(90deg, rgba(6, 25, 15, 0.52) 0%, rgba(6, 25, 15, 0.44) 100%),
      linear-gradient(180deg, rgba(6, 25, 15, 0.72) 0%, rgba(6, 25, 15, 0.52) 42%,
        rgba(6, 25, 15, 0.94) 100%);
  }
}


/* ---- 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;
}