/*
 * ZiarMedical — typography.css v4.0.8
 * ─────────────────────────────────────────────────────
 * SURSE:
 *  BBC GEL: card/promo titles 22–28px, body 15–18px
 *  The Guardian: card titles 22–24px, section gap 48–64px
 *  NYT: article grid 22px+, generous whitespace
 *
 * SCARA FINALA (body 17px, ratio ≈ 1.25):
 *  Display H1 (homepage hero)   : clamp(30px, 4vw, 44px)
 *  H1 page/article title         : clamp(30px, 4.5vw, 52px)
 *  H2 section headings           : clamp(26px, 3vw, 34px)
 *  H3 card grid titles           : clamp(20px, 2.2vw, 24px)  ← BBC: 22px min
 *  H3 card row (compact)         : clamp(16px, 1.6vw, 19px)
 *  H4 / category labels          : 14px (uppercase OK)
 *  Body                          : 17px
 *  UI/meta                       : 13–14px
 */

/* ══════════════════════════════════════════════════════
   1. SPACING SISTEM — secțiuni bine separate
   ══════════════════════════════════════════════════════ */

/* Secțiuni homepage */
body .zm-section,
.zm-section {
  margin-top: 80px !important;
}

@media (min-width: 1024px) {
  body .zm-section,
  .zm-section {
    margin-top: 96px !important;
  }
}

@media (max-width: 639px) {
  body .zm-section,
  .zm-section {
    margin-top: 52px !important;
  }
}

/* Section header — mai mult aer */
body .zm-section-hd,
.zm-section-hd {
  margin-bottom: 28px !important;
  padding-bottom: 16px !important;
}

/* Two-sections (Interviuri + Sanatate) */
body .zm-two-sections,
.zm-two-sections {
  margin-top: 80px !important;
  gap: 56px !important;
}

/* Stats bar */
body .zm-stats-bar,
.zm-stats-bar {
  margin-top: 40px !important;
}

/* Events section */
body .zm-yt-section,
body section[aria-label*="Eveniment"],
body section[aria-label*="YouTube"],
.zm-yt-section {
  margin-top: 80px !important;
}

/* Page wrap — mai mult padding */
body .zm-page-wrap,
.zm-page-wrap {
  padding-top: 52px !important;
  padding-bottom: 100px !important;
}

@media (max-width: 639px) {
  body .zm-page-wrap,
  .zm-page-wrap {
    padding-top: 32px !important;
    padding-bottom: 64px !important;
  }
}

/* ══════════════════════════════════════════════════════
   2. CARD GRID TITLES — BBC standard: 22px min
   ══════════════════════════════════════════════════════ */

/* Standard grid card title (h2/h3) */
body .zm-card .zm-card-title,
body .zm-card-title,
.zm-card .zm-card-title {
  font-family: 'Lora', Georgia, serif !important;
  font-size: clamp(20px, 2.2vw, 24px) !important;
  font-weight: 600 !important;
  line-height: 1.28 !important;
  letter-spacing: -.2px !important;
  color: var(--zm-t1) !important;
}

/* Featured card — légèrement plus grand */
body .zm-card-featured .zm-card-title,
.zm-card-featured .zm-card-title {
  font-size: clamp(22px, 2.6vw, 28px) !important;
}

/* Card row (compact — interviuri, sanatate) */
body .zm-card-row .zm-card-title,
body .zm-hero-side-title,
.zm-card-row .zm-card-title,
.zm-hero-side-title {
  font-family: 'Lora', Georgia, serif !important;
  font-size: clamp(16px, 1.6vw, 18px) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

/* ══════════════════════════════════════════════════════
   3. SECTION HEADINGS — Guardian: 28–32px
   ══════════════════════════════════════════════════════ */

body .zm-section-h,
.zm-section-h {
  font-family: 'Lora', Georgia, serif !important;
  font-size: clamp(24px, 3vw, 32px) !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  letter-spacing: -.4px !important;
  color: var(--zm-t1) !important;
}

/* Section "more" link */
body .zm-section-more,
.zm-section-more {
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════
   4. BENTO HERO TITLES — display heading
   ══════════════════════════════════════════════════════ */

body .zm-bento-title,
.zm-bento-title {
  font-family: 'Lora', Georgia, serif !important;
  font-size: clamp(24px, 3.5vw, 38px) !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: -.4px !important;
}

body .zm-bento-title-sm,
.zm-bento-title-sm {
  font-family: 'Lora', Georgia, serif !important;
  font-size: clamp(17px, 1.9vw, 21px) !important;
  font-weight: 600 !important;
  line-height: 1.28 !important;
}

/* ══════════════════════════════════════════════════════
   5. CARD EXCERPT — lizibil
   ══════════════════════════════════════════════════════ */

body .zm-card-excerpt,
.zm-card-excerpt {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--zm-t2) !important;
}

/* ══════════════════════════════════════════════════════
   6. CARD META (categorii + timp citire)
   ══════════════════════════════════════════════════════ */

body .zm-card-cat,
.zm-card-cat {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  padding: 3px 9px !important;
}

body .zm-card-date,
.zm-card-date {
  font-size: 13px !important;
  color: var(--zm-t4) !important;
}

/* ══════════════════════════════════════════════════════
   7. CARDS — padding mai generos
   ══════════════════════════════════════════════════════ */

body .zm-card .zm-card-body,
.zm-card .zm-card-body {
  padding: 16px 18px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

body .zm-card-row .zm-card-body,
.zm-card-row .zm-card-body {
  padding: 12px 14px !important;
  gap: 5px !important;
}

/* ══════════════════════════════════════════════════════
   8. GRID GAPS — mai mult aer
   ══════════════════════════════════════════════════════ */

body .zm-grid-3,
.zm-grid-3 {
  gap: 24px !important;
}
body .zm-grid-2,
.zm-grid-2 {
  gap: 22px !important;
}
body .zm-grid-1,
.zm-grid-1 {
  gap: 12px !important;
}

@media (max-width: 639px) {
  body .zm-grid-3, .zm-grid-3,
  body .zm-grid-2, .zm-grid-2 {
    gap: 14px !important;
  }
}

/* ══════════════════════════════════════════════════════
   9. YOUTUBE GALLERY TITLES
   ══════════════════════════════════════════════════════ */

body .zm-yt-card-title,
.zm-yt-card-title {
  font-family: 'Lora', Georgia, serif !important;
  font-size: clamp(16px, 1.7vw, 19px) !important;
  font-weight: 600 !important;
  line-height: 1.32 !important;
}

body .zm-yt-card-body,
.zm-yt-card-body {
  padding: 14px 16px 16px !important;
}

/* ══════════════════════════════════════════════════════
   10. ARCHIVE / CATEGORIE TITLES
   ══════════════════════════════════════════════════════ */

body .zm-arc-feat-title,
.zm-arc-feat-title {
  font-family: 'Lora', Georgia, serif !important;
  font-size: clamp(22px, 2.8vw, 30px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -.3px !important;
}

body .zm-arc-title,
.zm-arc-title {
  font-family: 'Lora', Georgia, serif !important;
  font-size: clamp(30px, 5vw, 52px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -.6px !important;
}

/* ══════════════════════════════════════════════════════
   11. ARTICLE SINGLE TYPOGRAPHY
   ══════════════════════════════════════════════════════ */

body .zm-article-head h1,
.zm-article-head h1 {
  font-family: 'Lora', Georgia, serif !important;
  font-size: clamp(28px, 4.5vw, 52px) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: -.5px !important;
}

body .zm-article-lead,
.zm-article-lead {
  font-size: clamp(17px, 1.8vw, 20px) !important;
  line-height: 1.65 !important;
}

body .zm-article-body,
.zm-article-body {
  font-size: 17px !important;
  line-height: 1.8 !important;
}

body .zm-article-body h2,
.zm-article-body h2 {
  font-size: clamp(22px, 2.8vw, 30px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin-top: 2em !important;
  margin-bottom: .6em !important;
}

body .zm-article-body h3,
.zm-article-body h3 {
  font-size: clamp(19px, 2.2vw, 24px) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  margin-top: 1.6em !important;
  margin-bottom: .45em !important;
}

/* ══════════════════════════════════════════════════════
   12. WEATHER BAND — compact OK
   ══════════════════════════════════════════════════════ */

body .zm-weather-band,
.zm-weather-band {
  font-size: 13px !important;
}

/* ══════════════════════════════════════════════════════
   13. HEADER NAV
   ══════════════════════════════════════════════════════ */

body .zm-hdr-nav a,
.zm-hdr-nav a {
  font-size: 14px !important;
}