/* ==========================================================================
   infraser.ro — design v2
   Mobile-first. Breakpoint-uri: 40rem (640px), 48rem (768px), 64rem (1024px).
   ========================================================================== */

/* ---------- Design tokens ----------
   Temele: fiecare culoare care diferă are forma light-dark(<luminos>, <întunecat>).
   Fără alegere salvată, se urmează tema sistemului (color-scheme: light dark);
   comutatorul setează data-theme pe <html> și fixează una dintre ele. */
:root {
  color-scheme: light dark;

  --bg: light-dark(#f6f6f3, #070b13);
  --surface: light-dark(#ffffff, #0f1726);
  --ink: light-dark(#0b1220, #eef2f8);
  --ink-2: light-dark(#1c2638, #d0d9e6);
  --text: light-dark(#3b4351, #b3bdcc);
  --muted: light-dark(#6b7280, #8592a6);
  --line: light-dark(rgb(11 18 32 / 0.08), rgb(255 255 255 / 0.08));
  --line-strong: light-dark(rgb(11 18 32 / 0.14), rgb(255 255 255 / 0.16));
  --line-stronger: light-dark(rgb(11 18 32 / 0.24), rgb(255 255 255 / 0.3));
  --hover: light-dark(rgb(11 18 32 / 0.05), rgb(255 255 255 / 0.06));
  --glass: light-dark(rgb(255 255 255 / 0.66), rgb(15 23 38 / 0.62));
  --glass-solid: light-dark(rgb(255 255 255 / 0.78), rgb(15 23 38 / 0.9));
  --shadow: light-dark(rgb(11 18 32 / 0.06), rgb(0 0 0 / 0.35));
  --shadow-strong: light-dark(rgb(11 18 32 / 0.1), rgb(0 0 0 / 0.5));
  /* Textul de pe butoanele de culoarea --ink (inversate în tema întunecată). */
  --on-ink: light-dark(#ffffff, #070b13);
  --on-ink-soft: light-dark(rgb(255 255 255 / 0.12), rgb(7 11 19 / 0.1));
  /* Panourile meniului și ale footer-ului (urmează tema). */
  --panel: light-dark(#ffffff, #0b1626);
  --card-dark: light-dark(#0b1626, #15233b);
  --logo-tile-default: light-dark(#0b1626, #17283f);
  /* Marginea panourilor bleumarin, vizibilă doar pe fundalul întunecat. */
  --panel-border: light-dark(transparent, rgb(255 255 255 / 0.07));
  /* Numele mare din footer: o umbră discretă a culorii textului. */
  --wordmark: light-dark(rgb(11 18 32 / 0.08), rgb(255 255 255 / 0.12));

  --navy: #0b1626;
  --navy-2: #12233a;
  --on-navy: #e8edf5;
  --on-navy-muted: #93a1b5;

  --accent: #f5a400;
  --accent-hover: #ffb51f;
  --accent-ink: #1a1200;
  --accent-soft: light-dark(#fff1cc, #2a2110);
  /* Auriul ca text mic (titluri mici, iconițe): mai închis pe fundal luminos, pentru contrast. */
  --accent-text: light-dark(#9a6400, #f5a400);
  /* Fundalul iconițelor din meniu. */
  --accent-tint: light-dark(#fff3d6, rgb(245 164 0 / 0.12));

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --container: 78rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --radius-sm: 0.625rem;
  --radius: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;

  --header-height: 4rem;
  --header-offset: 0.75rem;
  /* Înălțimea benzii „Ultima oră” de sub header (0 fără ea). */
  --breaking-space: 0px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--breaking-space) + var(--header-offset) * 2);
}

html.menu-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  /* Un cuvânt sau o adresă mai lungă decât ecranul se rupe, în loc să lățească pagina. */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s, color 0.3s;
}

main {
  flex: 1;
}

main:focus {
  outline: none;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

address {
  font-style: normal;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Utilitare ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.625rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  transform: translateY(-200%);
  transition: transform 0.2s var(--ease);
}

.skip-link:focus {
  transform: none;
}

.icon {
  width: 1.125em;
  height: 1.125em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
}

/* ---------- Butoane ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding: 0 1.125rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--ease);
}

.btn:active {
  transform: scale(0.98);
}

.btn .icon {
  transition: transform 0.25s var(--ease);
}

.btn:hover .icon {
  transform: translate(2px, -2px);
}

.btn--lg {
  height: 3.25rem;
  padding: 0 1.5rem;
  border-radius: 0.875rem;
  font-size: 1rem;
}

.btn--block {
  width: 100%;
}

.btn--accent {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn--accent:hover {
  background: var(--accent-hover);
}

.btn--dark {
  background: var(--ink);
  color: var(--on-ink);
}

.btn--dark:hover {
  background: var(--ink-2);
}

.btn--ghost {
  /* Și la `<button>`, care altfel ar primi fundalul gri al browserului. */
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn--ghost:hover {
  background: var(--surface);
  border-color: var(--line-stronger);
}

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  position: fixed;
  top: var(--header-offset);
  left: var(--header-offset);
  right: var(--header-offset);
  z-index: 60;
  transition: transform 0.45s var(--ease);
}

/* Header-ul „inteligent”: dispare la scroll în jos, revine la scroll în sus sau la focus. */
.header.is-hidden:not(:focus-within) {
  transform: translateY(calc(-100% - var(--header-offset) * 2));
}

.header__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--container);
  height: var(--header-height);
  margin-inline: auto;
  padding: 0 0.5rem 0 1rem;
  border: 1px solid var(--line);
  border-radius: 1.125rem;
  color: var(--ink);
  background: var(--glass-solid);
  box-shadow: 0 8px 30px var(--shadow);
  transition: background-color 0.35s, border-color 0.35s, box-shadow 0.35s, color 0.35s;
}

@supports (backdrop-filter: blur(1px)) {
  .header__bar {
    background: var(--glass);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
  }
}

.header.is-scrolled .header__bar {
  box-shadow: 0 12px 40px var(--shadow-strong);
}

.menu-open .header__bar {
  background: transparent;
  border-color: var(--line);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Logo: sens giratoriu cu „i” pe insulă (inline, ca plăcuța și textul să se adapteze fundalului) */
.brand {
  --logo-tile: var(--logo-tile-default);
  display: inline-flex;
  flex-shrink: 0;
  border-radius: 0.75rem;
}

.brand__logo {
  width: auto;
  height: 2.5rem;
}

/* Logo-ul ales în panou: aceeași înălțime ca cel implicit, lățimea după proporții. */
.brand__img {
  width: auto;
  max-width: 12rem;
  height: 2.5rem;
  object-fit: contain;
  object-position: left center;
}

.brand__img--dark,
[data-theme="dark"] .brand__img--light {
  display: none;
}

[data-theme="dark"] .brand__img--dark {
  display: block;
}

.brand__tile {
  fill: var(--logo-tile);
  transition: fill 0.35s;
}

.brand__road {
  fill: none;
  stroke: #e8edf5;
}

.brand__lane {
  fill: none;
  stroke: var(--logo-tile);
  transition: stroke 0.35s;
}

.brand__island {
  fill: var(--accent);
}

.brand__i {
  fill: var(--navy);
}

.brand__word {
  fill: currentColor;
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

/* Acțiunile din dreapta */
.header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header__phone {
  display: none;
  align-items: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding: 0 0.875rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  transition: background-color 0.2s;
}

.header__phone .icon {
  color: var(--accent-text);
}

.header__phone:hover {
  background: var(--hover);
}

.header__cta {
  display: none;
}

.header__phone,
.header__cta {
  transition: opacity 0.25s, visibility 0.25s, background-color 0.2s;
}

.menu-open .header__phone,
.menu-open .header__cta {
  opacity: 0;
  visibility: hidden;
}

@media (min-width: 40rem) {
  .header__cta {
    display: inline-flex;
  }
}

@media (min-width: 64rem) {
  .header__phone {
    display: inline-flex;
  }
}

/* Butonul burger */
.burger {
  display: none;
  align-items: center;
  gap: 0.75rem;
  height: 2.75rem;
  padding: 0 0.375rem 0 1.125rem;
  border: 0;
  border-radius: 0.75rem;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.js .burger {
  display: inline-flex;
}

.burger:hover {
  background: var(--ink-2);
}

.burger__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: var(--on-ink-soft);
}

.burger__icon span {
  position: absolute;
  width: 0.875rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.4s var(--ease);
}

.burger__icon span:first-child {
  transform: translateY(-3px);
}

.burger__icon span:last-child {
  transform: translateY(3px);
}

.burger[aria-expanded="true"] .burger__icon span:first-child {
  transform: rotate(45deg);
}

.burger[aria-expanded="true"] .burger__icon span:last-child {
  transform: rotate(-45deg);
}

/* ==========================================================================
   Meniul (overlay pe tot ecranul)
   ========================================================================== */
.menu {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--ink);
  background:
    radial-gradient(40rem 28rem at 100% 0%, rgb(245 164 0 / 0.12), transparent 60%),
    radial-gradient(50rem 36rem at 0% 100%, rgb(56 120 220 / 0.16), transparent 60%),
    var(--bg);
  visibility: hidden;
  clip-path: inset(0 0 100% 0 round 0 0 2rem 2rem);
  transition: clip-path 0.5s var(--ease), visibility 0s linear 0.5s;
}

.menu.is-open {
  visibility: visible;
  clip-path: inset(0 0 0 0 round 0);
  transition: clip-path 0.6s var(--ease), visibility 0s;
}

.menu__inner {
  display: grid;
  gap: 1.5rem;
  align-content: start;
  min-height: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: calc(var(--header-height) + var(--header-offset) + 1.5rem) var(--gutter) 2.5rem;
}

@media (min-width: 64rem) {
  .menu__inner {
    grid-template-columns: minmax(0, 1fr) 21rem;
    align-content: center;
    gap: 2rem;
  }
}

.menu__grid {
  display: grid;
  gap: 0.625rem;
}

@media (min-width: 40rem) {
  .menu__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Intrarea în cascadă a elementelor din meniu */
.js .menu__item,
.js .menu__aside {
  opacity: 0;
  transform: translateY(1rem);
}

.menu.is-open .menu__item,
.menu.is-open .menu__aside {
  animation: menu-in 0.6s var(--ease) forwards;
}

.menu.is-open .menu__item {
  animation-delay: calc(120ms + var(--i, 0) * 45ms);
}

.menu.is-open .menu__aside {
  animation-delay: 320ms;
}

@keyframes menu-in {
  to {
    opacity: 1;
    transform: none;
  }
}

/* Cardurile din meniu */
.menu-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: var(--panel);
  transition: background-color 0.25s, border-color 0.25s;
}

.menu-card:hover,
.menu-card:focus-visible {
  border-color: rgb(245 164 0 / 0.45);
  box-shadow: 0 12px 30px var(--shadow);
}

.menu-card__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 0.875rem;
  background: var(--accent-tint);
  color: var(--accent-text);
  transition: background-color 0.25s, color 0.25s, transform 0.4s var(--ease);
}

.menu-card__icon .icon {
  width: 1.375rem;
  height: 1.375rem;
}

.menu-card:hover .menu-card__icon {
  transform: rotate(-6deg) scale(1.06);
}

.menu-card__body {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
}

.menu-card__title {
  font-size: 1.125rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--ink);
}

.menu-card__desc {
  font-size: 0.875rem;
  color: var(--muted);
}

.menu-card__arrow {
  margin-left: auto;
  opacity: 0.35;
  transition: opacity 0.25s, transform 0.25s var(--ease), color 0.25s;
}

.menu-card:hover .menu-card__arrow,
.menu-card:focus-visible .menu-card__arrow {
  opacity: 1;
  color: var(--accent);
  transform: translate(2px, -2px);
}

.menu-card.is-active {
  border-color: var(--accent);
}

.menu-card.is-active .menu-card__icon {
  background: var(--accent);
  color: var(--accent-ink);
}

@media (min-width: 64rem) {
  .menu-card {
    padding: 1.375rem;
  }

  .menu-card__title {
    font-size: 1.375rem;
  }
}

/* Coloana de contact din meniu */
.menu__aside {
  display: grid;
  gap: 1.25rem;
  align-content: start;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
}

.menu__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.menu__contact {
  display: grid;
  gap: 0.875rem;
}

.menu__contact li,
.menu__contact a {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.menu__contact .icon {
  margin-top: 0.25rem;
  color: var(--muted);
}

.menu__contact a {
  transition: color 0.2s;
}

.menu__contact a:hover {
  color: var(--accent-text);
}

.menu__contact address span {
  display: block;
  color: var(--muted);
}

.menu__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.menu__social a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: var(--hover);
  transition: background-color 0.2s, color 0.2s;
}

.menu__social a:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

/* Fără JavaScript: meniul apare direct sub header, fără overlay */
html:not(.js) .header {
  position: relative;
  inset: auto;
  padding: var(--header-offset);
}

html:not(.js) .menu {
  position: static;
  visibility: visible;
  clip-path: none;
  margin-top: var(--header-offset);
  border-radius: var(--radius-lg);
}

html:not(.js) .menu__inner {
  padding-top: 1.5rem;
}

/* ==========================================================================
   Conținut placeholder
   ========================================================================== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem 0.375rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
}

.pill__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgb(245 164 0 / 0.5);
  animation: pulse 2.4s infinite;
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 0.5rem rgb(245 164 0 / 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgb(245 164 0 / 0);
  }
}

.hero {
  padding-top: calc(var(--header-height) + var(--breaking-space) + var(--header-offset) + clamp(3rem, 8vw, 6rem));
  padding-bottom: clamp(2rem, 5vw, 3rem);
}

html:not(.js) .hero {
  padding-top: clamp(2rem, 6vw, 4rem);
}

.hero--compact {
  min-height: 70vh;
  padding-bottom: clamp(4rem, 10vw, 7rem);
}

.hero__title {
  max-width: 18ch;
  margin-top: 1.5rem;
  font-size: clamp(2.5rem, 7vw, 5.25rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.hero__accent {
  background: linear-gradient(90deg, var(--accent), #ff6a00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lead {
  max-width: 38rem;
  margin-top: 1.5rem;
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.hero__visual {
  height: clamp(14rem, 40vw, 28rem);
  border: 1px solid var(--panel-border);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px) 0 0 / 3rem 3rem,
    linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px) 0 0 / 3rem 3rem,
    radial-gradient(30rem 20rem at 85% 20%, rgb(245 164 0 / 0.45), transparent 60%),
    radial-gradient(40rem 26rem at 10% 110%, rgb(56 120 220 / 0.5), transparent 60%),
    var(--navy);
}

.section {
  padding-block: clamp(3rem, 8vw, 6rem);
}

.bento {
  display: grid;
  gap: 1rem;
}

@media (min-width: 48rem) {
  .bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bento__card--wide {
    grid-column: span 2;
  }
}

.bento__card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 14rem;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: 1.75rem;
  background: var(--surface);
}

.bento__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: auto;
  border-radius: 0.875rem;
  background: var(--hover);
  color: var(--ink);
}

.bento__icon .icon {
  width: 1.375rem;
  height: 1.375rem;
}

.bento__title {
  font-size: 1.375rem;
  font-weight: 700;
}

.bento__card--dark {
  border-color: var(--panel-border);
  background: var(--card-dark);
  color: var(--on-navy-muted);
}

.bento__card--dark .bento__title {
  color: #fff;
}

.bento__card--dark .bento__icon {
  background: rgb(245 164 0 / 0.14);
  color: var(--accent);
}

.bento__card--accent {
  border-color: transparent;
  background: var(--accent-soft);
}

.bento__card--accent .bento__icon {
  background: var(--accent);
  color: var(--accent-ink);
}

.prose {
  max-width: 46rem;
}

.prose h2 {
  margin-bottom: 1.25rem;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.prose p + p {
  margin-top: 1rem;
}

/* ==========================================================================
   Footer — panou plutitor, în stilul header-ului și al meniului (urmează tema)
   ========================================================================== */
.footer {
  padding: 0 var(--header-offset) var(--header-offset);
}

.footer__panel {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  max-width: calc(var(--container) + 4rem);
  margin-inline: auto;
  padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 5vw, 4rem) 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  color: var(--text);
  background:
    radial-gradient(40rem 26rem at 100% 0%, rgb(245 164 0 / 0.1), transparent 60%),
    radial-gradient(46rem 32rem at 0% 100%, rgb(56 120 220 / 0.12), transparent 60%),
    var(--panel);
}

/* Îndemnul de la început */
.footer__cta {
  display: grid;
  gap: 1.5rem;
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 64rem) {
  .footer__cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 3rem;
  }
}

.footer__cta-title {
  max-width: 20ch;
  font-size: clamp(1.75rem, 4.2vw, 3.25rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.footer__cta-text p {
  max-width: 34rem;
  margin-top: 1rem;
  font-size: 1.0625rem;
}

.footer__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Pe ecrane înguste butoanele se întind pe toată lățimea, egale. */
.footer__cta-actions .btn {
  flex: 1 1 13rem;
}

@media (min-width: 64rem) {
  .footer__cta-actions .btn {
    flex: 0 0 auto;
  }
}

.footer__cta-actions .btn--ghost .icon {
  color: var(--accent-text);
}

.footer__cta-actions .btn--ghost:hover .icon {
  transform: none;
}

/* Coloanele */
.footer__grid {
  display: grid;
  gap: 2.5rem;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 40rem) {
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64rem) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 3rem;
  }

  .footer__brand {
    grid-column: auto;
  }
}

.footer .brand {
  color: var(--ink);
}

.footer__tagline {
  max-width: 24rem;
  margin-top: 1.25rem;
}

.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.footer__social a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: var(--hover);
  color: var(--ink);
  transition: background-color 0.2s, color 0.2s;
}

.footer__social a:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

.footer .footer__title {
  margin-bottom: 1.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.footer__links,
.footer__contact {
  display: grid;
  gap: 0.75rem;
}

.footer__links a,
.footer__contact a,
.footer__contact li {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.footer__links a,
.footer__contact a {
  color: var(--ink);
  transition: color 0.2s;
}

.footer__links a:hover,
.footer__contact a:hover {
  color: var(--accent-text);
}

.footer__links .icon,
.footer__contact .icon {
  margin-top: 0.25rem;
  color: var(--muted);
  transition: color 0.2s;
}

.footer__links a:hover .icon {
  color: var(--accent-text);
}

.footer__contact address span {
  display: block;
}

/* Bara de jos (deasupra numelui decorativ, care o atinge de jos) */
.footer__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.footer__legal a {
  transition: color 0.2s;
}

.footer__legal a:hover {
  color: var(--ink);
}

.footer__top {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0 0.75rem 0 1rem;
  border-radius: 999px;
  background: var(--hover);
  color: var(--ink);
  font-weight: 600;
  transition: background-color 0.2s, color 0.2s;
}

.footer__top:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

@media (min-width: 48rem) {
  .footer__legal {
    margin-left: auto;
  }
}

/* Numele mare, decorativ, tăiat la baza panoului */
.footer__wordmark {
  margin: 0 0 -0.18em;
  /* „infraser” are ~3,6em lățime; 24,5% din lățimea panoului îl încape (~88%) cu marjă pentru alte fonturi. */
  font-size: 19vw;
  font-size: 24.5cqi;
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.04em;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  background: linear-gradient(180deg, var(--wordmark), transparent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   Comutatorul de temă (în header, lângă meniu): soare în tema luminoasă, lună în cea întunecată
   ========================================================================== */
.theme-toggle {
  position: relative;
  display: none;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 0.75rem;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.js .theme-toggle {
  display: grid;
}

.theme-toggle:hover {
  border-color: var(--line-stronger);
  background: var(--hover);
}

.theme-toggle .icon {
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  transition: opacity 0.3s, transform 0.45s var(--ease);
}

.theme-toggle__sun {
  color: var(--accent);
}

.theme-toggle__moon {
  color: var(--accent);
  opacity: 0;
  transform: rotate(-90deg) scale(0.4);
}

.theme-toggle[aria-checked="true"] .theme-toggle__sun {
  opacity: 0;
  transform: rotate(90deg) scale(0.4);
}

.theme-toggle[aria-checked="true"] .theme-toggle__moon {
  opacity: 1;
  transform: none;
}

/* Pe telefoane mici, butonul de meniu rămâne doar cu iconița, ca să încapă comutatorul. */
@media (max-width: 25rem) {
  .burger {
    padding: 0 0.375rem;
  }

  .burger__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ==========================================================================
   Articole: lista
   ========================================================================== */
.page-hero {
  padding-top: calc(var(--header-height) + var(--breaking-space) + var(--header-offset) + clamp(2.5rem, 6vw, 4.5rem));
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

html:not(.js) .page-hero {
  padding-top: clamp(2rem, 5vw, 3.5rem);
}

.page-hero__title {
  max-width: 20ch;
  margin-top: 1.25rem;
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.page-hero__lead {
  max-width: 38rem;
  margin-top: 1.25rem;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
}

.section--flush-top {
  padding-top: 0;
}

/* Filtrele pe categorii */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 2.5rem;
  padding: 0 1.125rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.chip:hover {
  background: var(--surface);
  border-color: var(--line-stronger);
}

.chip.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-ink);
}

/* Etichete și meta (categorie, dată) */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.tag {
  display: inline-flex;
  align-items: center;
  height: 1.625rem;
  padding: 0 0.625rem;
  border-radius: 999px;
  background: var(--hover);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
}

.tag--accent {
  background: var(--accent);
  color: var(--accent-ink);
}

/* Tipul articolului (opinie, analiză…); comunicatele și advertorialele, cu chenar, ca să nu
   fie confundate cu articolele redacției. */
.tag--kind {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-stronger);
}

.tag--external {
  font-style: italic;
}

/* Copertele generate (până la imaginile din CMS) */
.cover {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 1.25rem;
  color: var(--accent);
  background:
    linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px) 0 0 / 2rem 2rem,
    linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px) 0 0 / 2rem 2rem,
    var(--cover-bg);
}

.cover .icon {
  width: clamp(2.5rem, 8vw, 4rem);
  height: clamp(2.5rem, 8vw, 4rem);
  stroke-width: 1.5;
  transition: transform 0.5s var(--ease);
}

.cover--navy {
  --cover-bg:
    radial-gradient(18rem 12rem at 85% 15%, rgb(245 164 0 / 0.35), transparent 60%),
    radial-gradient(20rem 14rem at 10% 110%, rgb(56 120 220 / 0.45), transparent 60%),
    var(--navy);
}

.cover--amber {
  color: var(--navy);
  --cover-bg:
    radial-gradient(18rem 12rem at 15% 10%, rgb(255 255 255 / 0.45), transparent 60%),
    linear-gradient(135deg, #f5a400, #ff7a00);
}

.cover--sky {
  color: #fff;
  --cover-bg:
    radial-gradient(18rem 12rem at 85% 0%, rgb(255 255 255 / 0.35), transparent 60%),
    linear-gradient(135deg, #2563eb, #0b1626);
}

/* Articolul mare de sus */
.post-feature {
  margin-bottom: 1.5rem;
}

.post-feature__link {
  display: grid;
  gap: 1.5rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 1.75rem;
  background: var(--surface);
  transition: border-color 0.25s, box-shadow 0.25s;
}

.post-feature__link:hover {
  border-color: var(--line-strong);
  box-shadow: 0 20px 50px var(--shadow);
}

.post-feature__link:hover .cover .icon {
  transform: scale(1.08) rotate(-4deg);
}

.post-feature__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.5rem 1rem 1.25rem;
}

.post-feature__title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.post-feature__excerpt {
  max-width: 36rem;
}

.post-feature__body .btn {
  margin-top: 0.5rem;
}

@media (min-width: 64rem) {
  .post-feature__link {
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
    gap: 2.5rem;
  }

  .cover--feature {
    aspect-ratio: 16 / 11;
  }

  .post-feature__body {
    padding: 1.5rem 2rem 1.5rem 0;
  }
}

/* Grila de carduri */
.post-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 40rem) {
  .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .post-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.post-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.625rem;
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  background: var(--surface);
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s var(--ease);
}

.post-card__link:hover {
  border-color: var(--line-strong);
  box-shadow: 0 16px 40px var(--shadow);
  transform: translateY(-3px);
}

.post-card__link:hover .cover .icon {
  transform: scale(1.08) rotate(-4deg);
}

.post-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 0.75rem 0.75rem;
}

.post-card__title {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
}

.post-card__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  font-size: 0.9375rem;
}

.post-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}

.post-card__more .icon {
  color: var(--accent);
  transition: transform 0.25s var(--ease);
}

.post-card__link:hover .post-card__more .icon {
  transform: translate(2px, -2px);
}

/* Paginarea */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 3rem;
}

.pagination__pages {
  display: flex;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination__page,
.pagination__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.875rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.pagination__page:hover,
.pagination__step:hover {
  background: var(--surface);
  border-color: var(--line-stronger);
}

.pagination__page.is-current {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-ink);
}

.pagination__gap {
  display: grid;
  place-items: center;
  min-width: 1.25rem;
  color: var(--muted);
}

/* Pe telefon, „Înapoi” și „Înainte” rămân doar săgeți, ca paginarea să încapă pe un rând. */
@media (max-width: 29.99rem) {
  .pagination {
    gap: 0.375rem;
  }

  .pagination__pages {
    gap: 0.25rem;
  }

  .pagination__page,
  .pagination__step {
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.5rem;
  }

  .pagination__minor {
    display: none;
  }

  .pagination__step span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ==========================================================================
   Articole: pagina unui articol
   ========================================================================== */
.post__header > * {
  max-width: 52rem;
}

.post__header {
  padding-top: calc(var(--header-height) + var(--breaking-space) + var(--header-offset) + clamp(2rem, 5vw, 4rem));
  padding-bottom: clamp(2rem, 4vw, 2.75rem);
}

html:not(.js) .post__header {
  padding-top: clamp(2rem, 5vw, 3.5rem);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--muted);
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 0.5rem;
  opacity: 0.6;
}

.breadcrumb a {
  transition: color 0.2s;
}

.breadcrumb a:hover {
  color: var(--ink);
}

.post__title {
  margin-top: 1.25rem;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.post__lead {
  margin-top: 1.25rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
}

.post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

.post__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.post__meta .icon {
  color: var(--accent-text);
}

.cover--hero {
  aspect-ratio: 21 / 9;
  border-radius: var(--radius-xl);
}

.cover--hero .icon {
  width: clamp(3.5rem, 10vw, 6rem);
  height: clamp(3.5rem, 10vw, 6rem);
}

.post__layout {
  display: grid;
  /* Coloana textului nu se lățește după conținut (tabele, linkuri lungi). */
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(1rem, 3vw, 2rem);
}

@media (min-width: 64rem) {
  .post__layout {
    grid-template-columns: minmax(0, 46rem) 1fr;
    gap: 4rem;
  }

  .post__share {
    position: sticky;
    top: calc(var(--header-height) + var(--header-offset) * 2 + 1rem);
    align-self: start;
  }
}

.post__share-title {
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.post__share-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.post__share-list a,
.post__copy {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 0.875rem;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.post__share-list a:hover,
.post__copy:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.post__copied {
  min-height: 1.5rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Textul articolului */
.post__body {
  min-width: 0;
  max-width: 46rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  /* Adresele lungi din textul importat se rup, în loc să lățească pagina. */
  overflow-wrap: anywhere;
}

.post__body img {
  max-width: 100%;
  height: auto;
}

.post__body > * + * {
  margin-top: 1.25em;
}

.post__body h2 {
  margin-top: 2em;
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.post__body h3 {
  margin-top: 1.75em;
  font-size: 1.3125rem;
  font-weight: 700;
}

.post__body h2 + *,
.post__body h3 + * {
  margin-top: 0.75em;
}

.post__body strong {
  color: var(--ink);
}

.post__body a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.post__body ul,
.post__body ol {
  padding-left: 1.5rem;
}

.post__body ul {
  list-style: disc;
}

.post__body li + li {
  margin-top: 0.5em;
}

.post__body li::marker {
  color: var(--accent);
  font-weight: 700;
}

.post__body blockquote {
  margin: 2em 0;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--accent);
  border-radius: 0 1rem 1rem 0;
  background: var(--accent-soft);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--ink);
}

.post__body code {
  padding: 0.125em 0.375em;
  border-radius: 0.375rem;
  background: var(--hover);
  font-size: 0.9em;
}

.post__body hr {
  margin: 2.5em 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.post__body img {
  border-radius: 1rem;
}

.post__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.post__body th,
.post__body td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

/* Textul importat din WordPress: titluri de nivel mic, tabele late, video, imagini cu descriere. */
.post__body h1 {
  margin-top: 2em;
  font-size: clamp(1.625rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.post__body h4 {
  margin-top: 1.5em;
  font-size: 1.125rem;
  font-weight: 700;
}

.post__body h5,
.post__body h6 {
  font-size: inherit;
  font-weight: 600;
  line-height: 1.75;
}

.post__body td > *,
.post__body th > * {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.post__body thead td,
.post__body th {
  font-weight: 700;
  color: var(--ink);
}

/* Pe ecrane înguste, un tabel lat se derulează în locul lui, nu lățește pagina. */
@media (max-width: 47.99rem) {
  .post__body table {
    display: block;
    overflow-x: auto;
  }
}

.post__body iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 1rem;
}

/* Un iframe al cărui conținut nu e permis (fără adresă) nu ocupă loc. */
.post__body iframe:not([src]) {
  display: none;
}

.post__body figure {
  margin: 2em 0;
}

/* Coperta articolului (sau a proiectului), cu legenda și sursa foto sub ea. */
.post__figure {
  margin: 0;
}

.post__caption {
  margin-top: 0.625rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.post__body figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Conținutul încorporat (videoclipuri, hărți, grafice, postări): o casetă cu forma lui, care se
   încarcă doar la „Încarcă” (vezi `embed.rs` și `main.js`); fără JavaScript, doar linkul. */
.embed {
  display: grid;
  margin: 2em 0;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 1rem;
  background: var(--hover);
}

.embed--wide {
  aspect-ratio: 16 / 9;
}

.embed--map {
  aspect-ratio: 4 / 3;
}

/* (Mai specific decât `.post__body figure`, care ar lipi caseta la stânga.) */
.embed.embed--post {
  max-width: 33.75rem;
  min-height: 37.5rem;
  margin-inline: auto;
}

.embed--chart {
  min-height: 25rem;
}

.embed--card {
  place-items: start;
}

.embed .embed__caption {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  margin: 0;
  padding: 1.25rem;
  color: var(--ink);
  font-size: 0.9375rem;
  text-align: center;
}

.embed--card .embed__caption {
  justify-items: start;
  text-align: left;
}

.embed__note {
  color: var(--muted);
  font-size: 0.875rem;
}

.embed__meta,
.embed__text {
  color: var(--muted);
}

.embed__note,
.embed__load {
  display: none;
}

.js .embed__note {
  display: block;
}

.js .embed__load {
  display: inline-flex;
  margin: 0;
}

/* Încărcat: cadrul, cu linkul spre original dedesubt, mic. */
.embed.is-loaded {
  display: block;
  aspect-ratio: auto;
  min-height: 0;
  border: 0;
  background: none;
}

.embed.is-loaded .embed__caption {
  display: block;
  padding: 0;
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.875rem;
  text-align: left;
}

.embed iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 1rem;
}

.embed--map iframe {
  aspect-ratio: 4 / 3;
}

.embed--post iframe {
  height: 37.5rem;
  aspect-ratio: auto;
}

.embed--chart iframe {
  height: 25rem;
  aspect-ratio: auto;
}

.section__title {
  margin-bottom: 2rem;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* ==========================================================================
   Bara de previzualizare (articol deschis din panou): plutește jos, ca să nu acopere header-ul
   ========================================================================== */
.preview-bar {
  position: fixed;
  right: 0;
  bottom: 1rem;
  left: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  padding-inline: var(--gutter);
  pointer-events: none;
}

.preview-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  max-width: 44rem;
  padding: 0.75rem 1.25rem;
  border-radius: 1rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.9375rem;
  box-shadow: 0 1rem 2rem -0.75rem rgb(0 0 0 / 0.4);
  pointer-events: auto;
}

.preview-bar__link {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Coperta cu imagine încărcată din panou (în locul celei generate). */
.cover--image {
  margin: 0;
  background: var(--hover);
}

.cover--image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

/* Imaginile din textul articolelor. */
.prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-block: 1.5rem;
  border-radius: var(--radius);
}

.post-feature__link:hover .cover--image img,
.post-card__link:hover .cover--image img {
  transform: scale(1.04);
}

/* ==========================================================================
   Reclame (Google AdSense): etichetate „Publicitate”, cu spațiu rezervat, ca pagina
   să nu sară când se încarcă anunțul
   ========================================================================== */
.ad {
  display: grid;
  gap: 0.375rem;
  min-height: 7.5rem;
  margin-block: 2rem;
}

.ad__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.ad__unit {
  min-height: 6rem;
}

/* În grila de articole, anunțul ocupă un rând întreg. */
.ad--grid {
  grid-column: 1 / -1;
  margin-block: 0;
}

/* Bannerele proprii: imaginea are dimensiunile ei, deci nu e nevoie de spațiu rezervat. */
.ad--banner {
  min-height: 0;
}

.ad__link {
  display: block;
  border-radius: var(--radius);
}

.ad .ad__image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: var(--radius);
}

/* AdSense marchează blocurile fără anunț; nu lăsăm spațiu gol. */
.ad:has(ins[data-ad-status="unfilled"]) {
  display: none;
}

/* Paginile simple (ex. politica de confidențialitate) nu au copertă: textul urmează direct titlului. */
.post--page .post__layout {
  padding-top: 0;
}

.post--page .post__header {
  padding-bottom: clamp(1.5rem, 3vw, 2rem);
}

/* Subpaginile unei pagini: carduri cu titlul și descrierea, sub textul paginii. */
.subpages {
  padding-top: clamp(1rem, 3vw, 2rem);
}

.subpages__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.subpages__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: 1.5rem 3.25rem 1.5rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition:
    border-color 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.subpages__card:hover,
.subpages__card:focus-visible {
  border-color: var(--line-stronger);
  transform: translateY(-2px);
}

.subpages__name {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.subpages__text {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.subpages__arrow {
  position: absolute;
  top: 1.5rem;
  right: 1.25rem;
  color: var(--accent-text);
}

/* ==========================================================================
   Proiecte (portofoliul): lista, cardurile, fișa proiectului
   ========================================================================== */
.chips--small {
  margin-top: 0.75rem;
}

.chips--small .chip {
  height: 2.125rem;
  font-size: 0.875rem;
}

.project-card__place {
  display: flex;
  gap: 0.375rem;
  align-items: flex-start;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.45;
}

.project-card__place .icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.125rem;
  color: var(--accent-text);
}

.projects-empty {
  padding: 3rem 0;
  color: var(--muted);
  text-align: center;
}

.projects-empty a {
  color: var(--accent-text);
  font-weight: 600;
}

.project-facts {
  align-self: start;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: var(--surface);
}

.project-facts__title {
  margin-bottom: 1rem;
  font-size: 1.0625rem;
  font-weight: 800;
}

.project-facts__list {
  display: grid;
  gap: 0.875rem;
  margin: 0;
}

.project-facts__row {
  display: grid;
  gap: 0.125rem;
}

.project-facts__row dt {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-facts__row dd {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.project-facts__link {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  margin-top: 1.25rem;
  color: var(--accent-text);
  font-size: 0.9375rem;
  font-weight: 700;
}

.project-facts__link .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.project-facts__share {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.project-facts__share .post__copied {
  min-height: 0;
}

/* Pe telefon, fișa vine înaintea textului; pe ecrane mari stă lângă el. */
@media (max-width: 63.99rem) {
  .project-facts {
    order: -1;
  }
}

@media (min-width: 64rem) {
  .project-facts {
    position: sticky;
    top: calc(var(--header-height) + var(--header-offset) * 2 + 1rem);
  }
}

.home-projects__header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.home-projects__title {
  margin-bottom: 0;
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 48rem) {
  .contact-grid {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition:
    border-color 0.2s var(--ease),
    transform 0.2s var(--ease);
}

a.contact-card:hover {
  border-color: var(--line-stronger);
  transform: translateY(-2px);
}

.contact-card__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.75rem;
  border-radius: 0.875rem;
  background: var(--accent-tint);
  color: var(--accent-text);
}

.contact-card__label {
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.contact-card__value {
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.contact-card__value span {
  display: block;
}

.contact-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

.contact-social .footer__social {
  margin-top: 0;
}

/* ==========================================================================
   Căutare și etichete
   ========================================================================== */
.search-form {
  display: flex;
  gap: 0.5rem;
  max-width: 34rem;
  margin-top: 1.75rem;
}

.search-form__field {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
}

.search-form__icon {
  position: absolute;
  left: 1rem;
  color: var(--muted);
  pointer-events: none;
}

.search-form__input {
  width: 100%;
  height: 3rem;
  padding: 0 1rem 0 2.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.search-form__input:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-tint);
}

.search-form__button {
  flex-shrink: 0;
  height: 3rem;
}

.search-form__button .icon,
.search-form__button:hover .icon {
  transform: none;
}

/* În meniul deschis din header. */
.menu .search-form {
  max-width: none;
  margin: 0 0 1rem;
}

.post__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2.5rem;
}

.post__tags a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s;
}

.post__tags a:hover {
  border-color: var(--line-stronger);
  background: var(--surface);
}

.post__tags .icon {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--accent-text);
}

/* Text doar pentru cititoarele de ecran (ex. eticheta câmpului de căutare). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.post__author {
  color: var(--ink);
  font-weight: 600;
}

.post__author:hover {
  color: var(--accent-text);
}

/* ==========================================================================
   Ultima oră
   ========================================================================== */
body.has-breaking {
  --breaking-space: 3rem;
}

.breaking {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: calc(var(--container) - 2 * var(--gutter));
  height: 2.5rem;
  margin: 0.5rem auto 0;
  padding: 0 0.5rem 0 0.375rem;
  border-radius: 999px;
  background: #c8102e;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 0.5rem 1.5rem -0.75rem rgb(200 16 46 / 0.6);
}

.breaking__label {
  flex-shrink: 0;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: #fff;
  color: #c8102e;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.breaking__label::before {
  content: "";
  display: inline-block;
  width: 0.4375rem;
  height: 0.4375rem;
  margin-right: 0.375rem;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.0625rem;
  animation: breaking-pulse 1.4s ease-in-out infinite;
}

.breaking__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breaking__arrow {
  flex-shrink: 0;
}

/* Cu meniul deschis, banda nu mai e nevoie. */
html.menu-open .breaking {
  display: none;
}

@keyframes breaking-pulse {
  50% {
    opacity: 0.25;
  }
}

@media (prefers-reduced-motion: reduce) {
  .breaking__label::before {
    animation: none;
  }
}

/* ==========================================================================
   Galerii și vizualizatorul de imagini
   ========================================================================== */
.post__body .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 0.5rem;
  margin-block: 1.75em;
}

.post__body .gallery__item {
  margin: 0;
}

.gallery__item a {
  display: block;
  overflow: hidden;
  border-radius: 0.75rem;
  background: var(--hover);
  cursor: zoom-in;
}

.post__body .gallery__item img {
  display: block;
  width: 100%;
  height: auto;
  /* Fără marginile imaginilor din text (`.prose img`): miniatura umple chenarul. */
  margin: 0;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.3s var(--ease);
}

.gallery__item a:hover img {
  transform: scale(1.03);
}

.gallery__item figcaption {
  margin-top: 0.375rem;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.post__body p > img,
.post__body figure > img {
  cursor: zoom-in;
}

html:has(.lightbox[open]) {
  overflow: hidden;
}

.lightbox {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(5 8 14 / 0.97);
  color: #fff;
}

.lightbox[open] {
  display: grid;
  place-items: center;
}

.lightbox::backdrop {
  background: transparent;
}

.lightbox__figure {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 3.5rem 1rem;
}

.lightbox__image {
  max-width: min(100%, 92vw);
  max-height: calc(100dvh - 9rem);
  width: auto;
  height: auto;
  border-radius: 0.5rem;
  object-fit: contain;
  touch-action: pan-y;
  user-select: none;
}

.lightbox__caption {
  max-width: 40rem;
  color: rgb(255 255 255 / 0.85);
  font-size: 0.9375rem;
  text-align: center;
}

.lightbox__counter {
  position: absolute;
  top: 1.125rem;
  left: 1.25rem;
  color: rgb(255 255 255 / 0.8);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.lightbox__button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.12);
  color: #fff;
  cursor: pointer;
}

.lightbox__button:hover {
  background: rgb(255 255 255 / 0.24);
}

.lightbox__button[hidden] {
  display: none;
}

.lightbox__button svg {
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lightbox__close {
  top: 0.625rem;
  right: 0.625rem;
}

.lightbox__prev,
.lightbox__next {
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__prev {
  left: 0.625rem;
}

.lightbox__next {
  right: 0.625rem;
}

/* ==========================================================================
   Transmisie în direct (live blog)
   ========================================================================== */
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-right: 0.625rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: #c8102e;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
  vertical-align: 0.0625rem;
}

.live-pill::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: currentColor;
  animation: breaking-pulse 1.4s ease-in-out infinite;
}

.live-pill--ended {
  background: var(--hover);
  color: var(--text);
}

.kind-pill {
  display: inline-flex;
  align-items: center;
  margin-right: 0.625rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--hover);
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
  vertical-align: 0.1em;
}

.kind-pill--external {
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
  color: var(--muted);
}

.live-pill--ended::before {
  animation: none;
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .live-pill::before {
    animation: none;
  }
}

.post__live-link {
  color: inherit;
  font-weight: 600;
}

.post__live-link:hover {
  color: var(--ink);
  text-decoration: underline;
}

.post__body .live {
  margin-top: 2.5em;
  padding-top: 1.5rem;
  border-top: 2px solid var(--ink);
}

.live__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}

.post__body .live__heading {
  margin-top: 0;
  font-size: clamp(1.375rem, 2.4vw, 1.625rem);
}

.live__count {
  color: var(--muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.live__note,
.live__empty {
  color: var(--muted);
  font-size: 0.9375rem;
}

/* Butonul actualizărilor noi rămâne sub header cât se citește lista. */
.post__body .live__new {
  position: sticky;
  top: calc(var(--header-height) + var(--breaking-space) + var(--header-offset) * 2 + 0.75rem);
  z-index: 5;
  display: flex;
  margin: 1rem auto 0;
  box-shadow: 0 0.75rem 2rem -1rem rgb(0 0 0 / 0.45);
}

.post__body .live__new[hidden] {
  display: none;
}

.post__body .live__list {
  padding-left: 0;
  list-style: none;
}

.post__body .live__list:empty {
  display: none;
}

.live__item {
  position: relative;
  padding: 1.25rem 0 1.25rem 1.5rem;
  border-left: 2px solid var(--line);
}

.post__body .live__item + .live__item {
  margin-top: 0;
}

/* Punctul de pe linia timpului. */
.live__item::before {
  content: "";
  position: absolute;
  top: 1.625rem;
  left: -0.4375rem;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
}

.live__item:focus {
  outline: none;
}

.live__item--pinned {
  padding-right: 1.25rem;
  border-left-color: var(--accent);
  border-radius: 0 1rem 1rem 0;
  background: var(--accent-soft);
}

.post__body .live__list--pinned + .live__list {
  margin-top: 0.75rem;
}

.live__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.post__body .live__time {
  color: var(--ink);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.post__body .live__time:hover {
  text-decoration: underline;
}

.live__flag {
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.75rem;
  font-weight: 700;
}

.post__body .live__title {
  margin-top: 0.375rem;
  font-size: 1.1875rem;
}

.post__body .live__body {
  margin-top: 0.5rem;
}

.live__body > * + * {
  margin-top: 1em;
}

.post__body .live__all {
  margin-top: 1.5rem;
}

/* ==========================================================================
   Prima pagină de știri
   ========================================================================== */
.news {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: calc(var(--header-height) + var(--breaking-space) + var(--header-offset) + clamp(1.25rem, 3vw, 2rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.news-kicker {
  color: var(--accent-text);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.news-time {
  color: var(--muted);
  font-size: 0.8125rem;
}

.news__top {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 64rem) {
  .news__top {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
  }
}

.news-lead__link {
  display: grid;
  gap: 1rem;
  color: var(--ink);
}

.cover--news-lead {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
}

.news-lead__body {
  display: grid;
  gap: 0.5rem;
}

.news-lead__title {
  font-size: clamp(1.625rem, 3.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.news-lead__link:hover .news-lead__title,
.news-card__link:hover .news-card__title,
.news-latest__list a:hover,
.news-ranked a:hover {
  color: var(--accent-text);
}

.news-lead__excerpt {
  max-width: 44rem;
  color: var(--text);
}

.news-box {
  display: grid;
  gap: 0.875rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.news-box__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.0625rem;
  font-weight: 800;
}

.news-box__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #c8102e;
}

.news-box__more {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--accent-text);
  font-size: 0.875rem;
  font-weight: 700;
}

.news-box__more .icon {
  width: 1rem;
  height: 1rem;
}

.news-latest__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-latest__list li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.625rem 0;
  border-top: 1px solid var(--line);
}

.news-latest__list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.news-latest__time {
  color: var(--accent-text);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.news-latest__list a,
.news-ranked a {
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
}

.news__secondary,
.news-section__grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}

.news-card__link {
  display: grid;
  gap: 0.5rem;
  color: var(--ink);
}

.cover--news-card {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
}

.cover--news-card .icon {
  width: 2.25rem;
  height: 2.25rem;
}

.news-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}

.news__body {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 64rem) {
  .news__body {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    align-items: start;
  }

  .news__aside {
    position: sticky;
    top: calc(var(--header-height) + var(--breaking-space) + var(--header-offset) * 2 + 1rem);
  }
}

.news__sections {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}

.news-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.625rem;
  border-bottom: 2px solid var(--ink);
}

.news-section__title {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 800;
}

.news__aside {
  display: grid;
  gap: 1.25rem;
}

.news-ranked {
  display: grid;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ranked;
}

.news-ranked li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: baseline;
  counter-increment: ranked;
}

.news-ranked li::before {
  content: counter(ranked);
  color: var(--accent-text);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

.news-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.news-tags a {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
}

.news-tags a:hover {
  border-color: var(--line-stronger);
}

.news-tags span {
  color: var(--muted);
  font-weight: 500;
}

/* Articolul: categoria deasupra titlului, cele mai citite, progresul lecturii. */
.post__kicker {
  margin-bottom: 0.75rem;
}

.post__kicker a {
  color: inherit;
}

.post__most-read {
  max-width: 46rem;
}

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  height: 3px;
  pointer-events: none;
}

.reading-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}

/* Pe telefon, cardurile secundare și cele din secțiuni devin o listă compactă. */
@media (max-width: 47.99rem) {
  .news__secondary,
  .news-section__grid {
    gap: 1rem;
  }

  .news__secondary .news-card__link,
  .news-section__grid .news-card__link {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    align-content: start;
    column-gap: 0.875rem;
    row-gap: 0.25rem;
  }

  .news__secondary .cover--news-card,
  .news-section__grid .cover--news-card {
    grid-row: span 3;
    align-self: start;
    aspect-ratio: 4 / 3;
  }

  .cover--news-card .icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .news-card__title {
    font-size: 0.9375rem;
  }
}

/* Descrierea unei categorii poate avea mai multe rânduri. */
.page-hero__lead {
  white-space: pre-line;
}

/* ==========================================================================
   Formularul de contact
   ========================================================================== */
.contact-form-card {
  max-width: 46rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.contact-form-card__title {
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  letter-spacing: -0.02em;
}

.contact-form-card__intro {
  margin-top: 0.5rem;
  color: var(--muted);
  white-space: pre-line;
}

.contact-form {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
}

.contact-form__row {
  display: grid;
  gap: 1rem;
}

@media (min-width: 40rem) {
  .contact-form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.form-field {
  display: grid;
  gap: 0.375rem;
}

.form-field__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-2);
}

.form-field__optional {
  font-weight: 400;
  color: var(--muted);
}

.form-field__input {
  width: 100%;
  min-height: 3rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.75rem;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.form-field__input:hover {
  border-color: var(--line-stronger);
}

.form-field__input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-field__input[aria-invalid="true"] {
  border-color: light-dark(#b42318, #f87171);
}

.form-field__textarea {
  min-height: 9rem;
  line-height: 1.6;
  resize: vertical;
}

.form-field__error {
  font-size: 0.875rem;
  color: light-dark(#b42318, #f87171);
}

.form-check {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.form-check input {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.1875rem;
  accent-color: var(--accent);
}

.form-check a {
  color: var(--accent-text);
}

.form-alert {
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.9375rem;
}

.form-alert--ok {
  background: light-dark(#e8f6ec, rgb(34 197 94 / 0.12));
  color: light-dark(#1a6b34, #86efac);
}

.form-alert--error {
  background: light-dark(#fdecea, rgb(239 68 68 / 0.12));
  color: light-dark(#b42318, #fca5a5);
}

/* Câmpul-capcană pentru roboți: în afara ecranului, nu doar ascuns (unii roboți îl ocolesc). */
.form-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form .btn {
  justify-self: start;
}

/* ==========================================================================
   Acordul pentru cookie-uri: un card jos, peste pagină, fără s-o blocheze.
   „Refuz” și „Accept” arată la fel: alegerea e la fel de ușoară în ambele sensuri.
   ========================================================================== */
.consent {
  position: fixed;
  right: var(--gutter);
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  left: var(--gutter);
  z-index: 65;
  display: grid;
  gap: 0.75rem;
  max-width: 26rem;
  padding: 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 18px 48px var(--shadow-strong);
}

.consent[hidden] {
  display: none;
}

.consent__title {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
}

.consent__text {
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.consent__text a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.consent__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.footer__consent {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: color 0.2s;
}

.footer__consent:hover {
  color: var(--ink);
}

/* ==========================================================================
   Pagina de mentenanță (503): logo-ul, titlul și mesajul, centrate.
   ========================================================================== */
.maintenance {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
  padding: var(--gutter);
}

.maintenance__card {
  display: grid;
  justify-items: center;
  gap: 1rem;
  max-width: 32rem;
  padding: clamp(2rem, 6vw, 3rem);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: 0 18px 48px var(--shadow);
  text-align: center;
}

.maintenance__title {
  margin-top: 0.5rem;
  color: var(--ink);
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.maintenance__text {
  color: var(--text);
  line-height: 1.6;
  white-space: pre-line;
}

.maintenance__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  font-weight: 600;
}

.maintenance__contact a {
  color: var(--ink);
}

.form-field__hint {
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ==========================================================================
   Comentariile de sub articol
   ========================================================================== */
.comments__card {
  max-width: 46rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.comments__title {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  letter-spacing: -0.02em;
}

.comments__count {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 600;
}

.comments__card > .form-alert {
  margin-top: 1rem;
}

.comments__empty,
.comments__closed {
  margin-top: 0.75rem;
  color: var(--muted);
}

.comments__list,
.comments__replies {
  margin: 0;
  padding: 0;
  list-style: none;
}

.comments__list {
  margin-top: 1.25rem;
}

.comments__list > li + li {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

/* Răspunsurile: mai la dreapta, cu o linie care le leagă de comentariu. */
.comments__replies {
  margin: 1rem 0 0 1.25rem;
  padding-left: 1rem;
  border-left: 2px solid var(--line);
}

.comments__replies > li + li {
  margin-top: 1rem;
}

.comment__head {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.comment__avatar {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--hover);
  color: var(--ink-2);
  font-weight: 700;
}

.comment--staff .comment__avatar {
  background: var(--accent);
  color: var(--accent-ink);
}

.comment__who {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem 0.5rem;
  align-items: baseline;
}

.comment__name {
  color: var(--ink);
}

.comment__badge {
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 0.75rem;
  font-weight: 700;
}

.comment__time {
  width: 100%;
  color: var(--muted);
  font-size: 0.8125rem;
}

.comment__body {
  margin-top: 0.625rem;
  color: var(--text);
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.comment__body p + p {
  margin-top: 0.625rem;
}

.comment__reply {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--accent-text);
  font-size: 0.875rem;
  font-weight: 600;
}

.comment:target {
  scroll-margin-top: calc(var(--header-height) + 2rem);
}

.comment:target .comment__body {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--accent-tint);
}

.comments__form {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-height) + 2rem);
}

.comments__form-title {
  font-size: 1.125rem;
}

.comments__cancel {
  display: inline-block;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.comments__cancel[hidden] {
  display: none;
}

.comments__note {
  color: var(--muted);
  font-size: 0.875rem;
}

.comments .btn {
  justify-self: start;
}

/* ==========================================================================
   Newsletter: în footer, sub articole și pe /newsletter
   ========================================================================== */
.newsletter {
  display: grid;
  gap: 1.25rem;
}

.newsletter__title {
  color: var(--ink);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  letter-spacing: -0.02em;
}

.newsletter__text p,
.newsletter__lead {
  margin-top: 0.375rem;
  color: var(--text);
}

.newsletter__form {
  display: grid;
  gap: 0.625rem;
}

.newsletter__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.newsletter__field {
  flex: 1 1 14rem;
  min-width: 0;
}

.newsletter__row .btn {
  flex: 0 0 auto;
  margin-top: 0;
}

.newsletter__consent {
  font-size: 0.875rem;
  color: var(--muted);
}

.footer__newsletter {
  margin-bottom: 2.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

@media (min-width: 64rem) {
  .footer__newsletter,
  .newsletter--card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 2.5rem;
  }
}

.newsletter--card {
  max-width: 46rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

@media (min-width: 64rem) {
  .newsletter--card {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

.newsletter--page {
  max-width: 36rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.newsletter--page .btn {
  justify-self: start;
}