/* okno-card-system.css — OKNO Unified Card System, Wave 1 (v=20260726card2).
   Shared CardShell + CardContent. CSS-first, ZERO runtime JS. Load AFTER okno-global-shell.css AND
   okno-typography.css. Does NOT modify shell/typography. Card titles are styled by .ok-card__title
   regardless of element (h2/h3/h4/p) and out-specify the global h2/h3{!important} rules (class 0,1,0 beats
   type 0,0,1 even between !important declarations) so page-heading sizes NEVER leak into cards. */

:root{
  /* surfaces / lines / radius */
  --ok-card-line:#e7ecf3; --ok-card-radius:14px; --ok-card-surface:#fff; --ok-card-surface-quiet:#f6f8fb;
  --ok-card-accent:linear-gradient(180deg,#f3faf8,#eaf4f1);
  --ok-card-shadow-hover:0 6px 20px rgba(13,124,107,.10);
  /* spacing */
  --ok-card-pad:18px; --ok-card-pad-m:16px; --ok-card-gap:24px; --ok-card-gap-t:18px; --ok-card-gap-m:16px;
  /* media */
  --ok-card-ratio:16/10; --ok-card-overlay-scrim:linear-gradient(180deg,rgba(12,30,60,0) 32%,rgba(12,30,60,.64) 100%);
  /* colour */
  --ok-teal:#0d7c6b; --ok-navy:#0c1e3c; --ok-muted:#5b6472; --ok-ink:#33404f; --ok-focus:#7fd1c3;
  /* motion */
  --ok-card-move:-2px; --ok-card-t:150ms;
  --ok-font:'Mulish','Mulish Fallback',system-ui,'Segoe UI',Roboto,Arial,sans-serif;
}

/* ===== collection grids (optional helper; the pilot keeps its own container) ===== */
.ok-cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ok-card-gap)}
@media(max-width:1023px){.ok-cardgrid{grid-template-columns:repeat(2,1fr);gap:var(--ok-card-gap-t)}}
@media(max-width:680px){.ok-cardgrid{grid-template-columns:1fr;gap:var(--ok-card-gap-m)}}
.ok-cardgrid > .ok-card--span2{grid-column:span 2}
@media(max-width:680px){.ok-cardgrid > .ok-card--span2{grid-column:span 1}}

/* ===== CardShell ===== */
.ok-card{position:relative;display:flex;flex-direction:column;min-width:0;
  background:var(--ok-card-surface);border:1px solid var(--ok-card-line);border-radius:var(--ok-card-radius);
  overflow:hidden;text-decoration:none;color:var(--ok-navy);font-family:var(--ok-font);
  transition:box-shadow var(--ok-card-t),transform var(--ok-card-t),border-color var(--ok-card-t)}
.ok-card:hover{border-color:var(--ok-teal);box-shadow:var(--ok-card-shadow-hover);transform:translateY(var(--ok-card-move))}
.ok-card:focus-visible{outline:3px solid var(--ok-focus);outline-offset:2px}
.ok-card:active{transform:translateY(0);box-shadow:none}
@media(prefers-reduced-motion:reduce){.ok-card{transition:none}.ok-card:hover,.ok-card:active{transform:none}}
/* surfaces */
.ok-card--quiet{background:var(--ok-card-surface-quiet)}
.ok-card--accent{background:var(--ok-card-accent)}

/* ===== media zone (independent of text) ===== */
.ok-card__media{position:relative;display:block;aspect-ratio:var(--ok-card-ratio);background:#eef1f7}
.ok-card__media img{display:block;width:100%;height:100%;object-fit:cover}
.ok-card--ratio-3-2 .ok-card__media{aspect-ratio:3/2}
.ok-card--ratio-2-1 .ok-card__media{aspect-ratio:2/1}
.ok-card__media--abstract{background:linear-gradient(135deg,#e7f4f1,#d5e6f2)}
.ok-card__media--fallback{background:linear-gradient(135deg,#eef1f7,#e3e7f0)}   /* broken/missing image */

/* ===== CardContent ===== */
.ok-card__body{display:flex;flex-direction:column;gap:8px;padding:var(--ok-card-pad);flex:1 1 auto;min-width:0}
@media(max-width:680px){.ok-card__body{padding:var(--ok-card-pad-m)}}
/* eyebrow / status */
.ok-card__eyebrow{margin:0;font-size:12.5px;line-height:1.2;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ok-teal)}
.ok-card__status{margin:0;font-size:12.5px;line-height:1.2;font-weight:600;letter-spacing:.02em;color:#8a5a00}
/* title — !important out-specifies global h2/h3 page-heading rules (no leak). Applies to any element. */
.ok-card__title{margin:0;font-family:var(--ok-font);font-size:18px!important;line-height:1.3!important;
  font-weight:600!important;letter-spacing:normal!important;text-transform:none!important;color:var(--ok-navy)}
@media(max-width:680px){.ok-card__title{font-size:17px!important}}
.ok-card--featured .ok-card__title{font-size:21px!important;line-height:1.25!important}
@media(max-width:680px){.ok-card--featured .ok-card__title{font-size:19px!important;line-height:1.3!important}}
/* comments */
.ok-card__primary{margin:0;font-size:15px;line-height:1.5;font-weight:400;color:var(--ok-ink)}
.ok-card__secondary{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:var(--ok-muted)}
/* meta / price / term */
.ok-card__meta{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px 12px;font-size:13px;line-height:1.3;
  font-weight:500;color:var(--ok-muted)}
.ok-card__price{font-size:16px;line-height:1.3;font-weight:700;color:var(--ok-teal)}
.ok-card__term{font-size:13px;line-height:1.3;font-weight:500;color:var(--ok-muted)}
/* tags */
.ok-card__tags{margin:2px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.ok-card__tags > li{font-size:12.5px;line-height:1.2;font-weight:500;color:var(--ok-navy);
  background:#eef3f8;border:1px solid var(--ok-card-line);border-radius:999px;padding:5px 9px}
/* action affordance (NOT a second link — decorative text inside the whole-card anchor) */
.ok-card__action{font-size:14px;line-height:1.2;font-weight:600;color:var(--ok-teal);margin-top:6px}

/* ===== layout: split (media beside body) ===== */
.ok-card--split{flex-direction:row;align-items:stretch}
.ok-card--split > .ok-card__media{aspect-ratio:auto;flex:0 0 40%;width:40%;min-height:100%}
.ok-card--split > .ok-card__media img{height:100%}
@media(max-width:640px){
  .ok-card--split{flex-direction:column}
  .ok-card--split > .ok-card__media{width:100%;flex:none;aspect-ratio:var(--ok-card-ratio);min-height:0}
}

/* ===== layout: overlay v1 (text over media in a declared safe zone) ===== */
/* v1 content budget is enforced by the renderer/schema: eyebrow + title + <=1-line primary + action only.
   NO secondary, NO tags, NO price/term. CSS provides the scrim + safe-zone placement + contrast. */
.ok-card--overlay > .ok-card__media{aspect-ratio:16/9}
.ok-card--overlay::after{content:"";position:absolute;inset:0;background:var(--ok-card-overlay-scrim);z-index:1;pointer-events:none}
.ok-card--overlay > .ok-card__body{position:absolute;z-index:2;width:min(72%,520px);color:#fff;padding:16px 18px}
.ok-card--overlay .ok-card__title,.ok-card--overlay .ok-card__eyebrow,.ok-card--overlay .ok-card__action{color:#fff}
.ok-card--overlay .ok-card__primary{color:rgba(255,255,255,.92)}
/* safe zones */
.ok-card--sz-bottom-left  > .ok-card__body{inset:auto auto 0 0}
.ok-card--sz-bottom-right > .ok-card__body{inset:auto 0 0 auto;text-align:right}
.ok-card--sz-top-left     > .ok-card__body{inset:0 auto auto 0}
.ok-card--sz-top-right    > .ok-card__body{inset:0 0 auto auto;text-align:right}
.ok-card--sz-center-left  > .ok-card__body{inset:50% auto auto 0;transform:translateY(-50%)}
.ok-card--sz-center-right > .ok-card__body{inset:50% 0 auto auto;transform:translateY(-50%);text-align:right}

/* ===== no-media role: content-led spacing (never an empty image zone) ===== */
.ok-card--nomedia > .ok-card__body{padding-top:20px}
@media(max-width:680px){.ok-card--nomedia > .ok-card__body{padding-top:16px}}

/* ===== reduced-motion demo hook (lab) ===== */
.ok-rm .ok-card{transition:none}.ok-rm .ok-card:hover{transform:none}