/* =========================================================
   Rogeek — sistemul de design al temei

   Registru:  blog personal, subiecte practice, ton prietenos ->
              decoratia ramane discreta, culoarea face toata treaba.
   Structura: pagina nu este un sul alb continuu, ci un TEANC DE BENZI
              pe toata latimea, cu suprafete care alterneaza:
              alb -> nuanta -> alb -> accent plin -> cerneala.
   ========================================================= */

/* ---- fontul temei (gazduit local, doua taieturi: 500 si 800) ---- */
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/poppins-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/poppins-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ==== TOKENURI ==========================================================
   Accentul sta pe suprafete pline, niciodata pe o linie subtire.
   ======================================================================== */
:root {
  --accent: #6b25e4;        /* violetul de pe prod (#6e3ece) dus la varful de croma: hsl(262,78%,52%) */
  --accent-dark: #5116b6;   /* treapta inchisa, pentru bloc-in-bloc si hover */
  --accent-text: #5e1fcc;   /* acelasi violet ca text pe alb — 8.1:1 */
  --tint: #f4effe;          /* accentul la ~8%, pentru benzi de sectiune */

  --cta: #ffc800;           /* galben la croma maxima — culoarea care se bate cap in cap cu violetul */
  --cta-dark: #e0af00;
  --cta-text: #8a6000;      /* galbenul ca text pe alb — 5.6:1 */

  --sticker: #ffc800;       /* aceeasi treapta de galben si pe insigne */

  --ink: #1f1c2b;           /* aproape negru cu urma de violet — titluri, benzi inchise */
  --ink-2: #5d5870;         /* textul curent — 6.8:1 */
  --ink-3: #7d7891;         /* etichete si detalii — 4.2:1 */
  --line: #e6e2ee;
  --surface: #ffffff;
  --surface-2: #f5f3f8;

  --control-h: 50px;        /* o singura inaltime de control */
  --radius: 6px;            /* o singura raza, pe banda tehnica a scalei */

  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --w-body: 500;            /* singura greutate de text */
  --w-display: 800;         /* singura greutate de titlu si de componenta */

  --shadow: 0 20px 40px rgba(31, 28, 43, .12);
  --t: .3s;
  --container: 1320px;
  --container-wide: 1680px;  /* pentru sectiuni cu grile de imagini, vezi .post-panel-wide */
  --nav-h: 50px;

  --bs-body-font-family: var(--font);
  --bs-body-font-size: 16px;
  --bs-body-font-weight: var(--w-body);
  --bs-body-line-height: 22px;
  --bs-body-color: var(--ink-2);
  --bs-link-color: var(--accent-text);
  --bs-link-hover-color: var(--ink);
  --bs-border-radius: var(--radius);
  --bs-border-color: var(--line);
  --bs-emphasis-color: var(--ink);
}

/* ==== BAZA ==============================================================
   Netezire in tonuri de gri + greutati mari = text limpede si consistent.
   ======================================================================== */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 22px;
  font-weight: var(--w-body);
  color: var(--ink-2);
  background: var(--surface);
  overflow-x: clip;
}
img { max-width: 100%; height: auto; }
a { color: var(--accent-text); text-decoration: none; transition: color var(--t) ease; }
a:hover { color: var(--ink); }
::selection { background: var(--accent); color: #fff; }

h1, h2, h3, h4, h5 { color: var(--ink); font-weight: var(--w-display); margin: 0; }
h1 { font-size: 44px; line-height: 52px; letter-spacing: -1.4px; }
h2 { font-size: 32px; line-height: 39px; letter-spacing: -1.0px; }
h3 { font-size: 20px; line-height: 26px; letter-spacing: -0.4px; }
/* titlul cu un cuvant in accent — o singura regula, valabila peste tot */
h1 span:not([class]), h2 span:not([class]), h3 span:not([class]) { color: var(--accent-text); }
strong, b { font-weight: var(--w-display); color: var(--ink); }

.container { max-width: var(--container); padding-left: 30px; padding-right: 30px; }

/* scoate o sectiune din container, pana la marginile ferestrei */
.full-bleed { width: 100vw; margin-left: calc(50% - 50vw); }

/* ==== CONTROALE — legea cuplarii ========================================
   Butonul si campul au ACEEASI inaltime si ACEEASI raza. Fara exceptii.
   ======================================================================== */
.buton, .input {
  height: var(--control-h);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 16px;
}
.buton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 30px;
  border: 0;
  background: var(--cta);
  color: var(--ink);
  font-weight: var(--w-display);
  letter-spacing: -0.2px;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t) ease, color var(--t) ease, border-color var(--t) ease;
}
.buton:hover, .buton:focus { background: var(--ink); color: #fff; }  /* hover -> cerneala */
.buton svg { width: 18px; height: 18px; flex: 0 0 auto; }
.buton-accent { background: var(--accent); color: #fff; }
.buton-accent:hover { background: var(--ink); color: #fff; }
.buton-light { background: #fff; color: var(--ink); }
.buton-light:hover { background: var(--ink); color: #fff; }
.buton-ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.buton-ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.input {
  display: block;
  width: 100%;
  padding: 0 20px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-weight: var(--w-body);
  transition: border-color var(--t) ease;
}
.input::placeholder { color: var(--ink-3); font-weight: var(--w-body); }
.input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
textarea.input { height: auto; min-height: 140px; padding: 15px 20px; line-height: 22px; }

/* rezultatul generatoarelor de numere loto: bile-chip, nu text simplu rosu
   cum era pe paginile vechi - refolosesc control-h/radius/accent, nimic nou */
.loto-numere { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.loto-numar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-h);
  height: var(--control-h);
  padding: 0 15px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-size: 20px;
  font-weight: var(--w-display);
}
.loto-numar-special { background: var(--cta); color: var(--ink); }
.loto-bilet { display: block; max-width: 100%; height: auto; border-radius: var(--radius); margin-bottom: 20px; }

/* ==== ANTETUL — etajul alb ============================================== */
.site-top { background: #fff; }
.site-top .container {
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: 100px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.brand-block { flex: 0 0 auto; display: flex; align-items: center; transition: opacity var(--t) ease; }
.brand-block:hover { opacity: .8; }
.brand-block img { display: block; width: 150px; height: 48px; }

/* cautarea domina centrul, cu butonul sudat in capatul campului */
.search-wrap { position: relative; flex: 1 1 auto; max-width: 660px; margin: 0 auto; }
.search-wrap .input { padding-right: 135px; }
.search-wrap .buton {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0 25px;
}

/* clusterul din dreapta: eticheta pe doua randuri, cu salt de greutate */
.hd-cluster { display: flex; align-items: center; flex: 0 0 auto; }
.hd-sep { display: none; }
.hd-meta { display: flex; align-items: center; gap: 10px; padding: 0 20px; }
.hd-meta + .hd-meta { border-left: 1px solid var(--line); }
.hd-meta:last-child { padding-right: 0; }
a.hd-meta { transition: opacity var(--t) ease; }
a.hd-meta:hover .ic { color: var(--cta); }
a.hd-meta:hover .t2 { color: var(--accent-text); }
.hd-meta .ic { position: relative; color: var(--accent-text); display: inline-flex; transition: color var(--t) ease; }
.hd-meta .ic svg { width: 26px; height: 26px; }
.hd-badge {
  position: absolute;
  top: -6px;
  right: -9px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius);
  background: var(--sticker);
  color: var(--ink);
  font-size: 11px;
  font-weight: var(--w-display);
  line-height: 20px;
  text-align: center;
}
.hd-meta .tx { display: flex; flex-direction: column; }
.hd-meta .t1 { font-size: 13px; line-height: 18px; font-weight: var(--w-body); color: var(--ink-3); }
.hd-meta .t2 { font-size: 15px; line-height: 20px; font-weight: var(--w-display); color: var(--ink); }

/* ==== ANTETUL — banda de accent de 50px =================================
   Fill plat, dintr-o margine in alta, niciodata degrade. Blocul din stanga
   este treapta inchisa a aceleiasi culori: un bloc in interiorul unui bloc.
   Banda se inchide in dreapta cu butonul in culoarea care se bate cap in cap.
   ======================================================================== */
.nav-strip { background: var(--accent); position: relative; z-index: 40; }
.nav-strip .container {
  display: flex;
  align-items: stretch;
  min-height: var(--nav-h);
  padding-left: 0;
  padding-right: 0;
}
.catalog-block {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: var(--nav-h);
  padding: 0 20px;
  border: 0;
  background: var(--accent-dark);
  color: #fff;
  font-family: var(--font);
  font-size: 15px;
  font-weight: var(--w-display);
  letter-spacing: -0.2px;
  cursor: pointer;
  transition: background var(--t) ease;
}
.catalog-block:hover { background: var(--ink); color: #fff; }
.catalog-block svg { width: 18px; height: 18px; }

.strip-menu { display: flex; align-items: stretch; list-style: none; margin: 0; padding: 0; }
.strip-menu a {
  display: flex;
  align-items: center;
  height: var(--nav-h);
  padding: 0 20px;
  color: #fff;
  font-size: 15px;
  font-weight: var(--w-display);
  letter-spacing: -0.2px;
  transition: background var(--t) ease, color var(--t) ease;
}
.strip-menu a:hover { background: var(--accent-dark); color: #fff; }

.strip-cta {
  display: inline-flex;
  align-items: center;
  height: var(--nav-h);
  margin-left: auto;
  padding: 0 30px;
  background: var(--cta);
  color: var(--ink);
  font-size: 15px;
  font-weight: var(--w-display);
  letter-spacing: -0.2px;
  transition: background var(--t) ease, color var(--t) ease;
}
.strip-cta:hover { background: var(--ink); color: #fff; }

.strip-toggler {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--nav-h);
  height: var(--nav-h);
  border: 0;
  background: var(--accent-dark);
  color: #fff;
}
.strip-toggler svg { width: 20px; height: 20px; }

/* meniul mare de categorii: panou alb care coboara din banda. Clasa .mega-menu
   e comuna cu /galati (acelasi theme.css, vezi galati/inc/header.php), deci
   regulile de baza raman ca sa nu strice meniul de acolo; varianta pe blog
   (.cat-mega-menu, mai jos) suprascrie ce trebuie sa difere. */
.mega-menu {
  border: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
  padding: 25px 30px;
  min-width: 720px;
}
.mega-title {
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--w-display);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent-text);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
.mega-menu ul { list-style: none; margin: 0; padding: 0; column-count: 3; column-gap: 36px; }
.mega-menu li a {
  display: block;
  width: fit-content;
  padding: 7px 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: var(--w-display);
  line-height: 20px;
}
.mega-menu li a:hover { color: var(--accent-text); }

/* Meniul de categorii de pe blog (nu si /galati): 2 coloane in loc de 3
   (Cristi, 2026-08-11) — categoriile actuale sunt scurte, "IT si tehnologie"
   fiind cea mai lunga vizibila, deci nu se rup pe doua randuri la latimea asta. */
.cat-mega-menu {
  min-width: 480px;
}
.cat-mega-menu ul {
  column-count: 2;
}

/* ==== MENIUL DE MOBIL — panou plin peste pagina, niciodata o lista pliata */
.mnav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1080;
  background: #fff;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mnav[data-open] { display: block; }
body.mnav-blocat { overflow: hidden; }
.mnav-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  border-bottom: 1px solid var(--line);
}
.mnav-titlu { font-size: 20px; line-height: 26px; font-weight: var(--w-display); color: var(--ink); letter-spacing: -0.4px; }
.mnav-inchide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h);
  height: var(--control-h);
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: background var(--t) ease, color var(--t) ease;
}
.mnav-inchide:hover { background: var(--ink); color: #fff; }
.mnav-inchide svg { width: 20px; height: 20px; }
.mnav-corp { padding: 0 20px 30px; }
.mnav-search { max-width: none; margin: 20px 0; }
.mnav-lista { list-style: none; margin: 0; padding: 0; }
.mnav-lista > li { border-bottom: 1px solid var(--line); }
.mnav-lista > li > a, .mnav-parinte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: var(--control-h);
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: var(--accent-text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 22px;
  font-weight: var(--w-display);
  letter-spacing: -0.2px;
  text-align: left;
  cursor: pointer;
}
.mnav-parinte .chev { width: 16px; height: 16px; flex: 0 0 auto; transition: transform var(--t) ease; }
.mnav-grup[data-open] .chev { transform: rotate(180deg); }
.mnav-sub { display: none; list-style: none; margin: 0 0 15px; padding: 15px 20px; background: var(--surface-2); border-radius: var(--radius); }
.mnav-grup[data-open] .mnav-sub { display: block; }
.mnav-sub li { position: relative; padding-left: 16px; }
.mnav-sub li:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}
/* randurile de categorie erau de 32px — prea mici pentru un deget; le ducem la
   slotul rigid de 44px, care aseaza si buletul din stanga exact la mijloc */
.mnav-sub a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-size: 15px;
  line-height: 22px;
  font-weight: var(--w-display);
}
.mnav-sub a:hover { color: var(--accent-text); }
.mnav-cta { width: 100%; margin-top: 20px; }

/* ==== SECTIUNI — teancul de benzi ======================================= */
.sec { padding: 60px 0; }
.sec.v-tint { background: var(--tint); }
.sec.v-grey { background: var(--surface-2); }
.sec.v-accent { background: var(--accent); }
.sec.v-ink { background: var(--ink); }

.sec.v-accent h1, .sec.v-accent h2, .sec.v-accent h3 { color: #fff; }
.sec.v-accent h2 span:not([class]) { color: var(--cta); }
.sec.v-accent p, .sec.v-accent li { color: rgba(255, 255, 255, .82); }
.sec.v-accent .kicker { color: var(--cta); }

.sec.v-ink h1, .sec.v-ink h2, .sec.v-ink h3 { color: #fff; }
.sec.v-ink h2 span:not([class]) { color: var(--accent); }
.sec.v-ink p, .sec.v-ink li { color: rgba(255, 255, 255, .8); }
.sec.v-ink .kicker { color: var(--accent); }

/* capul unei sectiuni: supratitlu, titlu, eventual o nota in dreapta */
/* titlurile mici pastreaza clasa .heading din sabloane */
.heading.mini { font-size: 22px; line-height: 26px; letter-spacing: -0.5px; }

.kicker {
  display: block;
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--w-display);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent-text);
  margin-bottom: 10px;
}
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 35px;
}
.section-head .sh-nota { font-size: 15px; line-height: 22px; color: var(--ink-3); }
.sec.v-accent .section-head .sh-nota { color: rgba(255, 255, 255, .75); }
.sec.v-ink .section-head .sh-nota { color: rgba(255, 255, 255, .7); }

/* ==== CARDUL DE ARTICOL — legea sloturilor rigide =======================
   Nimic nu isi alege singur inaltimea, deci nimic nu se poate desalinia.
   ======================================================================== */
.post-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow var(--t) ease, transform var(--t) ease, border-color var(--t) ease;
}
.post-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-5px); }
.pc-img { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); }
.pc-img img { width: 100%; height: 100%; object-fit: cover; }
.pc-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px; border-top: 1px solid var(--line); }
.pc-pill {
  align-self: flex-start;
  display: inline-block;
  background: var(--sticker);
  color: var(--ink);
  font-size: 11px;
  font-weight: var(--w-display);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  line-height: 22px;
  padding: 0 10px;
  border-radius: var(--radius);
  margin-bottom: 15px;
}
.pc-title { font-size: 17px; line-height: 22px; letter-spacing: -0.3px; margin: 0 0 10px; }
.pc-title a {
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pc-title a:hover { color: var(--accent-text); }
.post-card:not(.feat-lg) .pc-title { min-height: 44px; }
.pc-excerpt {
  font-size: 15px;
  line-height: 20px;
  margin: 0 0 15px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pc-meta { margin-top: auto; font-size: 13px; line-height: 18px; font-weight: var(--w-display); color: var(--ink-3); }
.pc-meta b { color: var(--ink); }

/* zona de sus: un card mare + doua mici */
.featured { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.feat-side { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; }
.feat-lg .pc-img { aspect-ratio: 2 / 1; }
.feat-lg .pc-body { padding: 25px 30px 30px; }
.feat-lg .pc-title { font-size: 26px; line-height: 32px; letter-spacing: -0.8px; }
.feat-lg .pc-title a { -webkit-line-clamp: 3; }
.feat-lg .pc-excerpt { font-size: 16px; line-height: 22px; }
.feat-sm .pc-img { aspect-ratio: 21 / 9; }
.feat-sm .pc-title { font-size: 16px; line-height: 22px; letter-spacing: -0.2px; }
.featured .pc-body { justify-content: center; }
.featured .pc-meta { margin-top: 15px; }

/* varianta pentru hartile de cartier (/galati/harti.php): aici imaginea ESTE
   continutul, deci se vede intreaga si nu decupata — o harta taiata isi pierde
   tocmai legenda si strazile de pe margine. Slotul pastreaza raportul scanarilor
   (3/2) ca randurile sa ramana rigide, iar fundalul este alb ca al hartilor, deci
   diferenta de inaltime dintre ele nu se vede. */
.pc-harta .pc-img { aspect-ratio: 3 / 2; background: var(--surface); }
.pc-harta .pc-img img { object-fit: contain; }
/* Cardul de articol rezerva doua randuri de titlu ca doua rezumate diferite sa nu
   porneasca de la inaltimi diferite. Titlurile hartilor sunt scurte de la sine, deci
   randul rezervat ramanea o banda goala; randurile se aliniaza oricum intre ele, din
   intinderea coloanelor. */
.post-card.pc-harta .pc-title { min-height: 0; }
/* Lista de strazi citite de pe scanare (harti.php) e text de lungime variabila, nu
   un rand fix de metadate — .pc-meta vine cu margin-top:auto ca sa lipeasca un rand
   scurt de subsolul cardului, ceea ce ar lasa aici un gol intre titlu si lista. */
.post-card.pc-harta .pc-meta { margin-top: 8px; }
/* Fereastra cu harta mare. Scanarile au 880 de pixeli latime; stranse la latimea unui
   telefon nu se mai citeste nici o strada de pe ele, asa ca raman la marimea lor si se
   trag in lateral. Derularea se face in interiorul ferestrei, deci pagina nu se misca. */
.modal-harta .modal-body { overflow-x: auto; }
.modal-harta .modal-body img { max-width: none; }

/* ==== PLACILE DE CATEGORIE — accent plin ================================ */
/* Placa de categorie = aceeasi anatomie despartita ca la .post-card: imagine sus,
   corp plin dedesubt. Violetul ramane masa de culoare, doar ca acum ocupa jumatatea
   de jos in loc de toata placa. Niciodata text peste imagine. */
.cat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cat-tile {
  display: flex;
  flex-direction: column;
  background: var(--accent);
  border-radius: var(--radius);
  overflow: hidden;
  transition: background var(--t) ease, transform var(--t) ease;
}
.cat-tile:hover { background: var(--ink); transform: translateY(-5px); }
.ct-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); }
.ct-img img { width: 100%; height: 100%; object-fit: cover; }
.ct-body { display: block; padding: 20px; }
.ct-name { display: block; color: #fff; font-size: 16px; line-height: 22px; font-weight: var(--w-display); letter-spacing: -0.2px; }
/* Numarul de sub numele categoriei. Blogul nu il mai arata (v38), insa directorul
   /galati il foloseste, si acolo este o informatie utila, nu decor. Aceleasi valori
   ca inainte de v38, ca sa nu apara stiluri scrise direct in pagina. */
.ct-count { display: block; color: rgba(255, 255, 255, .8); font-size: 13px; line-height: 18px; font-weight: var(--w-body); }
/* Varianta pe trei coloane, pentru cand sunt 6 placi (2 randuri pline). */
.cat-tiles-3 { grid-template-columns: repeat(3, 1fr); }

/* ==== CLASAMENT — lista numerotata, fara cutii ========================== */
.rank-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; }
.rank-item {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  break-inside: avoid;
}
.rank-num {
  flex: 0 0 40px;
  font-size: 32px;
  line-height: 39px;
  font-weight: var(--w-display);
  letter-spacing: -1.0px;
  color: var(--accent-text);
}
.rank-title { display: flex; flex-direction: column; gap: 5px; }
.rank-title a { color: var(--ink); font-size: 16px; line-height: 22px; font-weight: var(--w-display); letter-spacing: -0.2px; }
.rank-title a:hover { color: var(--accent-text); }
.rk-meta { font-size: 13px; line-height: 18px; color: var(--ink-3); font-weight: var(--w-body); }
/* pe banda de accent clasamentul se citeste in cerneala */
.sec.v-accent .rank-item { border-bottom-color: rgba(255, 255, 255, .2); }
.sec.v-accent .rank-num { color: var(--cta); }
.sec.v-accent .rank-title a { color: #fff; }
.sec.v-accent .rank-title a:hover { color: var(--cta); }
.sec.v-accent .rk-meta { color: rgba(255, 255, 255, .7); }

/* ==== LISTA SIMPLA (unelte) ============================================= */
.side-box { margin-bottom: 0; }
.side-head {
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--w-display);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
.sec.v-ink .side-head { color: #fff; border-bottom-color: rgba(255, 255, 255, .15); }
.side-list { list-style: none; margin: 0; padding: 0; }
.side-list li { border-bottom: 1px solid var(--line); }
.side-list li:last-child { border-bottom: 0; }
.side-list a { display: block; padding: 10px 0; color: var(--ink); font-size: 16px; line-height: 22px; font-weight: var(--w-display); }
.side-list a:hover { color: var(--accent-text); }
.sec.v-ink .side-list li { border-bottom-color: rgba(255, 255, 255, .12); }
.sec.v-ink .side-list a { color: rgba(255, 255, 255, .85); }
.sec.v-ink .side-list a:hover { color: var(--accent); }

/* ==== LISTA CONTACT (firma.php) =========================================
   .side-list a e "display:block" pe scop, pentru widgetul de unelte de mai
   sus unde tot <li> e un link. Aici <a> sta INLINE dupa un <b>Eticheta:</b>
   (Telefon, Email, Site) — mostenind display:block intindea zona clickabila
   pe tot randul gol din dreapta (bug raportat de Cristi) si impingea link-ul
   pe randul urmator, in timp ce Telefon (fara link) ramanea pe acelasi rand
   ca eticheta lui — acelasi bug era si inconsecventa vizuala reclamata. */
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 22px; word-break: break-word; }
.contact-list li:last-child { border-bottom: 0; }
.contact-list a { color: var(--accent-text); }
.contact-list a:hover { text-decoration: underline; }

/* ==== PAGINARE ========================================================== */
.pagination-wrap { margin-top: 40px; }
.pagination-wrap .nav-links { display: flex; flex-wrap: wrap; gap: 10px; }
.pagination-wrap .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-h);
  height: var(--control-h);
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font-weight: var(--w-display);
  font-size: 16px;
  transition: background var(--t) ease, color var(--t) ease, border-color var(--t) ease;
}
.pagination-wrap .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #fff; }
.pagination-wrap .page-numbers:hover:not(.current) { background: var(--ink); border-color: var(--ink); color: #fff; }
.pagination-wrap .page-numbers.dots { border-color: transparent; background: transparent; }

/* ==== ARTICOLUL =========================================================
   .post-panel este propriul container: sablonul de articol nu mai depinde
   de un invelis deschis in antet, ca benzile de pe prima pagina sa poata
   iesi pe toata latimea.
   ======================================================================== */
.post-panel {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 30px 60px;
}
/* Largeste un rand DOAR spre dreapta, recuperand golul care ramane langa un
   .post-panel standard pe monitoarele late — fara sa miste marginea din stanga a
   randului, deci fara sa il dezalinieze de titlul sau de orice alt element de
   deasupra lui, care raman in .post-panel obisnuit. (Doua incercari anterioare, o
   cutie lata centrata separat si apoi tot panoul facut lat, au mutat fie randul,
   fie titlul, din pozitia in care sta pe orice alta pagina a site-ului — vezi
   memoria rogeek-joy-theme pentru istoricul complet.)

   min()/max() lasa marginea negativa sa creasca DOAR cat este loc cu adevarat:
   nu poate depasi golul real din dreapta (max(0px, ...) il opreste sa fie
   negativ cand fereastra e mai ingusta decat --container, ceea ce ar fi impins
   randul peste marginea ecranului), si e plafonata la (--container-wide minus
   --container), ca randul sa nu ajunga absurd de lat pe un monitor urias. */
.bleed-right {
  margin-right: calc(-1 * min(calc(var(--container-wide) - var(--container)), max(0px, calc((100vw - var(--container)) / 2))));
}
.strip-menu, .nav-strip #stripNav { display: flex; }
.crumbs { font-size: 14px; line-height: 20px; color: var(--ink-3); margin-bottom: 20px; }
.crumbs a { color: var(--accent-text); font-weight: var(--w-display); }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { margin: 0 5px; }

.entry-title { font-size: 40px; line-height: 48px; letter-spacing: -1.4px; margin: 0 0 25px; }

.post-hero-img { width: 100%; max-height: 350px; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius); }

/* ==== POZA INTREAGA (page_poza.php) =====================================
   .post-hero-img e gandit pentru bannerul lat al articolelor, unde o decupare
   16:9-ish e ok (design-ul alege ce parte din poza se vede). O poza de
   nostalgie e opusul: tot rostul paginii e sa arate poza intreaga, asa cum a
   fost facuta — 900x675 sau 1600x1200, mereu 4:3. .post-hero-img decupata la
   max-height:350px pe o cutie lata de ~1200px taia peste jumatate din poza
   (raportat de Cristi). Fara crop, fara inaltime impusa: latimea umple
   coloana, inaltimea urmeaza raportul real al pozei. */
.poza-galerie-img { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }

/* sina din stanga articolului */
.rail-label {
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--w-display);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ink-3);
  margin: 0 0 5px;
}
.rail-date { display: flex; flex-direction: column; margin: 0 0 20px; }
.rail-date .rd-day { font-size: 32px; line-height: 39px; font-weight: var(--w-display); letter-spacing: -1.0px; color: var(--accent-text); }
.rail-date .rd-rest { font-size: 13px; line-height: 18px; font-weight: var(--w-display); color: var(--ink); text-transform: uppercase; letter-spacing: 2px; }
.rail-cats { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 20px; }
.rail-cats a {
  display: inline-block;
  background: var(--sticker);
  color: var(--ink);
  font-size: 11px;
  font-weight: var(--w-display);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  line-height: 22px;
  padding: 0 10px;
  border-radius: var(--radius);
  transition: background var(--t) ease, color var(--t) ease;
}
.rail-cats a:hover { background: var(--ink); color: #fff; }
.share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--control-h);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: var(--w-display);
  letter-spacing: -0.2px;
  margin-bottom: 10px;
  transition: background var(--t) ease, color var(--t) ease, border-color var(--t) ease;
}
.share-btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
/* Fara separator, "Scris de" mostenea doar cele 10px de margin-bottom de la
   ultimul .share-btn (margini colapsate intre vecini = se ia cea mai mare, nu
   suma), asa ca arata ca inca un buton din stiva, nu ca o sectiune noua.
   Acelasi tratament ca .distribuie-mobil: bordura sus + padding, ca sa se
   citeasca separat (raportat de Cristi, spatiere). */
.rail-author { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.rail-author .rail-label { margin-bottom: 8px; }
.rail-author a { font-size: 15px; line-height: 20px; font-weight: var(--w-display); color: var(--ink); }
.rail-author a:hover { color: var(--accent-text); }
/* dublura de pe telefon (post-tail) foloseste acelasi markup ca sina de pe
   desktop (post-rail) — .post-rail dispare in bloc sub 992px, dar bucata asta
   sta in afara lui .distribuie-mobil, deci are nevoie de propria regula ca sa
   nu apara de doua ori pe desktop. */
@media (min-width: 992px) { .rail-author-mobil { display: none; } }

/* Pe telefon sina din stanga dispare: sub titlu ramane o linie scurta de
   context, iar butoanele de distribuire coboara dupa text. Altfel data,
   categoria si cele patru butoane se aseaza DEASUPRA titlului si impinge
   unitatea de 300x250 mult sub primul ecran. */
.meta-mobil { font-size: 15px; line-height: 22px; color: var(--ink-3); margin: 0 0 20px; }
.meta-mobil b { color: var(--ink); font-weight: var(--w-display); }
.distribuie-mobil { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); }
.dm-eticheta {
  display: block;
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--w-display);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ink-3);
  margin-bottom: 15px;
}
.dm-butoane { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dm-butoane .share-btn { margin: 0; }
@media (min-width: 992px) {
  .meta-mobil, .distribuie-mobil { display: none; }
}
@media (max-width: 991px) {
  .post-rail { display: none; }
  /* pe telefon comentariile vin imediat dupa butoanele de distribuire,
     inainte de cele doua liste "articole similare" / "ultimele articole" —
     altfel utilizatorul trebuie sa treaca de 10 randuri de linkuri ca sa le
     gaseasca. Pe desktop ordinea din sursa (nemodificata) ramane cea veche. */
  .post-tail { display: flex; flex-direction: column; }
  .post-tail .pt-share { order: 1; }
  .post-tail .rail-author-mobil { order: 1; }
  .post-tail .pt-comments { order: 2; }
  .post-tail .pt-related { order: 3; }

  /* ...si tocmai de aceea lista de comentarii se scurteaza aici la primele 10:
     pe un articol cu 180 de comentarii, listele de articole ajungeau altfel la
     zeci de ecrane sub ele. Restul comentariilor raman in pagina, doar ascunse,
     si se afiseaza din butonul pus de nav.js. */
  .pt-comments.rj-colapsat .comment-list > li:nth-child(n+11) { display: none; }
  .rj-vezi-comentarii { margin-bottom: 30px; }
}
/* fara JS (sau pe desktop) butonul nu are ce cauta in pagina */
.rj-vezi-comentarii { display: none; }
@media (max-width: 991px) {
  .pt-comments.rj-colapsat .rj-vezi-comentarii { display: inline-flex; }
}

/* corpul articolului */
.entry-content { font-size: 17px; line-height: 26px; color: var(--ink-2); }
.entry-content p { margin: 0 0 20px; }
.entry-content a { font-weight: var(--w-body); text-decoration: underline; text-underline-offset: 3px; }
.entry-content h2 { font-size: 26px; line-height: 32px; letter-spacing: -0.8px; margin: 40px 0 15px; }
.entry-content h3 { font-size: 20px; line-height: 26px; letter-spacing: -0.4px; margin: 30px 0 10px; }
.entry-content ul, .entry-content ol { margin: 0 0 20px; padding-left: 20px; }
.entry-content li { margin-bottom: 5px; }
.entry-content img { max-width: 100%; height: auto; border-radius: var(--radius); }
.entry-content iframe { max-width: 100%; border-radius: var(--radius); }
/* clipurile de YouTube isi pastrau inaltimea din atributul vechi (315px) si pe
   telefon ieseau turtite, cu benzi negre; le legam la formatul 16:9. */
.entry-content iframe[src*="youtube"], .entry-content iframe[src*="youtu.be"] {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin-bottom: 20px;
}
.entry-content blockquote { background: var(--tint); border-radius: var(--radius); padding: 20px 25px; margin: 0 0 20px; color: var(--ink); }
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; line-height: 22px; }
.entry-content th, .entry-content td { border: 1px solid var(--line); padding: 10px; text-align: left; }
.entry-content th { background: var(--surface-2); color: var(--ink); font-weight: var(--w-display); }
/* Un tabel cu multe coloane nu incape pe telefon si impingea TOATA pagina in
   lateral. Il inchidem intr-un cadru care se trage orizontal doar pe el. */
.tabel-scroll { overflow-x: auto; margin: 0 0 20px; }
.tabel-scroll table { margin-bottom: 0; }
.tabel-scroll th, .tabel-scroll td { white-space: normal; }

.page-links { margin: 20px 0; font-weight: var(--w-display); }

/* casetele de reclama raman complet nestilizate; se rezerva doar spatiul */
.ad-box { min-height: 250px; }
.ad-box-tall { min-height: 600px; }
.side-ad { position: sticky; top: 20px; }

/* Sina de reclama, ca pista de latime fixa.
   Unitatea de 300x600 nu se micsoreaza niciodata. Cat timp coloana care o poarta este
   data in procente, intre 992 si 1199 de pixeli ea ajunge sub 300px, reclama iese din
   coloana si trage TOT documentul in lateral (masurat pe /galati/harti.php: 1065px de
   continut intr-o fereastra de 1024). Aici pista are exact latimea unitatii, iar
   coloana de langa ea ia ce ramane, deci nu mai are cum sa fie stransa. */
@media (min-width: 992px) {
  .rand-sina { flex-wrap: nowrap; }
  .rand-sina > .col-sina { flex: 0 0 auto; width: 300px; }
  .rand-sina > .col-continut { flex: 1 1 auto; width: auto; max-width: none; min-width: 0; }
}

/* dupa articol */
.after-post { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 30px; }
.after-post h3 {
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--w-display);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ink);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  margin: 0 0 10px;
}
.after-post ul { list-style: none; margin: 0; padding: 0; }
.after-post li { border-bottom: 1px solid var(--line); }
.after-post li:last-child { border-bottom: 0; }
.after-post li a { display: inline-flex; max-width: 100%; align-items: center; gap: 15px; padding: 10px 0; color: var(--ink); font-size: 16px; line-height: 22px; font-weight: var(--w-display); }
.after-post li a:hover { color: var(--accent-text); }
.ap-thumb { flex: 0 0 auto; width: var(--control-h); height: var(--control-h); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.ap-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ap-titlu { flex: 1 1 auto; }

/* capul paginilor de arhiva */
.page-header-block { margin-bottom: 35px; }
.archive-descr { font-size: 16px; line-height: 22px; color: var(--ink-3); margin-top: 10px; max-width: 640px; }

/* 404 */
.error-404 { text-align: center; padding: 20px 0 40px; }
.error-404 .code { font-size: 60px; line-height: 70px; font-weight: var(--w-display); letter-spacing: -1.9px; color: var(--accent-text); }
.error-404 .search-wrap { max-width: 520px; margin: 25px auto 0; }

/* ==== COMENTARII ======================================================== */
.comments-area { margin-top: 50px; }
.comments-title { margin-bottom: 25px; }
.comment-list { list-style: none; margin: 0 0 40px; padding: 0; }
.comment-list .children { list-style: none; padding-left: 30px; }
.comment-body { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 15px; }
.comment-author { display: flex; align-items: center; gap: 10px; font-weight: var(--w-display); color: var(--ink); }
.comment-author .avatar { border-radius: var(--radius); }
.comment-author .says { display: none; }
.comment-metadata { font-size: 13px; line-height: 18px; margin: 5px 0 15px; }
.comment-metadata a { color: var(--ink-3); font-weight: var(--w-body); }
.comment-content { font-size: 16px; line-height: 22px; }
.comment-content p { margin: 0 0 10px; }
/* Cititorii lipesc link-uri lungi fara spatii in comentarii; fara asta un singur
   URL impinge toata pagina lateral pe telefon (acelasi tip de problema ca .tabel-scroll). */
.comment-content, .comment-content p, .comment-content a { overflow-wrap: anywhere; }
.reply { margin-top: 10px; }
.comment-reply-link { display: inline-block; font-size: 13px; font-weight: var(--w-display); text-transform: uppercase; letter-spacing: 1.2px; color: var(--accent-text); }
.comment-reply-link:hover { color: var(--ink); }
.bypostauthor > .comment-body { border-color: var(--accent); background: var(--tint); }

.comment-respond { margin-top: 30px; background: var(--surface-2); border-radius: var(--radius); padding: 30px; }
/* formularul de contact traieste pe o pagina simpla, fara coloana laterala
   de anunt care ingusteaza articolele (single.php), asa ca fara o limita
   proprie card-ul se intinde pe toata latimea continutului si campurile
   ies mult prea mari; 660px e deja folosit ca latime maxima pentru bara
   de cautare din antet, nu o valoare noua */
.contact-respond { max-width: 660px; }
/* pe desktop textul si formularul stau unul langa altul, incepand chiar
   sub titlu, ca sa nu mai ramana un gol mare in dreapta cardului ingustat
   mai sus; pe telefon raman stivuite ca inainte (text, apoi formular) */
@media (min-width: 992px) {
  .contact-layout { display: flex; align-items: flex-start; gap: 40px; }
  .contact-layout .contact-text { flex: 1 1 0; order: 2; }
  .contact-layout .contact-respond { flex: 1 1 0; order: 1; margin-top: 0; max-width: none; }
}
.comment-reply-title { font-size: 26px; line-height: 32px; letter-spacing: -0.8px; margin-bottom: 20px; }
.comment-form label { display: block; font-size: 14px; line-height: 20px; font-weight: var(--w-display); color: var(--ink); margin-bottom: 5px; }
.comment-form p { margin-bottom: 15px; }
.form-submit { margin-bottom: 0; }
.logged-in-as { font-size: 14px; line-height: 20px; }

/* ==== BANDA AUTORULUI + SUBSOLUL ======================================== */
.band-accent { background: var(--accent); padding: 50px 0; }
.band-accent .container { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.band-accent h2 { color: #fff; margin-bottom: 10px; }
.band-accent h2 span:not([class]) { color: var(--cta); }
.band-accent p { color: rgba(255, 255, 255, .85); font-size: 17px; line-height: 26px; margin: 0; max-width: 620px; }
.band-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.site-footer { background: var(--ink); padding: 60px 0 0; }
.ft-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; padding-bottom: 40px; }
.ft-title {
  color: #fff;
  font-size: 16px;
  line-height: 22px;
  font-weight: var(--w-display);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding-bottom: 10px;
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.ft-box, .ft-box p, .ft-box li { color: rgba(255, 255, 255, .75); font-size: 15px; line-height: 22px; }
.ft-box ul { list-style: none; margin: 0; padding: 0; }
.ft-box li { padding: 5px 0; }
.ft-box a { color: rgba(255, 255, 255, .75); }
.ft-box a:hover { color: #fff; }
.ft-about { margin: 0; }

.footer-bar { border-top: 1px solid rgba(255, 255, 255, .12); background: var(--ink); }
.footer-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 60px;
  padding-top: 15px;
  padding-bottom: 15px;
}
.footer-bar span { color: rgba(255, 255, 255, .6); font-size: 14px; line-height: 20px; }
.footer-bar a { color: #fff; font-weight: var(--w-display); }
.footer-bar a:hover { color: var(--accent); }

/* ==== ECRANE MICI =======================================================
   Titlurile NU cresc pe telefon; marimea apare la pragul de desktop.
   ======================================================================== */
@media (max-width: 1200px) {
  .hd-meta.hd-optional { display: none; }
}
@media (max-width: 1000px) {
  h1 { font-size: 30px; line-height: 36px; letter-spacing: -0.9px; }
  h2 { font-size: 26px; line-height: 32px; letter-spacing: -0.8px; }
  .entry-title { font-size: 30px; line-height: 36px; letter-spacing: -0.9px; }
  .site-top .container { flex-wrap: wrap; gap: 15px; min-height: 0; padding-top: 15px; padding-bottom: 15px; }
  .brand-block { order: 1; }
  .brand-block img { width: 125px; height: 40px; }
  .hd-cluster { order: 2; margin-left: auto; }
  .hd-meta { padding: 0 0 0 15px; }
  .site-top .search-wrap { display: none; }
  .strip-toggler { display: flex; }
  .strip-menu, .nav-strip #stripNav, .nav-strip .dropdown { display: none; }
  .strip-cta { padding: 0 20px; margin-left: 0; }
  .post-panel { padding: 25px 30px 40px; }
  .featured { grid-template-columns: 1fr; }
  .feat-side { grid-template-rows: none; }
  .cat-tiles { grid-template-columns: repeat(3, 1fr); }
  .rank-list { columns: 1; }
  .ft-grid { grid-template-columns: 2fr 1fr; gap: 30px; }
  .sec { padding: 45px 0; }
  /* zona de sus a trecut pe o coloana: slotul rigid al titlului nu mai aliniaza
     nimic, lasa doar o gaura sub titlurile de un rand */
  .post-card.feat-sm .pc-title { min-height: 0; }
}
@media (max-width: 767px) {
  .container { padding-left: 20px; padding-right: 20px; }
  .post-panel { padding: 25px 20px 40px; }
  /* butonul de cautare ramane doar lupa: cu eticheta, campul de scris ramanea
     cu 175px si textul de sugestie se taia in mijlocul cuvantului */
  .site-top .search-wrap .bt-eticheta { display: none; }
  .site-top .search-wrap .buton { padding: 0; width: var(--control-h); }
  .site-top .search-wrap .input { padding-right: 60px; }
  /* antetul pe telefon: doar logo + cautare. Clusterul se aseza pe un rand
     propriu si lasa logoul singur, deci il scoatem. */
  .hd-cluster { display: none; }
  /* pe unealta de diacritice coloana cu reclama sta prima in cod: pe telefon
     titlul si formularul trebuie sa vina inainte. Selectorul prinde doar
     randul direct din .post-panel, deci randurile din articol raman neatinse. */
  .post-panel > .row > .col-md-4, .post-panel > .row > .col-lg-4 { order: 2; }
  .post-panel > .row > .col-md-8, .post-panel > .row > .col-lg-8 { order: 1; }
  .cat-tiles { grid-template-columns: repeat(2, 1fr); }
  .feat-lg .pc-title { font-size: 20px; line-height: 26px; letter-spacing: -0.4px; }
  .feat-lg .pc-body { padding: 20px; }
  .ft-grid { grid-template-columns: 1fr; }
  .band-accent { padding: 35px 0; }
  .band-actions .buton { width: 100%; }
  .comment-list .children { padding-left: 15px; }
  .comment-respond { padding: 20px; }
  /* linkurile din subsol sunt navigatie adevarata, dar randul lor avea 21px:
     pe telefon primesc acelasi slot de 44px ca randurile din meniu */
  .ft-box li { padding: 0; }
  .ft-box li a, .ft-about a { display: flex; align-items: center; min-height: 44px; }
  .footer-bar a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* sub 576px grila Bootstrap trece pe o singura coloana: cardurile nu mai stau
   unul langa altul, deci slotul rigid al titlului nu mai are ce alinia */
@media (max-width: 575px) {
  .post-card:not(.feat-lg) .pc-title { min-height: 0; }
}