/* SchoolSLP.com -- webinar card.
 *
 * Ported from the approved prototype (tag approved-for-production-2026-11-09),
 * consolidated to the state the prototype actually computes once real cover
 * artwork is present. The prototype carries a generative-artwork fallback --
 * gradient, motif, scrim, play button, duration pill -- and every one of those
 * is hidden by `.art:has(.art__photo)`. The eight covers are real, so those
 * rules would be dead weight here. The rendered result is identical.
 *
 * The frame takes the artwork's own 3:2 ratio, so `cover` crops nothing. No
 * hover zoom: 3% of scale clips the presenter's name off the cover's bar.
 */

/* Three across on desktop, never four.
 *
 * The prototype used auto-fill with a 318px minimum, which lands on three
 * only because its container is 1200px. Dropped into a wider container that
 * silently becomes four, which reads as cluttered -- Tim called it out on
 * 2026-11-10. Stating the column count makes the approved layout hold
 * whatever container this grid is placed in. The 3/2/1 steps below are the
 * same counts the prototype produces at desktop, tablet and phone. */
/* The column count lives in style.css, which loads after this file and
   after prototype.css -- see the note there. Everything else about the grid
   is here, for the ordinary pages where prototype.css is not loaded. */
.wgrid{display:grid;gap:clamp(20px,2.3vw,28px)}

.wcard{
  position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-1);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
@media (hover:hover){
  .wcard:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:transparent}
}
.wcard:focus-within{transform:translateY(-5px);box-shadow:var(--sh-2)}
.wcard:active{transform:translateY(-2px)}

/* Artwork ---------------------------------------------------------------- */
.wcard .art{
  position:relative;aspect-ratio:3/2;overflow:hidden;flex:0 0 auto;
  background:var(--sky-050);
}
.wcard .art__photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;z-index:1;
}

/* Body ------------------------------------------------------------------- */
.wcard__body{padding:15px 17px 16px;display:flex;flex-direction:column;flex:1 1 auto}
.wcard__badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;min-height:0}

.wcard__title{
  font-family:var(--font-sans);font-size:16.24px;line-height:1.4;font-weight:640;
  letter-spacing:-.008em;color:var(--ink);margin-bottom:12px;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
  /* Reserves three lines so titles in a row start at the same height. */
  min-height:calc(16.24px * 1.4 * 3);
}
.wcard__title a{transition:color .2s}
.wcard:hover .wcard__title a{color:var(--navy-500)}
/* The whole card is the link: this overlay covers it, so the markup needs
   only one anchor and nothing nested inside it. */
.wcard__title a::after{content:"";position:absolute;inset:0;z-index:4}

.presenter--plain{display:block;margin-top:auto}
.presenter__name{display:block;font-size:var(--fs-sm);font-weight:640;color:var(--ink);line-height:1.25}
.presenter__creds{display:block;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.3}

.wcard__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2);
  font-size:var(--fs-sm);color:var(--ink-3);
}
/* Topic label reads as a quiet category marker, not a second heading. */
.wcard__foot .fmt{font-weight:560;color:var(--ink-3);letter-spacing:.01em}

/* Badges ----------------------------------------------------------------- */
.wcard .badge{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:670;
  letter-spacing:.045em;text-transform:uppercase;
  padding:5px 9px;border-radius:6px;white-space:nowrap;line-height:1.3;
}
.wcard .badge--free{background:var(--amber-100);color:var(--amber-text)}
/* ASHA writes it "CEUs", lowercase s. The uppercase above would render
   "ASHA CEUS" and misstate the term, so this one badge opts out. */
.wcard .badge--ce{background:var(--sky-100);color:var(--navy);text-transform:none}
.wcard .badge--series{background:#fff;color:var(--navy-600);border:1px solid var(--sky-200)}