/* ==========================================================================
   Class home (js/screens/class.js) — Figma 02 Class Page
   ========================================================================== */
.screen-class { background: var(--bg); }
.screen-class .scroller { padding-bottom: calc(var(--safe-bottom) + 52px); }

/* ---------- Hero (Figma "Card", 393×457) ---------- */
.cls-hero { position: relative; height: 457px; overflow: hidden; background: var(--caviar); }
.cls-hero-img { position: absolute; top: 0; left: calc(50% - 293.5px); width: 812px; height: 457px; overflow: hidden; }
.cls-hero-img img { position: absolute; left: -3.82%; top: -2.58%; width: 102.74%; height: 102.58%; }
.cls-hero-grad {
  position: absolute; left: 0; right: 0; top: 138px; bottom: 0;
  background: linear-gradient(180deg, rgba(44,44,44,0) 5.016%, rgba(0,0,0,.8) 86.094%);
}
.cls-hero-text {
  position: absolute; left: 0; right: 0; bottom: 24px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.cls-sticker {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
  background: var(--tomato); color: #fff;
  font: 700 12px/1 var(--font-sans); letter-spacing: 1.2px; text-transform: uppercase;
}
.cls-sticker.wine { background: var(--wine); }
.cls-hero h1 { width: 340px; max-width: calc(100% - 32px); color: #fff; margin-top: 8px; }
.cls-hero-by { color: var(--cream); margin-top: 8px; }
.cls-hero .rating { margin-top: 16px; }

/* Overall progress (Figma "Progress", 6px) */
.cls-progress { position: relative; height: 6px; background: #d9d9d9; }
.cls-progress i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--success); transition: width .6s var(--ease-out); }

/* ---------- Tabs (Figma "Class tabs", sticky under the compact header) ---------- */
.cls-tabs {
  position: sticky; top: calc(var(--safe-top) + 56px); z-index: 20;
  display: flex; height: 55px; background: var(--bg);
}
.cls-tabs button {
  flex: 1 1 50%; padding-top: 16px; align-self: stretch; text-align: center;
  font: 700 14px/22.75px var(--font-sans); letter-spacing: 1.4px; text-transform: uppercase;
  color: #232323; transition: color .2s;
}
.cls-tabs button.on { color: var(--tomato); }
.cls-tabs-ink {
  position: absolute; left: 0; bottom: 0; width: 50%; height: 1px; background: var(--tomato);
  transition: transform .3s var(--ease-out);
}
.cls-tabs-ink.overview { transform: translateX(100%); }

.cls-pane { padding: 0 16px; }
.cls-pane-class { padding-top: 24px; }

/* ---------- All content / Recipes only toggle (Figma "Content Toggle") ---------- */
.cls-toggle {
  position: relative; height: 49px; padding: 4px; border-radius: 100px; background: var(--neutral-light);
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 5px;
}
.cls-toggle-pill {
  position: absolute; left: 4px; top: 4px; bottom: 4px; width: calc(50% - 6.5px);
  background: #fff; border-radius: 100px; transition: transform .3s var(--ease-out);
}
.cls-toggle.recipes .cls-toggle-pill { transform: translateX(calc(100% + 5px)); }
.cls-toggle button {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 100px; font: 400 14px/19.6px var(--font-sans); color: var(--caviar);
}
.cls-toggle button.on { font-weight: 700; }

.cls-content { margin-top: 24px; transition: opacity .14s ease; }
.cls-content.swap { opacity: 0; }

/* ---------- Class Sections ---------- */
.cls-sections { display: flex; flex-direction: column; gap: 16px; }
.cls-sec { background: #fff; border: 1px solid var(--neutral-light-shade); border-radius: 8px; overflow: hidden; }
.cls-sec-head { position: relative; height: 247px; }
.cls-sec-art { position: absolute; left: 0; right: 0; top: 0; height: 103px; overflow: hidden; background: var(--neutral-light); }
.cls-sec-art img { position: absolute; object-fit: cover; }
.cls-art-s1 { left: calc(50% - 222.5px); top: -36px; width: 409px; height: 186.4px; }
.cls-art-s2 { left: calc(50% - 254.5px); top: -67px; width: 509px; height: 264px; }
.cls-art-s3 { left: 0; top: -5px; width: 100%; height: 203px; }
.cls-sec-num { position: absolute; left: 50%; top: 86px; width: 32px; height: 32px; transform: translateX(-50%); }
.cls-sec-num img { position: absolute; inset: 0; }
.cls-sec-num b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 20px/20px var(--font-sans); color: #fff; }
.cls-sec.done .cls-sec-num img { animation: pop .35s var(--ease-out); }
.cls-sec-title { position: absolute; left: 8px; right: 8px; top: 134px; text-align: center; color: var(--caviar); white-space: nowrap; }
.cls-sec-sum { position: absolute; left: 0; right: 0; top: 179px; display: flex; justify-content: center; gap: 16px; }
.cls-sum-item { display: inline-flex; align-items: center; gap: 4px; font: 400 14px/17px var(--font-sans); color: var(--neutral-dark); white-space: nowrap; }
.cls-segs { position: absolute; left: 16px; right: 16px; top: 219px; display: flex; gap: 6px; }
.cls-segs i { flex: 1 1 0; height: 4px; background: var(--neutral-light-shade); transition: background .3s; }
.cls-segs i:first-child { border-radius: 100px 0 0 100px; }
.cls-segs i:last-child { border-radius: 0 100px 100px 0; }
.cls-segs i.on { background: var(--success); }

.cls-sec-fold { overflow: hidden; }
.cls-sec-fold.anim { transition: height .38s var(--ease-out); }
.cls-sec-items { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--neutral-light); }
.cls-sec-toggle {
  width: 100%; height: 58px; display: flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 14px/22.4px var(--font-sans); color: var(--caviar);
}
.cls-caret { transform: rotate(90deg); transition: transform .3s var(--ease-out); }
.cls-caret.down { transform: rotate(-90deg); }

/* Up next (Figma 72:11117) — shown when an in-progress section is collapsed */
.cls-upnext { display: flex; flex-direction: column; gap: 16px; padding: 16px; background: var(--neutral-light); }
.cls-upnext-title { font: 700 16px/26px var(--font-sans); color: var(--caviar); }

/* Recipes only (Figma 72:10955) */
.cls-recipes { display: flex; flex-direction: column; gap: 8px; padding: 16px; margin-top: -7px; background: var(--neutral-light); border-radius: 8px; }

/* Mark class as completed (Figma "Mark as cooked checkbox") */
.cls-mark {
  display: flex; align-items: center; gap: 8px; width: calc(100% - 32px); margin: 40px 16px 0;
  padding: 8px; border-radius: 48px; background: var(--neutral-light);
  font: 400 16px/22.4px var(--font-sans); color: var(--caviar); text-align: left;
}
.cls-mark-box { width: 32px; height: 32px; border-radius: 100px; background: #fff; border: 1px solid var(--neutral-light-shade); flex-shrink: 0; position: relative; }
.cls-mark.checked .cls-mark-box { border-color: transparent; background: none; }
.cls-mark-box img { position: absolute; inset: -1px; animation: pop .3s var(--ease-out); }

/* ---------- My rating / Comments ---------- */
.cls-rule { border: 0; border-top: 1px solid var(--neutral-light-shade); margin: 0; }
.cls-rating { margin-top: 40px; }
.cls-h-sans { font: 700 24px/27px var(--font-sans); color: #232323; }
.cls-rating .cls-h-sans { margin-top: 40px; }
.cls-stars { display: flex; gap: 16px; margin-top: 24px; }
.cls-star { width: 32px; height: 32px; }
.cls-star img { width: 32px; height: 32px; }
.cls-star.on img { animation: pop .3s var(--ease-out); }
.cls-star:active { transform: scale(.9); }

.cls-comments { margin-top: 40px; cursor: pointer; }
.cls-comments-row { display: flex; align-items: center; justify-content: space-between; margin-top: 40px; }
.cls-cm-line { display: flex; align-items: flex-start; gap: 8px; font: 400 16px/26px var(--font-sans); color: #232323; }
.cls-cm-rating { margin-top: 16px; }
.cls-cm-rating + .cls-cm-line { margin-top: 16px; }
.cls-cm-stars { display: flex; gap: 8px; }
.cls-cm-caret { flex-shrink: 0; margin-top: 6px; }

/* ---------- Overview tab (Figma 72:10982) ---------- */
.cls-ov-intro { margin-top: 40px; font: 400 18px/29.25px var(--font-sans); color: var(--caviar); text-align: center; }
.cls-ov-rule { width: 120px; margin: 32px auto 0; border: 0; border-top: 1px solid var(--tomato); }
.cls-ov { display: flex; flex-direction: column; gap: 40px; margin-top: 40px; }
.cls-ov-video { height: 260px; border: 1px solid var(--neutral-light-shade); border-radius: 8px; overflow: hidden; background: #fff; }
.cls-ov-media { position: relative; display: block; width: 100%; height: 203px; margin-top: -1px; overflow: hidden; background: var(--caviar); }
.cls-ov-media > img { position: absolute; left: -10.5%; top: -18px; width: 124.4%; height: 252px; object-fit: cover; }
.cls-play {
  position: absolute; left: 50%; top: calc(50% + .5px); transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 8px; padding: 8px 24px; border-radius: 48px;
  background: rgba(255,255,255,.95); font: 700 18px/25.2px var(--font-sans); color: var(--caviar); white-space: nowrap;
  transition: transform .15s ease;
}
.cls-ov-media:active .cls-play { transform: translate(-50%, -50%) scale(.96); }
.cls-ov-video-foot { display: flex; justify-content: space-between; align-items: flex-start; padding: 15px 18px 0 15px; }
.cls-ov-video-foot p { color: var(--caviar); }
.cls-ov-meta { display: inline-flex; align-items: center; gap: 8px; margin-top: 3.5px; font: 500 12px/normal var(--font-sans); letter-spacing: 1.2px; color: var(--neutral-dark); white-space: nowrap; }

.cls-contains { background: #f9f6e7; border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.cls-caps { font: 700 14px/22.75px var(--font-sans); letter-spacing: 1.4px; text-transform: uppercase; color: #232323; }
.cls-contains ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cls-contains li { display: flex; align-items: center; gap: 16px; font: 400 16px/22.4px var(--font-sans); color: var(--caviar); }

.cls-meet { display: flex; flex-direction: column; gap: 16px; }
.cls-meet h2, .cls-learn h2 { color: #232323; }
.cls-inst {
  display: flex; align-items: center; gap: 16px; padding: 16px; text-align: left;
  background: #fff; border: 1px solid var(--neutral-light-shade); border-radius: 16px;
  box-shadow: 0 0 16px rgba(0,0,0,.08); transition: transform .15s ease;
}
.cls-inst:active { transform: scale(.985); }
.cls-inst-photo { position: relative; width: 120px; height: 120px; border-radius: 240px; overflow: hidden; flex-shrink: 0; background: #e8e3e0; }
.cls-inst-photo img { position: absolute; left: calc(50% - 4px); top: 0; width: 130px; height: 130px; transform: translateX(-50%); object-fit: cover; }
.cls-inst-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 auto; max-width: 193px; }
.cls-inst-name { font: 700 24px/27px var(--font-serif); color: var(--wine); }
.cls-inst-role { font: 400 14px/19.6px var(--font-sans); color: var(--caviar); }
.cls-inst-more { font: 700 14px/1.2 var(--font-sans); color: var(--wine); }
.cls-ask {
  height: 48px; border-radius: 30px; background: var(--wine); color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font: 700 18px/25.2px var(--font-sans);
}
.cls-ask:active { filter: brightness(.92); }
.cls-ask-glyph { position: relative; width: 24px; height: 24px; }
.cls-ask-glyph img { position: absolute; inset: 10.16% 10.17% 10.16% 10.15%; width: 79.68%; height: 79.68%; }
.cls-ask-glyph b { position: absolute; left: 50%; top: calc(50% - 8.5px); transform: translateX(-50%); font: 700 11px/17.063px var(--font-sans); }

.cls-learn ol { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.cls-learn li { display: flex; gap: 16px; align-items: flex-start; }
.cls-learn p { font: 400 16px/26px var(--font-sans); color: var(--caviar); }
.cls-num { position: relative; width: 24px; height: 24px; flex-shrink: 0; }
.cls-num img { position: absolute; inset: 0; }
.cls-num b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 16px/20px var(--font-sans); color: #fff; }

/* ---------- Section complete toast (Figma 72:14913) ---------- */
.cls-toast {
  display: flex; align-items: flex-start; gap: 8px;
  width: min(345px, calc(100vw - 48px)); margin-top: 72px; /* Figma y=134 → 24px under the 110px sticky header */
  padding: 12px 16px; border-radius: 8px; background: var(--caviar);
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.cls-toast img { flex-shrink: 0; }
.cls-toast p { font: 700 16px/22.4px var(--font-sans); color: #fff; }

/* ---------- Class page menu (Figma 72:11116) ---------- */
.sheet.cls-menu-sheet { background: transparent; border-radius: 0; overflow: visible; }
.cls-menu { display: flex; flex-direction: column; gap: 8px; padding: 0 16px calc(var(--safe-bottom) + 8px); }
.cls-menu-group { background: #fff; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.cls-menu-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px;
  background: #fff; border-bottom: 1px solid var(--neutral-light-shade);
  font: 700 16px/22.4px var(--font-sans); color: var(--caviar); text-align: left;
}
.cls-menu-item:last-child { border-bottom: 0; }
.cls-menu-item:active, .cls-menu-cancel:active { background: var(--neutral-light); }
.cls-menu-cancel { background: #fff; border-radius: 16px; padding: 16px; font: 700 16px/22.4px var(--font-sans); color: var(--caviar); }

/* ---------- Instructor bio sheet (Figma 72:11114) ---------- */
.sheet.cls-bio-sheet { height: calc(100% - var(--safe-top) - 24px); }
.cls-bio { position: relative; padding-bottom: calc(var(--safe-bottom) + 24px); }
.cls-bio-photo { position: relative; height: 268px; overflow: hidden; background: #eae6e3; }
.cls-bio-photo img { position: absolute; left: calc(50% + 16px); top: -30px; width: 487px; height: 487px; transform: translateX(-50%); object-fit: cover; }
.cls-bio-close { position: absolute; left: 16px; top: 16px; z-index: 2; }
.cls-bio-head { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 16px 0; }
.cls-bio-head h2 { margin-top: 16px; color: #232323; }
.cls-bio-meta { display: flex; align-items: center; gap: 7px; margin-top: 8px; font: 400 14px/22.75px var(--font-sans); color: var(--caviar); }
.cls-bio-meta i { width: 4px; height: 4px; border-radius: 50%; background: var(--caviar); }
.cls-bio-head hr { width: 120px; margin: 24px 0 0; border: 0; border-top: 1px solid var(--wine); }
.cls-bio-text { padding: 24px 16px 0; display: flex; flex-direction: column; gap: 26px; font: 400 16px/26px var(--font-sans); color: var(--caviar); }
.cls-fav { margin: 16px 16px 0; padding: 16px; border-radius: 8px; background: #eee4e5; display: flex; flex-direction: column; gap: 6px; }
.cls-bio-text + .cls-fav { margin-top: 32px; }
.cls-fav b { font: 700 18px/25.2px var(--font-sans); color: var(--wine); }
.cls-fav p { font: 400 16px/26px var(--font-sans); color: var(--caviar); }
.cls-bio-classes { padding: 40px 16px 0; }
.cls-bio-classes > h3 { color: var(--caviar); margin-bottom: 16px; }

/* Figma Section Content Cards: text ↔ check gap is 8px (shared .content-card adds 16px gap + 8px margin).
   Scoped fix; see report for the shared change. */
.screen-class .ccd-check { margin-left: -8px; }

/* Phones wider than 393px: fill section art instead of the fixed Figma crop. */
@media (min-width: 394px) {
  html.is-mobile .cls-art-s1, html.is-mobile .cls-art-s2 { left: 0; top: 0; width: 100%; height: 100%; }
}

/* Classes without Figma crops (e.g. Basic Knife Skills): photos simply cover their box. */
.cls-hero-img.cover { left: 0; width: 100%; }
.cls-hero-img.cover img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.cls-sec-art img.cls-art-cover { left: 0; top: 0; width: 100%; height: 100%; }
.cls-ov-media.cover > img { left: 0; top: 0; width: 100%; height: 100%; }

/* No "All content / Recipes only" switch: sections start 24px under the tabs. */
.cls-pane-class > .cls-content:first-child { margin-top: 0; }