/* ============================================================
   Recipes page — 2-brand hero slider (Cho's Kitchen · Shin Shin)
   Loaded AFTER css/styles.css — reuses .wrap, .btn, :root tokens.
   ============================================================ */

/* Breadcrumb reused from other subpages */
/* Same layout/typography/spacing as contact.html's breadcrumb, but with no
   bar (transparent) and dark, readable colours for the light background.
   It overlays the top of the hero (absolute) so the hero — and the wavy
   ribbon inside it — flows full-height right up under the navbar. */
.crumbs{background:transparent;position:absolute;top:0;left:0;right:0;z-index:5}
.crumbs__inner{display:flex;align-items:center;gap:8px;height:48px;
  font-family:"DM Sans",sans-serif;font-size:14px;white-space:nowrap;overflow:hidden}
.crumbs a{color:var(--ink-soft);font-weight:500;flex:none;transition:.15s}
.crumbs a:hover{color:var(--cci-blue)}
.crumbs__sep{color:var(--silver);flex:none}
.crumbs__current{color:var(--cci-blue);font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis}

/* ---------- FIRST-SCREEN WRAPPER ----------
   Fills exactly one viewport below the sticky navbar. Only the navbar's
   own --nav-h token is referenced (navbar itself is untouched); the
   breadcrumb's height is absorbed automatically by the flex column. */
.rscreen{
  position:relative;
  display:flex;
  flex-direction:column;
  /* navbar is the normal sticky bar (like index.html), so it takes its own
     row above — fill exactly the remaining viewport below it */
  min-height:calc(100vh - var(--nav-h));   /* fallback */
  min-height:calc(100dvh - var(--nav-h));  /* dynamic viewport where supported */
  /* one continuous backdrop behind breadcrumb + hero (no seam) */
  background:
    radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #f7f7fa 55%, #f2f2f6 100%);
}
.rscreen main{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}

/* ---------- HERO SHELL ---------- */
.rhero{
  --brand:var(--gold);
  --brand-soft:var(--gold-soft);
  --brand-ribbon:var(--gold-soft);
  --brand-ribbon-back:var(--gold-50);
  position:relative;
  overflow:hidden;
  /* the hero grows to fill whatever height .rscreen leaves after the
     breadcrumb — no hard-coded navbar/breadcrumb heights here */
  flex:1 1 auto;
  min-height:0;
  display:flex;
  align-items:center;
  /* backdrop lives on .rscreen so breadcrumb + hero read as one surface */
  background:transparent;
  transition:--brand .4s;
}
/* Brand themes — swap colour tokens per active slide.
   --brand      → buttons / accents
   --brand-ink  → the massive wordmark (deeper shade, stays readable)
   --brand-ribbon → the vibrant wavy band behind it */
.rhero--chos{
  --brand:var(--gold);
  --brand-ink:#a5811a;            /* deep gold wordmark */
  --brand-soft:var(--gold-soft);
  --brand-ribbon:#eccb63;
  --brand-ribbon-back:#f6e6b0;
}
.rhero--shin{
  --brand:var(--cci-blue-500);
  --brand-ink:#2a63bd;            /* blue wordmark, like the logo */
  --brand-soft:#7ea9e4;
  --brand-ribbon:#6ea6e6;
  --brand-ribbon-back:#c4d9f5;
}

/* ---------- FLOATING FOOD CARDS ---------- */
.rhero__cards{position:absolute;inset:0;z-index:2;pointer-events:none}
/* two sets stacked — show only the one matching the active brand */
.rhero--chos .rhero__cards--shin,
.rhero--shin .rhero__cards--chos{display:none}
.rcard{
  position:absolute;
  width:clamp(88px,9vw,132px);
  aspect-ratio:1;
  border-radius:24px;
  overflow:hidden;
  background:#fff;
  border:4px solid #fff;
  box-shadow:0 22px 46px -20px rgba(21,21,27,.5);
  transition:transform .45s ease,border-color .45s ease;
  animation:rfloat 6s ease-in-out infinite;
}
.rcard img{width:100%;height:100%;object-fit:cover}
/* scattered across the hero */
.rcard--1{left:6%;  top:20%; transform:rotate(-7deg);  animation-delay:0s}
.rcard--2{left:20%; top:60%; transform:rotate(6deg);   animation-delay:.6s}
/* nudged up: the brand lock-up is taller than the old wordmark, so the
   eyebrow now sits where this card used to be */
.rcard--3{left:35%; top:5%;  transform:rotate(4deg);   animation-delay:1.1s}
.rcard--4{right:33%;top:76%; transform:rotate(-6deg);  animation-delay:1.6s}
.rcard--5{right:17%;top:18%; transform:rotate(7deg);   animation-delay:.9s}
.rcard--6{right:5%; top:56%; transform:rotate(-5deg);  animation-delay:1.4s}

@keyframes rfloat{
  0%,100%{translate:0 0}
  50%{translate:0 -14px}
}

/* ---------- CENTRAL BRAND CONTENT ---------- */
.rhero__inner{position:relative;z-index:3;text-align:center}
.rbrand{
  display:none;
  flex-direction:column;
  align-items:center;
  max-width:640px;
  margin-inline:auto;
}
.rbrand.is-active{display:flex;animation:rfade .5s ease both}
@keyframes rfade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.rbrand__logo{height:clamp(84px,9vw,132px);width:auto;margin-bottom:16px;object-fit:contain}
/* eyebrow sits ABOVE the brand lock-up */
.rbrand__eyebrow{
  display:inline-block;font-family:"DM Sans",sans-serif;font-weight:600;
  font-size:14px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brand);margin-bottom:16px;
}
/* ---------- BRAND LOCK-UP AS THE HEADLINE ----------
   The wordmark is the logo artwork itself, so <h1> becomes a centred image
   stack. Keeping it an <h1> preserves the page heading (alt text carries the
   brand name) while nothing renders as type. */
.rbrand__name--logo{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(10px,1.2vw,16px);
  font-size:0;line-height:0;text-shadow:none;
  margin:0 0 clamp(20px,2.2vw,30px);
}
.rbrand__mark{width:auto;height:clamp(72px,8vw,110px);max-width:100%;object-fit:contain;
  filter:drop-shadow(0 10px 24px rgba(20,16,79,.16))}
.rbrand__plaque{width:clamp(150px,15vw,196px);height:auto;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 10px 22px rgba(20,16,79,.16))}
/* the Shin Shin logo carries wide transparent padding (its lettering fills
   only 53% of the file's height) — crop to the artwork with a content-ratio
   frame so it matches the Cho's lock-up opposite */
.rbrand__mark--ss{width:clamp(260px,38vw,480px);height:auto;
  aspect-ratio:366/100;object-fit:cover;object-position:center}
.rbrand__name{
  font-family:"DM Sans",sans-serif;font-weight:700;
  font-size:clamp(48px,8.4vw,104px);
  line-height:.92;letter-spacing:-.03em;
  color:var(--brand-ink);
  margin:0 0 18px;
  /* white halo keeps the coloured wordmark legible over the ribbon */
  text-shadow:0 1px 0 #fff, 0 0 18px rgba(255,255,255,.7);
  transition:color .45s ease;
}
.rbrand__sub{
  font-size:clamp(15px,1.8vw,19px);
  color:var(--ink-soft);
  max-width:460px;margin:0 auto 30px;
}

/* ---------- CTA ---------- */
.rbrand__actions{display:inline-flex;align-items:center;gap:12px}
.rbtn{
  /* inherits .btn shape from styles.css; brand-coloured fill */
  background:var(--brand);color:#fff;border-color:var(--brand);
  box-shadow:0 14px 30px -12px color-mix(in srgb,var(--brand) 70%,transparent);
}
.rbtn:hover{filter:brightness(.94);transform:translateY(-2px)}
.rhero--chos .rbtn{color:#3a2c00}         /* gold needs dark ink for contrast */
.rbtn-icon{
  display:grid;place-items:center;flex:none;
  width:54px;height:54px;border-radius:50%;
  background:#fff;color:var(--brand);
  border:2px solid var(--brand);
  transition:.2s ease;
}
.rbtn-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.rbtn-icon:hover{background:var(--brand);color:#fff;transform:translateY(-2px)}

/* ---------- SLIDER CONTROLS ---------- */
.rhero__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:50px;height:50px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:#fff;border:1px solid var(--line);
  color:var(--ink);box-shadow:var(--shadow-sm);
  transition:.2s ease;
}
.rhero__arrow:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.rhero__arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.rhero__arrow--prev{left:24px}
.rhero__arrow--next{right:24px}

.rhero__dots{
  position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:4;
  display:flex;gap:10px;
}
.rdot{
  width:11px;height:11px;border-radius:50%;cursor:pointer;padding:0;
  background:rgba(21,21,27,.18);border:none;transition:.25s ease;
}
.rdot.is-active{background:var(--brand);width:30px;border-radius:6px}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .rcard{width:clamp(74px,15vw,104px);border-radius:20px}
  .rcard--3,.rcard--5{top:10%}
  .rcard--2{top:70%}
  .rcard--4{top:82%}
}

@media (max-width:640px){
  .rhero__inner{padding-inline:24px}
  /* keep only 4 cards on small screens to avoid crowding the text */
  .rcard--3,.rcard--4{display:none}
  .rcard--1{left:2%;top:16%}
  .rcard--2{left:6%;top:74%}
  .rcard--5{right:2%;top:15%}
  .rcard--6{right:5%;top:73%}
  .rcard{width:clamp(60px,20vw,88px)}
  .rbrand__logo{height:clamp(72px,20vw,96px);margin-bottom:12px}
  .rbrand__mark{height:clamp(64px,18vw,92px)}
  .rbrand__plaque{width:clamp(150px,40vw,200px)}
  .rbrand__mark--ss{width:clamp(210px,64vw,300px)}
  /* phones: the side arrows sat on the description line and clipped the first
     and last words — move them down onto the dots row instead */
  .rhero__arrow{width:42px;height:42px;top:auto;bottom:22px;transform:none}
  .rhero__arrow--prev{left:calc(50% - 76px)}
  .rhero__arrow--next{right:calc(50% - 76px)}
  .rhero__dots{bottom:38px}
  .rbrand__actions{flex-wrap:wrap;justify-content:center}
}

@media (max-width:400px){
  .rcard--2,.rcard--6{display:none}
}

/* Respect reduced-motion */
@media (prefers-reduced-motion:reduce){
  .rcard{animation:none}
}