/* CV examples listing (/cv-examples), v3. Loaded only by includes/site/v3/pages/cv-examples.php.
   The browse band sits on cream (2026-10-24, owner: the sky band clashed with the cards), so cards
   and the filter panel get a visible navy-tinted edge, and thumbnails rotate through four tones
   that never match the band: sunshine, peach, mint, sky. */

.v-band--browse { padding-top: clamp(12px, 2.4vw, 32px); }

.v-band--browse .v-filters,
.v-band--browse .ex-card { box-shadow: 0 0 0 1.5px rgba(30, 42, 90, .11), 0 12px 28px rgba(30, 42, 90, .09); }
.v-band--browse .ex-card:hover { box-shadow: 0 0 0 1.5px rgba(30, 42, 90, .2), 0 20px 40px rgba(30, 42, 90, .16); }
.v-band--browse .ex-thumb { box-shadow: inset 0 -1.5px 0 rgba(30, 42, 90, .08); }
.v-band--browse .ex-flag { box-shadow: 0 0 0 2px var(--paper); }

/* Tones by position, so neighbours differ in 2, 3 or 4 columns (no JS needed). */
.v-band--browse .ex-grid > .ex-card:nth-child(4n+1) { --acc: var(--sun-l); }
.v-band--browse .ex-grid > .ex-card:nth-child(4n+2) { --acc: #FFD9BF; }
.v-band--browse .ex-grid > .ex-card:nth-child(4n+3) { --acc: var(--mint); }
.v-band--browse .ex-grid > .ex-card:nth-child(4n+4) { --acc: var(--sky); }
/* After filtering, cv-examples.js re-numbers the visible cards so neighbours still differ. */
.v-band--browse .ex-grid > .ex-card[data-tone="0"] { --acc: var(--sun-l); }
.v-band--browse .ex-grid > .ex-card[data-tone="1"] { --acc: #FFD9BF; }
.v-band--browse .ex-grid > .ex-card[data-tone="2"] { --acc: var(--mint); }
.v-band--browse .ex-grid > .ex-card[data-tone="3"] { --acc: var(--sky); }

/* "No work history yet?" pointer to the first CV builder, above the grid. */
.ex-firstjob { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 22px; padding: 14px 18px; font-size: 16px; line-height: 1.45; color: var(--text); background: var(--paper); border-radius: 18px; box-shadow: 0 0 0 1.5px rgba(30, 42, 90, .11); }
.ex-firstjob b { color: var(--navy); }
.ex-firstjob a { font-weight: 800; color: var(--navy); text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* "How to get the most from an example" sits on sky here: the mint icon blob would vanish, so use paper. */
.v-band--howto .v-point:nth-child(3n) .v-point__ic { --pc: var(--paper); }