/* ============================================================================
   v4 — "The Gallery": the image-led revision of v1.
   Layers OVER refined.css. Where Refined deliberately suppressed imagery (tiny
   tinted header strips + monograms, to avoid a "wall of color"), the Gallery does
   the opposite experiment: the REAL course cover art leads every card and hero,
   so the catalog is recognised by its art. Text stays for fast scanning.

   gallery.js injects the <img>/background from shared/course-art.js; this file
   styles the result. Nothing here touches shared/*.
   ========================================================================== */

/* ---- (1) IMAGE-FORWARD CATALOG CARD ---------------------------------------
   refined.css makes .th a 60px tinted strip; here .th.art becomes a 16:9 cover. */
.fe-ccard{ overflow:hidden; }
.fe-ccard .th.art{
  height:auto; aspect-ratio:16/9; min-height:0; padding:0; border-radius:12px;
  display:block; position:relative; overflow:hidden;
  background:#0d1220;                      /* letterbox behind the cover while it loads */
}
.fe-ccard .th.art .mono,
.fe-ccard .th.art .cat-label,
.fe-ccard .th.art h3{ display:none !important; }   /* cover carries the title; no dup overlay */
.fe-ccard .th.art::after{ content:none !important; }
.fe-ccard .th.art img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s ease;
}
.fe-ccard:hover .th.art img{ transform:scale(1.04); }   /* gentle Ken-Burns on hover */

/* a thin category hairline under the cover keeps the topic cue Refined used */
.fe-ccard .th.art::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; z-index:2;
  background:var(--fe-cat-accent, transparent);
}

/* title kept, but the cover leads — so make it compact + clamp to 2 lines */
.fe-ccard .ttl{
  margin-top:10px; font-size:14px; line-height:1.25; font-weight:700;
  letter-spacing:-.01em; color:var(--fe-text-primary);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.fe-ccard .meta{ margin-top:6px; }
.fe-ccard .fe-cta{ opacity:.85; }

/* featured lead: just a larger cover (no centered white title overlay) */
.fe-ccard .th.art.featured{ aspect-ratio:16/9; height:auto; padding:0; align-items:stretch; }

/* continue-shelf cards: cover + the existing progress bar/where line read fine */
.cont-card .cont-bar{ margin-top:9px; }

/* ---- (2) RESUME HERO with real cover art ---------------------------------- */
.resume-hero .rh-art{
  width:300px; background-size:cover; background-position:center;
}
.resume-hero .rh-art .rh-mono{ display:none; }      /* cover replaces the monogram */
.resume-hero .rh-art::after{                          /* keep a soft scrim for depth */
  background:linear-gradient(105deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.30) 100%);
}
@media (max-width:720px){
  .resume-hero .rh-art{ width:auto; height:150px; background-position:center 30%; }
}

/* ---- (3) Library featured hero (.hero-card .hc-art) gets the real cover ----- */
.hero-card .hc-art.ga-cover .hc-ico{ display:none; }   /* cover replaces the icon */
.hero-card .hc-art{ min-width:150px; }

/* ---- (4) Course/lesson player: cover as the poster frame ------------------- */
.fe-video.ga-poster .poster-mono{ display:none !important; }   /* cover replaces the monogram still */

/* ---- generic "has cover" hook (background-image set by gallery.js) --------- */
.ga-cover{ background-size:cover !important; background-position:center !important; background-repeat:no-repeat; }