/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Contact Locations (mapové karty pobočiek, stránka "Kontakt")

   Figma "Section / Cards descending 2" (795:36001). 2 transparentné karty:
   mapa (obrázok, aspect 624/360, radius 16) + italic nadpis 40 (H3-A) + adresa
   (Sans Regular 16, 2 odseky). Vlastný prefix `cl_`.

   Pozadie = gradient (transparentné hore → biela 43.222 %, nad bg-medium) +
   rounded-top-40 (na rozdiel od §2 contact-cards, ktorá rounded-top nemá) —
   táto sekcia je posledná pred footrom, zaoblený horný okraj ju vizuálne
   oddeľuje od formulárovej sekcie nad ňou.

   MOBIL: Figma 1202:138024 (var_defs mobilný mód) — karty pod seba (gap 24), title 32,
   pt 16/pb 32, radius-top 0. TABLET: generický medzikrok (karty pod seba).
   ══════════════════════════════════════════════════════════════════════════ */

.zn-cl {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--color-white) 43.222%),
    var(--color-bg-medium);
  padding-inline: var(--space-16);             /* 64 */
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;   /* Radius/XLarge 40 top */
}
/* 2-triedny selektor (CLAUDE.md kaskáda vs components.css .zn-block). */
.zn-cl.zn-block {
  --zn-pt: var(--space-20);                     /* Section Padding/section-medium 80 */
  --zn-pb: var(--space-24);                     /* Section Padding/section-large 112 */
}

.zn-cl__container {
  max-width: var(--container-max);             /* Figma Container 1280 (NIE 1024 ako §2) */
  margin-inline: auto;
}

.zn-cl__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);                        /* Div Padding/div-padding-large 48 */
}

/* ── Karta (transparentná: mapa + obsah) ── */
.zn-cl__card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);                         /* Figma card gap 24 (mapa ↔ obsah) */
}

.zn-cl__map {
  position: relative;
  width: 100%;
  aspect-ratio: 624 / 360;                     /* Figma Image aspect 624/360 */
  border-radius: var(--radius-base);           /* 16 */
  overflow: hidden;
  background: var(--color-bg-medium);          /* placeholder podklad, kým sa nenahrá mapa */
}
.zn-cl__map-img { display: block; width: 100%; height: 100%; object-fit: cover; }

.zn-cl__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);                         /* Figma vnútorný content gap 16 (nadpis ↔ adresa) */
}
.zn-cl__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;                          /* Heading/H3-A = Mix Regular Italic */
  font-weight: var(--weight-tagline);          /* 420 */
  font-size: var(--text-5xl);                  /* Size/H3 40 */
  line-height: 1.1;
  color: var(--color-text);
}
.zn-cl__address {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);                         /* Figma 2 odseky s gapom 16 */
  font-family: var(--font-display);
  font-weight: var(--weight-regular);          /* Sans Regular */
  font-size: var(--text-base);                 /* Size/Regular 16 */
  line-height: 1.5;
  color: var(--color-text);
}
.zn-cl__address p { margin: 0; }

/* ══ Tablet (≤1199.98px) — karty pod seba ══ */
@media (max-width: 1199.98px) {
  .zn-cl__row {
    flex-direction: column;
    gap: var(--space-12);
  }
}

/* ══ Mobil (≤767.98px) — Figma 1202:138024 (var_defs mobilný mód) ══ */
@media (max-width: 767.98px) {
  .zn-cl {
    padding-inline: var(--space-4);              /* page-padding mobil 16 (z 64) */
    border-radius: 0;                            /* Radius/Large mobil 0 (desktop 40) — sekcia je full-width, zaoblenie na okrajoch displeja odpadá */
  }
  /* pt = div-small 16, pb = section-small 32 (Figma pt-[div-small] pb-[section-small]);
     --zn-pt-m/-pb-m obídu auto-scale (dal by 40/56). */
  .zn-cl.zn-block { --zn-pt-m: var(--space-4); --zn-pb-m: var(--space-8); }
  .zn-cl__row { gap: var(--space-6); }           /* div-large mobil 24 (z tablet 48) */
  .zn-cl__card { gap: var(--space-4); }          /* Card gap div-small mobil 16 (mapa ↔ obsah) */
  .zn-cl__title { font-size: 2rem; }             /* Size/H3 mobil 32 (z 40) */
}