/* =========================================================
   BizCastCentral — Responsive layer
   Mobile-first overrides on top of inline styles + bcc-* hooks
   Breakpoints:
     - tablet:  ≤ 1024px
     - mobile:  ≤ 640px
     - small:   ≤ 380px
   ========================================================= */

/* ---------- Tablet: 1024 ---------- */
@media (max-width: 1024px) {
  :root {
    --gutter: 20px;
    --space-9: 72px;   /* shrink large vertical rhythm */
    --space-10: 96px;
  }

  /* Layout shells -------------------------------------------------- */
  .bcc-double-grid       { grid-template-columns: 1fr !important; gap: 56px !important; }
  .bcc-feature-card      { grid-template-columns: 1fr !important; gap: 24px !important; }
  .bcc-articles-grid     { grid-template-columns: repeat(2, 1fr) !important; column-gap: 24px !important; row-gap: 32px !important; }
  .bcc-archive-grid      { grid-template-columns: repeat(2, 1fr) !important; column-gap: 24px !important; row-gap: 32px !important; }
  .bcc-related-grid      { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
  .bcc-similar-grid      { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
  .bcc-podcasts-grid     { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
  .bcc-podcast-hero      { grid-template-columns: 1fr !important; gap: 32px !important; }
  .bcc-article-body      { grid-template-columns: 1fr !important; gap: 48px !important; }
  .bcc-author-hero       { grid-template-columns: 1fr !important; gap: 24px !important; }
  .bcc-authors-grid      { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
  .bcc-cat-grid          { grid-template-columns: 1fr !important; gap: 32px !important; }
  .bcc-engagements-grid  { grid-template-columns: 1fr !important; gap: 16px !important; }
  .bcc-tools-grid        { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
  .bcc-about-grid        { grid-template-columns: 1fr !important; gap: 24px !important; }
  .bcc-proscons          { grid-template-columns: 1fr !important; gap: 24px !important; }
  .bcc-footer-grid       { grid-template-columns: 1.5fr 1fr 1fr !important; gap: 32px !important; }

  /* Header nav collapses */
  .bcc-desktop-nav { display: none !important; }
  .bcc-burger      { display: inline-flex !important; }

  /* Hero / large display type — gentle shrink */
  .h-display { font-size: clamp(36px, 6.4vw, 64px); }
  .h1        { font-size: clamp(30px, 5.2vw, 52px); }
  .h2        { font-size: clamp(26px, 4.2vw, 40px); }
  .h3        { font-size: clamp(24px, 3.6vw, 32px); }

  /* Article body sidebar (TOC nav) hidden on tablet single-column */
  .bcc-article-body nav { display: none !important; }

  /* Sticky sidebars become non-sticky once the column collapses */
  .bcc-cat-grid > aside,
  .bcc-article-body > aside { position: static !important; top: auto !important; }

  /* Section padding: trim outer breathing */
  .bcc-section-pad { padding-top: 56px !important; padding-bottom: 56px !important; }
}

/* ---------- Mobile: 640 ---------- */
@media (max-width: 640px) {
  :root {
    --gutter: 16px;
    --space-7: 32px;
    --space-8: 48px;
    --space-9: 56px;
    --space-10: 72px;

    /* Type — slightly smaller body for narrow columns */
    --fs-md: 17px;
    --fs-lg: 19px;
    --fs-xl: 22px;
    --fs-2xl: 26px;
    --fs-3xl: 30px;
    --fs-4xl: 36px;
    --fs-5xl: 44px;
    --fs-6xl: 52px;
  }

  body { -webkit-text-size-adjust: 100%; }

  /* Container — full bleed with safe margins */
  .container,
  .container-wide,
  .container-narrow { padding-left: 16px !important; padding-right: 16px !important; }

  /* Layout: collapse all multi-col grids to single col ------------- */
  .bcc-articles-grid,
  .bcc-archive-grid,
  .bcc-related-grid,
  .bcc-similar-grid,
  .bcc-podcasts-grid,
  .bcc-tools-grid,
  .bcc-authors-grid,
  .bcc-footer-grid     { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* Display type — tighter on phones */
  .h-display { font-size: clamp(32px, 9vw, 44px) !important; line-height: 1.05 !important; }
  .h1        { font-size: clamp(28px, 7.5vw, 38px) !important; }
  .h2        { font-size: clamp(24px, 6.4vw, 32px) !important; }
  .h3        { font-size: clamp(22px, 5.6vw, 28px) !important; }
  .h4        { font-size: 22px !important; }

  /* Header — newsletter visible en icône seule (au lieu de hide) */
  .bcc-cta-newsletter {
    display: inline-flex !important;
    width: 36px !important;
    padding: 0 !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  .bcc-cta-newsletter > svg + * {
    /* Cacher le label "S'inscrire", garder l'icône mail */
    display: none !important;
  }
  .bcc-author-box          { flex-direction: column !important; align-items: flex-start !important; }

  /* Footer */
  .bcc-footer-grid         { grid-template-columns: 1fr !important; gap: 40px !important; }
  .bcc-footer-grid > div:first-child p { max-width: 100% !important; }

  /* Live ribbon (homepage) — stack as vertical pills */
  .bcc-live-ribbon         { gap: 8px !important; padding-bottom: 24px !important; margin-bottom: 32px !important; }

  /* Section padding */
  .bcc-section-pad         { padding-top: 40px !important; padding-bottom: 40px !important; }

  /* Hero containers — pull artwork to full width */
  .bcc-hero-cover { max-width: 100% !important; width: 100% !important; }
  .bcc-hero-cover img { width: 100% !important; height: auto !important; }

  /* Page-jump floating dock — fits viewport, slimmer chrome */
  .bcc-pagedock {
    bottom: 12px !important;
    left: 12px !important; right: 12px !important;
    max-width: calc(100vw - 24px) !important;
    transform: none !important;
    padding: 4px !important;
  }
  .bcc-pagedock button {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }

  /* Versus arena — stack the two columns */
  .bcc-vs-arena { grid-template-columns: 1fr !important; gap: 24px !important; }
  .bcc-vs-arena > div:nth-child(2) { /* center "VS" cell */
    justify-self: center !important;
    padding: 16px 0 !important;
    font-size: 56px !important;
  }

  /* Versus comparison table — collapse 3-col rows into stacked groups */
  .bcc-vs-table > div {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 16px 18px !important;
  }
  .bcc-vs-table > div:first-child {
    /* header row stays a row but smaller */
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .bcc-vs-table > div:first-child > span:first-child { display: none !important; }
  .bcc-vs-table > div > span:first-child {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    margin-bottom: 4px !important;
  }

  /* Tables: scroll-x rather than break layout */
  .bcc-scroll-x {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Top podium — stack steps */
  .bcc-podium { grid-template-columns: 1fr !important; gap: 16px !important; }
  .bcc-podium > * { transform: none !important; }

  /* Full ranking row — collapse 6-col grid to a compact 2-row layout */
  .bcc-rank-row {
    grid-template-columns: 56px 64px 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 12px 14px !important;
    padding: 14px 0 !important;
  }
  .bcc-rank-row > *:nth-child(4),  /* themes pills */
  .bcc-rank-row > *:nth-child(6) { /* arrow */ display: none !important; }
  .bcc-rank-row > *:nth-child(5) { /* rating */
    grid-column: 3 / 4 !important;
    grid-row: 1 / 2 !important;
    text-align: right !important;
    align-self: start !important;
  }
  .bcc-rank-row > *:nth-child(3) { /* title block */
    grid-column: 3 / 4 !important;
    grid-row: 2 / 3 !important;
  }
  .bcc-rank-row > *:nth-child(1) { /* rank number */
    grid-row: 1 / 3 !important;
    align-self: center !important;
  }
  .bcc-rank-row > *:nth-child(2) { /* cover */
    grid-row: 1 / 3 !important;
    align-self: center !important;
  }
  .bcc-rank-row:hover { padding-left: 0 !important; }

  /* Stats row (hub) — collapse to 2 cols and add internal borders */
  .bcc-stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .bcc-stats-row > * { padding: 20px !important; }
  .bcc-stats-row > *:nth-child(2) { border-right: 0 !important; }
  .bcc-stats-row > *:nth-child(-n+2) { border-bottom: 1px solid var(--border-subtle) !important; }

  /* Calculator / quiz — full-bleed controls */
  .bcc-quiz-card,
  .bcc-calc-card { padding: 24px !important; }

  /* Episode chapters — tighter density */
  .bcc-chapter-row { padding: 12px 0 !important; gap: 12px !important; }
  .bcc-chapter-row .timestamp { min-width: 56px !important; font-size: 12px !important; }

  /* Cards — tighten inner padding */
  .card             { border-radius: 10px; }
  .card--editorial  { padding-top: 20px; }

  /* Buttons — tap target safety */
  .btn { height: 44px; padding: 0 18px; }
  .btn--sm { height: 38px; }
  .btn--lg { height: 52px; }

  /* Forms — keep inputs full-width on small screens */
  .input { font-size: 16px; } /* prevent iOS zoom on focus */

  /* Newsletter inline — full width inputs stack */
  .bcc-newsletter-form { flex-direction: column !important; }
  .bcc-newsletter-form .input { width: 100% !important; }
  .bcc-newsletter-form .btn { width: 100% !important; }

  /* Author hero avatar gets centered */
  .bcc-author-hero > div:first-child { justify-self: center; }
}

/* ---------- Very small phones: 380 ---------- */
@media (max-width: 380px) {
  :root {
    --fs-5xl: 36px;
    --fs-6xl: 42px;
  }
  .h-display { font-size: 34px !important; }
  .h1        { font-size: 28px !important; }
  .h2        { font-size: 24px !important; }

  .bcc-pagedock button { padding: 6px 8px !important; font-size: 10px !important; }
}

/* ---------- Tablet specifically (>640 ≤1024) ---------- */
@media (min-width: 641px) and (max-width: 1024px) {
  /* Two-up layouts where the homepage wants to keep some grid energy */
  .bcc-tools-grid       { grid-template-columns: repeat(2, 1fr) !important; }
  .bcc-vs-table th,
  .bcc-vs-table td  { font-size: 14px !important; }
}

/* ---------- Print + reduced motion conveniences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}