/* =============================================================================
   BOON AESTHETICS - HOMEPAGE HERO WITH OFFERS
   offers/assets/offers-hero.css

   [boon_hero_offers] - the page's own headline copy and the live offers in one
   band, so the offers are part of the first thing a visitor sees.

   NEAR-BLACK BAND, WHITE CARDS. #272727, the same value as the promo bar and the
   treatment page offer card. The page already owns an emphasis colour and this is
   it; white cards then lift off it hard, which is the point. An earlier version
   used the blush #FEE5DB and the offers sat too quietly in it.

   EVERY TEXT RULE SETS font-family EXPLICITLY. Elementor's global kit styles bare
   elements (`.elementor-kit-NNN h1`, `p`, `h3`), and a direct declaration beats an
   inherited one regardless of where the inheritance comes from - so setting the
   family once on .boon-hero does nothing for the h1. Same class of trap as the
   buttons. Don't remove these thinking they are redundant.

   CONTENT SITS IN 1400px. The band paints the full width, the inner column matches
   the site's content width so the hero lines up with everything beneath it.

   BUTTONS ARE .boon-opt-btn's SHAPE. 5px radius, peach fill, dark text, as every
   booking button on the site. Values repeated rather than the class reused,
   because treatment-grid.css is not loaded on the homepage.

   IT COLLAPSES TO A PLAIN HERO WITH NO OFFERS. Not by hiding a column, but by
   switching to a single centred one. Between promotions that is the normal state
   and it has to look intended.

   Depends on the 'boon-offers' stylesheet, which carries DM Sans and the shared
   card tokens. The play button and lightbox come from offers-video.css.
   ============================================================================= */

.boon-hero {
  --hero-dark:   #272727;
  --hero-ink:    #272727;
  --hero-slate:  #5C5C5C;
  --hero-clay:   #DD9D81;
  --hero-peach:  #F9A981;
  --hero-peach-lt: #FDC7B0;
  --hero-blush:  #FEE5DB;
  --hero-white:  #FFFFFF;
  --hero-card-bd: rgba(253, 229, 219, 0.95);
  --hero-font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* How far the offer cards hang below the dark band. One number to tune. */
  --hero-overhang: 90px;

  /* Shared height for every action: the plain buttons and the discount code row.
     They sit in the same position on adjacent cards, so any difference reads as
     a mistake. The code row was taller because its <code> had no line-height and
     was inheriting the theme's ~1.6, which a padding value alone cannot fix. */
  --hero-btn-h: 40px;

  font-family: var(--hero-font);
  color: var(--hero-white);

  /* ── THE OVERHANG ────────────────────────────────────────────────────────
     The band STOPS PAINTING before the section ends, rather than the cards
     being pulled down out of it. The obvious approach - a negative bottom
     margin on the offers column - fights align-items:center, because a
     negative margin shrinks the margin box and the whole column drifts up as
     you push it down. This leaves the layout completely alone and only changes
     where the colour stops, so the cards straddle the edge simply by being
     where they already were.

     The bottom --hero-overhang of the section is transparent, so whatever the
     page background is shows through behind the lower part of each card.
     ──────────────────────────────────────────────────────────────────────── */
  background: linear-gradient(
    to bottom,
    var(--hero-dark) 0,
    var(--hero-dark) calc(100% - var(--hero-overhang)),
    transparent      calc(100% - var(--hero-overhang))
  );
}

/* Nothing to overhang with no offers, so the band is solid to its edge. */
.boon-hero--no-offers { background: var(--hero-dark); }

.boon-hero__inner {
  max-width: 1400px;
  margin: 0 auto;
  /* 2em at the sides. NO bottom padding: the cards need to reach the foot of the
     section for the overhang above to work, and the transparent strip provides
     the visual gap instead. The top is generous because the band opens directly
     under a dark nav, so without it the eyebrow reads as part of the header. */
  padding: 5em 2em 0;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 40px;
  align-items: center;
}

/* Copy above, offers across the full width beneath. */
.boon-hero--stacked .boon-hero__inner {
  grid-template-columns: 1fr;
  /* The row gap, which is the space between the CTA and the Special Offers
     label. Deliberately tighter than the column gap used in split: stacked, the
     copy and the offers read as one block rather than two panels. */
  gap: 34px;
  align-items: start;
}

/* ── STACKED COPY IS CENTRED ──────────────────────────────────────────────
   The copy sits above offers that span the full 1400px, so anything left
   aligned up there leaves most of the width empty and the hero reads as
   half-finished.

   Two earlier attempts made it worse rather than better. Letting the heading
   run its natural width put its right edge far past the paragraph's, which is
   the stepped wedge. Capping the whole block at one measure fixed the step and
   made the emptiness more obvious, because now a neat rectangle of text sat in
   the left half with nothing opposite it.

   Centring removes the problem rather than tidying it: there is no right hand
   side to be empty. One measure for heading and body, both centred, and the
   Special Offers label centred with them so the whole upper block reads as one
   thing above the cards.

   TO GO BACK TO LEFT ALIGNED, delete these rules. The split layout is untouched
   and stays left aligned, because there the offers column fills the other half.

   DOUBLED PARENT CLASS ON ALL THREE RULES BELOW, AND IT IS LOAD BEARING.
   The base rules further down are .boon-hero .boon-hero__x, which is (0,2,0) -
   exactly the same specificity a plain .boon-hero--stacked .boon-hero__x would
   have. They sit later in the file, so they were winning on source order alone
   and the max-width override here did nothing at all. Doubling the parent makes
   these (0,3,0), so they win wherever anyone moves them to.
   ────────────────────────────────────────────────────────────────────────── */
.boon-hero.boon-hero--stacked .boon-hero__copy {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Full width of the block, not its own measure - heading and body share the
   900px so the centred column has one edge rather than two. */
.boon-hero.boon-hero--stacked .boon-hero__body {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

.boon-hero.boon-hero--stacked .boon-hero__offers-label { justify-content: center; }

/* No live offers: one centred column. A layout change, not a hidden element, so
   nothing leaves a gap behind it. */
/* The empty state is the only place the vertical padding grows: with copy alone
   there is nothing else giving the band any height. */
/* The empty state is the only place bottom padding comes back: with copy alone
   there is nothing overhanging and nothing else giving the band any height. */
.boon-hero--no-offers .boon-hero__inner {
  grid-template-columns: 1fr;
  max-width: 860px;
  text-align: center;
  padding-top: 4.5em;
  padding-bottom: 4.5em;
}

.boon-hero--no-offers .boon-hero__body { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------------------
   COPY
--------------------------------------------------------------------------- */
.boon-hero .boon-hero__eyebrow {
  margin: 0;
  font-family: var(--hero-font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hero-blush);
}

.boon-hero .boon-hero__heading {
  margin: 22px 0 0;
  font-family: var(--hero-font);
  /* 5vw rather than 3.6vw so it actually scales through the tablet range: at
     3.6vw it stayed pinned to the floor until about 1000px wide, which meant a
     phone and an iPad got the same size. */
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 500;
  /* 1.08 was right for a single line and too tight once it wrapped to two. */
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: var(--hero-white);
  /* Elementor's kit lowercases h1. Same trap as the font-family: a direct
     declaration on the element beats anything inherited, so this has to be
     stated here rather than left alone. */
  text-transform: none;
  text-wrap: balance;
}

.boon-hero .boon-hero__body {
  margin-top: 26px;
  max-width: 56ch;
  font-family: var(--hero-font);
  font-size: 19px;
  font-weight: 300;
  line-height: 1.6;
  /* Softened white rather than a grey: #5C5C5C on near-black is unreadable, and
     the palette has no light warm neutral, so the step down comes from opacity. */
  color: rgba(255, 255, 255, 0.76);
}

.boon-hero .boon-hero__body p {
  margin: 0 0 12px;
  font-family: var(--hero-font);
  color: inherit;
}

.boon-hero .boon-hero__body p:last-child { margin-bottom: 0; }

.boon-hero .boon-hero__body a {
  color: var(--hero-peach-lt);
  text-decoration: underline;
}

.boon-hero__actions { margin: 38px 0 0; }

.boon-hero .boon-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 24px;
  border: 1px solid var(--hero-peach);
  border-radius: 5px;
  background: var(--hero-peach);
  color: var(--hero-ink);
  font-family: var(--hero-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.boon-hero .boon-hero__cta:hover,
.boon-hero .boon-hero__cta:focus {
  background: var(--hero-peach-lt);
  border-color: var(--hero-white);
  color: var(--hero-ink);
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   OFFERS COLUMN
--------------------------------------------------------------------------- */
/* Louder than a section label usually needs to be, on purpose. On a dark band the
   white cards read as "cards" before they read as "offers", and the badge alone
   was not enough to say which. */
.boon-hero .boon-hero__offers-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  font-family: var(--hero-font);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hero-peach-lt);
}

/* The four-point star the booking modal already pins beside its Special Offers
   tab. Reused rather than reinvented, so the two surfaces mark an offer the
   same way. */
.boon-hero__offers-star {
  font-size: 19px;
  line-height: 1;
  color: var(--hero-peach);
}

/* GRID, NOT FLEX COLUMN, for grid-auto-rows: 1fr - that is what makes every card
   the same height regardless of how much blurb it carries. A flex column stretches
   width, not height, and left them ragged. */
.boon-hero__list {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 14px;
}

.boon-hero--stacked .boon-hero__list {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: 1fr;
  gap: 18px;
}

/* --------------------------------------------------------------------------
   RESET THE MARKETING CARD - READ BEFORE EDITING
   Each row carries .boon-offer-card as well, because offers.js finds the
   screen-reader live region with btn.closest('.boon-offer-card'). Removing the
   class to "fix" the styling breaks the copy confirmation, so don't.

   The cost is offers.css's card rules apply here too: flex-direction column, a
   :not(--has-image) gradient at (0,2,0) and a hover lift. The doubled class below
   matches that specificity, and this sheet loads after 'boon-offers' because it is
   registered as its dependant.
-------------------------------------------------------------------------- */
.boon-hero-offer.boon-offer-card {
  display: grid;
  grid-template-columns: 176px 1fr;
  align-items: stretch;
  gap: 0;
  height: 100%;
  background: var(--hero-white);
  border: 1px solid var(--hero-card-bd);
  border-radius: 16px;
  overflow: hidden;
  /* A resting shadow, not just a hover one. The lower part of each card sits on
     the page background rather than the dark band, and a white card on a white
     page with a near-white border has almost no edge - the shadow is what keeps
     it reading as a card once it crosses over. */
  box-shadow: 0 18px 40px -26px rgba(39, 39, 39, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.boon-hero-offer.boon-offer-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 52px -26px rgba(39, 39, 39, 0.55);
}

/* No image: one column, so the body is not pushed off an empty track. */
.boon-hero-offer.boon-offer-card:not(.boon-hero-offer--has-media) {
  grid-template-columns: 1fr;
}

@media (prefers-reduced-motion: reduce) {
  .boon-hero-offer.boon-offer-card { transition: none; }
  .boon-hero-offer.boon-offer-card:hover { transform: none; }
}

/* Stacked mode is a card, not a row: image on top, full width. */
.boon-hero--stacked .boon-hero-offer.boon-offer-card,
.boon-hero--stacked .boon-hero-offer.boon-offer-card:not(.boon-hero-offer--has-media) {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
}

/* --------------------------------------------------------------------------
   MEDIA
   position:relative is what the absolutely centred play button in
   offers-video.css positions against. Do not remove it.
-------------------------------------------------------------------------- */
.boon-hero-offer__media {
  position: relative;
  overflow: hidden;
  background: var(--hero-blush);
  line-height: 0;
}

.boon-hero-offer__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* FIXED HEIGHT IN STACKED, not aspect-ratio. With auto-fit columns the last row
   can hold fewer cards, which makes those cards wider - and an aspect ratio then
   makes their images taller than the ones above. A fixed height keeps that strip
   identical on every card however the grid wraps. */
.boon-hero--stacked .boon-hero-offer__media {
  height: 196px;
}

/* --------------------------------------------------------------------------
   OFFER CONTENT
-------------------------------------------------------------------------- */
.boon-hero-offer__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  min-width: 0;
}

.boon-hero-offer__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Solid peach, not the soft blush it started as. On a white card sitting on a
   near-black band, blush on clay was almost invisible and the card read as
   ordinary content. This is the promo bar's BEST VALUE treatment, which is
   already the site's way of saying "this is the deal". */
.boon-hero-offer__badge {
  display: inline-block;
  font-family: var(--hero-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--hero-peach);
  color: var(--hero-ink);
}

.boon-hero-offer__ends {
  font-family: var(--hero-font);
  font-size: 12px;
  color: var(--hero-slate);
  white-space: nowrap;
}

.boon-hero .boon-hero-offer__title {
  margin: 0;
  font-family: var(--hero-font);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--hero-ink);
  /* Elementor lowercases headings - see the note on .boon-hero__heading. */
  text-transform: none;
}

.boon-hero .boon-hero-offer__blurb {
  margin: 0;
  font-family: var(--hero-font);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--hero-slate);
}

/* Emphasis inside a blurb, for the headline figure. A deeper peach than the
   brand #F9A981, which sits at roughly 2:1 on white and is not readable at 14px
   - and "50% off" is information, not decoration. Same hue, enough contrast. */
.boon-hero .boon-hero-offer__blurb strong,
.boon-hero .boon-hero-offer__blurb b {
  font-weight: 600;
  color: #B96B45;
}

/* margin-top:auto pins the action to the bottom, which is what makes equal-height
   cards line their buttons up rather than floating them mid-card. */
.boon-hero-offer__cta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 10px;
}

/* Doubled parent again - Elementor's kit emits `.elementor-kit-NNN button`
   (0,1,1), which beats a single class and repaints these as its own button. */
.boon-hero-offer .boon-hero-offer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: 6px;
  min-height: var(--hero-btn-h);
  padding: 0 15px;
  border: 1px solid var(--hero-peach-lt);
  border-radius: 5px;
  background: var(--hero-peach-lt);
  color: var(--hero-ink);
  font-family: var(--hero-font);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.boon-hero-offer .boon-hero-offer__btn:hover,
.boon-hero-offer .boon-hero-offer__btn:focus {
  background: var(--hero-peach);
  border-color: var(--hero-ink);
  color: var(--hero-ink);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   DISCOUNT CODE ROW
   The dashed row from the marketing card rather than a bare copy button: showing
   the code reads better than a button describing one, and it can be selected by
   hand if the clipboard call ever fails.
-------------------------------------------------------------------------- */
.boon-hero-offer__code-row {
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--hero-btn-h);
  border: 1.5px dashed var(--hero-peach-lt);
  border-radius: 5px;
  background: var(--hero-white);
  overflow: hidden;
}

/* No vertical padding, and an explicit line-height. The row's min-height sets the
   size and the flex centring does the rest - leaving the <code> to inherit the
   theme's line-height is what made this taller than the buttons beside it. */
.boon-hero-offer__code {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  font-family: var(--hero-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: var(--hero-ink);
  background: transparent;
  /* Selectable in one go, for when copying fails. */
  user-select: all;
}

.boon-hero-offer .boon-hero-offer__btn--copy {
  flex-shrink: 0;
  /* The row already carries the height and the border. */
  min-height: 0;
  border-radius: 0;
  border: none;
  padding: 0 16px;
}

/* Booking buttons sit under the code row on a discount card, so the row needs to
   take the full width and the buttons share the line beneath it. */
.boon-hero-offer__code-row { flex-basis: 100%; }

.boon-hero-offer .boon-hero-offer__btn--book {
  background: var(--hero-peach);
  border-color: var(--hero-peach);
}

.boon-hero-offer .boon-hero-offer__btn--book:hover,
.boon-hero-offer .boon-hero-offer__btn--book:focus {
  background: var(--hero-peach-lt);
  border-color: var(--hero-ink);
}

/* Shared 'is-copied' state from offers.js. */
.boon-hero-offer .boon-hero-offer__btn.is-copied {
  background: var(--hero-ink);
  border-color: var(--hero-ink);
  color: var(--hero-white);
}

.boon-hero-offer__btn-icon {
  font-size: 16px;
  line-height: 1;
}

/* ---------------------------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------------------------- */
/* Tablet and below: one column. Padding stays at 2em, which is the brief. */
@media (max-width: 1040px) {
  .boon-hero__inner {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  /* Equal heights stop being worth it once they are stacked in one column, and
     forcing them makes short offers very tall. */
  .boon-hero__list { grid-auto-rows: auto; }
}

@media (max-width: 560px) {
  /* Shallower overhang to match the smaller cards. */
  .boon-hero { --hero-overhang: 56px; }

  /* 2em at the sides, matching the gutter the rest of the mobile content uses. */
  .boon-hero__inner { padding: 3em 2em 0; }

  /* Smaller body copy, so the heading keeps its weight against it and the offer
     cards start higher up the screen. 19px is right beside a 52px heading and
     too close to it beside a 36px one. */
  .boon-hero .boon-hero__body {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.55;
  }

  .boon-hero__actions { margin-top: 30px; }

  .boon-hero--no-offers .boon-hero__inner {
    padding-top: 2.5em;
    padding-bottom: 2.5em;
  }

  /* Image on top rather than beside, or it squeezes the text into a column two
     words wide. */
  .boon-hero-offer.boon-offer-card,
  .boon-hero-offer.boon-offer-card:not(.boon-hero-offer--has-media) {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .boon-hero-offer__media,
  .boon-hero--stacked .boon-hero-offer__media {
    height: 176px;
  }

  .boon-hero .boon-hero__cta {
    width: 100%;
    justify-content: center;
  }
}