/* sph-home.css: THE COURSE HOME, one design for every course portal (Vincent, 7 Nov 2026: "make [the Options Course
 * home] nicer, with like showing the certification and a screenshot of the recording etc., same for Irnest, and make
 * Elias' home also nicer", then "so make all consistent please").
 *
 * Used by the Options Course portal (options-course/portal.html, Home tab), every module portal
 * (modules/<id>/portal, drawn by assets/sph-module-portal.js) and, since 7 Nov 2026, the Analyst and the Quant Program
 * (analyst/portal.html, drawn by assets/ap-objectives.js renderHome: the program photo instead of the expert's). Rule book: PORTAL_RULEBOOK.md sections 2, 5c and 6.
 *
 *   .sph-home                the Home view; the page title (h1.ao-h) and one line (.ao-sub) sit above it, as on every tab
 *   .sph-home__hero          one white card: the expert's photo on the left, then "Made in collaboration with", the
 *                            name in burgundy Cardo, one grey role line, and the progress with its bar and buttons
 *   .sph-home__cards         the cards, in this order where the course has them: Lessons, The recording (or, for a
 *                            module without one, the expert's opening lesson), Live Q&A, Certificate. Each card is an image on top (16:9), then a Cardo title, one grey line and
 *                            one button.
 *   .sph-home__media--play   a still of the recording with a play mark
 *   .sph-home__media--date   the Live Q&A date on paper (Chivo, never dark)
 *   .sph-home__media--cert   the certificate on paper with its badge, small, in the corner
 *   .sph-home__media--fig    a lesson figure or the expert's sheet, on paper, top aligned
 *   .sph-home__media--who    the expert's opening lesson (a module without a recording): the round photo on paper
 *
 * Faces are never cut off: the hero photo takes its focus from --pos (object-position) on the img.
 * Every selector is scoped to .sph-home, so no portal rule (for example `.ocp-modal .ocp-cert img`) reaches it. */

html body .sph-home { --h-ink: #030248; --h-red: #66100c; --h-red-d: #4d0c09; --h-paper: #fbf9f5; --h-line: rgba(3,2,72,.14); --h-muted: rgba(26,20,16,.62); --h-text: #1a1410; }
html body .sph-home .ao-sub { margin: 0 0 22px; }

/* THE HERO */
html body .sph-home__hero { display: grid; grid-template-columns: minmax(220px, 34%) minmax(0, 1fr); background: #fff; border: 1px solid var(--h-line); border-radius: 12px; overflow: hidden; margin: 0 0 20px; }
html body .sph-home__photo { margin: 0; position: relative; min-height: 260px; background: var(--h-paper); }
html body .sph-home__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 30%); display: block; border-radius: 0; }
html body .sph-home__body { padding: 26px 28px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
html body .sph-home__who { display: flex; flex-direction: column; gap: 4px; }
html body .sph-home__k { display: block; font: 700 .75rem/1.3 'Chivo', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--h-muted); }
html body .sph-home__name { font-family: 'Cardo', Georgia, serif; font-weight: 400; font-size: 1.6rem; line-height: 1.2; color: var(--h-red); margin: 2px 0 0; }
html body .sph-home__name sup { font-size: .5em; line-height: 0; vertical-align: super; }   /* Sophron(R) in the Analyst and Quant Program hero */
html body .sph-home__role { font-size: .92rem; line-height: 1.5; color: var(--h-muted); margin: 0; }
html body .sph-home__prog { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--h-line); }
html body .sph-home__big { margin: 0; font-family: 'Chivo', system-ui, sans-serif; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
html body .sph-home__big b { font-family: 'Cardo', Georgia, serif; font-weight: 400; font-size: 2.4rem; line-height: 1; color: var(--h-ink); }
html body .sph-home__big span { font-size: 1rem; color: var(--h-muted); }
html body .sph-home__bar { height: 6px; border-radius: 3px; background: rgba(3,2,72,.08); overflow: hidden; max-width: 520px; }
html body .sph-home__bar i { display: block; height: 100%; width: 0; background: var(--h-red); transition: width .4s ease; }
html body .sph-home__bar i.ok { background: #15803d; }
html body .sph-home__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* BUTTONS: 2 px corners, sentence case (rule book 5c) */
html body .sph-home__btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border-radius: 2px; border: 1px solid var(--h-red); background: var(--h-red); color: #fff; font: 700 .88rem/1.2 'Chivo', system-ui, sans-serif; text-decoration: none; cursor: pointer; text-transform: none; letter-spacing: 0; }
html body .sph-home__btn:hover { background: var(--h-red); border-color: var(--h-red); color: #fff; }   /* no colour switch on hover (Vincent, 7 Nov 2026) */
html body .sph-home__btn--ghost { background: transparent; color: var(--h-red); }
html body .sph-home__btn--ghost:hover { background: transparent; color: var(--h-red); }   /* no colour switch on hover */

/* THE CARDS */
html body .sph-home__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
html body .sph-home__card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--h-line); border-radius: 12px; overflow: hidden; min-width: 0; transition: border-color .15s ease; }
html body .sph-home__card { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
/* HOVER ON EVERY CARD (7 Nov 2026, Vincent: "add hover to all"): a small lift, a soft shadow, a burgundy line,
   the picture eases in. Buttons keep their colours. */
html body .sph-home__card:hover { border-color: rgba(102,16,12,.45); box-shadow: 0 10px 26px rgba(42,20,12,.12); transform: translateY(-2px); }
html body .sph-home__media > img.sph-home__img { transition: transform .35s ease; }
html body .sph-home__card:hover .sph-home__media > img.sph-home__img:not([style*="--zoom"]) { transform: scale(1.03); }
html body .sph-home__hero { cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
html body .sph-home__hero:hover { border-color: rgba(102,16,12,.45); box-shadow: 0 10px 26px rgba(42,20,12,.12); transform: translateY(-2px); }
html body .sph-home__hero .sph-home__photo, html body .sph-home__hero img { transition: transform .35s ease; }
@media (prefers-reduced-motion: reduce) { html body .sph-home__hero, html body .sph-home__hero:hover { transform: none; transition: none; } }
@media (prefers-reduced-motion: reduce) { html body .sph-home__card, html body .sph-home__card:hover, html body .sph-home__card:hover .sph-home__media > img.sph-home__img { transform: none; transition: none; } }
html body .sph-home__card { cursor: pointer; }   /* the whole card opens its tab (sph-shell.js, 7 Nov 2026) */
html body .sph-home__media { position: relative; margin: 0; aspect-ratio: 16 / 9; background: var(--h-paper); border-bottom: 1px solid var(--h-line); overflow: hidden; display: block; width: 100%; padding: 0; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; }
html body .sph-home__media > img.sph-home__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 35%); display: block; border-radius: 0; }
html body .sph-home__cb { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
html body .sph-home__t { font-family: 'Cardo', Georgia, serif; font-weight: 400; font-size: 1.25rem; line-height: 1.25; color: var(--h-ink); margin: 0; }
html body .sph-home__m { font-size: .88rem; line-height: 1.5; color: var(--h-muted); margin: 0 0 8px; flex: 1; }
html body .sph-home__cb .sph-home__btn { align-self: flex-start; }

/* the recording: a still with a play mark */
html body .sph-home__play { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 2px 12px rgba(0,0,0,.25); display: grid; place-items: center; transition: transform .15s ease; }
html body .sph-home__play svg { width: 20px; height: 20px; margin-left: 3px; fill: var(--h-red); }
html body .sph-home__media--play:hover .sph-home__play { transform: scale(1.06); }
html body .sph-home__dur { position: absolute; right: 10px; bottom: 10px; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.62); color: #fff; font: 700 .75rem/1.3 'Chivo', system-ui, sans-serif; }

/* the Live Q&A: the date on paper */
html body .sph-home__media--date { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 18px 20px; text-align: left; }
html body .sph-home__cal { width: 38px; height: 38px; border-radius: 6px; background: rgba(102,16,12,.07); color: var(--h-red); display: grid; place-items: center; }
html body .sph-home__cal svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html body .sph-home__when { margin: 0; font: 700 1.05rem/1.35 'Chivo', system-ui, sans-serif; color: var(--h-ink); }

/* the certificate with its badge, small */
html body .sph-home__media--cert > img.sph-home__img { inset: 12px 12px 12px 12px; width: calc(100% - 24px); height: calc(100% - 24px); object-fit: contain; object-position: 50% 50%; }
html body .sph-home__media--cert > img.sph-home__badge { position: absolute; right: 10px; bottom: 8px; width: 52px; height: 52px; max-width: 52px; object-fit: contain; border-radius: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,.18)); }

/* a still that needs to come closer (Irnest's sheet sits small in its video frame): --zoom on the img, towards --pos */
html body .sph-home__media > img.sph-home__img[style*="--zoom"] { transform: scale(var(--zoom)); transform-origin: var(--pos, 50% 35%); }

/* the expert's opening lesson: the round photo on paper, as the expert card in the lesson (rule book 6) */
html body .sph-home__media--who { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
html body .sph-home__media--who > img.sph-home__face { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: var(--pos, 50% 35%); display: block; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--h-line); }

/* a lesson figure or the expert's sheet: whole width, top first */
html body .sph-home__media--fig > img.sph-home__img { object-position: var(--pos, 50% 0%); }

/* PHONE */
@media (max-width: 760px) {
  html body .sph-home__hero { grid-template-columns: 1fr; }
  html body .sph-home__photo { min-height: 0; aspect-ratio: 16 / 10; }
  html body .sph-home__body { padding: 20px; gap: 16px; }
  html body .sph-home__name { font-size: 1.4rem; }
  html body .sph-home__big b { font-size: 2rem; }
  html body .sph-home__cards { grid-template-columns: 1fr; }
  html body .sph-home__media { aspect-ratio: 2 / 1; }
  html body .sph-home__media--date { aspect-ratio: auto; }
}

/* AT A GLANCE (9 Nov 2026, Vincent: "the same progress tracking for all modules", "make all of them have this short
   tracking overview"): the left half of every Home hero (the five modules, the Analyst Program, the Quant Program, the
   Options Course) is one quiet panel: a dot per lesson or step, the hand-in, the certificate. No photo, no graph.
   .gl-row = label + value; .gl-dots i.on = done; .gl-v.ok = signed off. */

html body .sph-home__glance { display: flex; flex-direction: column; justify-content: center; gap: 0; min-width: 0; padding: 28px 32px; background: #f6f3ee; border-right: 1px solid rgba(102,16,12,.1); }
html body .sph-home__glance .sph-home__k { margin-bottom: 10px; }
html body .sph-home__glance .gl-row { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(102,16,12,.1); }
html body .sph-home__glance .gl-l { font: 700 .75rem/1.3 "Chivo", system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--h-muted, #6b6259); }
html body .sph-home__glance .gl-v { font-family: "Cardo", Georgia, serif; font-size: 1.05rem; line-height: 1.35; color: #2a2421; }
html body .sph-home__glance .gl-v.ok { color: var(--h-red, #66100c); }
html body .sph-home__glance .gl-dots { display: flex; flex-wrap: wrap; gap: 8px; }
html body .sph-home__glance .gl-dots i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(102,16,12,.45); background: transparent; transition: background .25s ease; }
html body .sph-home__glance .gl-dots i.on { background: var(--h-red, #66100c); border-color: var(--h-red, #66100c); }
@media (max-width: 760px) {
html body .sph-home__glance { border-right: 0; border-bottom: 1px solid rgba(102,16,12,.1); padding: 22px 20px; aspect-ratio: auto; min-height: 0; }
html body .sph-home__glance .gl-row { grid-template-columns: 92px minmax(0, 1fr); }
html body .sph-home__hero > * { min-width: 0; } }
/* MEET THE EXPERT (9 Nov 2026): the expert's photo moved out of the hero into one full-width strip under it. */
html body .sph-home__meet { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); background: #fff; border: 1px solid var(--h-line); border-radius: 12px; overflow: hidden; margin: 0 0 20px; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
html body .sph-home__meet:hover { border-color: rgba(102,16,12,.45); box-shadow: 0 10px 26px rgba(42,20,12,.12); transform: translateY(-2px); }
html body .sph-home__meet-photo { margin: 0; position: relative; min-height: 280px; background: var(--h-paper); }
html body .sph-home__meet-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 30%); display: block; }
html body .sph-home__meet-b { padding: 32px 36px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
html body .sph-home__meet-b .sph-home__t { margin: 0; }
html body .sph-home__meet-b .sph-home__m { margin: 0; }
html body .sph-home__meet-b .sph-home__btn { align-self: flex-start; margin-top: 6px; }
@media (max-width: 760px) { html body .sph-home__meet { grid-template-columns: 1fr; } html body .sph-home__meet-photo { min-height: 0; aspect-ratio: 16 / 10; } html body .sph-home__meet-b { padding: 22px 20px; } }
@media (prefers-reduced-motion: reduce) { html body .sph-home__meet, html body .sph-home__meet:hover { transform: none; transition: none; } }