/* ========================================================================================
 * card.css - .card, its BEM parts and modifiers, and the .grid helpers (L2 layer).
 * Generalizes three distinct card shapes the design source repeats inline: the plain
 * raised card (webinar cards), the photo-scrim tile (.cd-tile), and the whole-card link
 * (the homepage "who we serve" cards). Grids port .cd-tiles/.cd-days/.cd-speakers'
 * repeat(auto-fit,minmax(...)) pattern at its three recurring widths (200/248/320px).
 *
 * .card__content is one extra, --split-only part beyond the brief's six (__media/
 * __eyebrow/__title/__body/__actions/__tags): a wrapper for --split's text column when it
 * holds more than one of those parts, since --split makes .card a row flex container and
 * only DIRECT children of .card become its columns (see the --split rules below).
 * ======================================================================================== */

.card{
	display:flex;flex-direction:column;gap:var(--cd-3);
	background:var(--cd-ground-raised);border-radius:var(--cd-r-md);
	box-shadow:var(--cd-shadow-1);padding:var(--cd-5);
	text-decoration:none;color:inherit;
	transition:transform .2s ease,box-shadow .2s ease;
}
.card__media{
	margin:calc(var(--cd-5) * -1) calc(var(--cd-5) * -1) 0;
	aspect-ratio:16/10;background-size:cover;background-position:center;
	background-image:var(--media, linear-gradient(135deg,var(--cd-teal-300),var(--cd-teal-600)));
	border-radius:var(--cd-r-md) var(--cd-r-md) 0 0;
}
.card__eyebrow{font-size:var(--cd-eyebrow);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--cd-ink-brand)}
.card__title{color:var(--cd-ink-strong)}
/* --square: a 1:1 media block (the kit's collage demo tiles use it). */
.card__media--square{aspect-ratio:1}
/* --sm: an h3 card title at the h4 step, for dense grids (keeps the outline h2 > h3). */
.card__title--sm{font-size:var(--cd-h4);line-height:1.35;letter-spacing:-.01em;font-weight:700}
.card__body{font-size:var(--cd-small);line-height:1.55;color:var(--cd-ink)}
.card__actions{display:flex;gap:var(--cd-3);flex-wrap:wrap;margin-top:auto;padding-top:var(--cd-2)}
.card__tags{display:flex;flex-wrap:wrap;gap:var(--cd-2);list-style:none;margin:0;padding:0}
.card__tags li{border:1px solid var(--cd-line);border-radius:var(--cd-r-pill);padding:4px 12px;font-size:var(--cd-small);color:var(--cd-ink-strong)}

/* --- --photo: scrim is mandatory, text sits over the image ----------------------------- */
.card--photo{position:relative;justify-content:flex-end;min-height:264px;padding:var(--cd-5);isolation:isolate;overflow:hidden}
.card--photo .card__media{position:absolute;inset:0;margin:0;border-radius:inherit;z-index:-2}
.card--photo::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--cd-scrim)}
.card--photo .card__title{color:var(--cd-white)}
.card--photo .card__body{color:#D6E3E1} /* matches .cd-tile p's literal on-scrim color; no light-mode token covers it */

/* --- --icon: small circular media (webinar/speaker-style cards) ------------------------ */
.card--icon .card__media{width:72px;height:72px;border-radius:var(--cd-r-pill);margin:0;flex:none}

/* --- --split: media beside a text column instead of above it ---------------------------
 * .card--split makes .card itself a row flex container, so only its DIRECT children size
 * as columns; .card__media is one (a fixed-width thumbnail, not a flexible column: it
 * neither grows nor shrinks, so it cannot itself force a wrap). The text side is usually
 * more than one part (title, body, sometimes actions), and those need to size and stack
 * together as the other column, not size individually as N more columns, so they go
 * inside .card__content, a documented wrapper used only by --split. Use it consistently
 * whenever --split has more than a single text part; a single part (just a title, say)
 * can skip it and be a direct child instead. No flex-wrap: a --split card that wrapped
 * would just become a --photo-shaped card with none of --photo's scrim, so .card__content
 * shrinks (min-width:0) instead, however narrow the card gets.
 * ----------------------------------------------------------------------------------------- */
.card--split{flex-direction:row;align-items:center;gap:var(--cd-4)}
.card--split .card__media{flex:0 0 96px;margin:0;aspect-ratio:1;border-radius:var(--cd-r-md)}
.card--split .card__content{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--cd-2);min-width:0}

/* --- hover lift, for any card that is itself a whole-card link ------------------------- */
a.card:hover,.card--link:hover{transform:translateY(-4px);box-shadow:var(--cd-shadow-2)}

/* --- --link: the whole card is clickable through one inner link ------------------------ */
.card--link{position:relative}
.card--link .card__title a{color:inherit;text-decoration:none}
.card--link .card__title a::after{content:"";position:absolute;inset:0;z-index:1}
.card--link .card__actions,.card--link .card__actions a{position:relative;z-index:2}

/* --- grids -------------------------------------------------------------------------- */
.grid{display:grid;gap:var(--cd-4)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(248px,100%),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}

/* --- course template modifiers (owner direction 2026-09-25, live Toronto course page) ---
 * --outline: the day/session cards under a course hero: a flat white card framed by a
 *   2px ink border instead of the soft raised shadow alone.
 * --tint: a light-ground card with no shadow (hotel callout, register card).
 * --center: centered text and actions.
 * __subtitle: the accent line under a card title ("Foundational Concepts").
 * __date: a strong date line.
 * ----------------------------------------------------------------------------------------- */
.card--outline{border:2px solid var(--cd-ink-strong);border-radius:var(--cd-r-sm);box-shadow:var(--cd-shadow-2)}
.card--tint{background:var(--cd-ground-tint);box-shadow:none}
.card--center{align-items:center;text-align:center}
.card--center .card__actions{justify-content:center}
.card__subtitle{font-size:var(--cd-body);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--cd-ink-accent);line-height:1.3}
.card__date{font-weight:700;color:var(--cd-ink-strong)}
.card__actions--start{margin-top:auto}
/* --callout: a full-width callout card closing a section (course hotel card); set apart
 * from the grid above it. --register: the course "Register for the in person live event"
 * card: roomier padding, benefits list and the registration form stacked. */
.card--callout{padding:var(--cd-6)}
.card--callout .card__body{max-width:none}
.card--register{gap:var(--cd-6);padding:clamp(var(--cd-5),4vw,var(--cd-8))}
.card--register .reg-form{margin-inline:auto}
/* A --register card keeps its light surface inside an .on-dark section (the 2027 Hybrid's
   notify-me card in #register), so its text goes back to the light-surface inks, and it
   sits centered at a form's width instead of spanning the section. */
.on-dark .card--register h3{color:var(--cd-ink-strong)}
.on-dark .card--register p{color:var(--cd-ink)}
.container--center > .card--register{width:100%;max-width:640px}

/* A --link card (Take a Test hub, on the deep teal band) also keeps its light surface
   inside .on-dark: same precedent as --register above, but --link's title text lives
   inside an <a> (base.css's .on-dark a{color:white} would otherwise repaint it too). */
.on-dark .card--link h3,.on-dark .card--link .card__title a{color:var(--cd-ink-strong)}
.on-dark .card--link p{color:var(--cd-ink)}

/* A --tint card also keeps its light surface inside .on-dark (the Patient Inquiry Form
   page's form card over its full-bleed photo band): same precedent as --register/--link
   above. Titles here run up to h2 (a card standing in for the section's own heading, not
   a grid item), so the override covers h2 as well as h3. */
.on-dark .card--tint h2,.on-dark .card--tint h3{color:var(--cd-ink-strong)}
.on-dark .card--tint p{color:var(--cd-ink)}

/* --- --course: the compact "Choose your course" card (owner feedback 2026-09-25,
 * docs/design-source/feedback-2026-09-25/17-course-cards-too-big.png) --------------------
 * The old card ran a full media block, a standalone date pill and two stacked full-width
 * buttons: badges and buttons ate most of the card, so four barely fit two across. This
 * overlays the format/location and next-date text as white text on the photo's own scrim
 * (no separate pill) and drops to one action row (a small Register button + a text
 * "Details" link), so the whole card is roughly half the old height. [tmj_course_cards]
 * (inc/course.php) is the only renderer; .card__body/__media-overlay/__media-meta/
 * __media-date/__body-text are used nowhere else.
 * Note: .card__body here is a wrapper DIV (the --split precedent for an extra part beyond
 * the base six), not the existing .card__body <p> - --course never puts both in the same
 * card, so the selectors below cannot collide with the plain .card__body paragraph rule.
 * Equal card heights + a bottom-pinned action row (polish round, owner screenshot review):
 * .grid's default align-items:stretch already equalizes each .card--course's outer height
 * to its row; .card__body:flex:1 then claims that spare height inside the card (instead of
 * leaving it as blank space below a short title's 1-line card__body), so .card__actions'
 * own margin-top:auto reaches the same visual bottom in every card in the row regardless of
 * whether the title wrapped to one line or two. */
.card--course{padding:0;overflow:hidden}
.card--course .card__media{
	position:relative;margin:0;aspect-ratio:16/9;
	border-radius:var(--cd-r-md) var(--cd-r-md) 0 0;
	display:flex;align-items:flex-end;
}
.card--course .card__media::after{content:"";position:absolute;inset:0;background:var(--cd-scrim)}
.card__media-overlay{position:relative;z-index:1;padding:var(--cd-3) var(--cd-4);color:var(--cd-white)}
.card__media-meta{margin:0;font-size:var(--cd-eyebrow);font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.card__media-date{margin:.3em 0 0;font-size:var(--cd-small)}
/* __media-lock: a lock on the light-green token pinned to the photo's top-left corner, above
   the scrim (tmj_render_course_card_markup()'s 'locked': a webinar this visitor cannot watch yet). */
.card__media-lock{
	position:absolute;z-index:1;top:var(--cd-3);left:var(--cd-4);
	display:grid;place-items:center;width:36px;height:36px;border-radius:var(--cd-r-pill);
	background:var(--cd-teal-200);color:var(--cd-green-800);box-shadow:var(--cd-shadow-1);
}
/* --course-titled: the title on the photo (white, a step smaller than --sm, two lines at most)
   and the body is the description alone, so every card in a row is the same height. */
.card--course-titled .card__media-overlay .card__title{
	margin:0;color:var(--cd-white);font-size:var(--cd-body);line-height:1.3;font-weight:700;
	display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card--course-titled .card__body-text{min-height:calc(3 * 1.55em)}
.card--course .card__body{flex:1;display:flex;flex-direction:column;gap:var(--cd-2);padding:var(--cd-4) var(--cd-4) var(--cd-5)}
.card--course .card__title{margin:0}
.card__body-text{
	margin:0;font-size:var(--cd-small);line-height:1.55;color:var(--cd-ink);
	display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.card--course .card__actions{margin-top:auto;padding-top:var(--cd-1);align-items:center}

/* --- .grid--course: 1 / 2 / 4 columns, matching the owner's target proportions (a
 * dedicated breakpoint set: tile-grid's 900px 4-up step would put 4-up as early as 900px,
 * too cramped for this card's body copy) --------------------------------------------- */
.grid--course{grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.grid--course{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.grid--course{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Five or six cards would leave one or two alone on a second row of four: three across. */
@media (min-width:1200px){
	.grid--course:has(> :nth-child(5):last-child),
	.grid--course:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* --- .grid--3up: 1 / 2 / 3 fixed columns (the blog's post cards), the same breakpoints as
 * tile.css's .tile-grid (the kit's other fixed-column grid), so every "three-up" card row
 * on the site steps at the same widths. .grid--3 above is auto-fit by a minimum card width
 * (248px), which is right for a loose card collection but, at a 1344px desktop row, fits
 * 5 across, cramming a post card's image+meta+title+excerpt+action content. ------------- */
.grid--3up{grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){.grid--3up{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.grid--3up{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* __list: a short bulleted list inside a card (course "What you will learn" columns). */
/* card--glass: the doctor testimonial cards' deep-green glass on any ground (Pediatric OSA's
   curriculum cards over the course photo). Pair it with .on-dark for white headings and
   muted-invert copy: <div class="card card--glass on-dark">. */
.card--glass{
	background-color:color-mix(in srgb,var(--cd-ground-deep) 94%,transparent);background-image:var(--cd-glass-sheen);
	border-color:var(--cd-glass-border);box-shadow:var(--cd-glass-shadow);
	-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.card__list{margin:0;padding-left:1.2em;display:grid;gap:var(--cd-1);font-size:var(--cd-small);line-height:1.5;color:var(--cd-ink)}
.card__list li::marker{color:var(--cd-ink-accent)}
.on-dark .card__list{color:var(--cd-ink-invert-muted)}

/* Book blurb on the reading list cards (restored from live 2026-10-08: the descriptions are
   the page's unique text for "tmj books" searches). Clamped visually; the full text stays in
   the page. */
.card__desc{margin:var(--cd-2) 0 0;font-size:var(--cd-small);line-height:1.55;color:var(--cd-ink-muted);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}