/* ==========================================================================
   BACKGROUND RHYTHM
   The page alternates cream and tinted straight down the column, so every main
   block is separated from its neighbours by a tone change rather than by
   spacing alone:

     1. Hero     --cb-bg          cream
     2. Story    --cb-surface-alt tinted
     3. Video    --cb-bg          cream
     4. Visit    --cb-surface-alt tinted   (scoped: see below)
     5. FAQ      --cb-bg          cream    (via cb-faq--plain)

   Two of those five need care rather than a plain declaration.

   .cb-visit is shared with front-page.php and page-in-store-cafe.php, so it is
   tinted only under .cb-about. Its inner .cb-visit__panel stays --cb-surface,
   which now reads as a raised card on the tint instead of a near-invisible
   panel on matching cream.

   .cb-faq is a shared component rendered OUTSIDE .cb-about, so it cannot be
   reached by descendant scoping. It takes a cb-faq--plain modifier passed from
   the template instead. Without it the tinted FAQ would butt against the newly
   tinted Visit strip and the two would merge into one block.
   ========================================================================== */

/* ==========================================================================
   About page (page-about.php)
   Ported from the Ploy mockup's About composition: contained inner-page hero
   + alternating editorial story rows. The closing storefront strip reuses the
   shared .cb-visit* block from main.css, so no VISIT styles live here.
   All rules scoped under .cb-about so nothing leaks to other templates.
   ========================================================================== */

/* --- 1. Hero ------------------------------------------------------------- */
/* Contained split hero: calm cream copy column beside a bounded, capped photo,
   matching front-page.php's restrained hero. No full-bleed imagery. */
.cb-about__hero { padding-block: clamp(1.5rem, 4vw, 3rem); }
.cb-about__hero-inner {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .cb-about__hero-inner { grid-template-columns: 1.05fr 0.95fr; }
}
.cb-about__hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 42rem;
}
.cb-about__hero-eyebrow { margin-bottom: 1rem; }
.cb-about__hero-title { font-size: var(--cb-text-5xl); margin: 0; max-width: 16ch; }
.cb-about__hero-copy {
  margin-top: 1.25rem;
  max-width: 38rem;
  font-size: var(--cb-text-lg);
  line-height: 1.7;
  color: var(--cb-text-muted);
}
.cb-about__hero-copy + .cb-about__hero-copy { margin-top: 0; }
.cb-about__hero-copy:not(:last-of-type) { margin-bottom: 1.05rem; }
.cb-about__hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }
.cb-about__hero-media {
  align-self: start; /* matches .cb-hero__media on the home page */
  margin: 0;
  overflow: hidden;
  border-radius: var(--cb-radius-xl);
  background: var(--cb-surface-alt);
}
.cb-about__hero-image {
  width: 100%;
  height: 100%;
  aspect-ratio: 5 / 4;
  max-height: 28rem; /* was 30rem; every other hero caps at 28rem */
  object-fit: cover;
  object-position: center;
}

/* --- 2. Story rows ------------------------------------------------------- */
.cb-about__story { background: var(--cb-surface-alt); padding-block: var(--cb-section-y); }
.cb-about__rows { display: grid; gap: clamp(3rem, 5vw, 5rem); }
.cb-about__row {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .cb-about__row { grid-template-columns: 1fr 1fr; }
  /* Alternating rows flip the media to the right. */
  .cb-about__row--reverse .cb-about__figure { order: 2; }
  .cb-about__row--reverse .cb-about__row-copy { order: 1; }
}
.cb-about__figure { margin: 0; }
/* Show the photo at its full, natural aspect ratio (no crop). */
.cb-about__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--cb-radius-xl);
}
.cb-about__row-copy { display: flex; flex-direction: column; align-items: flex-start; }
.cb-about__row-title { font-size: var(--cb-text-4xl); margin: 0.5rem 0 0; }
.cb-about__row-body {
  margin-top: 1.5rem;
  font-size: var(--cb-text-lg);
  line-height: 1.7;
  color: var(--cb-text-muted);
}
.cb-about__row-copy .cb-btn { margin-top: 2rem; }

/* --- 3. Process video ---------------------------------------------------- */
/* Wide stage rather than another image+text split: the Story row above already
   uses that rhythm, and the video's subject is fine detail that needs width.
   Stays on --cb-bg because the Story band is --cb-surface-alt and two tinted
   bands back to back erase the boundary between them. The frame's border and
   radius carry the structure instead, matching .cb-visit__panel below it. */
/* --cb-video-measure caps the FRAME only. The steps and the footer carry their
   own, wider measure (see .cb-about__steps), because this one is derived from
   viewport height and is too narrow to hold a four-card row.

   The cap is on WIDTH, never height. With aspect-ratio: 16/9 in play, a
   max-height would let the box grow wider than 16:9, and object-fit: cover would
   then crop left and right, clipping the ends off the burned-in captions. The vh
   term expresses the same intent safely: hold the derived height near 56% of the
   viewport so the heading and the frame share one screen. */
.cb-about__video {
  padding-block: var(--cb-section-y);
  --cb-video-measure: min(54rem, 100%, calc(56vh * 16 / 9));
}
.cb-about__video-head { max-width: 46rem; margin-inline: auto; text-align: center; }
.cb-about__video-head .cb-eyebrow--caps { margin-bottom: 0.75rem; }
.cb-about__video-title { font-size: var(--cb-text-4xl); margin: 0; }
.cb-about__video-lede {
  margin-top: 1rem;
  font-size: var(--cb-text-lg);
  line-height: 1.7;
  color: var(--cb-text-muted);
}

.cb-about__video-figure {
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  max-width: var(--cb-video-measure);
}

/* aspect-ratio reserves the box before the poster decodes, so the block
   contributes nothing to CLS. The cocoa fill is what shows if the poster
   attachment ID is still unset. */
.cb-about__video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--cb-radius-xl);
  border: var(--cb-border-width) solid var(--cb-border);
  background: var(--cb-inverse);
}
.cb-about__video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  object-fit: cover;
}

/* Playback controls. The pause button is a WCAG 2.2.2 requirement for a looping
   autoplay video, so it is a permanent part of the frame rather than something
   revealed on hover: a control you have to discover is not a control.

   TOP-RIGHT, not bottom. The film burns its step captions into a bar across the
   bottom ~11% of the picture, and those captions are the only narration it has.
   Controls at bottom-left covered them by 77 rendered pixels. The top of the
   picture carries no burned-in content, so the controls live there. */
.cb-about__video-controls {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 0.5rem;
  padding: clamp(0.75rem, 2vw, 1.25rem);
}
.cb-about__video-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  border: 0;
  border-radius: var(--cb-radius-pill, 999px);
  background: color-mix(in srgb, var(--cb-cocoa) 72%, transparent);
  color: var(--cb-text-inverse);
  font: inherit;
  font-size: var(--cb-text-xs);
  line-height: 1;
  cursor: pointer;
  /* Keeps the pill readable over a bright frame without a hard edge. */
  backdrop-filter: blur(6px);
  transition: background-color 180ms ease;
}
.cb-about__video-ctrl:hover { background: var(--cb-cocoa); }
.cb-about__video-ctrl:focus-visible {
  outline: 2px solid var(--cb-cream-light);
  outline-offset: 2px;
}
.cb-about__video-ctrl-icon { display: block; flex: none; }

/* One icon per state. The frame carries is-playing / is-muted, so the buttons
   never need their innerHTML rewritten. */
.cb-about__video-ctrl-icon--play,
.cb-about__video-ctrl-icon--unmuted { display: none; }
.cb-about__video-frame:not(.is-playing) .cb-about__video-ctrl-icon--pause { display: none; }
.cb-about__video-frame:not(.is-playing) .cb-about__video-ctrl-icon--play { display: block; }
.cb-about__video-frame:not(.is-muted) .cb-about__video-ctrl-icon--muted { display: none; }
.cb-about__video-frame:not(.is-muted) .cb-about__video-ctrl-icon--unmuted { display: block; }

/* Steps double as the text equivalent for a video with no caption track, so they
   are a real ordered list and the numbers come from a counter, not from markup. */
.cb-about__steps {
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  /* The steps get their OWN measure, wider than the frame's.
     --cb-video-measure is derived from viewport HEIGHT so the 16:9 frame stays
     inside one screen. Reusing it here strangled the cards: on a 1440x711 window
     it resolves to 708px, and four columns in that space are 153px each, narrow
     enough that "Paint the mold" wrapped onto three lines. The cards only need
     to stay readable, so they cap on width alone. */
  max-width: min(66rem, 100%);
  padding: 0;
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  counter-reset: cb-step;
}
/* Each step is a card, so the four read as a set of discrete stages rather than
   four columns of loose text. --cb-surface sits a shade lighter than the section's
   --cb-bg, which is enough separation without a heavy border or a drop shadow.

   Cards are flex columns and the grid stretches every card in a row to the height
   of the tallest, so they are only as tidy as the copy is even. The step bodies
   are held to 84-97 characters for exactly that reason. */
.cb-about__step {
  counter-increment: cb-step;
  display: flex;
  flex-direction: column;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  background: var(--cb-surface);
  border: var(--cb-border-width) solid var(--cb-border);
  border-radius: var(--cb-radius-md);
  box-shadow: var(--cb-shadow-soft);
}
.cb-about__step-title {
  margin: 0;
  font-size: var(--cb-text-base);
  font-weight: var(--cb-weight-heading);
  display: flex;
  /* Centre, not baseline: the numeral is now a circular badge rather than a
     bare digit, and baseline alignment would hang it below the title. */
  align-items: center;
  gap: 0.6rem;
}
/* The numeral comes from a counter, so the markup stays a plain ordered list and
   the badge cannot fall out of step with it. */
.cb-about__step-title::before {
  content: counter(cb-step);
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--cb-accent);
  color: var(--cb-cocoa);
  display: grid;
  place-items: center;
  font-size: var(--cb-text-xs);
  font-weight: var(--cb-weight-heading);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cb-about__step-body {
  margin: 0.6rem 0 0;
  font-size: var(--cb-text-sm);
  line-height: 1.7;
  color: var(--cb-text-muted);
}

/* Footer follows the steps' measure, not the frame's, so the bridge line and CTA
   sit centred under the card row rather than under the narrower video. */
.cb-about__video-foot {
  margin: clamp(2rem, 4vw, 2.75rem) auto 0;
  max-width: min(66rem, 100%);
  text-align: center;
}
.cb-about__video-bridge {
  margin: 0 0 1.5rem;
  font-size: var(--cb-text-lg);
  line-height: 1.7;
}

@media (min-width: 560px) {
  .cb-about__steps { grid-template-columns: repeat(2, 1fr); }
}
/* 4-across only from 1100px. Below that the row would divide into cards too
   narrow to hold a two-word title on one line, and 2x2 reads better than four
   cramped columns. Deliberately NOT auto-fit: with four items, auto-fit happily
   settles on three columns and orphans the fourth on its own row. */
@media (min-width: 1100px) {
  .cb-about__steps { grid-template-columns: repeat(4, 1fr); }
}
/* NO narrow-screen 4:3 override here, unlike .cb-contact-tour__frame.
   That pattern crops a Street View embed, where losing the edges costs nothing.
   This video burns its step captions into the picture, and object-fit: cover in a
   4:3 box crops left and right, which would clip the ends off the longest of them
   ("Step 4: Capping the bonbons and popping them out of the molds"). The frame
   stays 16:9 at every width so the captions survive intact. */
@media (prefers-reduced-motion: reduce) {
  .cb-about__video-ctrl { transition: none; }
}

/* --- 5. Background rhythm ------------------------------------------------- */
/* See the note at the top of this file. Hero, Story and Video already carry
   their own backgrounds; these two close the alternation. */

/* Visit strip: tinted on About only. .cb-visit is shared with front-page.php and
   page-in-store-cafe.php, so this must stay scoped under .cb-about. */
.cb-about .cb-visit { background: var(--cb-surface-alt); }

/* FAQ band: plain cream, so it does not merge with the tinted Visit strip above
   it. The modifier is passed from the template because .cb-faq renders outside
   .cb-about and cannot be reached by descendant scoping. */
.cb-faq--plain { background: var(--cb-bg); }