/* ============================================================
   Shin Shin — Recipe & Ingredient Guide
   Clean cookbook editorial layout. Inherits navbar / footer /
   .wrap / .btn / .eyebrow from styles.css; accents in CCI blue.
   ============================================================ */

:root{
  --rg-navy:#1f1a6e;         /* = --cci-blue */
  --rg-blue:#3f7fd6;         /* = --cci-blue-500 */
  --rg-blue-50:#eef1fb;
  --rg-paper:#ffffff;
  --rg-paper-2:#f7f8fc;
  --rg-line:#e7e7ee;
  --rg-line-strong:#d7d8e3;
  --rg-ink:#15151b;
  --rg-ink-soft:#54545e;
}

/* ============================================================
   HERO — breadcrumb overlaid left (no bar) + title + filter dropdown
   ============================================================ */
.rg-hero{position:relative;border-bottom:1px solid var(--rg-line);
  background:radial-gradient(130% 130% at 10% 0%, var(--rg-blue-50) 0%, var(--rg-paper) 60%);
  padding:0 0 clamp(34px,5vw,52px)}
.rg-hero__inner{position:relative;z-index:2;max-width:820px;margin-inline:0 auto}

/* breadcrumb — overlaid inside the hero (no separate bar); same top row
   position/left alignment/height as contact.html's breadcrumb */
.rg-hero__crumbs{position:relative;z-index:2;display:flex;align-items:center;gap:8px;height:48px;
  font-family:"DM Sans",sans-serif;font-size:14px;white-space:nowrap;overflow:hidden}
.rg-hero__crumbs a{color:var(--rg-ink-soft);font-weight:500;flex:none;transition:.15s}
.rg-hero__crumbs a:hover{color:var(--rg-blue)}
.rg-hero__crumbs-sep{color:var(--silver);flex:none}
.rg-hero__crumbs-current{color:var(--rg-navy);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* hero body — 2 columns: text + back button (left) / flavour picker (right).
   Areas keep the desktop layout while letting mobile stack text→pick→back. */
.rg-hero__grid{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:clamp(24px,5vw,72px);row-gap:clamp(20px,3vw,32px);align-items:end;
  grid-template-areas:"text ." "back pick";
  margin-top:clamp(6px,1.5vw,14px)}
.rg-hero__text{grid-area:text;max-width:640px}

/* back to recipes — Shin Shin brand blue, bottom of left column */
.rg-back{grid-area:back;justify-self:start;display:inline-flex;align-items:center;gap:7px;
  font-family:"DM Sans",sans-serif;font-weight:600;font-size:14px;color:#fff;
  background:var(--rg-blue);border:1px solid var(--rg-blue);border-radius:100px;padding:9px 17px 9px 12px;transition:.18s ease}
.rg-back svg{width:16px;height:16px}
.rg-back:hover{background:var(--rg-navy);border-color:var(--rg-navy);color:#fff}
.rg-back:hover svg{transform:translateX(-2px);transition:transform .18s ease}

.rg-hero .eyebrow{display:inline-block;margin-bottom:12px}
.rg-hero__title{font-family:"DM Sans",sans-serif;font-weight:700;color:var(--rg-ink);
  font-size:clamp(30px,5vw,52px);line-height:1.06;letter-spacing:-.03em;margin:0 0 14px}
.rg-hero__lede{font-size:clamp(16px,1.5vw,19px);line-height:1.7;color:var(--rg-ink-soft);margin:0;max-width:640px}

/* ---------- product filter DROPDOWN — right column, bottom aligned ---------- */
.rg-hero__pick{grid-area:pick;justify-self:end;text-align:right}
.rg-hero__picklabel{display:block;font-family:"DM Sans",sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rg-ink-soft);margin-bottom:9px}
.rg-select{position:relative;width:min(320px,60vw);margin-left:auto;text-align:left}
.rg-select__btn{width:100%;display:flex;align-items:center;gap:12px;cursor:pointer;text-align:left;
  font-family:"DM Sans",sans-serif;font-weight:600;font-size:16px;color:var(--rg-navy);
  background:#fff;border:1.5px solid var(--rg-line-strong);border-radius:14px;padding:8px 14px 8px 8px;transition:.18s ease}
.rg-select__btn:hover{border-color:var(--rg-blue)}
.rg-select.is-open .rg-select__btn{border-color:var(--rg-blue);box-shadow:0 0 0 4px var(--rg-blue-50)}
.rg-select__thumb{width:40px;height:40px;border-radius:10px;object-fit:contain;background:var(--rg-blue-50);padding:4px;flex:none}
.rg-select__text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rg-select__caret{width:12px;height:8px;flex:none;color:var(--rg-ink-soft);transition:transform .2s}
.rg-select.is-open .rg-select__caret{transform:rotate(180deg)}
.rg-select__menu{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40;margin:0;padding:6px;list-style:none;
  background:#fff;border:1px solid var(--rg-line);border-radius:14px;box-shadow:0 24px 50px -24px rgba(31,26,110,.4);
  max-height:334px;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(8px);transition:.16s ease}
.rg-select.is-open .rg-select__menu{opacity:1;visibility:visible;transform:translateY(0)}
.rg-select__opt{display:flex;align-items:center;gap:11px;width:100%;cursor:pointer;text-align:left;
  font-family:"DM Sans",sans-serif;font-weight:500;font-size:15px;color:var(--rg-ink);
  background:none;border:0;border-radius:10px;padding:8px 10px;transition:.12s}
.rg-select__opt img{width:34px;height:34px;border-radius:8px;object-fit:contain;background:var(--rg-blue-50);padding:3px;flex:none}
.rg-select__opt:hover{background:var(--rg-blue-50);color:var(--rg-navy)}
.rg-select__opt.is-active{background:var(--rg-navy);color:#fff}
.rg-select__opt.is-active img{background:rgba(255,255,255,.16)}

/* ============================================================
   RECIPE — cookbook spread
   ============================================================ */
.rg-recipe{padding:clamp(34px,5vw,60px) 0 clamp(40px,6vw,72px);background:var(--rg-paper)}
.rg-recipe__grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}

/* big food photo — dish on a soft tinted panel, pack as an inset.
   Same box as the Cho's Kitchen guide: bottom-aligned so its lower edge lands
   on the last row of the stats block, sized from its own width (1.15/1) so it
   stays landscape at every width rather than stretching to the grid row. */
.rg-media{margin:0;align-self:end}
.rg-media__stage{position:relative;aspect-ratio:1.15/1;border-radius:18px;
  background:radial-gradient(120% 120% at 30% 20%, var(--rg-blue-50) 0%, var(--rg-paper-2) 70%);
  border:1px solid var(--rg-line);display:flex;align-items:center;justify-content:center;
  padding:5% 6%;overflow:hidden}
.rg-media__dish{max-width:94%;max-height:94%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 28px 34px rgba(31,26,110,.22));transition:opacity .4s ease,transform .5s ease}
.rg-media__pack{position:absolute;right:5%;bottom:5%;width:26%;max-width:150px;height:auto;
  object-fit:contain;filter:drop-shadow(0 14px 20px rgba(31,26,110,.28));
  transition:opacity .4s ease,transform .5s ease}
.rg-recipe.is-swapping .rg-media__dish,.rg-recipe.is-swapping .rg-media__pack{opacity:0}

/* intro column */
.rg-intro__type{display:inline-block;margin-bottom:12px;color:var(--rg-blue)}
.rg-intro__title{font-family:"DM Sans",sans-serif;font-weight:700;color:var(--rg-navy);
  font-size:clamp(26px,3.4vw,42px);line-height:1.1;letter-spacing:-.02em;margin:0}
.rg-intro__rule{width:56px;height:3px;border-radius:3px;background:var(--rg-blue);margin:18px 0 18px}
.rg-intro__desc{font-size:16px;line-height:1.75;color:var(--rg-ink-soft);margin:0 0 26px;max-width:520px}

/* stats: 2 columns — one row per method (Method · Minutes, Method 2 ·
   Minutes 2), then Serves · Difficulty. The inner rules are the 1px gap showing
   the line colour through, not cell borders: a method row is hidden when its
   product has no time for it, and nth-child border rules would still count the
   hidden cells and draw the wrong edges. */
.rg-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  border:1px solid var(--rg-line);border-radius:14px;overflow:hidden;background:var(--rg-line)}
.rg-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;
  padding:18px 10px;background:var(--rg-paper)}
.rg-stat[hidden]{display:none}
.rg-stat__ic{width:26px;height:26px;fill:none;stroke:var(--rg-blue);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
/* a method like "Boil + Toss" draws one icon per step, side by side */
.rg-stat__icons{display:flex;align-items:center;gap:7px}
.rg-stat__val{font-family:"DM Sans",sans-serif;font-weight:700;font-size:17px;color:var(--rg-navy);line-height:1.1}
.rg-stat__lbl{font-family:"DM Sans",sans-serif;font-weight:500;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rg-ink-soft)}

/* ---------- ingredients / method / spec ---------- */
.rg-detail{display:grid;grid-template-columns:1fr 1fr .9fr;gap:clamp(28px,4vw,56px);
  margin-top:clamp(40px,5vw,64px);padding-top:clamp(34px,4vw,48px);border-top:1px solid var(--rg-line)}
.rg-detail__h{font-family:"DM Sans",sans-serif;font-weight:700;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rg-navy);margin:0 0 20px;padding-bottom:12px;
  border-bottom:2px solid var(--rg-navy);display:inline-block}

.rg-ing__group{margin-bottom:20px}
.rg-ing__group:last-child{margin-bottom:0}
.rg-ing__label{display:flex;align-items:center;gap:9px;font-family:"DM Sans",sans-serif;font-weight:600;
  font-size:14px;color:var(--rg-navy);margin:0 0 6px}
.rg-ing__label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rg-blue);flex:none}
.rg-ing__items{margin:0;font-size:14.5px;line-height:1.7;color:var(--rg-ink-soft)}

.rg-method{margin:0;padding:0;list-style:none;counter-reset:step}
.rg-method li{position:relative;counter-increment:step;padding:0 0 18px 44px;font-size:15px;
  line-height:1.65;color:var(--rg-ink)}
.rg-method li::before{content:counter(step);position:absolute;left:0;top:-2px;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--rg-navy);color:#fff;font-family:"DM Sans",sans-serif;font-weight:600;font-size:14px}
.rg-method li:not(:last-child)::after{content:"";position:absolute;left:15px;top:30px;bottom:6px;
  width:1px;background:var(--rg-line-strong)}

.rg-spec{margin:0}
.rg-spec div{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-bottom:1px solid var(--rg-line)}
.rg-spec div:first-child{padding-top:0}
.rg-spec dt{font-family:"DM Sans",sans-serif;font-weight:700;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--rg-blue)}
.rg-spec dd{margin:0;font-size:14.5px;line-height:1.55;color:var(--rg-ink)}

/* ============================================================
   VIDEO
   ============================================================ */
.rg-video{position:relative;overflow:hidden;background:var(--rg-navy);padding:clamp(48px,7vw,84px) 0}
.rg-video__inner{position:relative;z-index:2}
/* playful accents (homepage burst vibe) */
.rg-video__decor{position:absolute;inset:0;z-index:1;pointer-events:none}
.rg-video__burst{position:absolute;top:-56px;left:-52px;width:200px;height:auto;opacity:.42;
  animation:rg-spin 26s linear infinite}
@keyframes rg-spin{to{transform:rotate(360deg)}}
.rg-video__head{text-align:center;max-width:640px;margin:0 auto clamp(26px,3vw,38px)}
.rg-video__head .eyebrow{color:var(--rg-blue);display:inline-block;margin-bottom:10px}
.rg-video__title{font-family:"DM Sans",sans-serif;font-weight:700;color:#fff;
  font-size:clamp(24px,3.4vw,40px);line-height:1.12;letter-spacing:-.02em;margin:0}
.rg-video__frame{position:relative;max-width:920px;margin:0 auto;aspect-ratio:16/9;border-radius:16px;
  overflow:hidden;background:#000;box-shadow:0 30px 60px -24px rgba(0,0,0,.6)}
.rg-video__frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* graceful poster when a product has no video yet */
.rg-video__poster{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;background:
    radial-gradient(120% 120% at 50% 0%, #2a2496 0%, #1f1a6e 70%)}
.rg-video__poster img{width:min(48%,240px);height:auto;filter:drop-shadow(0 20px 30px rgba(0,0,0,.5))}
.rg-video__soon{font-family:"DM Sans",sans-serif;font-weight:600;font-size:14px;letter-spacing:.06em;
  color:rgba(255,255,255,.82);display:inline-flex;align-items:center;gap:8px}
.rg-video__soon::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--rg-blue)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:920px){
  .rg-recipe__grid{grid-template-columns:1fr;gap:28px}
  .rg-media__stage{aspect-ratio:4/3}
  .rg-detail{grid-template-columns:1fr 1fr}
  .rg-detail__col--spec{grid-column:1 / -1}
  .rg-spec{display:grid;grid-template-columns:repeat(2,1fr);gap:0 32px}
  /* hero collapses to one column: text → picker → back */
  .rg-hero__grid{grid-template-columns:1fr;grid-template-areas:"text" "pick" "back";
    align-items:stretch;row-gap:clamp(16px,3vw,24px)}
  .rg-hero__text{max-width:none}
  .rg-hero__pick{justify-self:stretch;text-align:left}
  .rg-select{width:100%;max-width:none;margin-left:0}
}
/* the method steps and the storage note carry deliberate <br class="brk">
   breaks; a phone column is too narrow to honour them, so let the copy wrap
   on its own there */
@media (max-width:720px){
  .brk{display:none}
}
@media (max-width:640px){
  .rg-detail{grid-template-columns:1fr;gap:32px}
  .rg-spec{grid-template-columns:1fr}
  .rg-media__stage{aspect-ratio:1/1}
  .rg-video__burst{width:132px;top:-34px;left:-34px}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
  .rg-media__dish,.rg-media__pack{transition:none}
  .rg-video__burst{animation:none}
}