/* ==========================================================================
   24carrots-skin.css
   Client skin for: 24 Carrots Bakery
   Theme: Boom12 Base
   Loaded after the theme's brand tokens (Theme Settings > Client skin file),
   so it may use the brand custom properties freely.

   Bound to the theme's real block architecture:
     .boom12-block[--type][--role-*][--layout-*] > .boom12-block__inner > component
   Components: boom12-hero / boom12-feature / boom12-newsletter /
               boom12-grid-block (+ boom12-grid) / boom12-embed-section /
               boom12-social-proof.  Buttons: boom12-button.

   This skin styles VISUAL TREATMENT only and adds a shared content container
   on __inner; it does not redeclare the theme's block wrappers.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. TOKEN MAPPING  ← EDIT HERE IF SCOTT'S VARIABLE NAMES DIFFER
   -------------------------------------------------------------------------- */
:root {
  --sk-primary:   var(--brand-primary,   #ED873F); /* carrot orange */
  --sk-secondary: var(--brand-secondary, #BADA55); /* sage/lime     */
  --sk-dark:      var(--brand-dark,      #363436); /* headings/text */
  --sk-surface:   var(--brand-surface,   #F9D9B3); /* peach wash    */
  --sk-elevated:  var(--brand-elevated,  #f6e7d3); /* raised surface */
  --sk-font:      var(--brand-font, "proxima-nova", "Helvetica Neue", Arial, sans-serif);

  --sk-text-muted: color-mix(in srgb, var(--sk-dark) 70%, var(--sk-surface));
  --sk-ink-on-primary: #ffffff;

  --sk-container: 1200px;            /* shared content width for non-hero sections */
  --sk-section-pad-y: clamp(3rem, 6vw, 5.5rem);
  --sk-section-pad-x: clamp(1.25rem, 5vw, 4rem);
  --sk-measure: 60ch;               /* readable line length for centered prose     */
  --sk-radius-pill: 999px;
  --sk-radius-card: 14px;
  --sk-split-gap: clamp(2rem, 5vw, 4.5rem);
}


/* --------------------------------------------------------------------------
   1. BLOCK SCAFFOLD  — shared container + vertical rhythm
   --------------------------------------------------------------------------
   Every section centers its inner content at --sk-container, EXCEPT the hero,
   which is intentionally full-bleed edge-to-edge (kept as designed).
   -------------------------------------------------------------------------- */
.boom12-block {
  font-family: var(--sk-font);
  color: var(--sk-dark);
}

.boom12-block__inner {
  max-width: var(--sk-container);
  margin-inline: auto;
  padding-inline: var(--sk-section-pad-x);
}

/* Vertical spacing between stacked sections */
.boom12-block--role-feature .boom12-block__inner,
.boom12-block--role-cta .boom12-block__inner,
.boom12-block--role-generic .boom12-block__inner {
  padding-block: var(--sk-section-pad-y);
}

/* Hero is the full-bleed exception: no container, no inner padding */
.boom12-block--hero .boom12-block__inner {
  max-width: none;
  margin-inline: 0;
  padding: 0;
}


/* --------------------------------------------------------------------------
   2. SHARED SECTION TYPOGRAPHY  (eyebrow / title / body / intro)
   -------------------------------------------------------------------------- */
.boom12-hero__eyebrow,
.boom12-feature__eyebrow,
.boom12-embed-section__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--sk-primary);
  margin: 0 0 0.75rem;
}

.boom12-block__title {
  font-weight: 700;
  line-height: 1.08;
  color: var(--sk-dark);
  margin: 0;
}
.boom12-hero__title    { font-size: clamp(2.25rem, 5vw, 3.25rem); line-height: 1.05; }
.boom12-feature__title { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
.boom12-newsletter__title,
.boom12-grid-block__title,
.boom12-embed-section__title,
.boom12-social-proof__title { font-size: clamp(1.6rem, 3vw, 2.25rem); }

.boom12-hero__body,
.boom12-feature__body,
.boom12-newsletter__body,
.boom12-grid-block__intro,
.boom12-social-proof__intro {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--sk-text-muted);
}
.boom12-hero__body p,
.boom12-feature__body p,
.boom12-newsletter__body p,
.boom12-grid-block__intro p,
.boom12-social-proof__intro p { margin: 0; }


/* --------------------------------------------------------------------------
   3. HERO  — .boom12-hero (full-bleed split-left, as approved)
   -------------------------------------------------------------------------- */
.boom12-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0;
  background: var(--sk-surface);
  overflow: hidden;
}
.boom12-hero__content {
  padding: var(--sk-section-pad-y) var(--sk-section-pad-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
}
.boom12-hero__eyebrow { margin-bottom: 0; }
.boom12-hero__body { max-width: 42ch; }
.boom12-hero__body p + p { margin-top: 0.75em; }
.boom12-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.boom12-hero__media {
  position: relative;
  min-height: 320px;
}
.boom12-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* --------------------------------------------------------------------------
   4. FEATURE  — .boom12-feature (split-left text + media)
   --------------------------------------------------------------------------
   Same split pattern as the hero but contained (sits inside __inner). Two
   feature blocks on the page alternate sides automatically (see :nth-of-type).
   -------------------------------------------------------------------------- */
.boom12-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--sk-split-gap);
}
.boom12-feature__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1rem;
}
.boom12-feature__body { max-width: 46ch; }
.boom12-feature__body p + p { margin-top: 0.75em; }
.boom12-feature__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.boom12-feature__media {
  border-radius: var(--sk-radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.boom12-feature__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Alternate image side on every second feature block for visual rhythm */
.boom12-block--feature-text:nth-of-type(even) .boom12-feature__content { order: 2; }
.boom12-block--feature-text:nth-of-type(even) .boom12-feature__media   { order: 1; }


/* --------------------------------------------------------------------------
   5. NEWSLETTER / CTA  — .boom12-newsletter (full-width, centered)
   -------------------------------------------------------------------------- */
.boom12-block--newsletter .boom12-block__inner {
  background: var(--sk-dark);
  border-radius: var(--sk-radius-card);
  /* re-inset so the dark panel has internal padding even though it's contained */
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.boom12-newsletter {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.boom12-newsletter__title { color: var(--sk-surface); }
.boom12-newsletter__body  { color: color-mix(in srgb, var(--sk-surface) 80%, #fff); }

.boom12-newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  width: 100%;
  margin-top: 0.5rem;
}
.boom12-newsletter__form input[type="email"] {
  flex: 1 1 260px;
  max-width: 340px;
  padding: 0.8rem 1.1rem;
  border-radius: var(--sk-radius-pill);
  border: 1.5px solid transparent;
  background: #fff;
  color: var(--sk-dark);
  font: inherit;
}
.boom12-newsletter__form input[type="email"]::placeholder { color: #9a9a9a; }
.boom12-newsletter__form input[type="email"]:focus {
  outline: none;
  border-color: var(--sk-primary);
}


/* --------------------------------------------------------------------------
   6. OFFERINGS GRID  — .boom12-grid-block / .boom12-grid (grid-3)
   --------------------------------------------------------------------------
   Container is empty until offerings are added; styling the grid + a generic
   card pattern so items render cleanly when populated.
   -------------------------------------------------------------------------- */
.boom12-grid-block {
  text-align: center;
}
.boom12-grid-block__title { margin-bottom: 0.75rem; }
.boom12-grid-block__intro {
  max-width: var(--sk-measure);
  margin: 0 auto 2.5rem;
}
.boom12-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  text-align: left;
}
/* Generic card treatment — adjust once the offering item markup is known */
.boom12-grid > * {
  background: var(--sk-elevated);
  border-radius: var(--sk-radius-card);
  overflow: hidden;
}
.boom12-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}


/* --------------------------------------------------------------------------
   7. EMBED SECTION  — .boom12-embed-section (full-width)
   -------------------------------------------------------------------------- */
.boom12-embed-section__head {
  text-align: center;
  max-width: var(--sk-measure);
  margin: 0 auto 2rem;
}
.boom12-embed-section__title { margin-top: 0.25rem; }
/* Embed/iframe placeholder framing */
.boom12-embed-section iframe,
.boom12-embed-section__embed {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--sk-radius-card);
  overflow: hidden;
  min-height: 360px;
}


/* --------------------------------------------------------------------------
   8. SOCIAL PROOF / REVIEWS  — .boom12-social-proof (full-width)
   -------------------------------------------------------------------------- */
.boom12-social-proof {
  text-align: center;
}
.boom12-social-proof__title { margin-bottom: 0.75rem; }
.boom12-social-proof__intro {
  max-width: var(--sk-measure);
  margin: 0 auto;
}


/* --------------------------------------------------------------------------
   9. BUTTONS  — .boom12-button
   --------------------------------------------------------------------------
   Base = solid carrot pill. In any actions row, first = solid, subsequent =
   dark ghost (gives the two-button hero its primary/secondary pairing).
   -------------------------------------------------------------------------- */
.boom12-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: var(--sk-radius-pill);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  border: 1.5px solid var(--sk-primary);
  background: var(--sk-primary);
  color: var(--sk-ink-on-primary);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.boom12-button:hover {
  background: color-mix(in srgb, var(--sk-primary) 88%, #000);
  border-color: color-mix(in srgb, var(--sk-primary) 88%, #000);
  color: var(--sk-ink-on-primary);
}

/* Secondary = any button after the first in an actions row = dark ghost */
.boom12-hero__actions .boom12-button:not(:first-child),
.boom12-feature__actions .boom12-button:not(:first-child) {
  background: transparent;
  color: var(--sk-dark);
  border-color: var(--sk-dark);
}
.boom12-hero__actions .boom12-button:not(:first-child):hover,
.boom12-feature__actions .boom12-button:not(:first-child):hover {
  background: var(--sk-dark);
  color: var(--sk-surface);
  border-color: var(--sk-dark);
}


/* --------------------------------------------------------------------------
   10. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .boom12-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  /* Hero stacks: text then image */
  .boom12-hero { grid-template-columns: 1fr; }
  .boom12-hero__content { order: 1; }
  .boom12-hero__media  { order: 2; min-height: 240px; }

  /* Feature stacks: text then image (override alternating order) */
  .boom12-feature { grid-template-columns: 1fr; gap: 1.75rem; }
  .boom12-block--feature-text .boom12-feature__content,
  .boom12-block--feature-text:nth-of-type(even) .boom12-feature__content { order: 1; }
  .boom12-block--feature-text .boom12-feature__media,
  .boom12-block--feature-text:nth-of-type(even) .boom12-feature__media { order: 2; }

  .boom12-grid { grid-template-columns: 1fr; }
}