/* =====================================================================
   RedactiaOnline — main.css (Sprint 0)
   Design tokens (spec §3) + bază + componente de bază. Mobile-first.
   ===================================================================== */

/* ---------- Tokens (spec §3.1 / §3.3) ---------- */
:root{
  --ro-accent:#C8102E; --ro-accent-hover:#A20D25; --ro-accent-soft:#FDECEF;
  --ro-ink:#0E1726; --ro-ink-2:#1E293B; --ro-body:#334155; --ro-muted:#64748B;
  --ro-line:#E2E8F0; --ro-surface:#FFFFFF; --ro-surface-2:#F6F8FB;
  --ro-success:#0F7B4F; --ro-warning:#B45309; --ro-info:#1D4ED8;

  --fs-display:clamp(2rem,5.2vw,3.5rem);
  --fs-h1:clamp(1.75rem,4.2vw,2.75rem);
  --fs-h2:clamp(1.375rem,2.6vw,1.875rem);
  --fs-h3:clamp(1.125rem,1.9vw,1.375rem);
  --fs-lead:clamp(1.0625rem,1.6vw,1.25rem);
  --fs-body:1.0625rem; --fs-body-lg:1.125rem;
  --fs-sm:0.9375rem; --fs-xs:0.8125rem;

  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem;

  --container:1280px; --gutter:1rem; --gap-grid:1.5rem;
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(14,23,38,.06);
  --sh-2:0 4px 16px rgba(14,23,38,.08);
  --sticky-offset:90px;

  --font-heading:'Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-body:'Inter',-apple-system,system-ui,'Segoe UI',Roboto,sans-serif;
}
@media (min-width:1024px){ :root{ --gutter:2rem; } }

/* ---------- Bază ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--sticky-offset); overflow-x:clip; }
body{ margin:0; font-family:var(--font-body); font-size:var(--fs-body); line-height:1.75;
      color:var(--ro-body); background:var(--ro-surface); -webkit-font-smoothing:antialiased; }
img,iframe,video{ max-width:100%; height:auto; }
a{ color:var(--ro-accent); }
h1,h2,h3,h4{ font-family:var(--font-heading); color:var(--ro-ink); line-height:1.18;
             letter-spacing:-.02em; text-wrap:balance; margin:0 0 var(--s-4); }
:focus-visible{ outline:3px solid var(--ro-info); outline-offset:2px; border-radius:2px; }

.ro-container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }

.screen-reader-text{ position:absolute!important; width:1px;height:1px; padding:0;margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.skip-link{ position:absolute; inset-inline-start:-9999px; top:0; background:var(--ro-accent);
  color:#fff; padding:10px 18px; z-index:9999; border-radius:0 0 var(--r-sm) 0; }
.skip-link:focus{ inset-inline-start:0; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* ---------- Butoane (spec §4.1) ---------- */
.ro-btn{ display:inline-flex; align-items:center; gap:.5rem; min-height:44px;
  padding:10px 18px; border-radius:var(--r-sm); border:1.5px solid transparent;
  font-family:var(--font-body); font-size:.9375rem; font-weight:600;
  text-decoration:none; cursor:pointer; transition:background .16s ease,border-color .16s ease,color .16s ease; }
.ro-btn--primary{ background:var(--ro-accent); color:#fff; }
.ro-btn--primary:hover{ background:var(--ro-accent-hover); color:#fff; }
.ro-btn--outline{ background:transparent; color:var(--ro-ink); border-color:var(--ro-ink); }
.ro-btn--outline:hover{ background:var(--ro-ink); color:#fff; }
.ro-btn--ad{ background:var(--ro-accent); color:#fff; border-radius:var(--r-pill);
  padding:10px 18px; font-size:14px; }
.ro-btn--ad:hover{ background:var(--ro-accent-hover); color:#fff; }
.ro-btn--icon{ background:none; color:var(--ro-ink); width:44px; height:44px;
  justify-content:center; padding:0; border-color:transparent; }

/* ---------- Header (spec §5) ---------- */
.ro-topbar{ background:var(--ro-ink); color:#CBD5E1; font-size:13px; }
.ro-topbar__inner{ display:flex; justify-content:space-between; gap:var(--s-4); padding-block:.4rem; }
.ro-mainbar{ background:var(--ro-surface); border-block-end:1px solid var(--ro-line); }
.ro-mainbar__inner{ display:flex; align-items:center; gap:var(--s-5); min-height:64px; }
.ro-branding__text{ font-family:var(--font-heading); font-size:1.35rem; font-weight:800;
  color:var(--ro-ink); text-decoration:none; letter-spacing:-.02em; }
.ro-nav{ margin-inline-start:auto; }
.ro-nav__list{ display:flex; gap:var(--s-5); list-style:none; margin:0; padding:0; }
.ro-nav__list a{ color:var(--ro-ink-2); text-decoration:none; font-weight:600; font-size:.9375rem; }
.ro-nav__list a:hover{ color:var(--ro-accent); }
.ro-header__actions{ display:flex; align-items:center; gap:var(--s-3); margin-inline-start:var(--s-4); }
.ro-mobile-nav{ background:var(--ro-surface); border-block-end:1px solid var(--ro-line); padding:var(--s-4) var(--gutter); }
.ro-mobile-nav__list{ list-style:none; margin:0; padding:0; }
.ro-mobile-nav__list a{ display:block; padding:.65rem 0; color:var(--ro-ink-2);
  text-decoration:none; font-weight:600; border-block-end:1px solid var(--ro-line); }
@media (min-width:1024px){
  .ro-mainbar__inner{ min-height:76px; }
  .ro-mobile-nav{ display:none; }
  #roNavToggle{ display:none; }
}

/* ---------- Hero (spec §6.2) ---------- */
.ro-hero__inner{ display:grid; gap:var(--s-6); padding-block:var(--s-7); }
.ro-hero__eyebrow{ font-size:var(--fs-xs); font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ro-accent); margin:0 0 var(--s-3); }
.ro-hero__title{ font-size:var(--fs-display); font-weight:800; margin:0 0 var(--s-4); }
.ro-hero__lead{ font-size:var(--fs-lead); color:var(--ro-body); max-width:52ch; margin:0 0 var(--s-5); }
.ro-hero__actions{ display:flex; gap:var(--s-3); flex-wrap:wrap; }
.ro-hero__stats{ font-size:var(--fs-sm); color:var(--ro-muted); margin:var(--s-4) 0 0; }
@media (min-width:1024px){
  .ro-hero__inner{ grid-template-columns:55fr 45fr; align-items:center; min-height:clamp(420px,56vh,620px); }
  .ro-hero__media{ aspect-ratio:16/9; overflow:hidden; border-radius:16px; box-shadow:var(--sh-2); }
  .ro-hero__media img{ width:100%; height:100%; object-fit:cover; display:block; }
}
.ro-hero__media{ aspect-ratio:4/3; overflow:hidden; border-radius:var(--r-md); margin-block-start:var(--s-5); }
.ro-hero__media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Utilitare vizibilitate (spec §11.4) */
.ro-hide-mobile{ display:none; }
@media (min-width:1024px){ .ro-hide-mobile{ display:revert; } }
@media (max-width:1023px){ .ro-hide-desktop{ display:none !important; } }

/* ---------- Section header (spec §4.3) ---------- */
.ro-section-header{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-4); border-block-end:1px solid var(--ro-line); padding-block-end:var(--s-3);
  margin-block:var(--s-7) var(--s-5); }
.ro-section-header__title{ font-size:var(--fs-h3); font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; margin:0; padding-inline-start:.75rem;
  border-inline-start:4px solid var(--section-color,var(--ro-accent)); }
.ro-section-header__all{ font-weight:600; font-size:var(--fs-sm); text-decoration:none; white-space:nowrap; }

/* ---------- Carduri (spec §4.2) ---------- */
.ro-card{ background:var(--ro-surface); border:1px solid var(--ro-line);
  border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-1); }
.ro-card__media{ position:relative; aspect-ratio:3/2; overflow:hidden;
  background:var(--ro-surface-2); }
.ro-card__media--feat{ aspect-ratio:16/9; }
.ro-card__media img{ inline-size:100%; block-size:100%; object-fit:cover; display:block; }
.ro-card .ro-badge{ position:absolute; inset-inline-start:var(--s-3); inset-block-end:var(--s-3);
  z-index:2; background:var(--ro-accent); color:#fff; font-size:var(--fs-xs); font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; border-radius:var(--r-pill);
  padding:.2rem .7rem; text-decoration:none; }
.ro-card__body{ padding:var(--s-4); }
.ro-card__title{ font-size:1.0625rem; line-height:1.35; margin:0 0 var(--s-2); }
.ro-card__title a{ color:var(--ro-ink); text-decoration:none; }
.ro-card__title a:hover{ color:var(--ro-accent); }
.ro-meta{ font-size:var(--fs-xs); color:var(--ro-muted); }
/* Compact în listă verticală: thumb 80px + titlu max 2 rânduri + separator */
.ro-card--compact{ display:flex; gap:var(--s-4); align-items:center;
  border:0; border-block-end:1px solid var(--ro-line);
  border-radius:0; padding:var(--s-4) 0; background:none; box-shadow:none; }
.ro-card--compact:last-child{ border-block-end:0; }
.ro-card--compact .ro-card__title{ margin-block-end:var(--s-1);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:1rem; line-height:1.35; }
.ro-card--compact .ro-meta{ font-size:var(--fs-xs); }
.ro-card__media--compact{ aspect-ratio:1/1; inline-size:80px; flex:0 0 80px; border-radius:var(--r-sm); }
.ro-card--compact .ro-card__title{ font-size:.9375rem; }

/* ---------- Grile homepage ---------- */
.ro-cat-grid{ display:grid; gap:var(--gap-grid); align-items:start; }
.ro-cat-grid__side{ display:grid; align-content:start; }
@media (min-width:1024px){
  .ro-cat-grid{ grid-template-columns:58fr 42fr; }
  .ro-cat-grid .ro-card--featured{ grid-column:1; }   /* stânga: cardul mare */
  .ro-cat-grid__side{ grid-column:2; }  /* dreapta: listă verticală compactă */
}
.ro-latest-grid{ display:grid; gap:var(--gap-grid); }
@media (min-width:768px){ .ro-latest-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1280px){ .ro-latest-grid{ grid-template-columns:repeat(3,1fr); } }
.ro-home-latest,.ro-home-section{ padding-block:var(--s-6); }

/* ---------- Single (spec §8) ---------- */
.ro-breadcrumbs{ font-size:var(--fs-xs); color:var(--ro-muted); padding-block:var(--s-4);
  display:flex; gap:.5rem; flex-wrap:wrap; }
.ro-breadcrumbs a{ color:var(--ro-muted); }
.ro-single__grid{ display:grid; gap:var(--s-7); align-items:start; }
@media (min-width:1024px){
  .ro-single__grid{ grid-template-columns:minmax(0,1fr) 340px; }
  .ro-sidebar{ position:sticky; top:var(--sticky-offset); }
}
.ro-single__title{ font-size:var(--fs-h1); margin-block:var(--s-3) var(--s-4); }
.ro-single__meta{ display:flex; flex-wrap:wrap; gap:var(--s-2); font-size:var(--fs-sm);
  color:var(--ro-muted); margin-block-end:var(--s-5); }
.ro-single__hero{ margin:0 0 var(--s-6); }
.ro-single__hero img{ width:100%; border-radius:var(--r-md); }
.ro-primary-badge{ display:inline-block; background:var(--ro-accent-soft); color:var(--ro-accent);
  font-size:var(--fs-xs); font-weight:800; text-transform:uppercase; letter-spacing:.07em;
  border-radius:var(--r-pill); padding:.25rem .8rem; text-decoration:none; }

/* ---------- Prose (subset — extins în sprintul „Single & Prose") ---------- */
.ro-prose{ font-size:var(--fs-body); line-height:1.75; max-width:68ch; }
.ro-prose p{ text-wrap:pretty; margin-block:0 var(--s-4); }
.ro-prose h2{ font-size:var(--fs-h2); margin-block:var(--s-7) var(--s-4);
  padding-block-end:var(--s-3); border-block-end:2px solid var(--ro-line); }
.ro-prose h3{ font-size:var(--fs-h3); margin-block:var(--s-6) var(--s-3); }
.ro-prose a{ text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--ro-accent) 35%,transparent); }
.ro-prose a:hover{ text-decoration-color:var(--ro-accent); }
.ro-prose ul,.ro-prose ol{ padding-inline-start:0; list-style:none; margin-block:0 var(--s-4); }
.ro-prose li{ padding-inline-start:1.85rem; position:relative; margin-block-start:var(--s-3); }
.ro-prose ul>li::before{ content:""; position:absolute; inset-inline-start:.45rem; top:.62em;
  width:.42rem; height:.42rem; border-radius:50%; background:var(--ro-accent); }
.ro-prose blockquote{ margin-block:var(--s-6); padding:var(--s-4) var(--s-5);
  border-inline-start:4px solid var(--ro-accent); background:var(--ro-surface-2);
  border-radius:0 var(--r-md) var(--r-md) 0; font-size:var(--fs-lead); color:var(--ro-ink-2); }
.ro-prose img{ border-radius:var(--r-md); }

/* ---------- Footer (spec §14) ---------- */
.ro-footer{ background:var(--ro-ink); color:#CBD5E1; margin-block-start:var(--s-8); }
.ro-footer__grid{ display:grid; gap:var(--s-6); padding-block:var(--s-7); }
@media (min-width:768px){ .ro-footer__grid{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); } }
.ro-footer__logo{ font-family:var(--font-heading); font-size:1.25rem; font-weight:800;
  color:#fff; text-decoration:none; display:inline-block; margin-block-end:var(--s-3); }
.ro-footer__about{ font-size:var(--fs-sm); color:#94A3B8; }
.ro-widget__title{ display:flex; align-items:center; gap:.6rem; margin:0 0 var(--s-4);
  font-size:var(--fs-xs); font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:#fff; }
.ro-widget__title::before{ content:""; inline-size:4px; block-size:1.1em;
  background:var(--ro-accent); border-radius:2px; }
.ro-footer__links{ list-style:none; margin:0; padding:0; }
.ro-footer__links li{ margin-block-end:var(--s-2); }
.ro-footer__links a{ color:#CBD5E1; text-decoration:none; font-size:var(--fs-sm); }
.ro-footer__links a:hover{ color:#fff; }
.ro-footer__legal{ display:flex; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap;
  border-block-start:1px solid rgba(255,255,255,.08); padding-block:var(--s-4); font-size:var(--fs-xs); color:#94A3B8; }
.ro-footer__legal a{ color:#CBD5E1; text-decoration:none; }

/* ---------- Pagination ---------- */
.ro-pagination{ margin-block:var(--s-6); }
.ro-pagination .nav-links{ display:flex; gap:var(--s-2); justify-content:center; }
.ro-pagination .page-numbers{ padding:.5rem .9rem; border:1px solid var(--ro-line);
  border-radius:var(--r-sm); color:var(--ro-ink-2); text-decoration:none; }
.ro-pagination .current{ background:var(--ro-accent); color:#fff; border-color:var(--ro-accent); }