/* ==========================================================================
   Hero — every hero on the site

   One component, written by ca_render_hero() in inc/hero.php:

     section.ca-hero .ca-hero--<layout> .ca-hero--x-* .ca-hero--y-* [options]
       .ca-hero__frame           the rounded box; positioning context
         .ca-hero__slides        photos, cover-cropped, crossfading
         .ca-hero__scrim         the shade that makes copy readable
         .ca-hero__mascot        top-right corner
         .ca-hero__eyebrow       the pill, top-left corner
         .ca-hero__copy          title, lede, actions
       (anything after)          the store gallery, when stacked

   How the variants work
   ---------------------
   Nothing below restyles an element per variant. The base rule declares every
   adjustable value as a custom property with a default, and the element rules
   read only those properties. Each variant is a class that changes some of
   the properties — so the cascade, in this file's order, is the whole system:

     1. Base            .ca-hero { --every-value: default }
     2. Layout          .ca-hero--home / --page / --store
     3. Placement       .ca-hero--x-* / --y-*        (always written by PHP)
     4. Options         .ca-hero--h-*, --scrim-*     (only when chosen)
     5. Background      .ca-hero--solid / --plain    (decided by PHP)
     6. Inline style    --ca-hero-bg, --ca-hero-text, --ca-hero-accent-text,
                        --ca-hero-scrim-rgb          (free values, from PHP)

   Every class here has the same specificity, so a later group always wins
   over an earlier one. Keep new rules in their group.
   ========================================================================== */

/* --- 1. Base ------------------------------------------------------------- */

.ca-hero {
  /* The box */
  --ca-hero-radius: var(--ca-r-2xl);
  --ca-hero-shadow: var(--ca-shadow-xl);
  --ca-hero-bg: var(--ca-sand);
  --ca-hero-ratio: auto;
  --ca-hero-min-h: 340px;
  --ca-hero-max-h: none;

  /* Where the copy sits (set by the placement classes) */
  --ca-hero-x: center;
  --ca-hero-y: flex-end;
  --ca-hero-align: center;
  --ca-hero-mi: auto;           /* margin-inline for the title and lede */

  /* The copy block */
  --ca-hero-copy-max: 100%;
  --ca-hero-pad: clamp(22px, 4vw, 48px);
  --ca-hero-pad-top: var(--ca-hero-pad);
  /* Room the pill takes in the top corner; the copy never rises into it,
     even when it is taller than the box and centring no longer applies. */
  --ca-hero-clear: calc(var(--ca-corner-inset) + 44px);
  --ca-hero-pad-bottom: var(--ca-hero-pad);

  /* Type */
  --ca-hero-title-size: var(--ca-text-hero);
  --ca-hero-title-max: 18ch;
  --ca-hero-title-tracking: var(--ca-tracking-tighter);
  --ca-hero-title-shadow: 0 2px 18px rgba(20, 25, 43, 0.45);
  --ca-hero-lede-font: var(--ca-font-body);
  --ca-hero-lede-weight: 400;
  --ca-hero-lede-size: clamp(14px, 1.8vw, 18px);
  --ca-hero-lede-max: 48ch;
  --ca-hero-lede-gap: 14px;

  /* Colour defaults. The inline --ca-hero-text / --ca-hero-accent-text,
     when set, win over these — see the colour rules further down. */
  --ca-hero-text-default: #fff;
  --ca-hero-lede-default: rgba(255, 255, 255, 0.92);
  --ca-hero-accent-default: var(--ca-amber);

  /* The scrim: one colour, as channels, at three stops from the copy side */
  --ca-hero-scrim-rgb: 20 25 43;
  --ca-hero-scrim-dir: 0deg;
  --ca-hero-scrim-a1: 0.8;
  --ca-hero-scrim-a2: 0.35;
  --ca-hero-scrim-a3: 0.05;
  --ca-hero-scrim-s2: 42%;
  --ca-hero-scrim-s3: 70%;
  --ca-hero-scrim-strength: 1;

  /* Corners */
  --ca-hero-mascot-w: clamp(78px, 11vw, 150px);

  margin-bottom: var(--ca-section-pad);
}

.ca-hero__frame {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: var(--ca-hero-y);
  align-items: var(--ca-hero-x);
  width: 100%;
  aspect-ratio: var(--ca-hero-ratio);
  min-height: var(--ca-hero-min-h);
  max-height: var(--ca-hero-max-h);
  border-radius: var(--ca-hero-radius);
  overflow: hidden;
  box-shadow: var(--ca-hero-shadow);
  background: var(--ca-hero-bg);
}

.ca-hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/*
 * The slides stack; object-fit does the work, so whatever the source size,
 * the visible area is exactly the frame. The first ships active, so with no
 * JavaScript the hero is a still photo, not an empty box.
 */
.ca-hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.2s var(--ca-ease);
  will-change: opacity;
}

.ca-hero__slide.is-active { opacity: 1; }

.ca-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    var(--ca-hero-scrim-dir),
    rgb(var(--ca-hero-scrim-rgb) / calc(var(--ca-hero-scrim-a1) * var(--ca-hero-scrim-strength))) 0%,
    rgb(var(--ca-hero-scrim-rgb) / calc(var(--ca-hero-scrim-a2) * var(--ca-hero-scrim-strength))) var(--ca-hero-scrim-s2),
    rgb(var(--ca-hero-scrim-rgb) / calc(var(--ca-hero-scrim-a3) * var(--ca-hero-scrim-strength))) var(--ca-hero-scrim-s3)
  );
}

.ca-hero__mascot {
  position: absolute;
  top: var(--ca-corner-inset);
  right: var(--ca-corner-inset);
  z-index: 3;
  width: var(--ca-hero-mascot-w);
  max-width: none;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 10px 14px rgba(20, 25, 43, 0.28));
}

.ca-hero__copy {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--ca-hero-copy-max);
  padding: max(var(--ca-hero-pad-top), var(--ca-hero-clear)) var(--ca-hero-pad) var(--ca-hero-pad-bottom);
  text-align: var(--ca-hero-align);
}

/*
 * The text rules are two classes deep on purpose: the admin previews render
 * inside wp-admin, whose `.wrap h1`-style rules would otherwise win.
 */
.ca-hero .ca-hero__title {
  max-width: var(--ca-hero-title-max);
  margin: 0;
  margin-inline: var(--ca-hero-mi);
  padding: 0;
  font-family: var(--ca-font-display);
  font-size: var(--ca-hero-title-size);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: var(--ca-hero-title-tracking);
  color: var(--ca-hero-text, var(--ca-hero-text-default));
  text-shadow: var(--ca-hero-title-shadow);
  text-wrap: balance;
}

.ca-hero .ca-hero__title em {
  display: block;
  font-style: normal;
  color: var(--ca-hero-accent-text, var(--ca-hero-accent-default));
}

.ca-hero .ca-hero__lede {
  max-width: var(--ca-hero-lede-max);
  margin: var(--ca-hero-lede-gap) 0 0;
  margin-inline: var(--ca-hero-mi);
  font-family: var(--ca-hero-lede-font);
  font-size: var(--ca-hero-lede-size);
  font-weight: var(--ca-hero-lede-weight);
  line-height: 1.5;
  color: var(--ca-hero-text, var(--ca-hero-lede-default));
  text-wrap: balance;
}

.ca-hero .ca-hero__lede.is-accent {
  color: var(--ca-hero-accent-text, var(--ca-hero-accent-default));
}

.ca-hero .ca-hero__lede[hidden] { display: none; }

.ca-hero .ca-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--ca-hero-x);
  gap: 12px;
  margin: 22px 0 0;
}

/*
 * The outline button takes the hero's own text colour, so it reads over a
 * photo (white) and on the page (ink) alike — the same property as the title.
 */
.ca-hero .ca-hero__actions .ca-btn--outline {
  color: var(--ca-hero-text, var(--ca-hero-text-default));
  border-color: currentColor;
}

.ca-hero .ca-hero__actions .ca-btn--outline:hover {
  background: rgb(255 255 255 / 0.14);
}

.ca-hero--plain .ca-hero__actions .ca-btn--outline:hover {
  background: var(--ca-tint-hover);
}

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

/* --- 2. Layouts ---------------------------------------------------------- */

/* Homepage: a tall photo, the crossfading gallery, copy centred along the base. */
.ca-hero--home {
  --ca-hero-ratio: 16 / 10;
  /* --ca-vh: 1vh on the site; a fixed window height in wp-admin previews. */
  --ca-hero-max-h: min(calc(var(--ca-vh, 1vh) * 78), 720px);
  --ca-hero-min-h: 340px;
  --ca-hero-pad-bottom: clamp(40px, 6vw, 64px);
}

/* Portrait phones get a squarer crop so the headline still has room. */
@media (max-width: 700px) {
  .ca-hero--home {
    --ca-hero-ratio: 4 / 5;
    --ca-hero-max-h: calc(var(--ca-vh, 1vh) * 72);
    --ca-hero-min-h: 420px;
  }
}

/* Page: a shorter banner, copy on the left — the Food & Drinks layout. */
.ca-hero--page {
  --ca-hero-radius: var(--ca-r-xl);
  --ca-hero-shadow: var(--ca-shadow-lg);
  --ca-hero-min-h: clamp(300px, 34vw, 420px);
  --ca-hero-copy-max: 672px;   /* the prototype: 560px of copy plus its padding */
  --ca-hero-pad: clamp(24px, 5vw, 56px);
  --ca-hero-title-size: clamp(30px, 5.6vw, 54px);
  --ca-hero-title-max: 20ch;
  --ca-hero-title-shadow: none;
  --ca-hero-lede-size: clamp(15px, 1.8vw, 18px);
  --ca-hero-lede-max: 60ch;
  --ca-hero-scrim-a1: 0.9;
  --ca-hero-scrim-a2: 0.74;
  --ca-hero-scrim-a3: 0.12;
  --ca-hero-scrim-s2: 40%;
  --ca-hero-scrim-s3: 95%;
  --ca-hero-mascot-w: clamp(64px, 9vw, 120px);
}

/* Store: the banner over the gallery — name and catchphrase along the base. */
.ca-hero--store {
  --ca-hero-radius: var(--ca-r-xl);
  --ca-hero-shadow: var(--ca-shadow-lg);
  --ca-hero-ratio: auto;
  --ca-hero-min-h: 200px;
  --ca-hero-copy-max: none;
  --ca-hero-pad: clamp(20px, 4vw, 40px);
  --ca-hero-title-size: clamp(32px, 7vw, 60px);
  --ca-hero-title-max: none;
  --ca-hero-title-tracking: var(--ca-tracking-tightest);
  --ca-hero-title-shadow: none;
  --ca-hero-lede-font: var(--ca-font-display);
  --ca-hero-lede-weight: 600;
  --ca-hero-lede-size: clamp(16px, 2.4vw, 20px);
  --ca-hero-lede-max: none;
  --ca-hero-lede-gap: 8px;
  /* A store's catchphrase follows its name's colour unless a theme sets one. */
  --ca-hero-accent-default: var(--ca-hero-text, rgba(255, 255, 255, 0.92));
  --ca-hero-mascot-w: clamp(56px, 10vw, 104px);
}

/*
 * The store keeps its own scrim shape: dark at the base for the name, a
 * little at the top so the banner still reads behind the pill.
 */
.ca-hero--store .ca-hero__scrim {
  background: linear-gradient(
    180deg,
    rgb(var(--ca-hero-scrim-rgb) / calc(0.5 * var(--ca-hero-scrim-strength))) 0%,
    rgb(var(--ca-hero-scrim-rgb) / calc(0.12 * var(--ca-hero-scrim-strength))) 34%,
    rgb(var(--ca-hero-scrim-rgb) / calc(0.2 * var(--ca-hero-scrim-strength))) 58%,
    rgb(var(--ca-hero-scrim-rgb) / calc(0.72 * var(--ca-hero-scrim-strength))) 100%
  );
}

/* --- 3. Placement -------------------------------------------------------- */

/*
 * PHP always writes one x and one y class, from the layout or the editor's
 * choice. The scrim leans away from wherever the copy is.
 */
.ca-hero--x-left   { --ca-hero-x: flex-start; --ca-hero-align: left;   --ca-hero-mi: 0 auto; }
.ca-hero--x-center { --ca-hero-x: center;     --ca-hero-align: center; --ca-hero-mi: auto; }
.ca-hero--x-right  { --ca-hero-x: flex-end;   --ca-hero-align: right;  --ca-hero-mi: auto 0; }

.ca-hero--y-top    { --ca-hero-y: flex-start; --ca-hero-scrim-dir: 180deg; }
.ca-hero--y-middle { --ca-hero-y: center; }
.ca-hero--y-bottom { --ca-hero-y: flex-end;   --ca-hero-scrim-dir: 0deg; }

.ca-hero--y-middle.ca-hero--x-left  { --ca-hero-scrim-dir: 90deg; }
.ca-hero--y-middle.ca-hero--x-right { --ca-hero-scrim-dir: 270deg; }

/* Copy dead centre: an even shade, since there is no side to lean from. */
.ca-hero--y-middle.ca-hero--x-center {
  --ca-hero-scrim-a1: 0.4;
  --ca-hero-scrim-a2: 0.4;
  --ca-hero-scrim-a3: 0.4;
}

/* --- 4. Options ---------------------------------------------------------- */

.ca-hero--h-short {
  --ca-hero-ratio: auto;
  --ca-hero-max-h: none;
  --ca-hero-min-h: 220px;
}

.ca-hero--h-tall {
  --ca-hero-ratio: auto;
  --ca-hero-max-h: none;
  --ca-hero-min-h: clamp(420px, 52vw, 640px);
}

.ca-hero--scrim-light  { --ca-hero-scrim-strength: 0.55; }
.ca-hero--scrim-strong { --ca-hero-scrim-strength: 1.3; }
.ca-hero--scrim-none   { --ca-hero-scrim-strength: 0; }

/* --- 5. Background ------------------------------------------------------- */

/* A solid colour: ease the shade off so the colour reads true. */
.ca-hero--solid { --ca-hero-scrim-strength: 0.5; }

/*
 * Nothing behind it: the copy on the page, in the page's colours, with the
 * pill leading it in normal flow. No box, no corner, no mascot.
 */
.ca-hero--plain {
  --ca-hero-bg: transparent;
  --ca-hero-shadow: none;
  --ca-hero-radius: 0;
  --ca-hero-ratio: auto;
  --ca-hero-min-h: 0;
  --ca-hero-max-h: none;
  --ca-hero-pad: 0;
  --ca-hero-pad-top: 0;
  --ca-hero-pad-bottom: 0;
  --ca-hero-clear: 0px;
  --ca-hero-title-shadow: none;
  --ca-hero-text-default: var(--ca-ink);
  --ca-hero-lede-default: var(--ca-muted);
  --ca-hero-accent-default: var(--ca-orange-dark);
}

.ca-hero--plain .ca-hero__frame { overflow: visible; }

.ca-hero--plain .ca-hero__scrim,
.ca-hero--plain .ca-hero__slides,
.ca-hero--plain .ca-hero__mascot { display: none; }

/* Joined to what follows — the store gallery. */
.ca-hero--stacked .ca-hero__frame {
  border-radius: var(--ca-hero-radius) var(--ca-hero-radius) 0 0;
}

.ca-hero--stacked {
  --ca-hero-pad-bottom: calc(15px + var(--ca-hero-radius));
}

/*
 * The gallery keeps its rounded top and slides up over the banner by one
 * corner radius, so the banner's square bottom corners show in the notches
 * beside it — the inverted-corner join, with nothing drawn on.
 */
.ca-hero--stacked .ca-hero__frame + * {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--ca-hero-radius) * -1);
}

/* ==========================================================================
   The pill

   Mono, uppercase, fully rounded, with a pulsing dot. In normal flow by
   default, so it is safe anywhere; inside a hero frame it takes the top-left
   corner. One accent, --ca-hero-accent, colours it — teal unless a page, a
   setting or a store's live status says otherwise.
   ========================================================================== */

.ca-hero__eyebrow {
  --ca-hero-accent: var(--ca-teal);

  display: flex;
  align-items: center;
  gap: 9px;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 14px var(--ca-corner-inset);
  padding: 7px 14px;

  border: 1px solid var(--ca-teal-line);
  border-radius: var(--ca-r-pill);

  /* Opaque: over a photograph a translucent pill is unreadable in places. */
  background: var(--ca-cream);
  box-shadow: var(--ca-shadow-sm);

  color: var(--ca-teal);
  font-family: var(--ca-font-mono);
  font-size: var(--ca-text-pill);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--ca-tracking-label);
  text-transform: uppercase;
  text-align: left;
}

.ca-hero__frame > .ca-hero__eyebrow {
  position: absolute;
  top: var(--ca-corner-inset);
  left: var(--ca-corner-inset);
  z-index: 3;
  margin: 0;
  max-width: calc(100% - (var(--ca-corner-inset) * 2));
}

/* On the page itself, the pill leads the copy and follows its alignment. */
.ca-hero--plain .ca-hero__frame > .ca-hero__eyebrow {
  position: static;
  align-self: var(--ca-hero-x);
  margin: 0 0 14px;
  max-width: 100%;
}

.ca-hero__eyebrow-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: ca-twinkle 1.6s ease-in-out infinite;
}

/* The light pill trades colour for state; the dot and border follow. */
.ca-hero__eyebrow:not(.ca-hero__eyebrow--glass)[data-state="soon"]   { color: var(--ca-orange-dark); border-color: var(--ca-orange-line); }
.ca-hero__eyebrow:not(.ca-hero__eyebrow--glass)[data-state="closed"] { color: var(--ca-faint); border-color: var(--ca-hairline-str); }

/* Nothing configured: no pill, rather than a pill asserting "open". */
.ca-hero__eyebrow[data-state="unknown"] { display: none; }

/*
 * Over a picture: a solid dark chip so nothing bleeds through, the accent as
 * border and dot, light text. The store's live status still colours both.
 */
.ca-hero__eyebrow--glass {
  color: var(--ca-cream);
  border-color: var(--ca-hero-accent);
  border-width: 2px;
  background: var(--ca-ink);
  box-shadow: var(--ca-shadow-sm);
}

.ca-hero__eyebrow--glass .ca-hero__eyebrow-dot { background: var(--ca-hero-accent); }

.ca-hero__eyebrow--glass[data-state="soon"]   { --ca-hero-accent: var(--ca-orange); }
.ca-hero__eyebrow--glass[data-state="closed"] { --ca-hero-accent: #c7ceda; }

/* Kept so older markup using it still resolves. */
.ca-hero__eyebrow--inline { position: static; }

@media (max-width: 520px) {
  .ca-hero__eyebrow {
    font-size: 10px;
    letter-spacing: 0.12em;
    padding: 5px 11px;
    gap: 7px;
  }
  .ca-hero { --ca-hero-mascot-w: 64px; }
}

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

/* ==========================================================================
   Where the hero is shown for editing, not reading
   ========================================================================== */

/* The block in the editor: look, don't click through. */
.ca-hero-block .ca-hero a { pointer-events: none; }
.ca-hero-block .ca-hero { margin-bottom: 0; }