/* ==========================================================================
   course-overview + recipe-search  (Figma "01 Dashboard v2")
   ========================================================================== */

/* ---------------- Course overview ---------------- */
.cov-scroller { background: var(--bg); }
.cov-hero { position: relative; height: 457px; overflow: hidden; background: var(--caviar); }
.cov-hero-img {
  position: absolute; left: calc(50% - 324.5px); top: -11.8px;
  width: 834px; height: 469px; object-fit: cover;
}
.cov-hero-grad {
  position: absolute; left: 0; right: 0; top: 138px; height: 319px;
  background: linear-gradient(180deg, rgba(44,44,44,0) 3.866%, rgba(0,0,0,.8) 85.206%);
}
.cov-sticker, .cov-rsticker {
  display: inline-flex; align-items: center; justify-content: 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;
  white-space: nowrap; backdrop-filter: blur(8px);
}
.cov-sticker, .cov-new { position: absolute; top: 237px; left: 50%; transform: translateX(-50%); }
.cov-hero-title {
  position: absolute; top: 265px; left: 50%; transform: translateX(-50%);
  width: 340px; max-width: calc(100% - 32px); text-align: center; color: #fff;
}
.cov-hero-by {
  position: absolute; top: 381px; left: 0; right: 0; text-align: center;
  font: 700 14px/19.6px var(--font-sans); color: var(--cream);
}
.cov-hero-rating { position: absolute; top: 417px; left: 0; right: 0; display: flex; justify-content: center; }

.cov-progress { height: 6px; background: #d9d9d9; }
.cov-progress i { display: block; width: 40px; height: 6px; background: var(--success); }

.cov-tabs {
  position: sticky; top: calc(var(--safe-top) + 56px); z-index: 5;
  display: flex; height: 55px; background: var(--bg);
}
.cov-tab {
  flex: 1 1 0; display: flex; justify-content: center; padding-top: 16px;
  font: 700 14px/22.75px var(--font-sans); letter-spacing: 1.4px; text-transform: uppercase;
  color: #232323;
}
.cov-tab.on { color: var(--tomato); box-shadow: inset 0 -1px 0 var(--tomato); }

.cov-body { padding: 24px 16px 49px; }
.cov-toggle {
  display: flex; gap: 5px; height: 49px; padding: 4px;
  background: var(--neutral-light); border-radius: 100px;
}
.cov-tg {
  flex: 1 1 0; height: 41px; border-radius: 100px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font: 400 14px/19.6px var(--font-sans); color: var(--caviar);
  transition: background .2s;
}
.cov-tg.on { background: #fff; font-weight: 700; }

.cov-sections { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.cov-section {
  position: relative; background: #fff; border-radius: 8px; overflow: hidden;
}
.cov-section::after { /* Figma inside stroke */
  content: ""; position: absolute; inset: 0; border: 1px solid var(--neutral-light-shade); border-radius: 8px; pointer-events: none; z-index: 2;
}
.cov-shead { position: relative; height: 247px; }
.cov-simg { position: absolute; left: 0; right: 0; top: 0; height: 103px; overflow: hidden; background: var(--neutral-light); }
.cov-simg img { position: absolute; }
.cov-simg-s1 img { left: calc(50% - 222.5px); top: -36px; width: 409px; height: 186.4px; object-fit: cover; }
.cov-simg-s2 img { left: calc(50% - 265.2px); top: -61px; width: 498px; height: 279px; object-fit: cover; }
.cov-simg-s3 img { left: 0; top: -5px; width: 100%; height: 203px; object-fit: cover; }
.cov-snum { position: absolute; top: 86px; left: calc(50% - 16px); width: 32px; height: 32px; }
.cov-snum img { position: absolute; inset: 0; }
.cov-snum b {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 700 20px/20px var(--font-sans); color: #fff;
}
.cov-stitle {
  position: absolute; top: 134px; left: 0; right: 0; text-align: center; white-space: nowrap;
  font: 700 32px/36.16px var(--font-serif); color: var(--caviar);
}
.cov-ssum {
  position: absolute; top: 179px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 16px;
}
.cov-sum { display: inline-flex; align-items: center; gap: 4px; font: 400 14px/normal var(--font-sans); color: var(--neutral-dark); }
.cov-sprog { position: absolute; top: 219px; left: 16px; right: 15px; display: flex; gap: 6px; }
.cov-sprog i { flex: 1 1 0; height: 4px; background: var(--neutral-light-shade); }
.cov-sprog i:first-child { border-radius: 100px 0 0 100px; }
.cov-sprog i:last-child { border-radius: 0 100px 100px 0; }
.cov-sprog i.on { background: var(--success); }

.cov-slist { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--neutral-light); }
.cov-section.collapsed .cov-slist { display: none; }
.cov-scollapse {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 17px 0; font: 700 14px/22.4px var(--font-sans); color: var(--caviar);
}
.cov-scollapse img { transform: rotate(90deg); transition: transform .2s; }
.cov-section.collapsed .cov-scollapse img { transform: rotate(-90deg); }

.cov-card {
  position: relative; display: flex; align-items: center; gap: 16px;
  padding: 16px 8px 16px 16px; background: #fff; border-radius: 8px;
  cursor: pointer; transition: transform .12s ease;
}
.cov-card:active { transform: scale(.99); }
.cov-thumb { position: relative; width: 70px; height: 70px; flex-shrink: 0; border-radius: 8px; overflow: hidden; background: var(--neutral-light); }
.cov-thumb > img:first-child { width: 100%; height: 100%; object-fit: cover; }
.cov-vbadge { position: absolute; left: 8px; top: 38px; }
.cov-cbody { flex: 0 1 187px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cov-cmeta { display: flex; align-items: center; gap: 8px; font: 400 12px/normal var(--font-sans); color: var(--caviar); white-space: nowrap; }
.cov-ctitle { font: 700 14px/19.6px var(--font-sans); color: var(--caviar); }
.cov-ccheck { position: absolute; right: 8px; top: calc(50% - 12px); width: 24px; height: 24px; }
.cov-ccheck:empty { display: none; }

.cov-myrating { margin-top: 0; }
.cov-body .cov-myrating { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--neutral-light-shade); }
.cov-myrating h3 { font: 700 24px/27px var(--font-sans); color: #232323; }
.cov-stars { display: flex; gap: 16px; margin-top: 24px; }
.cov-stars button { width: 32px; height: 32px; }
.cov-stars button:active { transform: scale(.9); }
.cov-stars img { width: 32px; height: 32px; }

/* Sticky "View class" CTA (Figma: View Class, 56px) */
.cov-cta {
  position: relative; flex-shrink: 0; z-index: 24;
  height: 56px; width: 100%;
  background: var(--caviar); color: #fff; text-align: left;
  display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
}
.screen-course-overview .cov-cta { height: calc(56px + var(--safe-bottom)); padding-bottom: var(--safe-bottom); }
.cov-cta-text { display: flex; flex-direction: column; padding-top: 1px; }
.cov-cta-text small { font: 400 12px/19.6px var(--font-sans); color: #fff; }
.cov-cta-text b { font: 700 14px/19.6px var(--font-sans); color: var(--cream); margin-top: 0; }
.cov-cta-go { display: flex; align-items: center; gap: 8px; margin-top: 2px; font: 700 14px/19.6px var(--font-sans); }
.cov-cta-go img { transform: rotate(180deg); }
.cov-cta:active .cov-cta-go { opacity: .7; }

/* ---------------- Recipe (from search) ---------------- */
.cov-rhero { position: relative; height: 456px; overflow: hidden; background: var(--caviar); }
.cov-rhero > img { width: 100%; height: 100%; object-fit: cover; }
.cov-rplay { position: absolute; left: calc(50% - 38.5px); top: calc(50% + 12px - 38px); width: 76px; height: 76px; border-radius: 50%; }
.cov-rplay:active { transform: scale(.94); }

.cov-rnav {
  position: absolute; left: 0; right: 0; top: calc(var(--safe-top) + 56px); z-index: 29;
  height: 59px; background: var(--bg); display: flex; padding: 0 16px; align-items: flex-start;
  transform: translateY(calc(-100% - var(--safe-top) - 56px)); transition: transform .25s var(--ease-out);
}
.cov-rnav.show { transform: translateY(0); }
.cov-rnav::after { content: ""; position: absolute; left: 16px; right: 16px; top: 43px; height: 1px; background: var(--neutral-light-shade); }
.cov-rnav button {
  position: relative; z-index: 1; flex: 1 1 0; min-width: 0; height: 44px; padding: 12px 0 8px;
  font: 400 14px/22.8px var(--font-sans); color: var(--caviar); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 2px solid transparent;
}
.cov-rnav button.on { font-weight: 700; border-bottom-color: var(--tomato); }

.cov-rbody { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 24px 16px 24px; }
.cov-rbody > * { width: 100%; }
.cov-rline { border: 0; border-top: 1px solid var(--neutral-light-shade); margin: 0; height: 0; }

.cov-rintro { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.cov-rhead { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.cov-rhead h1 { color: #232323; text-align: center; width: 100%; }
.cov-rmeta { display: flex; align-items: center; gap: 8px; font: 400 12px/normal var(--font-sans); color: var(--caviar); }
.cov-rstats { display: flex; gap: 16px; }
.cov-rstats > span { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/normal var(--font-sans); letter-spacing: .32px; color: var(--caviar); }
.cov-rstats b { font-weight: 500; color: var(--caviar); }
.cov-rstats em { font-style: normal; color: var(--neutral-dark); }
.cov-rshort { width: 120px; border: 0; border-top: 1px solid var(--tomato); margin: 0; }
.cov-rdesc { font: 400 16px/26px var(--font-sans); color: var(--caviar); width: 100%; }
.cov-rfacts { margin: 0; width: 100%; display: flex; flex-direction: column; gap: 5px; font: 400 16px/22.4px var(--font-sans); color: var(--caviar); }
.cov-rfacts div { display: flex; }
.cov-rfacts dt { width: 73px; font-weight: 700; flex-shrink: 0; }
.cov-rfacts dd { margin: 0; }

.cov-rblock { display: flex; flex-direction: column; gap: 16px; }
.cov-rblock.cov-g24 { gap: 24px; }
.cov-rh2 { font: 700 32px/36.16px var(--font-serif); color: #232323; }

.cov-why { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cov-why-text { height: 158px; overflow: hidden; font: 400 14px/22.75px var(--font-sans); color: var(--caviar); }
.cov-why-text p + p { margin-top: 22.75px; }
.cov-why.open .cov-why-text { height: auto; }
.cov-rmore { font: 400 16px/22.4px var(--font-sans); color: var(--tomato); }

.cov-igroups { display: flex; flex-direction: column; gap: 16px; }
.cov-igroup { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cov-ilist { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.cov-ing {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 8.3px 8px;
  background: #fff; border-radius: 50px; text-align: left; transition: background .15s;
}
.cov-ing.on { background: #f8d6c7; }
.cov-ing img { flex-shrink: 0; }
.cov-ing span { flex: 0 1 284px; font: 400 16px/22.4px var(--font-sans); color: var(--caviar); }
.cov-ing i { color: var(--neutral-dark); }
.cov-ing b { color: var(--tomato); }

.cov-equip { font: 400 14px/22.75px var(--font-sans); color: var(--caviar); }
.cov-rlink { font-weight: 700; color: var(--tomato); }

.cov-learn {
  position: relative; height: 56px; width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 0 15px; border: 1px solid var(--neutral-light-shade); border-radius: 8px; background: #fff; text-align: left;
}
.cov-learn span { flex: 1 1 auto; font: 700 16px/22.4px var(--font-sans); color: var(--caviar); }

.cov-vcard { position: relative; height: 260px; border: 1px solid var(--neutral-light-shade); border-radius: 8px; overflow: hidden; background: #fff; }
.cov-vposter { position: relative; display: block; width: 100%; height: 202px; overflow: hidden; }
.cov-vposter > img { width: 100%; height: 100%; object-fit: cover; }
.cov-vpill {
  position: absolute; left: 50%; top: 50%; 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;
}
.cov-vposter:active .cov-vpill { transform: translate(-50%, -50%) scale(.96); }
.cov-vfoot { display: flex; align-items: center; justify-content: space-between; padding: 14px 15px 0; }
.cov-vfoot b { font: 700 16px/22.4px var(--font-sans); color: var(--caviar); }
.cov-vfoot span { display: flex; align-items: center; gap: 8px; font: 500 12px/normal var(--font-sans); letter-spacing: 1.2px; color: var(--neutral-dark); }

.cov-cook { height: 357px; border: 1px solid var(--neutral-light-shade); border-radius: 8px; overflow: hidden; background: #fff; padding: 14px 15px 0; }
.cov-cook-imgs { display: flex; gap: 8px; }
.cov-cook-main { width: 230px; height: 230px; flex-shrink: 0; border-radius: 8px; object-fit: cover; object-position: 46% 50%; }
.cov-cook-side { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cov-cook-side img { width: 100%; height: 71px; border-radius: 8px; object-fit: cover; }
.cov-cook-btn {
  width: 100%; height: 40px; margin-top: 16px; border: 1px solid var(--caviar); border-radius: 24px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 16px/22.4px var(--font-sans); color: var(--caviar);
}
.cov-cook-btn:active { background: var(--neutral-light); }
.cov-cook-cap { margin-top: 16px; text-align: center; font: 400 14px/22.75px var(--font-sans); color: var(--neutral-dark); }

.cov-steps { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.cov-step { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.cov-step h3 { font: 700 18px/29.25px var(--font-sans); color: #232323; }
.cov-step-text { display: flex; flex-direction: column; gap: 16px; font: 400 16px/26px var(--font-sans); color: var(--caviar); }
.cov-step-text em { font-style: italic; }
.cov-tip {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 13px; background: #eef4fb; border-radius: 8px; text-align: left;
}
.cov-tip > span { display: flex; align-items: flex-start; gap: 8px; font: 700 14px/22.75px var(--font-sans); color: #1f1f1f; }
.cov-tip-caret { transform: rotate(-90deg); }

.cov-faqs { display: flex; flex-direction: column; gap: 16px; }
.cov-faq {
  width: 100%; display: flex; align-items: center; gap: 16px; padding: 16px;
  background: #eee4e5; border-radius: 8px; text-align: left;
}
.cov-faq span { flex: 1 1 0; font: 700 16px/26px var(--font-sans); color: var(--caviar); }
.cov-faq img { flex-shrink: 0; }
.cov-askbtn {
  height: 48px; width: 100%; 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);
}
.cov-askbtn:active { opacity: .85; }
.cov-askglyph { position: relative; width: 24px; height: 24px; flex-shrink: 0; }
.cov-askglyph img { position: absolute; inset: 10.16% 10.17% 10.16% 10.15%; width: 79.68%; height: 79.68%; }
.cov-askglyph b { position: absolute; left: 50%; top: calc(50% - 8.5px); transform: translateX(-50%); font: 700 11px/17.063px var(--font-sans); }

.cov-rbody > .cov-cooked { width: 313px; max-width: 100%; }
.cov-cooked {
  display: flex; align-items: center; gap: 8px; padding: 8px;
  background: var(--neutral-light); border-radius: 48px; text-align: left;
}
.cov-cooked i {
  position: relative; width: 32px; height: 32px; flex-shrink: 0; border-radius: 100px;
  background: #fff; border: 1px solid var(--neutral-light-shade); transition: background .15s;
}
.cov-cooked.on i { background: var(--success); border-color: var(--success); }
.cov-cooked.on i::after {
  content: ""; position: absolute; left: 10px; top: 6px; width: 8px; height: 14px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.cov-cooked span { font: 400 16px/22.4px var(--font-sans); color: var(--caviar); }

.cov-rrating { display: flex; flex-direction: column; gap: 40px; }

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