/* =====================================================
   responsive.css — adaptations mobile et tablette
   Chargé sur : index.html, about.html, journal.html,
                article-sanfruttuozo.html
   ===================================================== */

/* ── NAV brand : taille fixe trop grande sur mobile ── */
@media (max-width: 680px) {
  .nav__brand { font-size: clamp(15px, 4.2vw, 22px) !important; }
}

/* ── GUIDE PROMO (index.html) ──
   La grille 1.2fr/0.8fr doit passer en colonne unique sur tablette/mobile. */
.guide-promo-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
@media (max-width: 860px) {
  .guide-promo-grid {
    grid-template-columns: 1fr !important;
    gap: clamp(36px, 6vw, 56px) !important;
  }
  .guide-promo-grid > div:last-child {
    max-width: 300px;
    margin: 0 auto;
  }
}

/* ── JGRID avec inline style (about.html section explorer) ──
   L'inline style="grid-template-columns:repeat(3,1fr)" bloque la cascade normale.
   On surcharge avec !important dans les breakpoints. */
@media (max-width: 1000px) {
  .jgrid[style] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  .jgrid[style] {
    grid-template-columns: 1fr !important;
  }
}

/* ── TITRES H1 à taille fixe (about.html, journal.html) ──
   Les inline style="font-size:52px" bloquent les clamp() du CSS.
   On ramène à une taille lisible sur mobile. */
@media (max-width: 640px) {
  .abt-head h1,
  .jhero__inner h1 {
    font-size: clamp(30px, 8vw, 44px) !important;
    line-height: 1.08 !important;
  }
}

/* ── FEATURE LEAD (index.html) ──
   Déjà géré à 1000px, on s'assure que le texte est correctement espacé. */
@media (max-width: 680px) {
  .feature-lead__body { padding-top: 0; }
}

/* ── VIDEOS GRID (index.html) ──
   Les vidéos "side" peuvent déborder sur très petits écrans. */
@media (max-width: 480px) {
  .video--side {
    grid-template-columns: 90px 1fr !important;
    gap: 10px !important;
  }
}

/* ── ART PASSAGE / ART BODY : padding horizontal sur mobile ── */
@media (max-width: 680px) {
  .art-passage,
  .art-body > .art-passage,
  section.art-body > .art-passage {
    padding-left: clamp(18px, 5vw, 28px) !important;
    padding-right: clamp(18px, 5vw, 28px) !important;
  }
}

/* ── FOOTER très petits écrans ── */
@media (max-width: 440px) {
  .footer__top {
    grid-template-columns: 1fr 1fr;
  }
  .footer__brand { grid-column: 1 / -1; }
  .footer__bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .footer__legal { justify-content: center; }
}
@media (max-width: 320px) {
  .footer__top { grid-template-columns: 1fr !important; }
}

/* ── NEWSLETTER form sur petits écrans ── */
@media (max-width: 480px) {
  .news-form {
    flex-direction: column;
    gap: 12px;
  }
  .news-form input,
  .news-form .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── ARTICLE HERO trop haute sur mobile ── */
@media (max-width: 560px) {
  .art-hero--cover .ph {
    height: 60vh !important;
    min-height: 320px !important;
  }
}

/* ── INDEX.HTML — typographie mobile (inline font-size overrides) ── */
@media (max-width: 640px) {

  /* Hero script "ორი თაობა..." */
  .hero__script {
    font-size: clamp(18px, 5.5vw, 26px) !important;
    line-height: 1.28 !important;
  }

  /* Intro drop cap */
  .intro__lead span[style*="78px"] {
    font-size: clamp(44px, 13vw, 64px) !important;
    line-height: 0.78 !important;
  }

  /* Intro lead text */
  .intro__lead {
    font-size: clamp(16px, 4.5vw, 19px) !important;
  }

  /* All section h2 with inline font-size: 33-36px */
  .h-xl,
  .section-head h2 {
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1.18 !important;
  }

  /* Project cards h3 + parent body font-size */
  .project__body {
    font-size: 15px !important;
  }
  .project h3.h-lg,
  .project h3 {
    font-size: clamp(17px, 5vw, 22px) !important;
    line-height: 1.25 !important;
  }

  /* Pull-quote band */
  .quote-band__inner blockquote {
    font-size: clamp(18px, 5.5vw, 26px) !important;
    line-height: 1.4 !important;
  }

  /* Guide promo stats (94 / 15+ / 7) */
  .guide-promo-grid [style*="font-size:28px"],
  .guide-promo-grid [style*="font-size: 28px"] {
    font-size: clamp(20px, 5.5vw, 26px) !important;
  }

  /* Guide promo price */
  .guide-promo-grid [style*="font-size:26px"],
  .guide-promo-grid [style*="font-size: 26px"] {
    font-size: clamp(18px, 5vw, 24px) !important;
  }

  /* Category chips */
  .cat {
    font-size: 14px !important;
    padding: 7px 14px !important;
  }
}

/* ── ARTICLE HEADER : titres trop grands sur mobile ── */
@media (max-width: 640px) {
  .page-article .art-head__inner h1 {
    font-size: clamp(22px, 6.5vw, 32px) !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
  }
  .page-article .art-head__dek {
    font-size: clamp(14px, 4vw, 17px) !important;
    line-height: 1.6 !important;
  }
}

/* ── CATS (topics, index.html) ── */
.cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(28px, 3.5vw, 48px);
}
.cat {
  display: inline-flex;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 13.5px;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.cat:hover {
  background: var(--charcoal);
  color: var(--ivory);
  border-color: var(--charcoal);
}