/* v34 mobile-first redesign */
:root{ --bg:#0e1218; --panel:#121824; --muted:#98a2b3; --pill:#1a2332; --accent:#6ee7ff; --pink:#ff477e; }
html,body{background:var(--bg); color:#fff; margin:0; padding:0;}
.container{max-width:1100px; margin:0 auto; padding:0 16px;}
#hero{padding:10px 0 18px; background:linear-gradient(180deg,#0e1218 0%, #121824 100%); position:relative; border-bottom:1px solid rgba(255,255,255,.06)}
.hero-chips{display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; padding:8px 12px 4px; margin:0 -8px 8px}
.hero-chips a{flex:0 0 auto; scroll-snap-align:start; padding:10px 12px; border-radius:999px; background:var(--pill); border:1px solid rgba(255,255,255,.12); text-decoration:none; color:#e6edf7; font-size:.95rem; white-space:nowrap}
.hero-chips a:hover{border-color:rgba(255,255,255,.25)}
.hero-title{display:flex; align-items:center; gap:10px; padding:0 4px 8px}
.hero-title .logo{font-weight:700; font-size:1.05rem; color:#e6edf7; text-decoration:none}
.hero-count{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:14px; margin:6px 4px}
.timer-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.timer-grid .unit{background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:14px; text-align:center; padding:10px 6px}
.timer-grid .num{font-size:1.65rem; font-weight:800; letter-spacing:.5px}
.timer-grid .lbl{font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
@media(min-width:640px){ .hero-title .logo{font-size:1.2rem} .hero-count{padding:18px} .timer-grid .num{font-size:2rem} }
@media(min-width:900px){ .hero{padding:16px 0 22px} .timer-grid .num{font-size:2.4rem} }
.hide-mobile{display:none}
@media(min-width:900px){ .hide-mobile{display:block} }
.secondary-timer, .duplicate-timer{display:none !important}
.mobile-nav a{display:block; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.06); color:#e6edf7; text-decoration:none}
.mobile-nav a:hover{background:#141b27}
.mobile-nav .section-title{padding:10px 16px; color:#b7c0cd; font-size:.85rem; text-transform:uppercase; letter-spacing:.12em}
.blog-page .card{margin:10px 0 14px}


/* v35: mobile — show timer only in hero */
@media (max-width: 900px){
  .timer, .countdown, .countdown-timer, .timer-grid { display: none !important; }
  #hero .timer, #hero .countdown, #hero .countdown-timer, #hero .timer-grid { display: grid !important; }
  #hero .timer, #hero .countdown { display: block !important; }
}



/* v36: mobile stacking for feature sections under hero */
@media (max-width: 900px){
  /* Generic collapse for common 2-col patterns */
  .two-col, .cols-2, .grid-2, .split, .row-2, .flex-2 { 
    display: block !important; 
  }
  .two-col > *, .cols-2 > *, .grid-2 > *, .split > *, .row-2 > *, .flex-2 > *{
    width: 100% !important; 
    max-width: 100% !important; 
    margin: 0 0 14px 0 !important;
  }
  /* If these sections use CSS grid, force one column */
  .two-col, .cols-2, .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Specific sections by id or data-section name where present */
  #plan-the-best-new-year, [data-section="plan-best-new-year"]{
    display: block !important;
    margin: 12px 0 10px 0 !important;
  }
  #countdown-to-2026, [data-section="countdown-2026"]{
    display: block !important;
    margin: 8px 0 14px 0 !important;
  }
  /* Card styles within these sections */
  #plan-the-best-new-year .card, [data-section="plan-best-new-year"] .card,
  #countdown-to-2026 .card, [data-section="countdown-2026"] .card{
    width: 100% !important;
  }
  /* Ensure any leftover floats/flex are neutralized */
  #plan-the-best-new-year > *, #countdown-to-2026 > *{
    float: none !important;
    flex: 0 0 100% !important;
  }
  /* Add gentle spacing under hero */
  #hero + section{ margin-top: 12px !important; }
}

/* Safety: tiny desktop tweak to keep them side-by-side on larger screens if designed that way */
@media (min-width: 901px){
  #plan-the-best-new-year.two-col, #countdown-to-2026.two-col{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}