/* ==========================================================================
   Ghiduri si articole
   Text lung: coloana ingusta si spatiere generoasa, ca sa se citeasca usor.
   ========================================================================== */

.art-pagina { padding: 46px 0 72px; }

.art-firimituri { font-size: 14px; color: #8a8a8a; margin: 0 0 26px; max-width: 760px; }
.art-firimituri a { color: #8a8a8a; text-decoration: none; }
.art-firimituri a:hover { color: #1a1a1a; text-decoration: underline; }
.art-firimituri span { margin: 0 7px; color: #c9c9c9; }
.art-firimituri strong { color: #1a1a1a; font-weight: 600; }

/* --- Antet ---------------------------------------------------------------- */
.art-antet { max-width: 760px; margin: 0 0 34px; }
.art-antet h1 {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.8px;
    margin: 0 0 14px;
    color: #1a1a1a;
}
.art-rezumat {
    font-size: 18.5px;
    line-height: 1.6;
    color: #5a6069;
    margin: 0 0 14px;
}
.art-data { font-size: 13.5px; color: #9a9a9a; margin: 0; }

.art-intro { max-width: 700px; margin: 0 0 40px; }
.art-intro h2 { font-size: 27px; font-weight: 700; margin: 0 0 10px; }
.art-intro p  { font-size: 16.5px; color: #6f6f6f; line-height: 1.7; margin: 0; }
.art-gol { color: #9a9a9a; }

/* --- Continut ------------------------------------------------------------- */
.art-continut {
    max-width: 760px;
    font-size: 17px;
    line-height: 1.78;
    color: #3f4550;
}
.art-continut h2 {
    font-size: 25px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 42px 0 14px;
    line-height: 1.28;
}
.art-continut p  { margin: 0 0 17px; }
.art-continut ul, .art-continut ol { margin: 0 0 20px; padding-left: 24px; }
.art-continut li { margin-bottom: 10px; }
.art-continut strong { color: #1a1a1a; font-weight: 600; }
.art-continut a { color: #1a1a1a; text-decoration: underline; text-underline-offset: 2px; }
.art-continut a:hover { text-decoration-thickness: 2px; }

/* Tabelul de comparatie: pe telefon deruleaza pe orizontala in loc sa
   impinga toata pagina in lateral. */
.art-tabel {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 24px;
    font-size: 15.5px;
}
.art-tabel th, .art-tabel td {
    padding: 11px 14px;
    border: 1px solid #e8e8e8;
    text-align: left;
    vertical-align: top;
}
.art-tabel th {
    background: #fafafa;
    font-weight: 700;
    color: #1a1a1a;
    font-size: 14px;
}
.art-tabel td:first-child { font-weight: 600; color: #1a1a1a; }

/* --- Chemare la actiune --------------------------------------------------- */
.art-chemare {
    max-width: 760px;
    margin: 48px 0 0;
    padding: 30px 32px;
    background: #1a1a1a;
    color: #fff;
    border-radius: 9px;
}
.art-chemare h2 { font-size: 22px; font-weight: 700; margin: 0 0 10px; color: #fff; }
.art-chemare p  { font-size: 15.5px; color: rgba(255,255,255,.72); line-height: 1.65; margin: 0 0 20px; }
.art-chemare strong { color: #fff; }
.art-butoane { display: flex; gap: 10px; flex-wrap: wrap; }
.art-buton {
    display: inline-block;
    background: #fff;
    color: #1a1a1a !important;
    padding: 13px 24px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
}
.art-buton:hover { background: #e6e6e6; }
.art-buton-alt {
    display: inline-block;
    background: transparent;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.32);
    padding: 13px 24px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
}
.art-buton-alt:hover { background: rgba(255,255,255,.1); }

/* --- Alte articole -------------------------------------------------------- */
.art-altele { max-width: 760px; margin-top: 52px; }
.art-altele h2 { font-size: 20px; font-weight: 700; margin: 0 0 18px; }

.art-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.art-lista.mare { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }

.art-card {
    display: block;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 9px;
    padding: 20px 22px;
    text-decoration: none !important;
    transition: box-shadow .18s, transform .18s, border-color .18s;
}
.art-card:hover {
    box-shadow: 0 6px 22px rgba(0,0,0,.08);
    transform: translateY(-2px);
    border-color: #d8d8d8;
}
.art-card h3 { font-size: 17px; font-weight: 700; color: #1a1a1a; margin: 0 0 8px; line-height: 1.35; }
.art-card p  { font-size: 14.5px; color: #6f6f6f; line-height: 1.6; margin: 0; }
.art-citeste { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 700; color: #1a1a1a; }

/* --- Ecrane mici ---------------------------------------------------------- */
@media (max-width: 640px) {
    .art-pagina { padding: 30px 0 52px; }
    .art-antet h1 { font-size: 27px; }
    .art-rezumat { font-size: 16.5px; }
    .art-continut { font-size: 16px; }
    .art-continut h2 { font-size: 21px; margin-top: 32px; }
    .art-chemare { padding: 24px 20px; }
    .art-butoane { flex-direction: column; }
    .art-buton, .art-buton-alt { text-align: center; }
    /* Tabelul de comparatie nu incape pe telefon. */
    .art-tabel { display: block; overflow-x: auto; white-space: nowrap; }
    .art-tabel td:first-child { white-space: normal; min-width: 110px; }
}