/* ==========================================================================
   Homepage
   ========================================================================== */

/* The hero itself — homepage, page and store alike — is in hero.css. */

/* --- Events & specials rail --------------------------------------------- */

.ca-promos {
  background: var(--ca-cream-warm);
}

.ca-promos__inner {
  padding-block: var(--ca-section-pad);
  padding-inline: 0;
}

.ca-promos__head {
  padding-inline: var(--ca-gutter);
  margin-bottom: 26px;
  text-align: center;
}
.ca-promos__head .ca-eyebrow { margin-bottom: 12px; }

.ca-promos__title {
  font-family: var(--ca-font-display);
  font-weight: 700;
  font-size: clamp(26px, 4.4vw, 44px);
  letter-spacing: var(--ca-tracking-tighter);
  color: var(--ca-ink);
  margin: 0;
}

/* The rail itself is the shared carousel (components.css). */
/* The card. Its width is the carousel's (520px, set in ca_render_promos()). */
.ca-promo {
  position: relative;
  background: var(--ca-white);
  border: 1px solid var(--ca-hairline);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--ca-shadow-md);
  text-decoration: none;
  color: inherit;
}

/*
 * 16:9 — wider and shorter than the old 4:3, so a landscape flyer keeps its
 * sides. `object-fit: cover` still crops, but now from the top and bottom
 * where there is usually margin, rather than from the edges where the text is.
 */
/* The photo's shape comes from Catch Air Settings → Images (or the block): .ca-img. */
.ca-promo__body { padding: 14px 18px; }

/*
 * The kicker (a date, or "This weekend") is a pill, like a photo card's badge.
 * Over the photo's top-left corner when there is a photo — so the text below
 * is one line, and the card one line shorter — or leading the title when not.
 * Its colour follows the section's accent, as the card badges do.
 */
.ca-promo__kicker {
  width: fit-content;
  margin: 0 0 8px;
  padding: 5px 11px;
  border-radius: var(--ca-r-pill);
  background: var(--ca-part-accent, var(--ca-orange-dark));
  color: var(--ca-cream);
  font-family: var(--ca-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}
.ca-promo--photo .ca-promo__kicker {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  margin: 0;
}
.ca-promo__title {
  font-family: var(--ca-font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ca-ink);
  margin: 0;
}