/* Homepage section rules.
   These lived in an inline <style> block in the prototype's index.html rather than in
   css/, which is why the pause button rendered unstyled when the three stylesheets were
   ported and nothing else was. The .cas-pause rules from that block already live in
   cas-nav.css and are excluded here so they are not defined twice.

   Covers: the new-release carousel, the shop rail and gallery, and the overview block
   with its points and Q&A. */

/* gallery tile: scrim so the veil text stays readable on light artwork */
.shop-gallery .gt-veil { background: linear-gradient(180deg, rgba(28,22,16,.18) 0%, rgba(28,22,16,.34) 55%, rgba(28,22,16,.66) 100%); text-shadow: 0 2px 12px rgba(0,0,0,.6); }
/* course-card bottom third (3.5.2): one static photo from the course, with the
   lesson count and level over a dark scrim so white text stays readable whatever
   the photo underneath happens to be. */
.course-card .cc-photo { display: block; position: relative; overflow: hidden; }
/* 18.1: a course whose five photographs have not arrived says so in the strip
   rather than borrowing an unrelated studio shot or leaving a void. */
.course-card .cc-photo-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 14px 26px; text-align: center;
  font-family: var(--font-cond); font-size: 12px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); }
.course-card .cc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.course-card .cc-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,17,13,.82) 0%, rgba(20,17,13,.34) 46%, transparent 72%); pointer-events: none; }
/* 53: lessons stay left, the level pair goes to the far right. */
.course-card .cc-facts { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: space-between; gap: 22px; padding: 12px 16px; color: #f6f0e4; }
.course-card .cc-facts span { display: flex; flex-direction: column; gap: 1px; font-family: var(--font-cond); font-weight: 600; font-size: 15px; line-height: 1.15; }
.course-card .cc-facts i { font-style: normal; font-size: 12px; font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; opacity: .8; }
/* Her Course Overview, laid out rather than dumped: a lede, the two principles
   as numbered points, then the four questions she answers as a two-up grid.
   Sits below the course cards so the products still lead the section. */
.overview { margin-top: 54px; padding-top: 40px; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
/* 52: the heading takes the wood plaque every other section sign on this page
   already sits on. Face and size come from the Font A ramp in industrial-3.
   The WOOD itself is set in css/industrial-3.css and deliberately not here —
   see the note beside that rule. Geometry can live in this file; the grain
   cannot. */
.overview-h { color: var(--banner-ink); margin: 0 auto 18px; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: .45em;
  width: fit-content; max-width: 100%;
  padding: 10px 30px; border-radius: 14px;
  box-shadow: var(--shadow); position: relative; }
.overview-lede { max-width: 68ch; margin: 0 auto 16px; text-align: center; font-size: 17.5px; line-height: 1.62; color: var(--muted); }
.overview-lede:last-of-type { margin-bottom: 38px; }
/* 52: opening and closing marks around the introduction, in the same inline
   treatment the questions below already use — not the engraved quote block,
   which is a whole component and would outweigh two short paragraphs. */
.overview-lede:first-of-type::before { content: '“'; color: var(--marine); font-size: 1.3em; line-height: 0; vertical-align: -.12em; margin-right: 3px; }
.overview-lede:last-of-type::after { content: '”'; color: var(--marine); font-size: 1.3em; line-height: 0; vertical-align: -.12em; margin-left: 3px; }
/* #20: `minmax(380px, …)` below is a hard floor — at 390px the wrap is 358px
   wide, so the Q&A column was laid out 380px wide and hung 6px past .cas-root,
   which hides it with overflow-x rather than fixing it. min(px, 100%) lets the
   track shrink on the widths that cannot hold it. */
.overview-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; margin-bottom: 44px; }
/* 52: a translucent marine plate rather than the flat surface, so the two
   principles read as the thing to notice in the block. Mixed with --surface
   rather than set as an alpha so it stays opaque over any ground and the ink
   above it can be measured. */
.ov-point { position: relative; background: color-mix(in srgb, var(--marine) 20%, var(--surface)); border-radius: var(--radius-card); padding: 24px 26px 22px 68px; box-shadow: var(--shadow-sm); }
.ov-n { position: absolute; left: 24px; top: 22px; font-family: var(--font-stencil); font-size: 22px; color: var(--marine); }
.ov-point strong { display: block; font-family: var(--font-cond); font-weight: 600; font-size: 17px;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
/* --muted is chosen against --surface and measured 3.96:1 once the plate above
   went marine. The body takes the full ink and stays subordinate to the label
   by size and face instead — the same trade already made for the syllabus
   lesson count. */
.ov-point p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink); }
.overview-qa { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 22px 34px; }
.ov-q h4 { font-family: var(--font-marker); font-weight: 600; font-size: 21px; line-height: 1.25; color: var(--ink); margin: 0 0 10px; }
.ov-q h4::before { content: '“'; color: var(--marine); margin-right: 2px; }
.ov-q h4::after { content: '”'; color: var(--marine); margin-left: 2px; }
.ov-q p { margin: 0; font-size: 16px; line-height: 1.66; color: var(--muted); }
.overview-note { display: block; margin: 34px auto 0; max-width: 78ch; }
@media (max-width: 860px) { .overview { margin-top: 38px; padding-top: 30px; } }

/* ---- #21 carousel pause control ----------------------------------------
   WCAG 2.2.2: both carousels on this page advance themselves every 6s, so both
   need a persistent, keyboard-operable stop. These rules sit beside
   .hero__nav (css/industrial-1.css) and .rel-dots (css/industrial-2.css) by
   rights — they are here only because index.html is the file this ticket was
   handed to. Flagged to the CSS owner for absorption along with the block
   above (ticket 19). */
.rel-carousel .cas-pause { position: absolute; right: 12px; bottom: 12px; z-index: 4;
  background: rgba(20,17,13,.78); border-color: rgba(243,237,225,.62); color: #f3ede1; }
.rel-carousel .cas-pause:hover { background: rgba(20,17,13,.92); }

/* ---- #20 New Release title / facts collision ---------------------------
   .rel-title and .rel-facts both sit at bottom: 58px. The lift to 104px that
   separates them is :hover / :focus-within only, while (hover: none) forces
   .rel-facts to opacity 1 — so on every touch device the title printed on top
   of its own metadata. Same lift, same 104px, applied wherever the facts are
   permanently shown. Belongs at css/industrial-2.css:259-262. */
@media (hover: none) { .rel-title { bottom: 104px; } }