/* ─────────────────────────────────────────────
   WYS MOBILE / RESPONSIVE STYLES
   Desktop-first: these rules kick in below 1024px.
   Desktop layout is untouched above that.
───────────────────────────────────────────── */

/* ── HAMBURGER BUTTON (hidden on desktop) ── */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 110;
}
.hamburger-btn span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--rose);
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
}
.hamburger-btn.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger-btn.open span:nth-child(2) { opacity: 0; }
.hamburger-btn.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }


/* ══════════════════════════════════════════
   TABLET  ≤ 1024px
   Collapse side ad columns, keep main grid
══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .page-layout { grid-template-columns: 1fr !important; }
  .ad-col       { display: none !important; }
  main          { padding: 0 32px; }
  .pillars-grid { grid-template-columns: repeat(3, 1fr); }
  .archive-grid { grid-template-columns: repeat(3, 1fr); }
  .full-archive-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ══════════════════════════════════════════
   MOBILE  ≤ 767px
══════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── NEWSLETTER BAR ── */
  .newsletter-bar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px;
    justify-content: center;
  }
  .newsletter-bar > span  { width: 100%; text-align: center; font-size: 9px; }
  .newsletter-bar input   { width: 150px; }
  .newsletter-bar button:not(.nl-dismiss) { padding: 5px 14px; }
  .nl-dismiss             { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
  #nl-bar                 { position: relative; }

  /* ── HEADER / LOGO ── */
  .header-inner {
    padding: 14px 20px 0;
    position: relative;
  }
  .logo-main  { font-size: 44px; letter-spacing: 0.3em; }
  .logo-sub   { font-size: 7px;  letter-spacing: 0.4em; }
  .logo        { margin-bottom: 12px; }

  /* ── HAMBURGER visible on mobile ── */
  .hamburger-btn { display: flex; }

  /* ── NAV collapses, expands on toggle ── */
  nav:not(.toc) {
    flex-direction: column;
    align-items: center;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.32s ease, padding 0.32s ease;
    padding: 0;
    border-top: none;
  }
  nav:not(.toc).nav-open {
    max-height: 400px;
    padding: 10px 0 16px;
    border-top: 1px solid var(--border);
  }
  nav:not(.toc) a {
    padding: 10px 24px;
    font-size: 9px;
    letter-spacing: 0.22em;
    width: 100%;
    text-align: center;
  }
  nav:not(.toc) a::after { display: none; }

  /* ── PAGE LAYOUT ── */
  .page-layout { grid-template-columns: 1fr !important; }
  .ad-col      { display: none !important; }
  main         { padding: 0; }

  /* ── CATEGORY PAGE: PILLARS GRID
     2 columns, vertical cards, scroll feel ── */
  .pillars-section { padding: 24px 0 20px; }
  .pillars-section main,
  main             { padding: 0 12px; }
  .section-header  { margin-bottom: 20px; }

  .pillars-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
  }
  /* 5th card (Luxury Friday) spans full width on mobile */
  .pillars-grid > *:nth-child(5) {
    grid-column: 1 / -1;
    aspect-ratio: 5/2;
  }
  .pillar-card { aspect-ratio: 2/3; }
  .pillar-name { font-size: 15px; }

  /* ── ARCHIVE PREVIEW GRID ── */
  .archive-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
  }
  /* 5th card spans full width */
  .archive-grid > *:nth-child(5) {
    grid-column: 1 / -1;
    aspect-ratio: 5/2;
  }
  .archive-card { aspect-ratio: 2/3; }
  .archive-name { font-size: 13px; }

  /* ── LEADERBOARD AD ── */
  .ad-leaderboard { height: 60px; margin: 16px 0; }

  /* ── ARCHIVE SEPARATOR ── */
  .archive-separator { flex-wrap: wrap; gap: 6px; }
  .archive-see-all   { font-size: 8px; }

  /* ── FULL ARCHIVE PAGE GRID ── */
  .full-archive-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
  }
  .full-archive-grid > *:nth-child(odd):last-child {
    grid-column: 1 / -1;
    aspect-ratio: 5/2;
  }

  /* ── CAT HERO ── */
  .cat-hero        { padding: 28px 16px 36px; }
  .cat-hero-title  { font-size: 30px; line-height: 1.15; }
  .cat-hero-sub    { font-size: 11px; }

  /* ── ABOUT / BELIEF GRID ── */
  .about-section   { padding: 36px 16px 48px; }
  .about-statement { font-size: 24px; }
  .belief-grid     { grid-template-columns: 1fr; gap: 1px; }

  /* ── ARCHIVE PAGE BREADCRUMB ── */
  .archive-breadcrumb { padding: 20px 16px 12px; font-size: 8px; }
  .archive-page-title { font-size: 32px; padding: 0 16px 28px; }
  .archive-intro      { padding: 0 16px 32px; }
  .full-archive-section { padding: 0 12px 48px; }

  /* ── ARTICLE PAGE ── */

  /* Hero */
  .hero-image-wrap  { max-height: 240px; }
  .hero-pillar-tag  { left: 14px; top: 14px; font-size: 7px; padding: 4px 10px; }
  .hero-date-tag    { right: 14px; top: 14px; font-size: 7px; }

  /* Editorial column */
  .editorial         { padding: 0 16px; }
  .breadcrumb        { padding: 20px 0 16px; gap: 6px; }
  .article-title     { font-size: 30px; margin-bottom: 24px; padding-bottom: 24px; }
  .article-eyebrow   { font-size: 8px; }

  /* TOC — readable on mobile */
  .toc               { padding: 18px 16px; margin-bottom: 36px; }
  .toc-list li a     { font-size: 12px; padding: 8px 0; }

  /* Prose */
  .prose h2  { font-size: 24px; margin: 36px 0 14px; }
  .prose p   { font-size: 15px; }

  /* Pros / Cons + Who stacked */
  .pros-cons-wrap { grid-template-columns: 1fr; margin-bottom: 36px; }
  .who-wrap       { grid-template-columns: 1fr; margin-bottom: 36px; }

  /* Buy box */
  .buy-box         { padding: 20px 16px; }
  .buy-box-price   { font-size: 40px; }

  /* Verdict */
  .verdict-final { padding: 24px 16px; margin-bottom: 48px; }
  .vf-text       { font-size: 15px; }

  /* Related articles — 1 column on phones */
  .related-section { padding: 28px 12px 48px; }
  .related-grid    { grid-template-columns: 1fr; gap: 2px; }
  .related-card    { aspect-ratio: 16/9; }
  .related-title   { font-size: 17px; }

  /* ── FOOTER ── */
  .footer-inner    { padding: 40px 20px 24px; }
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .footer-brand    { grid-column: 1 / -1; }
  .footer-col h4   { font-size: 7px; }
  .footer-col a    { font-size: 10px; margin-bottom: 8px; }
  .footer-bottom   {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
  }
  .social-links    { justify-content: center; gap: 20px; }

  /* ── POPUP — full-width on mobile ── */
  .popup-notification {
    left: 12px;
    right: 12px;
    bottom: 16px;
    transform: translateY(20px);
    min-width: unset;
    max-width: unset;
    width: auto;
  }
  .popup-notification.show { transform: translateY(0); }
}


/* ══════════════════════════════════════════
   SMALL PHONES  ≤ 380px
══════════════════════════════════════════ */
@media (max-width: 380px) {
  .logo-main     { font-size: 36px; }
  .cat-hero-title { font-size: 26px; }
  .article-title { font-size: 26px; }
  .pillar-name   { font-size: 13px; }
  .pillars-grid  { gap: 1px; }
  .archive-grid  { gap: 1px; }
}