/* ════════════════════════════════════════════════════════════════════════
   10-cards.css — VOALA ikonkové bloky (Grafické studio / Printlab / …)

   Zdroj: Figma VOALA_WEB_2025 → HOMEPAGE 2157:880 (verze 2. 9. 2026)
   - desktop: karty 2159:2224 / 2231 / 2241 / 2242, 287 × 288, mřížka
     4 sloupce, mezera 25, tělo stránky 1222
   - karta: bg WHITE_VOALA, rámeček 3 px #BDBDBD (Gray 4), radius 20,
     BEZ stínu; HOVER = rámeček RED_VOALA, celá karta je odkaz
   - nadpis Inter 500 28/130 % RED_VOALA (verzálky 33 px od horní hrany,
     28 px zleva), text Inter 500 18/150 % BLACK_VOALA (verzálky 81 px)
   - tlačítko vlevo dole: outline pill 70,9 × 40, rámeček 2 px RED,
     text RED Inter 600 20/23; HOVER = výplň RED, text bílý
   - ikona vpravo dole 92 × 92 (91,875), červená (#EA515B), 27 px od
     pravé a 28 px od spodní hrany
   - mobil 13:395 (starší verze designu, barevné karty 358 × 358): bereme
     jen rozměry a odsazení, vzhled je nový

   Pole „Barva pozadí" z administrace už frontend nepoužívá (3. 9. 2026).
   Odsazení jsou měřená od VNĚJŠÍ hrany karty a v CSS zmenšená o rámeček
   3 px (box-sizing: border-box, padding je uvnitř rámečku).

   Markup: template-parts/cards.php → [vo_cards]
   Sekce v Divi dostává CSS Class „vo-cards-section".

   Mezery jsou doměřené v renderu (cap-to-cap), proto nejsou kulaté —
   viz komentář v 10-intro.css.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Divi sekce — reset ──────────────────────────────────────────────── */
.vo-cards-section.et_pb_section {
  padding: 0 !important;
  background: transparent !important;
  gap: 0 !important;
  position: relative;
  z-index: 1;
}
.vo-cards-section > .et_pb_row {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.vo-cards-section .et_pb_module,
.vo-cards-section .et_pb_column { margin-bottom: 0 !important; }

/* Divi 5 dává mezi moduly ve sloupci row-gap 30 px — mezery si tady řídíme
   sami, takže gap pryč (viz komentář v 10-section.css). */
.vo-cards-section > .et_pb_row { row-gap: 0 !important; }
.vo-cards-section .et_pb_column { gap: 0 !important; }

/* ── Fluidní hodnoty (390 → 1440) ────────────────────────────────────── */
.vo-cards {
  --vo-card-gap:        clamp(25px, calc(59.29px - 2.381vw), 50px);
  --vo-card-min-h:      clamp(288px, calc(384px - 6.667vw), 358px);
  --vo-card-border:     3px;
  --vo-card-bleed-title: -19px;   /* nadpis smí až skoro k pravé hraně karty */
  --vo-card-bleed-text:  -9px;    /* text o kousek méně (dle Figmy) */
  /* Vnitřní odsazení (bez rámečku): 1440 → 19 / 25 / 24 / 25,
     390 → 21,8 / 32 / 28 / 31,5 (mobilní frame má vnější 24,8 / 35 / 31 / 34,5) */
  --vo-card-pad-top:    clamp(19px, calc(22.84px - 0.2667vw), 21.8px);
  --vo-card-pad-left:   clamp(25px, calc(34.6px - 0.6667vw), 32px);
  --vo-card-pad-right:  clamp(24px, calc(29.49px - 0.381vw), 28px);
  --vo-card-pad-bottom: clamp(25px, calc(33.91px - 0.619vw), 31.5px);
  --vo-card-gap-text:   clamp(12.4px, calc(11.92px + 0.1238vw), 13.7px);
  --vo-card-icon:       clamp(92px, calc(163.31px - 4.952vw), 144px);
  --vo-card-btn-h:      40px;
  --vo-card-btn-px:     12px;     /* + rámeček 2 px → pill ~71 px na „Více" (Figma 70,9) */
  --vo-card-btn-fs:     20px;

  font-family: var(--font-base);
}

/* ── Mřížka ──────────────────────────────────────────────────────────── */
.vo-cards__inner {
  width: 100%;
  max-width: calc(var(--container) + 48px);
  margin: 0 auto;
  padding: 0 24px;
}

.vo-cards__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--vo-card-gap);
}

/* ── Karta ───────────────────────────────────────────────────────────────
   Výška je MINIMUM, ne pevný rozměr: na 1440 vyjde 287, na 390 vyjde 358,
   tedy čtverec z designu — a delší text kartu natáhne místo přetečení.
   Všechny karty v řádku se pak srovnají na stejnou výšku samy.

   Vědomě tu NENÍ aspect-ratio: grid item se v řádku roztahuje, čímž se
   jeho výška stane pevná a aspect-ratio se zahodí (karty by v řádku
   zůstaly různě vysoké). A s aspect-ratio + auto výškou se zase minimální
   výška obsahu přepíše do minimální ŠÍŘKY a rozhodí mřížku.
   Ze stejného důvodu tu není ani overflow: hidden — vypnulo by automatické
   minimum grid itemu a text by z karty vytekl.
   ──────────────────────────────────────────────────────────────────────── */
.vo-cards .vo-card,
.vo-cards a.vo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0;
  min-height: var(--vo-card-min-h);
  /* Dole je vyhrazený pruh jen na TLAČÍTKO (viz .vo-card__foot). Ikona
     vpravo dole se s textem může potkat — ve Figmě je to tak i u čtvrtého
     bloku (text 4 řádky končí 184 px pod horní hranou, ikona začíná na
     169) a karta přesto drží 288. Kdyby se rezervovala celá výška ikony,
     natáhl by dlouhý text celý řádek karet na 300+. */
  padding: var(--vo-card-pad-top) var(--vo-card-pad-right) calc(var(--vo-card-pad-bottom) + var(--vo-card-btn-h)) var(--vo-card-pad-left);
  border: var(--vo-card-border) solid #bdbdbd;   /* Gray 4 z Figmy */
  border-radius: 20px;
  background: var(--white-voala);
  color: var(--black-voala);
  text-decoration: none !important;
  transition: border-color var(--t-fast);
}

/* Celá karta je odkaz (design: „celé pole jako button") — hover zčervená
   rámeček i tlačítko, nic jiného se nehýbe. */
.vo-cards a.vo-card:hover,
.vo-cards a.vo-card:focus-visible {
  border-color: var(--red-voala);
  color: var(--black-voala);
}
.vo-cards a.vo-card:focus-visible {
  outline: 2px solid var(--black-voala);
  outline-offset: 3px;
}

/* ── Nadpis a text ───────────────────────────────────────────────────── */
/* Nadpis a text smí ve čtyřsloupcové mřížce přetéct pravý padding karty —
   ve Figmě jde nadpis („Zakázková výroba" = 244 px) skoro k hraně karty,
   jinak by se na 1440 zlomil na dva řádky a karta by přestala být čtverec.
   Pravý padding zůstává jen ikoně, která na něm v designu opravdu sedí. */
.vo-cards .vo-card__title {
  margin: 0 var(--vo-card-bleed-title) 0 0;
  padding: 0;
  font-family: var(--font-base);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--red-voala);
  text-align: left;
}

.vo-cards .vo-card__text {
  margin: var(--vo-card-gap-text) var(--vo-card-bleed-text) 0 0;
  padding: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: inherit;
  text-align: left;
}

/* ── Spodní řádek: tlačítko vlevo, ikona vpravo ──────────────────────────
   Ve Figmě sedí ikona i tlačítko na pevném místě u dolní hrany karty bez
   ohledu na délku textu (u posledního bloku se text s ikonou dokonce
   překrývá). Proto je pruh vytažený z toku a karta mu drží místo spodním
   paddingem — text tak končí těsně nad ikonou místo aby ji odtlačil dolů.
   Pozice jsou vůči padding boxu, tedy uvnitř rámečku (border-box). */
.vo-cards .vo-card__foot {
  position: absolute;
  left: var(--vo-card-pad-left);
  right: var(--vo-card-pad-right);
  bottom: var(--vo-card-pad-bottom);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.vo-cards .vo-card__icon {
  flex: 0 0 auto;
  width: var(--vo-card-icon);
  height: var(--vo-card-icon);
  margin-left: auto;   /* drží ikonu vpravo i bez tlačítka */
  object-fit: contain;
  object-position: right bottom;
}

/* ── Tlačítko ────────────────────────────────────────────────────────────
   Outline pill z nového framu (2159:2255): rámeček 2 px RED, text RED
   Inter 600 20/23, 70,9 × 40. Je to <span> uvnitř odkazu-karty, hover
   řídí karta: výplň RED + bílý text (2159:2272 = hover stav v designu).
   ──────────────────────────────────────────────────────────────────────── */
.vo-cards .vo-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  min-height: var(--vo-card-btn-h);
  padding: 0 var(--vo-card-btn-px);
  border: 2px solid var(--red-voala);
  border-radius: 30px;
  background: transparent;
  color: var(--red-voala);
  font-family: var(--font-base);
  font-size: var(--vo-card-btn-fs);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.vo-cards a.vo-card:hover .vo-card__btn,
.vo-cards a.vo-card:focus-visible .vo-card__btn {
  background: var(--red-voala);
  color: var(--white-voala);
}

/* ── Přístupnost ─────────────────────────────────────────────────────── */
.vo-cards .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Dva sloupce — čtyři karty vedle sebe už by měly nečitelně malý text.
     Karta je tu širší než vysoká, čtverec z designu platí na 1440 a na 390. */
  .vo-cards__grid { grid-template-columns: repeat(2, 1fr); }
  .vo-cards .vo-card {
    min-height: 300px;
    /* Karta je tu široká dost, přetékání nadpisu do paddingu netřeba */
    --vo-card-bleed-title: 0px;
    --vo-card-bleed-text: 0px;
  }
}

@media (max-width: 720px) {
  /* Mobilní frame: jeden sloupec, boční okraje 16 px, obsah 358 */
  .vo-cards__inner { padding: 0 16px; }
  .vo-cards__grid { grid-template-columns: 1fr; }
  .vo-cards .vo-card { min-height: var(--vo-card-min-h); }
}

@media (prefers-reduced-motion: reduce) {
  .vo-cards .vo-card__btn { transition: none; }
}