/* =============================================================================
   BOON AESTHETICS - SPECIAL OFFERS
   offers/assets/offers.css

   Scoped to .boon-offers. Unlike the booking modal stylesheet this does NOT use
   !important - the offers grid sits in normal page flow rather than inside an
   overlay that has to beat Elementor.

   BUT ORDINARY SPECIFICITY IS NOT ENOUGH, WHICH THIS FILE ORIGINALLY ASSUMED.
   Elementor's global kit styles bare elements as `.elementor-kit-NNN button`,
   `.elementor-kit-NNN p` and so on - (0,1,1), which beats any single class. So
   every rule here targeting an element the kit also styles (buttons, headings,
   paragraphs) is written as `.boon-offers .boon-offer-card__x` (0,2,0). Rules on
   elements the kit leaves alone (divs, spans, the article) are left bare.

   The symptom when this is got wrong is specific and worth recognising: the
   element keeps its position and layout, because the kit sets no layout
   properties, but is repainted in the theme's colours - a copy-code button with
   peach text on white instead of white on peach, for instance.
   ============================================================================= */

.boon-offers {
  --boon-peach:      #F9A981;
  --boon-peach-mid:  #FDC7B0;
  --boon-peach-soft: #FBB79D;
  --boon-blush:      #FEE5DB;
  --boon-coral:      #DD9D81;
  --boon-dark:       #272727;
  --boon-mid:        #5C5C5C;
  --boon-white:      #FFFFFF;
  --boon-border:     #f0ebe8;
  --boon-radius:     16px;
  --boon-radius-sm:  10px;
  --boon-font:       'DM Sans', sans-serif;
  --boon-offers-cols: 3;

  font-family: var(--boon-font);
  color: var(--boon-dark);
}

.boon-offers__heading {
  font-family: var(--boon-font);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 600;
  color: var(--boon-dark);
  margin: 0 0 28px;
  text-align: center;
}

.boon-offers__grid {
  display: grid;
  grid-template-columns: repeat(var(--boon-offers-cols), minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* ---------------------------------------------------------------------------
   CARD
--------------------------------------------------------------------------- */
.boon-offer-card {
  display: flex;
  flex-direction: column;
  background: var(--boon-white);
  border: 1px solid var(--boon-border);
  border-radius: var(--boon-radius);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.boon-offer-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(39, 39, 39, 0.08);
}

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

/* Cards with no image get a soft blush wash so a mixed grid still reads evenly */
.boon-offer-card:not(.boon-offer-card--has-image) {
  background: linear-gradient(160deg, var(--boon-blush) 0%, var(--boon-white) 62%);
}

.boon-offer-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--boon-blush);
}

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

.boon-offer-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  flex: 1 1 auto;
}

/* ---------------------------------------------------------------------------
   BADGE
--------------------------------------------------------------------------- */
.boon-offer-card__badge {
  align-self: flex-start;
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  padding: 6px 11px;
  border-radius: 20px;
  background: var(--boon-blush);
  color: var(--boon-coral);
}

.boon-offer-card__badge--onimage {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--boon-white);
  color: var(--boon-coral);
  box-shadow: 0 2px 8px rgba(39, 39, 39, 0.12);
}

/* ---------------------------------------------------------------------------
   TEXT

   Wrapper-scoped for the same reason as the buttons below: these are an <h3> and
   a <p>, and Elementor's kit sets typography as `.elementor-kit-NNN h3` /
   `.elementor-kit-NNN p` (0,1,1), which beats a bare class and repaints the blurb
   in the theme's body colour instead of --boon-mid.

   NOT scoped, deliberately: .boon-offer-card__sr-status further down. The
   treatment card carries that class too and offers.js depends on finding it, so
   it must keep applying outside .boon-offers or the live region becomes visible
   text on the treatment page.
--------------------------------------------------------------------------- */
.boon-offers .boon-offer-card__title {
  font-family: var(--boon-font);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--boon-dark);
  margin: 0;
}

/* Quieter than the badge and title. A deadline, not a selling point. */
.boon-offers .boon-offer-card__ends {
  margin: -4px 0 0;
  font-size: 13px;
  line-height: 1.3;
  color: var(--boon-mid);
}

/* --boon-dark, not --boon-mid. Moved with the modal blurb on Zaf's feedback,
   2026-08-21. This is the same sentence the booking modal shows, read by the same
   person, so the two must not drift apart - see the longer note on
   .bb-offer-blurb in offers-tab.css. */
.boon-offers .boon-offer-card__blurb {
  font-size: 15px;
  line-height: 1.55;
  color: var(--boon-dark);
  margin: 0;
}

/* Emphasis inside a blurb, for the headline figure. Deeper than the brand
   --boon-peach, which is about 2:1 on white and unreadable at this size. */
.boon-offers .boon-offer-card__blurb strong,
.boon-offers .boon-offer-card__blurb b {
  font-weight: 600;
  color: #B96B45;
}

/* ---------------------------------------------------------------------------
   BUTTONS

   SCOPED WITH THE WRAPPER (0,2,0), NOT BARE (0,1,0). DON'T SIMPLIFY.
   Elementor's global kit emits button styling as `.elementor-kit-NNN button`,
   which is (0,1,1) and beats a single class. The file header's claim that
   "ordinary specificity is enough" here was wrong: the copy-code button rendered
   as the theme's outlined button - peach text on white with square corners
   instead of white on peach - because every property Elementor's kit sets
   (background, colour, border, padding, radius) overrode this rule.

   .boon-offers is the shortcode wrapper and is always present on this surface.
   The treatment card is unaffected either way: it uses .boon-toffer__btn, styled
   in offers-treatment.css, which solves the same problem the same way.
--------------------------------------------------------------------------- */
.boon-offers .boon-offer-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  align-self: flex-start;
  padding: 12px 22px;
  border: none;
  border-radius: 999px;
  background: var(--boon-peach);
  color: var(--boon-white);
  font-family: var(--boon-font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.boon-offers .boon-offer-card__btn:hover,
.boon-offers .boon-offer-card__btn:focus-visible {
  background: var(--boon-coral);
  color: var(--boon-white);
}

.boon-offers .boon-offer-card__btn:focus-visible {
  outline: 2px solid var(--boon-dark);
  outline-offset: 2px;
}

/* Code + copy button row */
.boon-offer-card__code-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: auto;
  border: 1.5px dashed var(--boon-peach-soft);
  border-radius: var(--boon-radius-sm);
  background: var(--boon-white);
  overflow: hidden;
}

.boon-offer-card__code {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  font-family: var(--boon-font);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--boon-dark);
  background: transparent;
  /* Let people select the code manually if the copy button ever fails */
  user-select: all;
}

.boon-offers .boon-offer-card__btn--copy {
  margin-top: 0;
  align-self: stretch;
  border-radius: 0;
  padding: 12px 18px;
  flex-shrink: 0;
}

.boon-offers .boon-offer-card__btn--copy.is-copied {
  background: var(--boon-dark);
}

/* Visually hidden live region for the copy confirmation */
.boon-offer-card__sr-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   EMPTY STATE
--------------------------------------------------------------------------- */
.boon-offers--empty .boon-offers__empty {
  font-family: var(--boon-font);
  font-size: 15px;
  color: var(--boon-mid);
  text-align: center;
  margin: 0;
  padding: 28px 20px;
  background: var(--boon-blush);
  border-radius: var(--boon-radius);
}

/* ---------------------------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .boon-offers__grid {
    grid-template-columns: repeat(min(2, var(--boon-offers-cols)), minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .boon-offers__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .boon-offer-card__body { padding: 20px; }
}