/* === NAHIBU RESPONSIVE === */

/* ─── LAYOUT ─── */
@media (max-width: 1024px) {
  .nh-art-grid { grid-template-columns: repeat(2, 1fr); }
  .nh-cat-row  { grid-template-columns: repeat(3, 1fr); }
  .nh-footer-top { grid-template-columns: 1.2fr 1fr 1fr; }
  .nh-footer-top > .nh-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 880px) {
  /* iOS Safari layout viewport clamp — empêche les éléments avec intrinsic width large
     (notamment IMG width=1280) d'élargir le viewport au-delà du device. */
  html {
    max-width: 100vw;
    overflow-x: hidden;
  }
  body {
    max-width: 100vw;
    width: 100%;
    overflow-x: hidden;
  }

  /* Container */
  .nh-container { padding: 0 var(--s-5); }

  /* Hero */
  .nh-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); padding-top: var(--s-6); padding-bottom: var(--s-7); }
  .nh-hero-text { max-width: 100%; min-width: 0; }
  .nh-hero-sub  { max-width: 100%; }
  .nh-hero-visual { display: none; }
  .nh-hero-stats { gap: var(--s-4); flex-wrap: wrap; }

  /* Grids */
  .nh-art-grid .wp-block-post-template  { grid-template-columns: 1fr; }
  .nh-art-grid-3 .wp-block-post-template { grid-template-columns: 1fr; gap: var(--s-4); }
  .nh-cat-row  { grid-template-columns: repeat(2, 1fr); }

  /* Featured article: stacked on mobile */
  .nh-featured-card { grid-template-columns: 1fr; }
  .nh-featured-card-body { padding: var(--s-7) var(--s-6); }
  .nh-featured-card .wp-block-post-featured-image img { height: auto; aspect-ratio: 16/9; }

  /* Category sections */
  .nh-cat-section-head { align-items: flex-start; }

  /* Section: tighten vertical padding on mobile (was s-11=80, now s-9=48). */
  .nh-section { padding: var(--s-9) 0; }

  /* Category sections (homepage) : padding shorthand conflit avec .nh-container ci-dessus
     qui mettait vertical=0 sur mobile. On ré-impose explicitement le padding vertical. */
  .nh-cat-section { padding: var(--s-7) var(--s-5); }

  /* Air entre "À la une" et la 1ère section catégorie : sans ça, border-bottom de
     featured-card touche border-top de cat-section (trait double 2px collé). */
  .nh-featured-section + .nh-cat-section { margin-top: var(--s-7); }

  /* Ombre douce permanente sur les vignettes du carrousel home (mobile = pas de hover,
     donc on l'applique par défaut pour donner du relief, comme l'effet hover desktop). */
  .nh-cat-section .nh-art-card {
    box-shadow: var(--sh-md);
  }

  /* Pages catégorie/archive/search : éviter que les blocs full-width touchent les
     bords du viewport. Ajoute le même padding horizontal que .nh-container (s-5). */
  .nh-art-grid,
  .nh-cat-tabs,
  .nh-pagination,
  .wp-block-query-pagination {
    padding-left: var(--s-5);
    padding-right: var(--s-5);
  }

  /* Intent */
  .nh-intent-head { grid-template-columns: 1fr; }
  .nh-intent-all  { grid-column: 1; grid-row: auto; align-self: start; }

  /* CTA dark */
  .nh-soft-cta-inner { grid-template-columns: 1fr; gap: var(--s-7); }
  .nh-soft-cta-visual { display: none; }

  /* Footer */
  .nh-footer-top { grid-template-columns: 1fr; gap: var(--s-7); }
  .nh-footer-bot { flex-direction: column; gap: var(--s-2); }
}

@media (max-width: 560px) {
  /* Cat-row reste en 2 cols entre 431-560 (6 cats = 3 rangées, densité OK) */
  .nh-hero-ctas { flex-direction: column; }
  .nh-hero-ctas .nh-btn { width: 100%; justify-content: center; }
  .nh-art-cta-card { grid-template-columns: 1fr; }
  .nh-pagination { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .nh-mini-player { min-width: 0; }
  .nh-cat-section-link { display: none; }
  .nh-art-grid-3 .wp-block-post-template { grid-template-columns: 1fr; }
}

/* iPhone SE / petits écrans : passe enfin cat-row en 1 col (6 cats = 6 rangées). */
@media (max-width: 430px) {
  .nh-cat-row { grid-template-columns: 1fr; }
}

/* ─── HOMEPAGE ANIMATIONS ─── */
@media (prefers-reduced-motion: reduce) {
  .nh-orb-core, .nh-orb-dot { animation: none; }
  .nh-mini-player { transition: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ===================================================================
   MOBILE LAUNCH OVERRIDES  (≤560px — iPhone SE / 14 / 14 Pro Max)
   Goals:
   • Readability: never <15px text, body ≥16px
   • Touch targets: ≥44px tap zone (WCAG 2.5.5)
   • Form usability: inputs ≥16px (prevents iOS auto-zoom)
   • Conversion: keep primary CTA label always visible
   =================================================================== */
@media (max-width: 560px) {

  /* Post-list excerpts (homepage, category, search) — was 14px (sub-WCAG mobile) */
  .wp-block-post-excerpt__excerpt,
  .wp-block-post-excerpt p {
    font-size: 15px;
    line-height: 1.55;
  }

  /* Inline glossary terms: comfortable tap zone without breaking line wrap */
  .nh-glossary {
    padding: 2px 3px;
    margin: 0 -2px;
    /* note: line-height of parent paragraph (1.65) gives ~30px tap height,
       acceptable for inline text content per WCAG 2.5.5 inline exception */
  }

  /* Skip link visible when focused (a11y) */
  .skip-link:focus {
    position: fixed;
    top: var(--s-3);
    left: var(--s-3);
    width: auto;
    height: auto;
    padding: 12px 18px;
    background: var(--nh-navy-900);
    color: #fff;
    z-index: 9999;
    border-radius: var(--r-md);
  }

  /* Theme toggle (mobile menu footer): 44px tap target */
  .nh-mobile-footer .nh-theme-toggle {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
  }
}

/* iPhone SE-class very narrow (≤375px) : tighten spacing without losing tap zones */
@media (max-width: 375px) {
  .nh-container { padding: 0 var(--s-4); }
  .nh-header-inner { gap: var(--s-2); }
}

/* ===================================================================
   HOMEPAGE — MOBILE CAROUSEL pour les 6 sections catégories (≤880px).
   3 articles en scroll horizontal full-width + peek + vignette cat finale.
   Desktop : aucun changement (grille 3 colonnes inchangée).
   La vignette finale est injectée par burger.js (<li class="nh-cat-vignette">).
   =================================================================== */
/* Desktop : vignette cachée (carrousel uniquement sur mobile). Sélecteur boost pour
   battre .nh-art-grid-3 .wp-block-post-template > li (display:flex spécificité 3 classes). */
.nh-art-grid-3 .wp-block-post-template > li.nh-cat-vignette { display: none; }

@media (max-width: 880px) {
  /* FIX iOS Safari layout viewport widening sur home page.
     Les IMG du carrousel ont width="1280" HTML → iOS Safari élargit viewport à ~670px.
     Strip JS des attributs (burger.js) + containment CSS belt-and-suspenders.
     .nh-cat-section { contain: layout } isole le layout (Chromium-friendly).
     Le html { max-width: 100vw } + body { max-width: 100vw } clampe iOS Safari. */
  .nh-cat-section {
    contain: layout;
    overflow: hidden;  /* renforce l'isolation horizontale */
  }

  /* Transforme le post-template en scroll horizontal (override grid → flex) */
  .nh-cat-section .wp-block-post-template {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Break out of .nh-cat-section padding-inline (s-5) pour edge-to-edge scroll,
       puis padding inside re-cree l'inset 20px sur 1er + dernier items.
       scroll-padding-inline : sans ça, scroll-snap-type:mandatory snap à scrollLeft=padding,
       neutralisant visuellement l'inset (la 1ère card colle au bord viewport). */
    margin: 0 calc(-1 * var(--s-5));
    padding: 0 var(--s-5) 8px;
    scroll-padding-inline: var(--s-5);
    list-style: none;
  }
  .nh-cat-section .wp-block-post-template::-webkit-scrollbar { display: none; }

  .nh-cat-section .wp-block-post-template > li {
    flex: 0 0 calc(85% - 6px);  /* full width avec peek ~15% sur la suivante */
    /* CRITIQUE : sans min-width:0 + max-width contraint, l'IMG natural width (1280px)
       fait élargir le layout viewport iOS Safari à 670px (issue uniquement homepage). */
    min-width: 0;
    max-width: calc(85% - 6px);
    overflow: hidden;
    scroll-snap-align: start;
    margin: 0;
    list-style: none;
  }
  /* Force-fit images dans le carrousel (les attrs width=1280 HTML poussent iOS Safari) */
  .nh-cat-section .wp-block-post-template > li img {
    max-width: 100%;
    width: auto;
    height: auto;
  }

  /* Vignette catégorie — dernière slide colorée (data-cat → couleur cat).
     Spécificité boost pour ré-afficher (battre la règle masquage desktop ci-dessus). */
  .nh-art-grid-3 .wp-block-post-template > li.nh-cat-vignette {
    display: flex;
    flex-direction: column;
  }
  .nh-cat-vignette {
    --nh-cat-color: var(--nh-cyan-700);
    --nh-cat-soft:  var(--nh-cyan-50);
  }
  .nh-cat-vignette[data-cat="science"]      { --nh-cat-color: var(--nh-science-ink);      --nh-cat-soft: var(--nh-science-soft); }
  .nh-cat-vignette[data-cat="alimentation"] { --nh-cat-color: var(--nh-alimentation-ink); --nh-cat-soft: var(--nh-alimentation-soft); }
  .nh-cat-vignette[data-cat="recettes"]     { --nh-cat-color: var(--nh-recettes-ink);     --nh-cat-soft: var(--nh-recettes-soft); }
  .nh-cat-vignette[data-cat="lifestyle"]    { --nh-cat-color: var(--nh-lifestyle-ink);    --nh-cat-soft: var(--nh-lifestyle-soft); }
  .nh-cat-vignette[data-cat="sante"]        { --nh-cat-color: var(--nh-sante-ink);        --nh-cat-soft: var(--nh-sante-soft); }
  .nh-cat-vignette[data-cat="nahibu"]       { --nh-cat-color: var(--nh-nahibu-ink);       --nh-cat-soft: var(--nh-nahibu-soft); }

  .nh-cat-vignette-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-4);
    width: 100%;
    height: 100%;
    min-height: 280px;
    padding: var(--s-7) var(--s-6);
    background: var(--nh-cat-soft);
    color: var(--nh-cat-color);
    border-radius: 20px;
    text-decoration: none;
    transition: transform var(--t-fast) var(--ease-out);
  }
  .nh-cat-vignette-link:active { transform: scale(0.98); }

  .nh-cat-vignette-eyebrow {
    font: 500 11px/1 var(--nh-mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.75;
  }
  .nh-cat-vignette-title {
    font: 400 26px/1.15 var(--nh-serif);
    letter-spacing: -0.025em;
    color: inherit;
    margin: 0;
  }
  .nh-cat-vignette-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    font: 500 14px/1 var(--nh-sans);
    letter-spacing: 0.01em;
  }
  .nh-cat-vignette-cta svg {
    transition: transform var(--t-base) var(--ease-spring);
  }
  .nh-cat-vignette-link:hover .nh-cat-vignette-cta svg,
  .nh-cat-vignette-link:active .nh-cat-vignette-cta svg {
    transform: translateX(4px);
  }
}