/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Contact Cards (kontaktné karty stránky "Kontakt")

   Figma "Section / Cards descending 1" (795:35135) — NESÚVISÍ s existujúcim
   zenturi/cards-descending (ten má 3 schodovité karty s obrázkami). Tu 2
   transparentné kontaktné karty: ikona 52 + nadpis H3-A italic + text +
   e-mail/telefón odkazy (ikona 32 + label).

   Ikony z knižnice témy cez zenturi_the_icon (žiadne Figma duplikáty). Farby
   textu/nadpisu = --color-text (#023047, Figma Scheme A/Text). Ikony = default
   duotone oranžová/žltá (Figma Icon/Dark #fb8500 + Icon/Medium #fbd26a = zapečený
   default knižnice, preto color='').

   Pozadie = gradient bg-medium → biela (43.222%), plynulý prechod z hero sekcie.

   MOBIL: Figma 1202:137978 (var_defs mobilný mód) — karty pod seba (gap 24), title 32,
   py 32. TABLET: generický medzikrok (karty pod seba).
   ══════════════════════════════════════════════════════════════════════════ */

.zn-ccd {
  /* Figma: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 43.222%) NAD bg-medium */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--color-white) 43.222%),
    var(--color-bg-medium);
  padding-inline: var(--space-16);            /* Page Padding/padding-global 64 */
}
/* POZOR 2-triedny selektor (CLAUDE.md kaskáda): components.css sa načíta PO tomto
   súbore a má `.zn-block { --zn-pt: 0 }` — jednotriedne `.zn-ccd { --zn-pt }` (0,1,0)
   by s ním prehralo (rovnaká špecificita, neskorší víťazí) a padding sekcie by
   skolaboval na 0. `.zn-ccd.zn-block` (0,2,0) to prebije. */
.zn-ccd.zn-block {
  --zn-pt: var(--space-12);                    /* Section Padding/section-small 48 */
  --zn-pb: var(--space-24);                    /* Section Padding/section-large 112 */
}

.zn-ccd__container {
  max-width: 1024px;                          /* Max Width/max-width-xlarge 1024 */
  margin-inline: auto;
}

.zn-ccd__row {
  display: flex;
  align-items: stretch;                       /* karty self-stretch (rovnaká výška) */
  gap: var(--space-12);                        /* Div Padding/div-padding-large 48 */
}

.zn-ccd__card {
  flex: 1 1 0%;
  min-width: 0;
  /* karta je transparentná — žiadne pozadie/border (Figma "Element/Card/Complex"
     v tomto kontexte nemá výplň) */
}

.zn-ccd__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);                         /* Div Padding/div-padding-medium 32 (ikona-blok ↔ akcie) */
}

.zn-ccd__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);                         /* gap 8 (ikona ↔ text-blok) */
}

.zn-ccd__icon {
  display: block;
  width: 52px;                                /* Icon 52 */
  height: 52px;
}

.zn-ccd__text-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);                         /* gap 16 (nadpis ↔ text) */
}

.zn-ccd__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);                    /* #023047 */
}

.zn-ccd__text {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);                 /* Size/Regular 16 */
  line-height: 1.5;
  color: var(--color-text);
}

.zn-ccd__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);                          /* gap 24 */
}

.zn-ccd__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);                          /* gap 8 (ikona ↔ label) */
  height: 48px;                                /* Button 48 */
  color: var(--color-text);
}
.zn-ccd__link-icon {
  flex-shrink: 0;                              /* v natesnanom flex riadku nescvrknúť (CLAUDE.md) */
  display: block;
  width: 32px;                                /* button icon 32 */
  height: 32px;
}
.zn-ccd__link-label {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);         /* Text/Button = Sans SemiBold 650 */
  font-size: var(--text-base);                 /* Button Font Size 16 */
  line-height: 1;
}

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

/* ══ Mobil (≤767.98px) — Figma 1202:137978 (var_defs mobilný mód) ══ */
@media (max-width: 767.98px) {
  .zn-ccd { padding-inline: var(--space-4); }   /* page-padding mobil 16 (z 64) */
  /* py = section-small mobil 32 symetricky (Figma py-[section-small]); --zn-pt-m/-pb-m
     obídu components.css auto-scale, ktorý by dal 24/56. */
  .zn-ccd.zn-block { --zn-pt-m: var(--space-8); --zn-pb-m: var(--space-8); }
  .zn-ccd__row { gap: var(--space-6); }          /* div-large mobil 24 (karta ↔ karta; z tablet 48) */
  .zn-ccd__content { gap: var(--space-5); }      /* div-medium mobil 20 (ikona-blok ↔ akcie) */
  .zn-ccd__title { font-size: 2rem; }            /* Size/H3 mobil 32 (z 40) */
  .zn-ccd__actions { gap: 0 var(--space-6); }    /* Figma mobil gap 0/24 (wrap) */
}