/* ============================================================
   NORTHIC MEDIA — PRESS / BLOG STYLES
   Loads AFTER site.css. Uses the same design tokens (--navy,
   --amber, --teal, --slate, --line, fonts) — no new palette,
   no new typefaces. Scoped to .press-* classes so it can never
   leak onto the rest of the site.
   ============================================================ */

.press-page{ background:var(--bg); }

/* -------- Breadcrumb (single article template) -------- */
.press-crumb{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--slate); display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:18px 0 0; }
.press-crumb a{ color:var(--slate); }
.press-crumb a:hover{ color:var(--amber-dark); }
.press-crumb span{ color:var(--slate-light); }
.press-crumb .current{ color:var(--navy); font-weight:600; }

/* -------- Hero -------- */
.press-hero{ padding:56px 0 40px; text-align:center; border-bottom:1px solid var(--line); }
.press-hero .kicker{ justify-content:center; }
.press-hero h1{ font-size:44px; }
.press-hero p{ max-width:560px; margin:16px auto 0; color:var(--slate); font-size:17px; }
@media(max-width:720px){ .press-hero h1{ font-size:32px; } .press-hero{ padding:40px 0 32px; } }

/* -------- Featured article -------- */
.press-featured{ padding:56px 0; }
.featured-card{ display:grid; grid-template-columns:1.15fr 1fr; gap:0; background:var(--bg-soft); border:1px solid var(--line); border-radius:16px; overflow:hidden; position:relative; text-decoration:none; }
.featured-card:hover .featured-img img{ transform:scale(1.03); }
.featured-img{ position:relative; overflow:hidden; aspect-ratio:16/11; background:var(--bg-soft-2); }
.featured-img img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.featured-body{ padding:40px 44px; display:flex; flex-direction:column; justify-content:center; gap:14px; }
.press-eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--teal); }
.press-cat{ font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; letter-spacing:0.03em; text-transform:uppercase; color:var(--amber-dark); }
.featured-body h2{ font-size:28px; color:var(--navy); }
.featured-body p{ color:var(--slate); font-size:15.5px; }
.press-meta{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--slate-light); display:flex; align-items:center; gap:8px; }
.press-readmore{ font-family:'Space Grotesk',sans-serif; font-weight:700; color:var(--navy); font-size:15px; display:inline-flex; align-items:center; gap:6px; margin-top:4px; }
.featured-card:hover .press-readmore{ color:var(--amber-dark); }
.press-readmore svg{ transition:transform .15s ease; }
.featured-card:hover .press-readmore svg{ transform:translateX(3px); }
@media(max-width:800px){ .featured-card{ grid-template-columns:1fr; } .featured-body{ padding:28px 24px 34px; } .featured-body h2{ font-size:23px; } }

/* -------- Category filter -------- */
.press-filters{ display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; margin:0 0 40px; scrollbar-width:none; }
.press-filters::-webkit-scrollbar{ display:none; }
.press-filter{ flex:0 0 auto; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13.5px; padding:9px 18px; border-radius:100px; border:1.5px solid var(--line); background:#fff; color:var(--slate); cursor:pointer; white-space:nowrap; transition:border-color .15s ease, color .15s ease, background .15s ease; }
.press-filter:hover{ border-color:var(--navy); color:var(--navy); }
.press-filter.active{ background:var(--navy); border-color:var(--navy); color:#fff; }

/* -------- Article grid -------- */
.press-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px 28px; }
@media(max-width:960px){ .press-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .press-grid{ grid-template-columns:1fr; } }

.press-card{ display:flex; flex-direction:column; text-decoration:none; }
.press-card-img{ aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:var(--bg-soft-2); margin-bottom:16px; }
.press-card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.press-card:hover .press-card-img img{ transform:scale(1.045); }
.press-card .press-cat{ margin-bottom:8px; }
.press-card h3{ font-size:19px; color:var(--navy); margin-bottom:8px; }
.press-card:hover h3{ color:var(--amber-dark); }
.press-card p{ color:var(--slate); font-size:14.5px; margin-bottom:14px; flex:1; }

/* -------- Pagination -------- */
.press-pagination{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:56px; flex-wrap:wrap; }
.press-pagination a, .press-pagination span{ min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14px; color:var(--navy); border:1.5px solid var(--line); padding:0 14px; }
.press-pagination a:hover{ border-color:var(--navy); }
.press-pagination .current{ background:var(--navy); border-color:var(--navy); color:#fff; }
.press-pagination .dots{ border:none; color:var(--slate-light); min-width:auto; }

/* -------- Topics -------- */
.press-topics{ background:var(--bg-soft); }
.topic-grid{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.topic-chip{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14.5px; padding:12px 22px; border-radius:100px; background:#fff; border:1.5px solid var(--line); color:var(--navy); transition:border-color .15s ease, background .15s ease, color .15s ease; }
.topic-chip:hover{ border-color:var(--amber); background:var(--teal-soft); color:var(--navy); }

/* -------- Popular / Editor's picks -------- */
.press-popular ol{ list-style:none; counter-reset:pick; display:flex; flex-direction:column; }
.pick{ counter-increment:pick; display:grid; grid-template-columns:52px 1fr; gap:20px; padding:22px 0; border-bottom:1px solid var(--line); align-items:start; text-decoration:none; }
.press-popular ol li:first-child .pick{ padding-top:0; }
.pick::before{ content:counter(pick, decimal-leading-zero); font-family:'IBM Plex Mono',monospace; font-size:22px; font-weight:600; color:var(--slate-light); }
.pick h3{ font-size:17.5px; color:var(--navy); margin-bottom:6px; }
.pick:hover h3{ color:var(--amber-dark); }
.pick p{ color:var(--slate); font-size:14px; }

/* -------- CTA band -------- */
.press-cta{ background:var(--navy); border-radius:20px; padding:56px 44px; text-align:center; }
.press-cta h2{ color:#fff; font-size:30px; }
.press-cta p{ color:#B8C4D9; max-width:560px; margin:14px auto 28px; font-size:16px; }
@media(max-width:720px){ .press-cta{ padding:40px 24px; border-radius:16px; } .press-cta h2{ font-size:24px; } }

/* -------- Single article -------- */
.press-article{ max-width:760px; margin:0 auto; padding:32px 0 64px; }
.press-article-head{ margin-bottom:28px; }
.press-article-head h1{ font-size:36px; margin:14px 0 18px; }
.press-article-img{ width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; margin-bottom:36px; background:var(--bg-soft-2); }
.press-article-img img{ width:100%; height:100%; object-fit:cover; }
.press-body{ font-size:17px; color:#2A3648; }
.press-body h2{ font-size:24px; margin:36px 0 14px; }
.press-body h3{ font-size:19px; margin:28px 0 12px; }
.press-body p{ margin-bottom:18px; }
.press-body a{ color:var(--amber-dark); text-decoration:underline; text-underline-offset:2px; }
.press-body ul,.press-body ol{ margin:0 0 18px 22px; }
.press-body li{ margin-bottom:8px; }
.press-inline-cta{ margin:36px 0; padding:26px 28px; background:var(--teal-soft); border-radius:12px; border:1px solid #CBEFE7; }
.press-inline-cta p{ margin-bottom:14px; color:var(--navy); font-weight:600; }