/* =====================================================================
   REDESIGN v13 — PREMIUM EDITORIAL HOMEPAGE
   Tips4She · June 2026
   ===================================================================== */

/* Font system: swap Manrope -> Inter */
:root {
    --sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Tighter section rhythm */
.section { margin-top: clamp(32px,4.5vw,56px); }
.section.soft { padding: clamp(32px,4.5vw,56px) 0; }
.section-tight { margin-top: clamp(20px,3vw,36px); }
.section-head { margin-bottom: clamp(16px,2vw,22px); }
.section-head h2 { font-size: clamp(1.6rem,2.6vw,2.3rem); }

/* ---- EDITORIAL HERO (replaces carousel) ------------------------------- */
.ed-hero {
    position: relative;
    min-height: clamp(500px,84vh,940px);
    background: #000;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}
.ed-hero-bg { position: absolute; inset: 0; }
.ed-hero-bg .media { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.ed-hero-bg .media img { transform: scale(1.04); transition: transform 6s ease-out; }
.ed-hero:hover .ed-hero-bg .media img { transform: scale(1); }
.ed-hero-over {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(125deg, rgba(5,5,5,.90) 0%, rgba(5,5,5,.62) 45%, rgba(5,5,5,.18) 100%);
}
.ed-hero-wrap {
    position: relative; z-index: 2;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: clamp(20px,3.5vw,48px);
    align-items: end;
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(64px,9vw,108px) clamp(18px,5vw,40px) clamp(44px,6vw,72px);
}
.ed-hero-main { display: flex; flex-direction: column; align-items: flex-start; }
.ed-hero-main .chip { margin-bottom: 20px; background: #fff; color: #000; }
.ed-hero-hl {
    font-size: clamp(2.1rem,4.4vw,3.8rem);
    line-height: 1.03;
    letter-spacing: -.022em;
    color: #fff; max-width: 16ch; margin-bottom: 18px; font-weight: 700;
}
.ed-hero-hl a { color: #fff; }
.ed-hero-hl a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.ed-hero-dek {
    color: rgba(255,255,255,.80);
    font-size: clamp(.96rem,1.5vw,1.14rem);
    line-height: 1.58; max-width: 46ch; margin-bottom: 28px;
}
.ed-hero-side {
    display: flex; flex-direction: column; gap: 1px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
    align-self: stretch;
}
.ed-hero-scard {
    display: grid; grid-template-columns: 72px 1fr;
    gap: 12px; padding: 13px 14px; align-items: center;
    transition: background .2s; flex: 1;
}
.ed-hero-scard:hover { background: rgba(255,255,255,.12); }
.ed-hero-simg .media { width: 72px; height: 72px; aspect-ratio: 1/1; }
.ed-hero-stxt .k {
    display: block; font-size: .58rem; letter-spacing: .2em;
    text-transform: uppercase; color: rgba(255,255,255,.58);
    font-weight: 700; margin-bottom: 5px;
}
.ed-hero-stxt h3 {
    font-family: var(--display); font-size: .94rem; font-weight: 500;
    color: #fff; line-height: 1.22;
}
.ed-hero-scard:hover .ed-hero-stxt h3 { text-decoration: underline; text-underline-offset: 3px; }
@media(max-width:980px) {
    .ed-hero-wrap { grid-template-columns: 1fr; }
    .ed-hero-side {
        flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory;
        scrollbar-width: none; background: rgba(0,0,0,.55); border: none;
        border-top: 1px solid rgba(255,255,255,.15);
    }
    .ed-hero-side::-webkit-scrollbar { display: none; }
    .ed-hero-scard { min-width: 200px; scroll-snap-align: start; }
    .ed-hero-hl { max-width: 100%; }
}
@media(max-width:600px) {
    .ed-hero { min-height: 78vh; }
    .ed-hero-side { display: none; }
    .ed-hero-hl { font-size: clamp(1.85rem,7.5vw,2.7rem); }
}

/* ---- WELLNESS SCORE TOP STRIP ----------------------------------------- */
.ws-topstrip { background: var(--ink2); color: #fff; padding: 13px 0; border-bottom: 1px solid #3a3a3a; }
.ws-topstrip-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.ws-topstrip-copy { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ws-topstrip-hl { font-family: var(--display); font-size: 1.02rem; font-weight: 600; color: #fff; letter-spacing: -.01em; }
.ws-topstrip-sub { font-size: .76rem; color: rgba(255,255,255,.58); letter-spacing: .04em; }
.ws-topstrip .btn.inv { background: #fff; color: #000; font-size: .7rem; padding: 11px 22px; white-space: nowrap; }
.ws-topstrip .btn.inv:hover { background: var(--g2); }
@media(max-width:700px) { .ws-topstrip-sub { display: none; } }
@media(max-width:480px) { .ws-topstrip-inner { justify-content: center; text-align: center; } .ws-topstrip-copy { justify-content: center; } }

/* ---- TRENDING CARD RAIL ----------------------------------------------- */
.rcard-trending { transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s; }
.rcard-trending:hover { transform: translateY(-5px); box-shadow: 0 14px 36px rgba(12,12,12,.14); }

/* ---- CATEGORY HUB CARDS ----------------------------------------------- */
.cat-hubs {
    display: grid; grid-template-columns: repeat(3,1fr);
    gap: clamp(18px,2.5vw,32px);
}
.cat-hub-card {
    background: #fff; border: 1px solid var(--line);
    padding: clamp(22px,2.8vw,34px);
    display: flex; flex-direction: column; gap: 14px;
    transition: border-color .22s, transform .22s, box-shadow .22s;
}
.cat-hub-card:hover { border-color: var(--black); transform: translateY(-4px); box-shadow: 0 18px 44px rgba(12,12,12,.1); }
.chc-head h3 { font-size: clamp(1.2rem,1.8vw,1.55rem); line-height: 1.1; margin-bottom: 7px; }
.chc-head h3 a { color: var(--black); }
.chc-head h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.chc-head p { color: var(--muted); font-size: .88rem; line-height: 1.5; }
.chc-topics { display: flex; flex-wrap: wrap; gap: 7px; flex: 1; align-content: flex-start; }
.chc-chip {
    border: 1px solid var(--line); color: var(--ink); font-size: .72rem;
    font-weight: 600; letter-spacing: .02em; padding: 6px 12px;
    transition: background .18s, border-color .18s, color .18s; line-height: 1;
}
.chc-chip:hover { background: var(--black); border-color: var(--black); color: #fff; }
.chc-cta {
    font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--black); padding-top: 13px; border-top: 1px solid var(--line);
    margin-top: 2px; display: inline-flex; align-items: center; gap: 8px;
}
.chc-cta:hover { text-decoration: underline; text-underline-offset: 4px; }
@media(max-width:980px) { .cat-hubs { grid-template-columns: 1fr 1fr; } }
@media(max-width:600px) { .cat-hubs { grid-template-columns: 1fr; } }

/* ---- Enhanced card hover effects (global polish) ---------------------- */
.ecard { transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s; }
.ecard:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(12,12,12,.09); }
.fcard-band { transition: transform .22s cubic-bezier(.2,.7,.2,1), border-color .22s, box-shadow .22s; }
.fcard-band:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(12,12,12,.12); border-color: var(--black); }
.vcard { transition: background .18s, transform .2s, box-shadow .2s; }
.vcard:hover { background: var(--g1); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(12,12,12,.07); }
.tool-card { transition: border-color .2s, transform .2s, box-shadow .2s; }
.tool-card:hover { border-color: var(--black); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(12,12,12,.1); }
.rcard { transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s; }
.rcard:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(12,12,12,.1); }

/* ---- Newsletter block ------------------------------------------------- */
.newsletter.bleed { margin-top: 0; width: 100vw; margin-left: calc(50% - 50vw); }
.newsletter h2 { font-size: clamp(1.8rem,3.4vw,2.8rem); margin: 18px auto 14px; max-width: 22ch; letter-spacing: -.015em; }
.newsletter p { font-size: 1rem; max-width: 48ch; margin-bottom: 28px; }
.nl-form input { border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.07); color: #fff; transition: border-color .2s, background .2s; }
.nl-form input::placeholder { color: rgba(255,255,255,.4); }
.nl-form input:focus { outline: none; border-color: #fff; background: rgba(255,255,255,.12); }

/* ---- Typography refinements ------------------------------------------- */
body { font-size: 16.5px; line-height: 1.64; }
.section-head h2 { letter-spacing: -.012em; }

/* ---- Mobile spacing ---------------------------------------------------- */
@media(max-width:600px) {
    .section { margin-top: clamp(24px,6vw,36px); }
    .section-head { margin-bottom: 14px; }
    .section-head h2 { font-size: clamp(1.4rem,6vw,1.8rem); }
    .cat-hub-card { padding: 18px; }
    .ws-topstrip { padding: 11px 0; }
    .editor-note { padding: clamp(20px,5vw,32px); }
    .vcard { min-height: 130px; padding: 16px 14px; }
    .grid.cols-4 { grid-template-columns: 1fr 1fr; gap: 18px; }
    .newsletter { padding: clamp(36px,8vw,56px) clamp(18px,5vw,28px); }
}

/* ---- Hide old hero carousel if present -------------------------------- */
.hero[data-hero] { display: none !important; }

/* ===================================================================
   Sprint A — Spacing Remediations 20260623
   Scope: targeted overrides only. Does NOT modify .section globally.
   All clamp values computed at 1440px: 2vw=28.8px, 1.5vw=21.6px, 2.5vw=36px
   =================================================================== */

/* A1: Fix Trending Now (.section-tight) inherited padding
   Root cause: .section-tight inherits padding:clamp(54px,8vw,96px) from .section in style.css
   Previous override only reduced margin-top. This adds missing padding overrides.
   Before: paddingTop=96px paddingBottom=96px marginTop=36px → total pre-heading space=228px
   After:  paddingTop=20px paddingBottom=20px marginTop=20px → total pre-heading space=56px */
.section-tight {
  margin-top: clamp(12px, 2vw, 20px);
  padding-top: clamp(12px, 2vw, 20px);
  padding-bottom: clamp(12px, 2vw, 20px);
}

/* A2: Fix Editor's Note section wrapper padding
   Root cause: editor_note() emits <section class="section"> inheriting
   padding:clamp(54px,8vw,96px) and margin-top:clamp(32px,4.5vw,56px) from style.css/redesign.css
   Uses CSS :has() — targets ONLY the .section wrapping .editor-note. Zero side effects.
   Browser support: Chrome 105+, Firefox 121+, Safari 15.4+.
   Before: marginTop=56px + paddingTop=96px = 152px gap from wellness strip to editor note box
   After:  marginTop=14px + paddingTop=24px = 38px */
.section:has(> .editor-note) {
  margin-top: clamp(8px, 1.5vw, 14px);
  padding-top: clamp(16px, 2vw, 24px);
  padding-bottom: clamp(12px, 1.5vw, 16px);
}

/* ============================================================
   Sprint A Remediation — 2026-06-23
   A1: Fix Trending Now excessive inherited padding
   A2: Fix Editor Note section excessive inherited padding
   Root cause: .section { padding: clamp(54px,8vw,96px) 0 } in style.css
   was not overridden for these specific sections.
   DO NOT modify .section globally — these are targeted overrides only.
   ============================================================ */

/* A1 — Trending Now: reduce inherited 96px padding to 36px */
.section-tight {
  padding-top:    clamp(20px, 3vw, 36px);
  padding-bottom: clamp(20px, 3vw, 36px);
}

/* A2 — Editor's Note section: reduce inherited 96px padding to 36px */
/* Uses :has() which is supported in all modern browsers (Chrome 105+, Safari 15.4+, FF 121+) */
.section:has(> .editor-note) {
  padding-top:    clamp(20px, 3vw, 36px);
  padding-bottom: clamp(20px, 3vw, 36px);
}

/* Mobile — ensure reductions also apply at narrow viewports */
@media (max-width: 600px) {
  .section-tight {
    padding-top:    clamp(16px, 4vw, 24px);
    padding-bottom: clamp(16px, 4vw, 24px);
  }
  .section:has(> .editor-note) {
    padding-top:    clamp(16px, 4vw, 24px);
    padding-bottom: clamp(16px, 4vw, 24px);
  }
}