/* Shared SG course-page hero pattern — hero photo + LLM badge orbit + WhatsApp card + definition box + Last-reviewed stamp.
   Imported by every /sg/*.html course page so we don't duplicate ~250 lines of CSS across 15 pages.
   Depends on the base palette tokens (--blue, --ink, --slate, --bd, --soft, --soft2, --muted) defined inline on each page. */

/* Force pure white hero background so the floating LLM badges and photo edges read cleanly (matches the /sg/ home pattern) */
.sv-hero-course{background:#ffffff !important;border-bottom:none !important;}
.sv-hero-course #network-canvas{display:none !important;}

/* 2-column hero grid (text left, photo+badges+WA right) */
.sv-hero-course .sv-hero-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:36px;align-items:center;}
.sv-hero-course .sv-hero-grid > div:first-child{max-width:none;}

/* Right column wrapper */
.sv-hero-rightcol{align-self:center;display:block;}

/* Hero photo frame — scoped under .sv-hero-course to override legacy inline .sv-hero-photo rules.
   IMPORTANT: each course page has an inline <style> with an older .sv-hero-photo definition
   (overflow:hidden, aspect-ratio:4/3, dark navy bg, object-fit:cover) that would clip our LLM badges,
   force a 4:3 dark box, and stretch the image. We must override every conflicting property here. */
.sv-hero-course .sv-hero-photo{position:relative !important;background:transparent !important;border-radius:0 !important;overflow:visible !important;aspect-ratio:auto !important;box-shadow:none !important;}
/* Hero photo frame: feather the edges into white so the rectangular photo blends with the white hero bg
   (matches the /sg/ home pattern where the AI-students hero appears to float without a hard rectangle).
   The radial-gradient mask keeps the centre fully opaque and fades to transparent at the corners.
   Box-shadow removed because masks clip shadows; instead use a soft radial glow via background. */
/* Photo frame: lock to 16:9 so different source aspect ratios (some 4:3, some 16:9, etc.) all
   render at the same height. Without this, taller source images push the WhatsApp card below
   the fold. max-height caps the absolute height per breakpoint. */
/* Mask is intentionally aggressive: solid centre only 25% of the radius, then a long ~70% fade
   to transparent. This makes ANY image-background tone (off-white, light-gray, slight-cream from
   AI generators) dissolve smoothly into the white page, regardless of what the image was generated
   on. Edges become a soft halo, so the photo reads as "floating on the page" not "rectangular tile". */
.sv-hero-course .sv-hero-photo__frame{position:relative;border-radius:24px;overflow:hidden;background:transparent;-webkit-mask-image:radial-gradient(ellipse 75% 80% at center,#000 25%,transparent 95%);mask-image:radial-gradient(ellipse 75% 80% at center,#000 25%,transparent 95%);box-shadow:none;aspect-ratio:16/9;max-height:380px;}
.sv-hero-course .sv-hero-photo picture{display:block;width:100%;height:100%;}
.sv-hero-course .sv-hero-photo img{width:100% !important;height:100% !important;object-fit:cover !important;object-position:center 35% !important;display:block !important;}
@media(max-width:1280px){.sv-hero-course .sv-hero-photo__frame{max-height:340px;}}
@media(max-width:1080px){.sv-hero-course .sv-hero-photo__frame{max-height:300px;aspect-ratio:16/9;}}
@media(max-width:680px){.sv-hero-course .sv-hero-photo__frame{max-height:240px;aspect-ratio:5/3;}}

/* LLM icon orbit (13 badges floating at clock-face positions around the photo) */
.llm-orbit{position:absolute;inset:0;pointer-events:none;}
.llm-badge{position:absolute;width:50px;height:50px;border-radius:50%;background:#ffffff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 28px rgba(15,30,61,0.18),0 2px 6px rgba(15,30,61,0.08);border:1px solid rgba(15,30,61,0.06);pointer-events:auto;animation:llmFloat 6s ease-in-out infinite;}
.llm-badge img{width:28px;height:28px;display:block;object-fit:contain;}
.llm-badge:hover{transform:scale(1.08);box-shadow:0 18px 36px rgba(15,30,61,0.22),0 4px 10px rgba(15,30,61,0.12);}

/* Badge clock positions (matches the SG home pattern) */
.llm-badge[data-pos="tl"]{top:-18px;left:-22px;animation-delay:0s;}
.llm-badge[data-pos="tc"]{top:-26px;left:50%;transform:translateX(-50%);animation-delay:.7s;}
.llm-badge[data-pos="tr"]{top:-18px;right:-22px;animation-delay:1.4s;}
.llm-badge[data-pos="rt"]{top:22%;right:-28px;animation-delay:2.1s;}
.llm-badge[data-pos="rb"]{top:65%;right:-28px;animation-delay:2.8s;}
.llm-badge[data-pos="br"]{bottom:-18px;right:-22px;animation-delay:3.5s;}
.llm-badge[data-pos="bl"]{bottom:-18px;left:-22px;animation-delay:4.2s;}
.llm-badge[data-pos="lb"]{top:65%;left:-28px;animation-delay:4.9s;}
.llm-badge[data-pos="lt"]{top:22%;left:-28px;animation-delay:5.6s;}
.llm-badge[data-pos="r"]{top:43%;right:-30px;animation-delay:1s;}
.llm-badge[data-pos="l"]{top:43%;left:-30px;animation-delay:3.3s;}
.llm-badge[data-pos="tcl"]{top:-48px;left:18%;animation-delay:1.8s;}
.llm-badge[data-pos="tcr"]{top:-48px;right:18%;animation-delay:4.5s;}
.llm-badge[data-pos="tc"]:hover{transform:translateX(-50%) scale(1.08);}

@keyframes llmFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.llm-badge[data-pos="tc"]{animation-name:llmFloatCentered;}
@keyframes llmFloatCentered{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-8px);}}
@media(prefers-reduced-motion:reduce){.llm-badge{animation:none !important;}}

@media(max-width:1080px){
  .llm-badge{width:42px;height:42px;}
  .llm-badge img{width:22px;height:22px;}
  .llm-badge[data-pos="tl"],.llm-badge[data-pos="tr"]{top:-12px;}
  .llm-badge[data-pos="bl"],.llm-badge[data-pos="br"]{bottom:-12px;}
  .llm-badge[data-pos="rt"],.llm-badge[data-pos="rb"]{right:-18px;}
  .llm-badge[data-pos="lt"],.llm-badge[data-pos="lb"]{left:-18px;}
  .sv-hero-course .sv-hero-grid{grid-template-columns:1fr;gap:28px;}
}
@media(max-width:680px){.llm-orbit{display:none;}}

/* WhatsApp community card under hero photo */
.reserve-wa{display:block;margin-top:16px;background:linear-gradient(135deg,#e8f9ef,#ffffff);border:1px solid rgba(37,211,102,0.38);border-radius:16px;padding:14px 16px;text-decoration:none;box-shadow:0 10px 24px rgba(37,211,102,0.12);transition:transform 0.15s,box-shadow 0.15s;}
.reserve-wa:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(37,211,102,0.22);}
.reserve-wa__flash{display:inline-block;background:#25D366;color:#06381b;font-weight:900;font-size:0.66rem;letter-spacing:0.5px;text-transform:uppercase;padding:3px 9px;border-radius:6px;margin-bottom:11px;animation:reserveWaFlash 1.2s steps(1) infinite;}
@keyframes reserveWaFlash{0%,100%{opacity:1;}50%{opacity:0.6;}}
.reserve-wa__body{display:flex;align-items:center;gap:11px;}
.reserve-wa__icon{width:34px;height:34px;fill:#25D366;flex-shrink:0;}
.reserve-wa__text{display:flex;flex-direction:column;gap:2px;}
.reserve-wa__text strong{color:var(--ink);font-size:0.9rem;font-weight:800;line-height:1.25;}
.reserve-wa__text > span{color:var(--slate);font-size:0.76rem;line-height:1.4;}
.reserve-wa__arrow{margin-left:auto;color:#1a9c5b;font-weight:900;font-size:1.15rem;flex-shrink:0;}
@media(prefers-reduced-motion:reduce){.reserve-wa__flash{animation:none;}}

/* LLM-quotable definition box (course pages) */
.sv-define{background:linear-gradient(135deg,#f4f8ff 0%,#ffffff 100%);border:1px solid var(--bd);border-left:4px solid var(--blue);border-radius:14px;padding:26px 30px;margin:0 0 28px;box-shadow:0 8px 22px rgba(15,30,61,0.05);}
.sv-define__label{font-size:0.74rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--blue);margin:0 0 10px;}
.sv-define__term{font-family:'Playfair Display',serif;font-size:1.4rem;font-weight:800;color:var(--ink);margin:0 0 12px;line-height:1.25;}
.sv-define__body{font-size:1rem;line-height:1.65;color:var(--ink);margin:0 0 10px;}
.sv-define__list{margin:6px 0 0;padding-left:20px;}
.sv-define__list li{font-size:0.95rem;line-height:1.55;color:var(--slate);margin-bottom:5px;}
.sv-define__list li strong{color:var(--ink);}
.sv-define__source{font-size:0.8rem;color:var(--muted);margin:12px 0 0;}

/* Last-reviewed stamp */
.sv-reviewed{font-size:0.86rem;color:var(--muted);margin:18px 0 0;padding:14px 16px;background:#f8fafc;border-radius:10px;border-left:3px solid var(--blue);}
.sv-reviewed a{color:var(--blue);text-decoration:underline;font-weight:600;}
.sv-reviewed strong{color:var(--ink);}

/* Course-page typewriter highlight (optional, in H1) */
.yellow-mark{background:linear-gradient(180deg,transparent 58%,#fde68a 58%);color:inherit;padding:0 .12em;border-radius:2px;font-style:normal;}