/* ============================================================
   NEWSROOM — News Portal & Journalism
   "Truth in Every Headline."
   Design Language: Broadside editorial — newspaper grid grammar,
   sharp typographic hierarchy, rule-line dividers, ticker energy.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Roboto:wght@300;400;500;700;900&display=swap');

/* ── 1. TOKENS ────────────────────────────────────────────── */
:root {
  /* Palette */
  --c-dark:      #111827;
  --c-dark-s:    #1F2937;
  --c-blue:      #2563EB;
  --c-blue-d:    #1D4ED8;
  --c-blue-l:    #DBEAFE;
  --c-white:     #FFFFFF;
  --c-gray:      #F3F4F6;
  --c-gray-m:    #D1D5DB;
  --c-gray-d:    #6B7280;
  --c-accent:    #DC2626;  /* breaking news red */
  --c-black:     #000000;

  /* Typography */
  --ff-heading:  'Lora', Georgia, 'Times New Roman', serif;
  --ff-body:     'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --fs-xs:       0.75rem;   /* 12 */
  --fs-sm:       0.8125rem; /* 13 */
  --fs-base:     1rem;      /* 16 */
  --fs-md:       1.125rem;  /* 18 */
  --fs-lg:       1.25rem;   /* 20 */
  --fs-xl:       1.5rem;    /* 24 */
  --fs-2xl:      2rem;      /* 32 */
  --fs-3xl:      2.5rem;    /* 40 */
  --fs-4xl:      3.25rem;   /* 52 */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-bold:     700;
  --fw-black:    900;
  --lh-tight:    1.15;
  --lh-snug:     1.3;
  --lh-body:     1.65;

  /* Spacing */
  --sp-xs:  0.25rem;
  --sp-sm:  0.5rem;
  --sp-md:  1rem;
  --sp-lg:  1.5rem;
  --sp-xl:  2rem;
  --sp-2xl: 3rem;
  --sp-3xl: 4rem;
  --sp-4xl: 6rem;

  /* Layout */
  --max-w:      1200px;
  --sidebar-w:  340px;
  --gutter:     1.5rem;
  --radius:     4px;

  /* Transitions */
  --ease:       cubic-bezier(.4, 0, .2, 1);
  --dur:        0.25s;
  --dur-slow:   0.45s;

  /* Shadows */
  --sh-sm:  0 1px 3px rgba(0,0,0,.08);
  --sh-md:  0 4px 12px rgba(0,0,0,.1);
  --sh-lg:  0 8px 30px rgba(0,0,0,.12);
}

/* ── 2. RESET & BASE ─────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  font-size:16px;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  font-family:var(--ff-body);
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  color:var(--c-dark);
  background:var(--c-white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{cursor:pointer;border:none;background:none;font:inherit}
input,textarea,select{font:inherit;border:1px solid var(--c-gray-m);border-radius:var(--radius)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--c-blue);outline-offset:1px}
h1,h2,h3,h4,h5,h6{font-family:var(--ff-heading);font-weight:var(--fw-bold);line-height:var(--lh-tight);color:var(--c-dark)}

/* ── 3. UTILITIES ─────────────────────────────────────────── */
.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.text-blue{color:var(--c-blue)}
.text-red{color:var(--c-accent)}
.text-gray{color:var(--c-gray-d)}
.bg-dark{background:var(--c-dark);color:var(--c-white)}
.bg-gray{background:var(--c-gray)}
.bg-blue{background:var(--c-blue);color:var(--c-white)}
.fw-bold{font-weight:var(--fw-bold)}
.fw-black{font-weight:var(--fw-black)}
.ff-heading{font-family:var(--ff-heading)}

/* Rule lines — newspaper DNA */
.rule-top{border-top:3px solid var(--c-dark)}
.rule-bottom{border-bottom:1px solid var(--c-gray-m)}
.rule-thick{border-top:4px solid var(--c-dark)}
.rule-double{border-top:3px double var(--c-dark)}

/* Label / tag chips */
.label{
  display:inline-block;
  font-family:var(--ff-body);
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:.2em .6em;
  border-radius:2px;
}
.label--blue{background:var(--c-blue);color:var(--c-white)}
.label--dark{background:var(--c-dark);color:var(--c-white)}
.label--red{background:var(--c-accent);color:var(--c-white)}
.label--outline{background:transparent;border:1px solid var(--c-dark);color:var(--c-dark)}
.label--ghost{background:rgba(255,255,255,.15);color:var(--c-white)}

/* Section title with rule */
.section-heading{
  display:flex;align-items:center;gap:var(--sp-md);
  margin-bottom:var(--sp-xl);
}
.section-heading::after{content:'';flex:1;height:2px;background:var(--c-dark)}
.section-heading h2{white-space:nowrap;font-size:var(--fs-xl);text-transform:uppercase;letter-spacing:.04em}

/* ── 4. REVEAL ANIMATION ──────────────────────────────────── */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}
.reveal.reveal-left{
  transform:translateX(-28px);
}
.reveal.reveal-left.visible{transform:translateX(0)}
.reveal.reveal-right{
  transform:translateX(28px);
}
.reveal.reveal-right.visible{transform:translateX(0)}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ── 5. BREAKING NEWS TICKER ──────────────────────────────── */
.ticker{
  background:var(--c-accent);
  color:var(--c-white);
  padding:.5rem 0;
  overflow:hidden;
  position:relative;
}
.ticker__label{
  position:absolute;left:0;top:0;bottom:0;
  background:var(--c-dark);
  color:var(--c-white);
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  text-transform:uppercase;
  letter-spacing:.1em;
  padding:.55rem 1rem;
  z-index:2;
  display:flex;align-items:center;gap:.4rem;
}
.ticker__label::before{
  content:'';width:8px;height:8px;border-radius:50%;background:var(--c-accent);
  animation:pulse-dot 1.2s ease infinite;
}
@keyframes pulse-dot{
  0%,100%{opacity:1}50%{opacity:.3}
}
.ticker__track{
  display:flex;gap:var(--sp-3xl);
  padding-left:10rem;
  animation:ticker-scroll 30s linear infinite;
  white-space:nowrap;
}
.ticker__item{
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
}
.ticker__item::before{
  content:'\2022';margin-right:.6rem;opacity:.5;
}
@keyframes ticker-scroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){
  .ticker__track{animation:none}
}

/* ── 6. HEADER ────────────────────────────────────────────── */
.header{
  background:var(--c-white);
  border-bottom:1px solid var(--c-gray-m);
  position:sticky;top:0;z-index:100;
}
.header__top{
  display:flex;align-items:center;justify-content:space-between;
  padding:.6rem 0;
  border-bottom:1px solid var(--c-gray);
  font-size:var(--fs-xs);
  color:var(--c-gray-d);
}
.header__top-right{display:flex;align-items:center;gap:var(--sp-md)}
.header__date{font-weight:var(--fw-medium)}

.header__main{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-md) 0;
}
.header__logo{
  display:flex;align-items:center;gap:var(--sp-sm);
}
.header__logo-img{height:40px;width:auto}
.header__logo-text{
  font-family:var(--ff-heading);
  font-size:var(--fs-2xl);
  font-weight:var(--fw-black);
  letter-spacing:-.02em;
  color:var(--c-dark);
}
.header__logo-tagline{
  font-size:var(--fs-xs);
  color:var(--c-gray-d);
  font-style:italic;
  display:block;
  margin-top:-.2rem;
}

.header__search{
  display:flex;align-items:center;
  border:1px solid var(--c-gray-m);
  border-radius:var(--radius);
  padding:.4rem .8rem;
  gap:.4rem;
}
.header__search input{
  border:none;outline:none;
  font-size:var(--fs-sm);
  width:180px;
  padding:0;
}
.header__search-icon{color:var(--c-gray-d);font-size:var(--fs-md)}

/* Navigation */
.nav{
  background:var(--c-dark);
}
.nav__list{
  display:flex;align-items:center;gap:0;
}
.nav__link{
  display:block;
  padding:.85rem 1.2rem;
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
  color:var(--c-white);
  text-transform:uppercase;
  letter-spacing:.05em;
  transition:background var(--dur) var(--ease);
  position:relative;
}
.nav__link:hover,
.nav__link.active{
  background:var(--c-blue);
}
.nav__link.active::after{
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid var(--c-white);
}
.nav__spacer{flex:1}
.nav__cta{
  background:var(--c-accent);color:var(--c-white);
  padding:.85rem 1.4rem;
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  text-transform:uppercase;
  letter-spacing:.05em;
  transition:opacity var(--dur) var(--ease);
}
.nav__cta:hover{opacity:.85}

/* Burger */
.burger{display:none;flex-direction:column;gap:5px;padding:.5rem}
.burger span{
  display:block;width:24px;height:2px;background:var(--c-dark);
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.burger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ── 7. HERO ──────────────────────────────────────────────── */
.hero{
  padding:var(--sp-3xl) 0 var(--sp-2xl);
  background:var(--c-white);
}
.hero__grid{
  display:grid;
  grid-template-columns:1fr var(--sidebar-w);
  gap:var(--sp-2xl);
}
.hero__featured{position:relative;overflow:hidden;border-radius:var(--radius)}
.hero__featured-img{
  width:100%;height:420px;object-fit:cover;
  transition:transform var(--dur-slow) var(--ease);
}
.hero__featured:hover .hero__featured-img{transform:scale(1.03)}
.hero__featured-overlay{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.3) 60%,transparent 100%);
  padding:var(--sp-2xl) var(--sp-xl) var(--sp-xl);
}
.hero__featured-meta{
  display:flex;align-items:center;gap:var(--sp-sm);
  margin-bottom:var(--sp-sm);
}
.hero__featured-title{
  font-size:var(--fs-3xl);
  color:var(--c-white);
  line-height:var(--lh-snug);
  margin-bottom:var(--sp-sm);
}
.hero__featured-excerpt{
  font-size:var(--fs-base);
  color:rgba(255,255,255,.8);
  line-height:var(--lh-body);
  max-width:540px;
}
.hero__featured-link{
  display:inline-block;margin-top:var(--sp-md);
  color:var(--c-white);font-weight:var(--fw-bold);
  font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.06em;
  border-bottom:2px solid var(--c-white);padding-bottom:2px;
  transition:color var(--dur) var(--ease);
}
.hero__featured-link:hover{color:var(--c-blue)}

/* Hero Sidebar */
.hero__sidebar{display:flex;flex-direction:column;gap:0}
.hero__sidebar-title{
  font-size:var(--fs-lg);font-weight:var(--fw-bold);
  text-transform:uppercase;letter-spacing:.04em;
  padding-bottom:var(--sp-sm);margin-bottom:var(--sp-md);
  border-bottom:3px solid var(--c-dark);
}
.hero__side-item{
  display:flex;gap:var(--sp-md);
  padding:var(--sp-md) 0;
  border-bottom:1px solid var(--c-gray);
  transition:background var(--dur) var(--ease);
}
.hero__side-item:last-child{border-bottom:none}
.hero__side-item:hover{background:var(--c-gray);margin:0 calc(var(--gutter)*-1);padding-left:var(--gutter);padding-right:var(--gutter);border-radius:var(--radius)}
.hero__side-img{width:90px;height:68px;object-fit:cover;border-radius:var(--radius);flex-shrink:0}
.hero__side-body{display:flex;flex-direction:column;justify-content:center;gap:.2rem}
.hero__side-cat{font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;color:var(--c-blue);letter-spacing:.06em}
.hero__side-title{font-family:var(--ff-heading);font-size:var(--fs-base);font-weight:var(--fw-bold);line-height:var(--lh-snug)}
.hero__side-time{font-size:var(--fs-xs);color:var(--c-gray-d)}

/* ── 8. CATEGORY SECTIONS ─────────────────────────────────── */
.categories{padding:var(--sp-3xl) 0}

.cat-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-xl);
  margin-bottom:var(--sp-3xl);
}

/* Card */
.card{
  background:var(--c-white);
  border:1px solid var(--c-gray);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:var(--sh-md);
}
.card__img{
  width:100%;height:200px;object-fit:cover;
  transition:transform var(--dur-slow) var(--ease);
}
.card:hover .card__img{transform:scale(1.04)}
.card__body{padding:var(--sp-lg)}
.card__cat{
  font-size:var(--fs-xs);font-weight:var(--fw-bold);
  text-transform:uppercase;letter-spacing:.06em;color:var(--c-blue);
  margin-bottom:var(--sp-sm);
}
.card__title{
  font-family:var(--ff-heading);font-size:var(--fs-lg);
  font-weight:var(--fw-bold);line-height:var(--lh-snug);
  margin-bottom:var(--sp-sm);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card__excerpt{
  font-size:var(--fs-sm);color:var(--c-gray-d);line-height:var(--lh-body);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:var(--sp-md);
}
.card__meta{
  display:flex;align-items:center;gap:var(--sp-sm);
  font-size:var(--fs-xs);color:var(--c-gray-d);
}
.card__meta-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}
.card__meta-sep{width:3px;height:3px;border-radius:50%;background:var(--c-gray-m)}

/* ── 9. TRENDING SIDEBAR ──────────────────────────────────── */
.trending{
  background:var(--c-dark);
  color:var(--c-white);
  padding:var(--sp-3xl) 0;
}
.trending__grid{
  display:grid;
  grid-template-columns:1fr var(--sidebar-w);
  gap:var(--sp-2xl);
}
.trending__title{
  font-size:var(--fs-xl);text-transform:uppercase;letter-spacing:.04em;
  padding-bottom:var(--sp-sm);margin-bottom:var(--sp-xl);
  border-bottom:3px solid var(--c-blue);
}
.trending__list{display:flex;flex-direction:column;gap:0}
.trending__item{
  display:flex;align-items:flex-start;gap:var(--sp-md);
  padding:var(--sp-lg) 0;
  border-bottom:1px solid rgba(255,255,255,.1);
  transition:background var(--dur) var(--ease);
}
.trending__item:last-child{border-bottom:none}
.trending__item:hover{background:rgba(255,255,255,.04)}
.trending__num{
  font-family:var(--ff-heading);
  font-size:var(--fs-3xl);font-weight:var(--fw-black);
  color:var(--c-blue);
  line-height:1;min-width:50px;
}
.trending__item-title{
  font-family:var(--ff-heading);font-size:var(--fs-md);
  font-weight:var(--fw-bold);line-height:var(--lh-snug);color:var(--c-white);
  margin-bottom:.3rem;
}
.trending__item-meta{font-size:var(--fs-xs);color:rgba(255,255,255,.5)}

/* Sidebar widget */
.sidebar-widget{
  background:var(--c-dark-s);
  border-radius:var(--radius);
  padding:var(--sp-xl);
}
.sidebar-widget__title{
  font-size:var(--fs-lg);margin-bottom:var(--sp-lg);
  padding-bottom:var(--sp-sm);border-bottom:2px solid var(--c-blue);
}
.popular-item{
  display:flex;gap:var(--sp-md);
  padding:var(--sp-md) 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.popular-item:last-child{border-bottom:none}
.popular-item__img{width:70px;height:54px;object-fit:cover;border-radius:var(--radius);flex-shrink:0}
.popular-item__title{
  font-family:var(--ff-heading);font-size:var(--fs-sm);font-weight:var(--fw-bold);
  line-height:var(--lh-snug);color:var(--c-white);
}
.popular-item__time{font-size:var(--fs-xs);color:rgba(255,255,255,.4);margin-top:.2rem}

/* ── 10. NEWSLETTER ───────────────────────────────────────── */
.newsletter{
  padding:var(--sp-4xl) 0;
  background:linear-gradient(135deg,var(--c-blue) 0%,var(--c-blue-d) 100%);
  color:var(--c-white);
  text-align:center;
}
.newsletter__inner{max-width:560px;margin:0 auto}
.newsletter__icon{font-size:2.5rem;margin-bottom:var(--sp-md);opacity:.9}
.newsletter__title{
  font-size:var(--fs-2xl);margin-bottom:var(--sp-sm);
}
.newsletter__text{
  font-size:var(--fs-md);opacity:.85;margin-bottom:var(--sp-xl);
  line-height:var(--lh-body);
}
.newsletter__form{
  display:flex;gap:0;
  max-width:440px;margin:0 auto;
}
.newsletter__input{
  flex:1;
  padding:.8rem 1rem;
  border:2px solid rgba(255,255,255,.3);
  border-right:none;
  border-radius:var(--radius) 0 0 var(--radius);
  background:rgba(255,255,255,.12);
  color:var(--c-white);
  font-size:var(--fs-base);
}
.newsletter__input::placeholder{color:rgba(255,255,255,.6)}
.newsletter__btn{
  padding:.8rem 1.6rem;
  background:var(--c-white);
  color:var(--c-blue);
  font-weight:var(--fw-bold);
  font-size:var(--fs-sm);
  text-transform:uppercase;
  letter-spacing:.04em;
  border-radius:0 var(--radius) var(--radius) 0;
  transition:opacity var(--dur) var(--ease);
}
.newsletter__btn:hover{opacity:.9}

/* ── 11. ARTICLE PAGE ─────────────────────────────────────── */
.article-hero{
  padding:var(--sp-3xl) 0 var(--sp-xl);
  background:var(--c-gray);
}
.article-hero__wrap{
  max-width:800px;margin:0 auto;
}
.article-hero__cat{margin-bottom:var(--sp-md)}
.article-hero__title{
  font-size:var(--fs-4xl);margin-bottom:var(--sp-md);
  line-height:var(--lh-tight);
}
.article-hero__excerpt{
  font-size:var(--fs-lg);color:var(--c-gray-d);
  line-height:var(--lh-body);margin-bottom:var(--sp-xl);
}
.article-hero__meta{
  display:flex;align-items:center;gap:var(--sp-md);
  padding-top:var(--sp-md);border-top:1px solid var(--c-gray-m);
}
.article-hero__author-img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--c-white)}
.article-hero__author-name{font-weight:var(--fw-bold);font-size:var(--fs-base)}
.article-hero__author-role{font-size:var(--fs-xs);color:var(--c-gray-d)}
.article-hero__date{margin-left:auto;font-size:var(--fs-sm);color:var(--c-gray-d)}

.article-body{
  padding:var(--sp-3xl) 0;
}
.article-body__content{
  max-width:740px;margin:0 auto;
  font-size:var(--fs-md);line-height:1.8;
}
.article-body__content p{margin-bottom:var(--sp-lg)}
.article-body__content h2{
  font-size:var(--fs-2xl);margin:var(--sp-2xl) 0 var(--sp-md);
}
.article-body__content h3{
  font-size:var(--fs-xl);margin:var(--sp-xl) 0 var(--sp-md);
}
.article-body__content blockquote{
  border-left:4px solid var(--c-blue);
  padding:var(--sp-md) var(--sp-xl);
  margin:var(--sp-xl) 0;
  background:var(--c-gray);
  font-style:italic;
  font-family:var(--ff-heading);
  font-size:var(--fs-lg);
}
.article-body__content img{
  border-radius:var(--radius);margin:var(--sp-xl) 0;
  width:100%;
}
.article-body__content .dropcap::first-letter{
  font-family:var(--ff-heading);
  font-size:3.5rem;
  font-weight:var(--fw-black);
  float:left;
  line-height:.8;
  margin:0 .15em 0 0;
  color:var(--c-blue);
}
.article-body__share{
  display:flex;align-items:center;gap:var(--sp-md);
  margin-top:var(--sp-2xl);
  padding-top:var(--sp-xl);border-top:1px solid var(--c-gray-m);
}
.article-body__share-title{font-size:var(--fs-sm);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.04em}
.share-btn{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--c-gray);color:var(--c-dark);
  font-size:var(--fs-sm);font-weight:var(--fw-bold);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.share-btn:hover{background:var(--c-blue);color:var(--c-white)}

/* Related */
.related{padding:var(--sp-3xl) 0;background:var(--c-gray)}
.related__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-xl);
}

/* ── 12. CATEGORY PAGE ────────────────────────────────────── */
.cat-hero{
  padding:var(--sp-3xl) 0 var(--sp-xl);
  background:var(--c-dark);
  color:var(--c-white);
  text-align:center;
}
.cat-hero__title{
  font-size:var(--fs-4xl);margin-bottom:var(--sp-sm);
}
.cat-hero__count{
  font-size:var(--fs-md);opacity:.6;
}
.cat-filters{
  padding:var(--sp-xl) 0;
  border-bottom:1px solid var(--c-gray);
}
.cat-filters__list{
  display:flex;flex-wrap:wrap;gap:var(--sp-sm);
}
.cat-filters__btn{
  padding:.5rem 1rem;
  font-size:var(--fs-sm);font-weight:var(--fw-medium);
  border:1px solid var(--c-gray-m);
  border-radius:var(--radius);
  transition:all var(--dur) var(--ease);
  cursor:pointer;
}
.cat-filters__btn:hover,
.cat-filters__btn.active{
  background:var(--c-dark);
  color:var(--c-white);
  border-color:var(--c-dark);
}
.cat-grid{
  padding:var(--sp-3xl) 0;
}
.cat-grid__wrap{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-xl);
}

/* ── 13. CONTACT PAGE ─────────────────────────────────────── */
.contact-hero{
  padding:var(--sp-3xl) 0 var(--sp-xl);
  background:var(--c-dark);
  color:var(--c-white);
  text-align:center;
}
.contact-hero__title{font-size:var(--fs-4xl);margin-bottom:var(--sp-sm)}
.contact-hero__text{font-size:var(--fs-md);opacity:.7;max-width:500px;margin:0 auto}

.contact-wrap{padding:var(--sp-3xl) 0}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-3xl);
}

/* Contact form */
.contact-form{
  background:var(--c-white);
  border:1px solid var(--c-gray);
  border-radius:var(--radius);
  padding:var(--sp-2xl);
}
.contact-form__title{
  font-size:var(--fs-xl);margin-bottom:var(--sp-xl);
  padding-bottom:var(--sp-md);border-bottom:2px solid var(--c-dark);
}
.form-group{margin-bottom:var(--sp-lg)}
.form-group label{
  display:block;
  font-size:var(--fs-sm);font-weight:var(--fw-medium);
  margin-bottom:var(--sp-xs);color:var(--c-dark);
}
.form-group input,
.form-group textarea,
.form-group select{
  width:100%;padding:.7rem .9rem;
  border:1px solid var(--c-gray-m);
  border-radius:var(--radius);
  font-size:var(--fs-base);
}
.form-group textarea{resize:vertical;min-height:140px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-md)}

.form-submit{
  display:inline-block;
  padding:.85rem 2rem;
  background:var(--c-blue);
  color:var(--c-white);
  font-weight:var(--fw-bold);
  font-size:var(--fs-base);
  border-radius:var(--radius);
  border:none;
  transition:background var(--dur) var(--ease);
}
.form-submit:hover{background:var(--c-blue-d)}

.form-ok,.form-err{
  display:none;
  padding:.8rem 1rem;
  border-radius:var(--radius);
  font-size:var(--fs-sm);font-weight:var(--fw-medium);
  margin-top:var(--sp-md);
}
.form-ok{
  background:#D1FAE5;color:#065F46;
  border:1px solid #6EE7B7;
}
.form-err{
  background:#FEE2E2;color:#991B1B;
  border:1px solid #FCA5A5;
}

/* Contact info sidebar */
.contact-info{display:flex;flex-direction:column;gap:var(--sp-xl)}
.contact-info__block{
  background:var(--c-gray);
  border-radius:var(--radius);
  padding:var(--sp-xl);
}
.contact-info__block h3{
  font-size:var(--fs-lg);margin-bottom:var(--sp-md);
  padding-bottom:var(--sp-sm);border-bottom:2px solid var(--c-blue);
}
.contact-info__item{
  display:flex;align-items:flex-start;gap:var(--sp-md);
  margin-bottom:var(--sp-md);
}
.contact-info__item:last-child{margin-bottom:0}
.contact-info__icon{
  width:40px;height:40px;border-radius:50%;
  background:var(--c-blue);color:var(--c-white);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:var(--fs-md);
}
.contact-info__label{font-size:var(--fs-xs);color:var(--c-gray-d);text-transform:uppercase;letter-spacing:.04em;font-weight:var(--fw-medium)}
.contact-info__value{font-weight:var(--fw-medium);margin-top:.15rem}

/* ── 14. FOOTER ───────────────────────────────────────────── */
.footer{
  background:var(--c-dark);
  color:var(--c-white);
  padding:var(--sp-3xl) 0 var(--sp-xl);
}
.footer__grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:var(--sp-2xl);
  margin-bottom:var(--sp-2xl);
  padding-bottom:var(--sp-2xl);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer__brand-title{
  font-family:var(--ff-heading);
  font-size:var(--fs-xl);font-weight:var(--fw-black);
  margin-bottom:var(--sp-sm);
}
.footer__brand-text{
  font-size:var(--fs-sm);opacity:.6;line-height:var(--lh-body);
  max-width:280px;
}
.footer__col-title{
  font-size:var(--fs-sm);font-weight:var(--fw-bold);
  text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:var(--sp-lg);color:var(--c-white);
}
.footer__link{
  display:block;
  font-size:var(--fs-sm);opacity:.6;
  padding:.3rem 0;
  transition:opacity var(--dur) var(--ease);
}
.footer__link:hover{opacity:1}
.footer__bottom{
  display:flex;align-items:center;justify-content:space-between;
  font-size:var(--fs-xs);opacity:.4;
}
.footer__social{display:flex;gap:var(--sp-md)}
.footer__social a{
  width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-sm);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.footer__social a:hover{background:var(--c-blue);border-color:var(--c-blue)}

/* ── 15. BREADCRUMB ───────────────────────────────────────── */
.breadcrumb{
  padding:var(--sp-md) 0;
  font-size:var(--fs-xs);
  color:var(--c-gray-d);
}
.breadcrumb a{color:var(--c-blue);font-weight:var(--fw-medium)}
.breadcrumb span{margin:0 .4rem;opacity:.5}

/* ── 16. PAGE BANNER ──────────────────────────────────────── */
.page-banner{
  background:var(--c-dark);
  color:var(--c-white);
  padding:var(--sp-2xl) 0;
  text-align:center;
}
.page-banner__title{font-size:var(--fs-3xl);margin-bottom:var(--sp-sm)}
.page-banner__sub{font-size:var(--fs-md);opacity:.6}

/* ── 17. RESPONSIVE ───────────────────────────────────────── */
@media(max-width:980px){
  :root{--sidebar-w:280px}

  .hero__grid{grid-template-columns:1fr}
  .hero__sidebar{
    display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-md);
  }
  .hero__side-item{flex-direction:column}
  .hero__side-img{width:100%;height:140px}

  .trending__grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .cat-row{grid-template-columns:1fr 1fr}
  .cat-grid__wrap{grid-template-columns:1fr 1fr}
  .related__grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}

  .hero__featured-title{font-size:var(--fs-2xl)}
  .article-hero__title{font-size:var(--fs-3xl)}

  .nav__list{flex-wrap:wrap}
  .nav__link{padding:.7rem 1rem;font-size:var(--fs-xs)}
  .nav__spacer{display:none}
}

@media(max-width:720px){
  .header__top{flex-direction:column;gap:.4rem;text-align:center}
  .header__top-right{justify-content:center}
  .header__main{flex-direction:column;gap:var(--sp-md);text-align:center}
  .header__search{width:100%}
  .header__search input{width:100%}

  .burger{display:flex}
  .nav__list{
    display:none;
    flex-direction:column;
    align-items:stretch;
  }
  .nav__list.open{display:flex}
  .nav__link{text-align:center;padding:1rem;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav__cta{text-align:center}

  .hero__featured-img{height:260px}
  .hero__featured-title{font-size:var(--fs-xl)}
  .hero__sidebar{grid-template-columns:1fr}

  .cat-row{grid-template-columns:1fr}
  .cat-grid__wrap{grid-template-columns:1fr}
  .related__grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}

  .hero__featured-title{font-size:var(--fs-xl)}
  .article-hero__title{font-size:var(--fs-2xl)}
  .cat-hero__title{font-size:var(--fs-2xl)}
  .contact-hero__title{font-size:var(--fs-2xl)}

  .form-row{grid-template-columns:1fr}
  .newsletter__form{flex-direction:column}
  .newsletter__input{border-right:2px solid rgba(255,255,255,.3);border-radius:var(--radius)}
  .newsletter__btn{border-radius:var(--radius)}

  .section-heading h2{font-size:var(--fs-lg)}
  .trending__num{font-size:var(--fs-2xl);min-width:36px}

  .article-hero__meta{flex-wrap:wrap}
  .article-hero__date{margin-left:0}
}

/* ── 18. PRINT ────────────────────────────────────────────── */
@media print{
  .header,.nav,.ticker,.newsletter,.footer,.burger,.share-btn{display:none!important}
  body{font-size:12pt;color:#000}
  .article-body__content{max-width:100%}
}

/* ── 19. SCROLLBAR ────────────────────────────────────────── */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--c-gray)}
::-webkit-scrollbar-thumb{background:var(--c-gray-m);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--c-gray-d)}

/* ── 20. SELECTION ────────────────────────────────────────── */
::selection{background:var(--c-blue);color:var(--c-white)}