/* =========================================================
   BLOG — stiluri doar pentru paginile din /blog/
   Se încarcă DUPĂ styles.css și folosește aceleași variabile (culori, fonturi, raze,
   umbre). E un fișier separat ca să nu încarce degeaba restul site-ului.
   ========================================================= */

/* ---------- Linia de sub titlu: categorie · dată · timp de citire ---------- */
.articol-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  font-size: 15px; color: rgba(255,255,255,0.78); position: relative;
}
.articol-meta > * + *::before { content: "·"; margin-right: 12px; color: rgba(255,255,255,0.4); }

/* ---------- Lista de articole ---------- */
.blog-lista { background: var(--bg); }
.blog-lista .container { max-width: 1100px; }
/* auto-fit: cu 2 articole, cele două carduri împart lățimea; de la 3 în sus, 3 coloane */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 28px; }
/* la „Citește și" sunt doar 1-2 carduri: nu le lăsăm să se întindă pe toată lățimea */
.blog-grid--citeste { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 380px)); justify-content: center; }

.blog-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.blog-card-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy-800); }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale .6s var(--ease); }
.blog-card-corp { display: flex; flex-direction: column; gap: 12px; padding: 24px 26px 28px; flex: 1; }
.blog-card-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 14px; color: var(--text-muted); }
.blog-card-meta > * + *::before { content: "·"; margin-right: 10px; color: #9AA3B2; }
/* categoria: literă normală, nu majuscule răsfirate (eyebrow-urile sunt anti-referință în PRODUCT.md);
   #C2410C trece de 4.5:1 pe alb, portocaliul brandului nu */
.blog-card-cat { color: #C2410C; font-weight: 600; }
.blog-card h2, .blog-card h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); line-height: 1.28; color: var(--navy-900); }
/* tot cardul e clicabil, dar în pagină rămâne un singur link (titlul) */
.blog-card h2 a::after, .blog-card h3 a::after { content: ""; position: absolute; inset: 0; }
.blog-card-extras { color: var(--text-muted); font-size: 16px; line-height: 1.6; }
.blog-card-link {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--navy-900);
}
.blog-card-link svg { width: 18px; height: 18px; color: var(--orange); transition: translate .25s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .blog-card:hover .blog-card-media img { scale: 1.04; }
  .blog-card:hover .blog-card-link svg { translate: 4px 0; }
}

/* ---------- Articolul ---------- */
.articol { background: var(--bg-alt); padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); }
.articol-cover { max-width: 1000px; margin: 0 auto clamp(36px, 5vw, 56px); }
.articol-cover img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.articol-cover figcaption,
.articol-foto figcaption { margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: var(--text-muted); text-align: center; }

/* Textul: ~74 de caractere pe rând (ținta pentru citit mult e 65–75), 19px, spațiere 1.75.
   Lățimea e în `em`, nu în `ch`: `ch` e lățimea cifrei „0”, iar literele românești obișnuite sunt
   mai înguste (media măsurată: 0.393em), așa că 70ch dădea de fapt ~88 de caractere pe rând. */
.articol-corp { max-width: 29em; margin: 0 auto; font-size: 1.1875rem; line-height: 1.75; color: #273142; }
.articol-corp > * + * { margin-top: 1.1em; }
.articol-corp h2 {
  font-size: clamp(1.45rem, 2.6vw, 1.85rem); line-height: 1.25; color: var(--navy-900);
  margin-top: 2.2em; scroll-margin-top: 100px;   /* meniul fix nu acoperă titlul când sari la el */
}
.articol-corp h2 + * { margin-top: .6em; }
.articol-corp strong { color: var(--navy-900); font-weight: 600; }
/* linkuri: text navy cu subliniere portocalie (portocaliul ca text pe alb pică la contrast) */
.articol-corp a {
  color: var(--navy-900); text-decoration: underline; text-decoration-color: var(--orange);
  text-decoration-thickness: 2px; text-underline-offset: 3px; transition: text-decoration-thickness .2s;
}
.articol-corp a:hover { text-decoration-thickness: 3px; }
.articol-corp ul { list-style: none; }
.articol-corp ul li { position: relative; padding-left: 1.5em; }
.articol-corp ul li + li { margin-top: .45em; }
.articol-corp ul li::before {
  content: ""; position: absolute; left: 0; top: .82em; width: .85em; height: 2px;
  background: var(--orange); border-radius: 2px;
}

/* „Pe scurt": rezumatul de la început (răspunsul întâi, detaliile după) */
.pe-scurt { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 28px; font-size: 1.05rem; }
.pe-scurt-titlu { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--navy-900); margin-bottom: 10px; }

/* Fotografii din articol */
.articol-corp > .articol-foto { margin-top: 2em; margin-bottom: 2em; }
.articol-foto img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.articol-corp > .articol-foto--portret { max-width: 420px; margin-inline: auto; }

/* Întrebări frecvente: <details> nativ, merge și fără JS și cu tastatura */
.articol-faq details { border-bottom: 1px solid var(--border); }
.articol-faq details:first-of-type { border-top: 1px solid var(--border); margin-top: 1em; }
.articol-faq summary {
  list-style: none; cursor: pointer; position: relative; min-height: 44px;
  padding: 16px 44px 16px 0; font-family: var(--font-head); font-weight: 600;
  font-size: 1.08rem; line-height: 1.4; color: var(--navy-900);
}
.articol-faq summary::-webkit-details-marker { display: none; }
/* semnul „+" desenat din două linii; se rotește în „×" când e deschis */
.articol-faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background:
    linear-gradient(var(--orange), var(--orange)) center / 14px 2px no-repeat,
    linear-gradient(var(--orange), var(--orange)) center / 2px 14px no-repeat;
  transition: rotate .25s var(--ease);
}
.articol-faq details[open] summary::after { rotate: 45deg; }
.articol-faq summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 4px; }
.articol-faq details p { padding: 0 0 18px; margin: 0; }

/* „Citește și" */
.citeste-si { background: var(--bg); }

@media (max-width: 760px) {
  .articol-corp { font-size: 1.0625rem; line-height: 1.7; }   /* 17px pe telefon */
  .pe-scurt { padding: 20px; }
  .blog-card-corp { padding: 20px 20px 24px; }
}