/* ============================================================
   NEWVIB RESPONSIVE CSS
   Mobile-first breakpoint system
   ============================================================

   Breakpoints:
   xs  < 480px
   sm  < 640px
   md  < 768px
   lg  < 1024px
   xl  < 1280px
   2xl ≥ 1280px (default desktop)

   ============================================================ */

/* ── Extra large / wide screens ─────────────────────────── */
@media (min-width: 1440px) {
  .nv-container { padding: 0 var(--nv-space-8); }
  .nv-hero__slider { aspect-ratio: 21/8; }
  .nv-hero__title { font-size: var(--nv-scale-6xl); }
}

/* ── Large (≤1280px) ────────────────────────────────────── */
@media (max-width: 1280px) {
  :root { --nv-container: 1140px; --nv-sidebar-width: 290px; }
  .nv-footer__widgets { grid-template-columns: repeat(3, 1fr); }
  .nv-footer__widgets > *:last-child { display: none; }
}

/* ── Desktop (≤1024px) ──────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --nv-sidebar-width: 260px; }

  /* Typography scale */
  .nv-hero__title { font-size: clamp(1.6rem, 3.5vw, var(--nv-scale-4xl)); }
  .nv-single-post__title { font-size: var(--nv-scale-3xl); }
  .nv-archive-header__title { font-size: var(--nv-scale-3xl); }
  .nv-error-page__number { font-size: 10rem; }
  .nv-cat-header--has-cover .nv-archive-header__title { font-size: var(--nv-scale-4xl); }
  .nv-editor-pick--primary .nv-editor-pick__title { font-size: var(--nv-scale-2xl); }
  .nv-section__title--large .nv-section__title-text { font-size: var(--nv-scale-3xl); }

  /* Layout */
  .nv-content-sidebar-wrap { grid-template-columns: 1fr 240px; gap: var(--nv-space-8); }
  .nv-featured-grid { grid-template-columns: 1fr 280px; }
  .nv-category-grid { grid-template-columns: repeat(3, 1fr); }
  .nv-trending-grid { grid-template-columns: 1fr; }
  .nv-posts-grid--4col { grid-template-columns: repeat(3, 1fr); }
  .nv-footer__top-inner { grid-template-columns: 240px 1fr; gap: var(--nv-space-10); }
  .nv-footer__widgets { grid-template-columns: repeat(3, 1fr); }

  /* Related posts */
  .nv-related-posts__grid { grid-template-columns: repeat(2, 1fr); }
  .nv-related-posts__grid > *:last-child { display: none; }
}

/* ── Tablet (≤768px) ────────────────────────────────────── */
@media (max-width: 768px) {
  /* Navigation: hide desktop, show mobile toggle */
  .nv-primary-nav { display: none; }
  .nv-header__nav-toggle { display: flex; }

  /* Topbar: simplified */
  .nv-topbar__nav { display: none; }
  .nv-topbar__date { display: none; }

  /* Header */
  .nv-header__ad { display: none; }

  /* Hero */
  .nv-hero__slider { aspect-ratio: auto; min-height: 420px; }
  .nv-hero__title { font-size: clamp(1.4rem, 5vw, var(--nv-scale-3xl)); max-width: 100%; }
  .nv-hero__excerpt { display: none; }
  .nv-hero__slide-content { padding-bottom: var(--nv-space-12); }
  .nv-hero__slide-overlay { background: linear-gradient(to top, rgba(13,13,13,0.88) 0%, rgba(13,13,13,0.35) 100%); }

  /* Ensure post-card images are visible on tablet (aspect-ratio may not work on older WebViews) */
  .nv-post-card__thumb { min-height: 200px; }
  .nv-post-card__img { min-height: 200px; display: block; width: 100%; height: 100%; object-fit: cover; }
  .nv-post-overlay { min-height: 280px; }
  .nv-category-card { min-height: 140px; }

  /* Full-width layout on tablet: collapse to single column.
     The sidebar element remains in DOM for accessibility / widget scripts,
     but gets zero height and overflow hidden instead of display:none. */
  .nv-content-sidebar-wrap { grid-template-columns: 1fr; }
  .nv-sidebar {
    /* Visually hidden on tablet but still accessible & in DOM flow */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Featured grid */
  .nv-featured-grid { grid-template-columns: 1fr; }
  .nv-featured-grid > *:first-child { grid-row: auto; }

  /* Posts grid */
  .nv-posts-grid--3col,
  .nv-posts-grid--4col { grid-template-columns: repeat(2, 1fr); }

  /* Editor picks */
  .nv-editor-picks__grid { grid-template-columns: 1fr; }
  .nv-editor-pick--primary { grid-row: auto; }

  /* Category grid */
  .nv-category-grid { grid-template-columns: repeat(2, 1fr); }

  /* Trending */
  .nv-trending-grid { grid-template-columns: 1fr; }

  /* Related posts */
  .nv-related-posts__grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer */
  .nv-footer__top-inner { grid-template-columns: 1fr; gap: var(--nv-space-10); }
  .nv-footer__widgets { grid-template-columns: repeat(2, 1fr); }

  /* Post nav */
  .nv-post-nav__inner { grid-template-columns: 1fr; }

  /* Archive header */
  .nv-archive-header__title { font-size: var(--nv-scale-2xl); }
  .nv-cat-header--has-cover .nv-archive-header__title { font-size: var(--nv-scale-3xl); }

  /* Error page */
  .nv-error-page__links { flex-direction: column; align-items: center; }

  /* Single post */
  .nv-single-post__meta { flex-direction: column; align-items: flex-start; gap: var(--nv-space-4); }
  .nv-author-box { flex-direction: column; align-items: center; text-align: center; }
  .nv-author-box__links { justify-content: center; }

  /* Share bar */
  .nv-share-bar { gap: var(--nv-space-1); }
  .nv-share-btn span { display: none; }
  .nv-share-btn { padding: var(--nv-space-2) var(--nv-space-3); }

  /* Section titles */
  .nv-section__title--large .nv-section__title-text { font-size: var(--nv-scale-2xl); }

  /* Scroll top positioning */
  .nv-scroll-top { bottom: var(--nv-space-5); right: var(--nv-space-5); }
}

/* ── Mobile (≤640px) ────────────────────────────────────── */
@media (max-width: 640px) {
  html { font-size: 16px; }

  .nv-container { padding: 0 var(--nv-space-4); }

  /* Topbar: hide entirely */
  .nv-topbar { display: none; }

  /* Hero */
  .nv-hero__slider { min-height: 360px; }
  .nv-hero__title { font-size: clamp(1.3rem, 6vw, var(--nv-scale-2xl)); }
  .nv-hero__meta { font-size: 10px; }
  .nv-hero__cta { display: none; }
  .nv-hero__btn { width: 38px; height: 38px; }

  /* Ticker */
  .nv-ticker__label { padding: 0 var(--nv-space-3); font-size: 10px; }

  /* Posts grid: single column */
  .nv-posts-grid--2col,
  .nv-posts-grid--3col,
  .nv-posts-grid--4col { grid-template-columns: 1fr; }

  /* Post card images: explicit height on mobile so aspect-ratio fallback works */
  .nv-post-card__thumb { min-height: 220px; }
  .nv-post-card__img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; display: block; }

  /* Category grid */
  .nv-category-grid { grid-template-columns: 1fr; }
  .nv-category-card { min-height: 120px; }

  /* Post overlay: ensure visible height */
  .nv-post-overlay { min-height: 260px; }

  /* Editor picks on mobile */
  .nv-editor-pick__thumb { min-height: 220px; }
  .nv-editor-pick__thumb img { min-height: 220px; }

  /* Footer */
  .nv-footer__widgets { grid-template-columns: 1fr; }
  .nv-footer__bottom-inner { flex-direction: column; text-align: center; gap: var(--nv-space-4); }
  .nv-footer__nav { display: none; }

  /* Error page */
  .nv-error-page__number { font-size: 7rem; }
  .nv-error-page__popular { display: none; }

  /* Section header */
  .nv-section__header { flex-direction: column; align-items: flex-start; gap: var(--nv-space-3); }
  .nv-section { padding: var(--nv-space-10) 0; }

  /* Related posts */
  .nv-related-posts__grid { grid-template-columns: 1fr; }
  .nv-related-posts__grid > *:nth-child(2) { display: none; }

  /* Post nav */
  .nv-post-nav__link--prev, .nv-post-nav__link--next { padding: var(--nv-space-4); }
  .nv-post-nav__title { font-size: var(--nv-scale-sm); }

  /* Author box */
  .nv-author-box { padding: var(--nv-space-6); }
  .nv-author-box__avatar-img { width: 64px; height: 64px; }

  /* Drop cap */
  .nv-drop-cap { font-size: 4rem; }

  /* Pagination */
  .nv-pagination__pages { display: none; }

  /* Breadcrumbs: truncate */
  .nv-breadcrumbs__item:not(:first-child):not(:last-child) { display: none; }

  /* Single post */
  .nv-single-post__title { font-size: var(--nv-scale-2xl); }
  .nv-single-post__deck { font-size: var(--nv-scale-md); padding-left: var(--nv-space-4); }

  /* Trending */
  .nv-trending-item__rank { font-size: var(--nv-scale-2xl); width: 40px; }

  /* Post card horizontal → stack vertical on mobile */
  .nv-post-card--horizontal { flex-direction: column; }
  .nv-post-card--horizontal .nv-post-card__thumb { width: 100%; height: 200px; aspect-ratio: unset; }
  .nv-post-card--horizontal .nv-post-card__thumb .nv-post-card__img { height: 200px; min-height: 200px; }
}

/* ── Extra small (≤480px) ───────────────────────────────── */
@media (max-width: 480px) {
  .nv-hero__slider { min-height: 300px; }
  .nv-content .nv-drop-cap { font-size: 3.5rem; }
  .nv-share-bar { justify-content: flex-start; }
  .nv-editor-picks__grid { gap: var(--nv-space-3); }
  .nv-header__inner { padding: var(--nv-space-3) var(--nv-space-4); }
  .nv-site-title__name { font-size: var(--nv-scale-xl); }

  /* Ensure images always visible on smallest screens */
  .nv-post-card__thumb { min-height: 200px; }
  .nv-post-card__img { min-height: 200px; }
  .nv-post-overlay { min-height: 220px; }
  .nv-category-card { min-height: 110px; }
}

/* ── Print styles ───────────────────────────────────────── */
@media print {
  .nv-header, .nv-footer, .nv-sidebar, .nv-ticker,
  .nv-reading-progress, .nv-scroll-top, .nv-share-bar,
  .nv-post-nav, .nv-related-posts, #comments,
  .nv-ad, .nv-hero__controls, .nv-hero__dots { display: none !important; }

  body { font-size: 12pt; color: #000; background: #fff; }
  .nv-single-post__title { font-size: 24pt; }
  .nv-content { font-size: 11pt; color: #222; }
  a { color: #000; text-decoration: underline; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #555; }
  img { max-width: 100% !important; }
  blockquote { border-left: 3pt solid #ccc; padding-left: 12pt; }
  .nv-container { max-width: 100%; padding: 0; }
  .nv-content-sidebar-wrap { grid-template-columns: 1fr; }
}