/* ==========================================================================
   SECTIONS — the layout system
   ==========================================================================

   One place that decides how wide a section is, how much air sits around it,
   and what its label and heading look like. Everything else composes from
   these.

   The problem this replaces: each block carried its own width, padding and
   heading sizes, so a fix in one place left the next section subtly different,
   and specificity wars broke out whenever two blocks met. Now a block says
   *what* it is and this file says *how* it sits.

   Three primitives:

     .ca-section   vertical rhythm — the air above and below
     .ca-container horizontal measure — the width and the gutter
     .ca-heading   the label / title / lede stack

   A block uses them together and adds only what makes it that block.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container — the one measure
   -------------------------------------------------------------------------- */

.ca-container {
  width: 100%;
  max-width: var(--ca-width);
  margin-inline: auto;
  padding-inline: var(--ca-gutter);
}

.ca-container--narrow { max-width: var(--ca-width-narrow); }
.ca-container--prose  { max-width: var(--ca-width-prose); }
.ca-container--flush  { padding-inline: 0; }

/*
 * A full-bleed band: colour spans the viewport, contents stay on the measure.
 * The band is the element; the container inside it does the constraining, so
 * the two jobs never fight.
 */
.ca-bleed {
  width: 100%;
  margin-inline: 0;
  max-width: none;
}

/* --------------------------------------------------------------------------
   Section — the vertical rhythm
   -------------------------------------------------------------------------- */

/*
 * The size variants adjust the gap above a section rather than its padding.
 * Padding is now only about the room inside a tint, so changing it here would
 * make a "small" tinted section look squashed rather than simply closer.
 */
.ca-section--sm    { margin-top: calc(var(--ca-section-gap) / 2); }
.ca-section--lg    { margin-top: calc(var(--ca-section-gap) * 2); }
.ca-section--flush { margin-top: 0; }

/* Two tinted sections in a row should read as one band, not two stripes. */
.ca-section + .ca-section.is-same-tint { padding-top: 0; }

/* --------------------------------------------------------------------------
   Surfaces — the tints a section can sit on
   -------------------------------------------------------------------------- */

.ca-surface--cream { background: var(--ca-cream); }
.ca-surface--sand  { background: var(--ca-sand); }
.ca-surface--sky   { background: var(--ca-sky); }
.ca-surface--lilac { background: var(--ca-lilac); }
.ca-surface--warm  { background: var(--ca-cream-warm); }
.ca-surface--white { background: var(--ca-white); }
.ca-surface--ink   { background: var(--ca-ink); color: var(--ca-on-dark); }

/* --------------------------------------------------------------------------
   Heading stack — label, title, lede

   Every section that has a heading uses this, so the relationship between the
   three lines is decided once. A block never sets its own heading size.
   -------------------------------------------------------------------------- */

.ca-heading { margin-bottom: var(--ca-heading-gap); }

.ca-heading--center { text-align: center; }
.ca-heading--center .ca-heading__lede { margin-inline: auto; }
.ca-heading--center .ca-heading__label { margin-inline: auto; }

.ca-heading__label {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto var(--ca-label-gap) 0;
  font-family: var(--ca-font-mono);
  font-size: var(--ca-text-label);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--ca-tracking-label);
  text-transform: uppercase;
  color: var(--ca-teal);
}

.ca-heading__label--orange { color: var(--ca-orange-dark); }
.ca-heading__label--warm   { color: var(--ca-faint-warm); }
.ca-heading__label--muted  { color: var(--ca-faint); }

/*
 * The prefix is drawn rather than typed, so the copy stays clean and a
 * translator or editor cannot accidentally lose it.
 */
.ca-heading__label::before {
  content: "//";
  opacity: 0.75;
}

.ca-heading__label--pill {
  font-size: var(--ca-text-pill);
  padding: 6px 13px;
  border: 1px solid currentColor;
  border-radius: var(--ca-r-pill);
  background: var(--ca-teal-tint);
}
.ca-heading__label--pill::before { content: none; }

/*
 * The pulsing dot. A pill uses it in place of the // prefix, so the two never
 * both appear.
 */
.ca-heading__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: ca-twinkle 1.6s ease-in-out infinite;
}

/*
 * Open / closed state, applied wherever a label carries data-state. Colour is
 * traded rather than layered so the border and dot follow via currentColor.
 */
[data-state="soon"].ca-heading__label {
  color: var(--ca-orange-dark);
  background: rgba(242, 103, 43, 0.08);
}

[data-state="closed"].ca-heading__label {
  color: var(--ca-faint);
  background: var(--ca-tint);
}

/* Nothing configured: no dot, since there is no status to pulse about. */
[data-state=""].ca-heading__label .ca-heading__dot { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ca-heading__dot { animation: none; }
}

.ca-heading__title {
  margin: 0;
  font-family: var(--ca-font-display);
  font-size: var(--ca-text-section);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: var(--ca-tracking-tighter);
  color: var(--ca-ink);
  text-wrap: balance;
}

.ca-heading__title--lg { font-size: var(--ca-text-section-lg); }
.ca-heading__title--sm { font-size: var(--ca-text-section-sm); }

.ca-heading__lede {
  max-width: var(--ca-measure);
  margin: 12px 0 0;
  color: var(--ca-muted);
  font-size: var(--ca-text-lede);
  line-height: 1.6;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Grid — how a section lays out repeated items

   One grid, sized by a variable. A block sets --ca-item to whatever its cards
   want to be and gets consistent wrapping and centring for free.

   Fixed basis, never `1fr`: with `1fr` a row of two stretches wider than a row
   of three, so the same page shows two card sizes.
   -------------------------------------------------------------------------- */

.ca-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--ca-gap);
}

.ca-grid > * {
  flex: 0 1 var(--ca-item, 280px);
  min-width: 0;
  max-width: 100%;
  margin-inline: 0;
  margin-block: 0;
}

.ca-grid--tight { --ca-gap: 10px; }
.ca-grid--wide  { --ca-gap: 24px; }

/* Items that size to their own content, like chips. */
.ca-grid--auto > * { flex: 0 0 auto; }

/* Below this, a fixed basis strands a column mid-screen. */
@media (max-width: 700px) {
  .ca-grid:not(.ca-grid--auto) > * { flex-basis: 100%; }
}

/* --------------------------------------------------------------------------
   Rail — a horizontal run that scrolls once it overflows
   -------------------------------------------------------------------------- */

.ca-rail { overflow: hidden; }

.ca-rail__track {
  display: flex;
  gap: var(--ca-gap);
  justify-content: center;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block: 4px 10px;
}

.ca-rail__track > * {
  flex: 0 0 var(--ca-item, 300px);
  scroll-snap-align: start;
}

/*
 * Once it scrolls it must not also be centred, or the first item is cut off
 * at the left edge with no way to reach it.
 */
.ca-rail__track--scrolls { justify-content: flex-start; }

/* Edge fade, applied with a mask so it works over any background. */
.ca-rail--fade {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--ca-edge-fade), #000 calc(100% - var(--ca-edge-fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--ca-edge-fade), #000 calc(100% - var(--ca-edge-fade)), transparent 100%);
}

/* ==========================================================================
   Section rhythm

   One number decides how far apart every section on the site sits, and it is
   the same 16px that separates the store info card from its map.

   Two jobs, deliberately kept apart:

     the gap BETWEEN sections   --ca-section-gap   a margin
     the room INSIDE a tint     --ca-section-pad   padding

   They were the same property before, which is why the spacing was uneven: a
   tinted band's internal room was adding to the gap, so two plain sections sat
   16px apart while two tinted ones sat 52px apart. As a margin, the gap is the
   gap no matter what the section is made of.

   Margin-top rather than a sibling selector, because section-level elements
   are several different classes and matching every pairing between them would
   be a grid of selectors that quietly misses the pair nobody thought of.
   ========================================================================== */

/*
 * Every section-level element, listed once.
 *
 * A class missing from this list gets no gap at all, which is how the Q&A
 * ended up flush against the block below it — the closing CTA is
 * `.ca-mk-cta`, and that was in the padding list but not this one.
 */
.ca-section,
.ca-marquee,
.ca-promos,
.ca-paycor,
.ca-page-hero,
.ca-loc-hero,
.ca-mk-band,
.ca-mk-cta,
.ca-mk-callout,
.ca-mk-media,
.ca-mk-hero,
.ca-mk-locations,
.ca-legal,
.ca-office,
.ca-footer {
  margin-top: var(--ca-section-gap);
}

/* Only the untinted ones give up their padding; a tint keeps its room. */
.ca-section,
.ca-paycor,
.ca-loc-hero,
.ca-mk-media,
.ca-mk-hero,
.ca-mk-locations,
.ca-legal {
  padding-block: 0;
}

/* Anything carrying a background needs room inside it. */
.ca-section[class*="ca-surface--"],
.ca-marquee,
.ca-promos,
.ca-mk-band,
.ca-mk-callout,
.ca-mk-cta {
  padding-block: var(--ca-section-pad);
}

/*
 * Two tinted bands in a row meet directly. A strip of page showing between two
 * colours reads as a mistake rather than as a change of section.
 */
.ca-mk-band + .ca-mk-band,
.ca-marquee + .ca-promos,
.ca-promos + .ca-marquee {
  margin-top: 0;
}

/* The first thing on a page sits against the header, not below a gap. */
.ca-hero,
#ca-main > :first-child,
.ca-page-content > :first-child { margin-top: 0; }