/* ════════════════════════════════════════════════════════════════════════
   22-printlab.css — VOALA bloky služeb Print LABu (mozaika dlaždic)

   Zdroj: Figma VOALA_WEB_2025 → PRINTLAB (24:1323), verze z 2. 9. 2026,
   dlaždice 24:1441–1588, pilly 2157:1271–1333, CTA 2157:1259 + 1262.
   - mřížka na těle stránky 1222: mezera vodorovně 29, svisle 27,
     výška řady 288; šířky: půlka 596 / třetina 388 / dvě třetiny 806
     → 6sloupcový grid (half = 3, third = 2, wide = 4 sloupce)
   - dlaždice: bg #E0E0E0 (Gray 5), radius 20, stín --shadow-map, BEZ
     rámečku; s fotkou → fotka cover přes celou plochu
   - nadpis Inter 500 28/130 % BLACK (verzálky 33 od horní hrany, 28 zleva),
     text Inter 500 18/150 % (verzálky 82), max. šířka 222
   - pill „Více": bílý (WHITE_VOALA), text BLACK Inter 600 20/23, 70,9 × 40,
     28 zleva a 28 od spodní hrany; HOVER = výplň RED, text bílý
     (1. dlaždice v designu = hover stav, celá dlaždice je odkaz)
   - pod mozaikou: červený pill „Kontaktujte nás" 187 × 40 na střed (51 px
     pod dlaždicemi), pod ním červený text 20/500/150 % na střed (51 px),
     linka další sekce 102 px pod textem — samostatný Divi TEXT modul
     s třídou vo-printlab-cta (nahrazuje dřívější červený blok
     vo-printlab-contact, který v novém designu není)
   - mobilní frame neexistuje → mezery a výšky dlaždic interpolované
     stejným vzorcem 390 → 1440 jako jinde

   Markup: template-parts/printlab.php → [vo_printlab]
   Sekce v Divi dostává CSS Class „vo-printlab-section".
   ════════════════════════════════════════════════════════════════════════ */

/* ── Fluidní hodnoty (390 → 1440) ────────────────────────────────────── */
.vo-printlab-section,
.vo-printlab {
  --vo-pl-gap-x:      clamp(16px, calc(11.17px + 1.238vw), 29px);
  --vo-pl-gap-y:      clamp(16px, calc(11.91px + 1.048vw), 27px);
  --vo-pl-min-h:      clamp(240px, calc(222.17px + 4.571vw), 288px);
  /* Vnitřek dlaždice (1440 → 22 / 28 / 27 / 28 = verzálky nadpisu 33,
     textu 82; mobilní konce převzaté z karet homepage 24,8 / 35 / 31 / 34,5) */
  --vo-pl-pad-top:    clamp(22px, calc(25.84px - 0.2667vw), 24.8px);
  --vo-pl-pad-left:   clamp(28px, calc(37.6px - 0.667vw), 35px);
  --vo-pl-pad-right:  clamp(27px, calc(32.49px - 0.381vw), 31px);
  --vo-pl-pad-bottom: clamp(28px, calc(36.91px - 0.619vw), 34.5px);
  --vo-pl-gap-text:   clamp(12.4px, calc(11.55px + 0.219vw), 14.7px);
  --vo-pl-btn-h:      40px;
  --vo-pl-btn-px:     14px;    /* → pill ~71 px na „Více" (Figma 70,9) */
  --vo-pl-btn-fs:     20px;
  --vo-pl-cta-gap:    clamp(32px, calc(24.94px + 1.81vw), 51px);
}

/* ── Divi sekce — reset ──────────────────────────────────────────────────
   Nahoře 0 (mezeru dodává textová sekce nad ní), dole 102 px od CTA textu
   k lince další sekce (Figma 2640 → 2742), na mobilu 50.
   ──────────────────────────────────────────────────────────────────────── */
.vo-printlab-section.et_pb_section {
  padding: 0 0 clamp(50px, calc(30.69px + 4.952vw), 102px) !important;
  background: var(--white-voala) !important;
  gap: 0 !important;
  position: relative;
  z-index: 1;
}
.vo-printlab-section > .et_pb_row {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.vo-printlab-section .et_pb_module,
.vo-printlab-section .et_pb_column { margin-bottom: 0 !important; }
.vo-printlab-section > .et_pb_row { row-gap: 0 !important; }
.vo-printlab-section .et_pb_column { gap: 0 !important; }

/* Textová sekce nad mozaikou: design tu má od účaří odstavce k dlaždicím
   opticky 115 (homepage má 149) → té konkrétní dvojici sekcí se zmenší
   spodní padding intra. Mobilní hodnota zůstává standardní (46). */
.vo-intro-section:has(+ .vo-printlab-section) {
  --vo-intro-pad-bottom: clamp(46px, calc(22.23px + 6.095vw), 110px);
  /* Odstavec tu má plnou šířku z designu (972), ne zúžených 700 —
     „Mimo exklusivní ruční výrobu…" se láme na dva řádky jako ve Figmě. */
  --vo-intro-width: var(--vo-intro-text-width);
}

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

/* 6 sloupců: půlka = 3, třetina = 2, dvě třetiny = 4. Mezera 29 dělí
   1222 přesně: 6 × 179,5 + 5 × 29 = 1222. */
.vo-printlab__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--vo-pl-gap-y) var(--vo-pl-gap-x);
  font-family: var(--font-base);
}

/* ── Dlaždice ────────────────────────────────────────────────────────────
   Stejné zásady jako karta homepage (viz 10-cards.css): min-height místo
   aspect-ratio (delší text dlaždici natáhne, řádek se srovná sám), žádné
   overflow: hidden na dlaždici (vypnulo by minimum grid itemu) — fotku
   ořezává border-radius na <img> samotném.
   ──────────────────────────────────────────────────────────────────────── */
.vo-printlab .vo-ptile,
.vo-printlab a.vo-ptile {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0;
  min-height: var(--vo-pl-min-h);
  /* Dole je vyhrazený pruh na tlačítko (viz .vo-ptile__foot) */
  padding: var(--vo-pl-pad-top) var(--vo-pl-pad-right) calc(var(--vo-pl-pad-bottom) + var(--vo-pl-btn-h)) var(--vo-pl-pad-left);
  border-radius: 20px;
  background: #e0e0e0;   /* Gray 5 z Figmy */
  box-shadow: var(--shadow-map);
  color: var(--black-voala);
  text-decoration: none !important;
}
.vo-printlab a.vo-ptile:hover,
.vo-printlab a.vo-ptile:focus-visible { color: var(--black-voala); }
.vo-printlab a.vo-ptile:focus-visible {
  outline: 2px solid var(--black-voala);
  outline-offset: 3px;
}

/* Šířky dlaždic */
.vo-printlab .vo-ptile--half  { grid-column: span 3; }
.vo-printlab .vo-ptile--third { grid-column: span 2; }
.vo-printlab .vo-ptile--wide  { grid-column: span 4; }

/* ── Obrázek dlaždice ────────────────────────────────────────────────── */
.vo-printlab .vo-ptile__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}
/* Světlý text — tmavá fotka (checkbox v administraci); v designu je text
   i na fotkách černý, fotky jsou světlé */
.vo-printlab .vo-ptile--light,
.vo-printlab a.vo-ptile--light:hover { color: var(--white-voala); }

/* ── Nadpis a text ───────────────────────────────────────────────────── */
.vo-printlab .vo-ptile__title {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  font-family: var(--font-base);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: inherit;
  text-align: left;
}

.vo-printlab .vo-ptile__text {
  position: relative;
  z-index: 1;
  margin: var(--vo-pl-gap-text) 0 0;
  padding: 0;
  max-width: 222px;   /* šířka textového bloku z Figmy */
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: inherit;
  text-align: left;
}

/* ── Tlačítko Více — bílý pill, na hover celé dlaždice červený ───────────
   Pruh je vytažený z toku a sedí u dolní hrany bez ohledu na délku textu.
   Je to <span> uvnitř odkazu-dlaždice (odkaz v odkazu není dovolený).
   ──────────────────────────────────────────────────────────────────────── */
.vo-printlab .vo-ptile__foot {
  position: absolute;
  left: var(--vo-pl-pad-left);
  right: var(--vo-pl-pad-right);
  bottom: var(--vo-pl-pad-bottom);
  z-index: 1;
  display: flex;
  align-items: flex-end;
}

.vo-printlab .vo-ptile__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  min-height: var(--vo-pl-btn-h);
  padding: 0 var(--vo-pl-btn-px);
  border: 0;
  border-radius: 30px;
  background: var(--white-voala);
  color: var(--black-voala);
  font-family: var(--font-base);
  font-size: var(--vo-pl-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-printlab a.vo-ptile:hover .vo-ptile__btn,
.vo-printlab a.vo-ptile:focus-visible .vo-ptile__btn {
  background: var(--red-voala);
  color: var(--white-voala);
}

/* ── CTA pod mozaikou: pill „Kontaktujte nás" + červený text ─────────────
   Samostatný Divi TEXT modul s CSS třídou „vo-printlab-cta" hned pod
   modulem se zkratkou [vo_printlab] (stejný Row). Obsah:
     <p><a href="…">Kontaktujte nás</a></p>
     <p><a href="…">Bližší informace o procesu tisku…</a></p>
   První odkaz = červený pill 187 × 40 (Inter 600 20/18, WHITE), druhý
   odstavec = červený text Inter 500 20/150 % na střed (Figma 2157:1262),
   odkaz v něm bez podtržení, podtrhne se na hover. Mezery 51 / 51 (1440).
   ──────────────────────────────────────────────────────────────────────── */
.vo-printlab-section .vo-printlab-cta,
.vo-printlab-section .vo-printlab-cta .et_pb_text_inner {
  font-family: var(--font-base);
  text-align: center;
}
.vo-printlab-section .et_pb_module.vo-printlab-cta {
  width: min(100% - 48px, var(--container));
  margin: var(--vo-pl-cta-gap) auto 0 !important;
}
.vo-printlab-section .vo-printlab-cta p {
  margin: 0;
  padding: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--red-voala);
  text-align: center;
}
/* Odstup od pillu k verzálkám textu 51 (box textu začíná o ~13 px výš než verzálky) */
.vo-printlab-section .vo-printlab-cta p + p { margin-top: calc(var(--vo-pl-cta-gap) - 13px); }

/* Odkaz v prvním odstavci = pill (i kdyby měl třídu btn z Divi) */
.vo-printlab-section .vo-printlab-cta p:first-child a,
.vo-printlab-section .vo-printlab-cta a.vo-printlab-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 187px;
  min-height: 40px;
  padding: 11px 18px !important;
  border: 0 !important;
  border-radius: 30px !important;
  background: var(--red-voala) !important;
  color: var(--white-voala) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 18px !important;
  letter-spacing: 0;
  text-decoration: none !important;
  box-shadow: var(--shadow-map);
  transition: background var(--t-fast), transform var(--t-fast);
}
.vo-printlab-section .vo-printlab-cta p:first-child a:hover,
.vo-printlab-section .vo-printlab-cta a.vo-printlab-cta__btn:hover {
  background: var(--red-voala-dark) !important;
  transform: translateY(-1px);
}
/* Odkaz v textu pod tlačítkem */
.vo-printlab-section .vo-printlab-cta p:not(:first-child) a {
  color: var(--red-voala);
  text-decoration: none;
  transition: color var(--t-fast);
}
.vo-printlab-section .vo-printlab-cta p:not(:first-child) a:hover {
  color: var(--red-voala-dark);
  text-decoration: underline;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Dva sloupce: půlky a třetiny vedle sebe po dvou, širové přes celý řádek */
  .vo-printlab .vo-ptile--half,
  .vo-printlab .vo-ptile--third { grid-column: span 3; }
  .vo-printlab .vo-ptile--wide  { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  /* Mobil: jeden sloupec, boční okraje 16 px */
  .vo-printlab__inner { padding: 0 16px; }
  .vo-printlab .vo-ptile--half,
  .vo-printlab .vo-ptile--third,
  .vo-printlab .vo-ptile--wide { grid-column: 1 / -1; }

  .vo-printlab-section .et_pb_module.vo-printlab-cta { width: calc(100% - 32px); }
}

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

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