/* Dream Dwell Insights — page-specific styles.
   Loaded after ../styles.css and relies on its :root tokens, base
   typography, .btn, .site-header, .section-pad, .eyebrow,
   .section-heading, and .card-grid rules. Nothing in ../styles.css is
   modified or duplicated here — only additions specific to this page. */

.skip-link{background:var(--cyan);color:var(--void);font-size:12px;font-weight:700;left:-999px;padding:10px 16px;position:absolute;top:auto;z-index:100}
.skip-link:focus{left:12px;top:12px}

.hero-simple{max-width:900px}
.hero-simple .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

/* Alternating section backgrounds, reusing existing color tokens */
.section-light{background:var(--panel);color:var(--bone);max-width:none}
.section-light>*{margin-left:auto;margin-right:auto;max-width:1280px;position:relative;z-index:1}
.section-light p{color:var(--wire)}
.section-light .eyebrow{color:var(--amber)}
.section-light .eyebrow span{color:var(--wire-dim)}
.section-light .card-grid{background:var(--panel-line)}
.section-light .card-grid article{background:var(--panel-2)}

.section-alt{background:var(--panel-2);max-width:none}
.section-alt>*{margin-left:auto;margin-right:auto;max-width:1280px;position:relative;z-index:1}

.featured,.latest{max-width:none}
.featured>*,.latest>*{margin-left:auto;margin-right:auto;max-width:1280px;position:relative;z-index:1}

/* Category cards: reuse .card-grid layout, add a status pill.
   auto-fit (not a fixed 3-col track) so 5 cards fill one row cleanly
   instead of leaving an empty-looking 6th cell in a 3x2 grid. */
.category-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.category-grid .status-tag,
.content-grid .status-tag{display:inline-block;margin-top:16px}
.status-tag{border:1px solid var(--panel-line);border-radius:10px;color:var(--cyan);font-family:"JetBrains Mono",monospace;font-size:10.5px;font-weight:700;letter-spacing:.06em;padding:4px 10px;text-transform:uppercase}
.section-light .status-tag{border-color:var(--panel-line);color:var(--amber)}

/* Featured / Latest grids: auto-fit so a small number of published
   cards doesn't stretch across empty grid tracks as the hub grows */
.content-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

.latest-grid{margin-top:64px}

.insights-cta{background:var(--panel-2);max-width:none}
.cta-inner{margin:0 auto;max-width:760px;position:relative;text-align:center;z-index:1}
.cta-inner h2{max-width:none}
.cta-inner .btn{margin-top:28px}

@media(max-width:760px){
  .hero-simple{max-width:none}
  .cta-inner{text-align:left}
}