/* Homepage "My Explorations." (owner 2026-10-13): the inDrive card, version H1 of design/prototypes/homepage/indrive-cover-H1.html.
   The Work card component (.cs-card: width, 1250 x 402 ratio, radius, the italic uppercase caption, the Read disc) with a cover
   built in HTML / CSS; every size inside the cover is in cqw of the card, so it scales with it. js/explorations.js: the Read disc. */
.explore { padding: 0 var(--page-margin) var(--sp-160); display: flex; flex-direction: column; gap: var(--sp-80); }   /* as .articles (components.css) */
@media (max-width: 1189.98px) { .page--home .explore { padding-bottom: var(--hm-sec-pad); gap: var(--hm-sec-gap); } }
@media (max-width: 767.98px) { .page--home .explore { padding-bottom: var(--hm-sec-pad-phone); gap: var(--hm-sec-gap-phone); } }
/* v4.3 B1 (owner 2026-10-14): full width, from the heading's left edge to the end of the sub-label line. A grid: one card fills the
   row; .ex-list--2 halves, .ex-list--3 thirds on desktop; one column on phones. Gap = the Work cards' gap; card height = the Work
   card height (the Work cover width x 402 / 1250, so 402 at 1440), whatever the column width. */
.ex-list { container-type: inline-size; display: grid; grid-template-columns: repeat(var(--ex-n, 1), minmax(0, 1fr)); gap: var(--sp-70);
  --ex-h: calc(min(var(--cs-card-w), 100cqw - var(--tl-col-w) - var(--sp-57)) * var(--n-ex-ar)); }
.page--home .ex-list .ex-card { width: 100%; }
.ex-list--2 { --ex-n: 2; }
.ex-list--3 { --ex-n: 3; }
@media (max-width: 1189.98px) { .ex-list { gap: var(--card-gap); --ex-h: calc(100cqw * var(--n-ex-ar)); } }
@media (max-width: 767.98px) { .ex-list { --ex-n: 1; } }
/* v4.3 B2: the cover's sizes come from the card height (cqh), so the text block and the illustration keep their 1440 sizes when the
   card gets wider; below 1190 the card has the Work ratio again and the composition is the one it always had. 1 old cqw = 3.1095 cqh. */
.page--home .ex-cover { aspect-ratio: auto; height: var(--ex-h); }
.ex-cover { container-type: size; overflow: hidden; border-radius: var(--r-media); isolation: isolate; background: var(--g-ex-cover); }
.ex-cover__in { position: absolute; inset: 0; transition: transform var(--wf-dur) var(--ease-out); }
@media (hover: hover) { .ex-card:hover .ex-cover__in, .ex-card:focus-visible .ex-cover__in { transform: scale(var(--ex-hover-zoom)); } }   /* the Work covers' 4 % hover zoom */
.page--home .ex-cover .ex-illo { position: absolute; left: auto; top: auto; right: 15.55cqh; bottom: -3.11cqh; z-index: 1; width: 130.6cqh; height: auto; max-width: none; border-radius: 0; }
.ex-txt { position: absolute; z-index: 3; left: 19.9cqh; top: 50%; transform: translateY(-50%); display: grid; gap: 4.975cqh; max-width: 136.8cqh; }
.ex-logo { display: block; height: 8.365cqh; width: auto; margin: 0 0 1.71cqh 1.741cqh; }   /* the official mark, sized and placed as the approved card's logo artwork */
.ex-hl { margin: 0; font-family: var(--font-figtree); font-weight: var(--fw-bold); font-size: 12.75cqh; line-height: 1.12; letter-spacing: -0.025em; color: var(--c-idv-ink); text-wrap: balance; text-transform: none; }
.ex-sub { margin: 0; font-family: var(--font-figtree); font-weight: var(--fw-medium); font-size: 4.198cqh; line-height: 1.3; color: var(--c-ex-sub); }
/* the highlight bar (site-wide rule, tools/gen/marks.py): a sharp ink layer, lime words */
.ex-mark { position: relative; z-index: 0; padding: 0 var(--mk-pr, 0.26em) 0 var(--mk-pl, 0.26em); margin-left: 0.04em; background: none; color: var(--c-idv-lime); white-space: nowrap; border-radius: 0; }
.ex-mark::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: var(--mk-t); bottom: var(--mk-b); background: var(--c-idv-ink); border-radius: 0; }
@media (prefers-reduced-motion: reduce) { .ex-cover__in { transition: none; } .ex-card:hover .ex-cover__in { transform: none; } }
@media (max-width: 767.98px) { .page--home .explore .section-title { font-size: min(var(--fs-56), calc((100vw - 2 * var(--page-margin)) / 7.8)); } }   /* "EXPLORATIONS." is one long word: it fits the phone column */
/* R16 (owner 2026-10-13): phones. The Work cards keep their 1250 x 402 ratio here, which would set the headline at about 14 px, so the
   cover gets a phone composition inside the same card: logo and headline top left (headline at least 22 px, the bar kept), the subline
   hidden, the illustration bottom right, clear of the text. */
@media (max-width: 767.98px) {
  .ex-txt { left: 4.2cqw; top: 3.6cqw; transform: none; gap: 1.4cqw; max-width: 60cqw; }
  .ex-logo { height: max(var(--ex-logo-min-phone), 3.4cqw); margin: 0; }
  .ex-hl { font-size: max(var(--ex-hl-min-phone), 6.1cqw); line-height: 1.1; text-wrap: wrap; }
  .ex-sub { display: none; }
  .page--home .ex-cover .ex-illo { right: 1.5cqw; bottom: -1cqw; width: 33cqw; }
}