/* Stiluri pentru paginile de articol. Completeaza styles.css (build Tailwind precompilat). */

:root {
    --eco-dark: #2A3B2C;
    --eco-green: #5C715E;
    --eco-accent: #D4C3A3;
    --eco-light: #F9F8F6;
}

.art-wrap { max-width: 46rem; margin: 0 auto; padding: 0 1.5rem; }
.art-wide { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; }

/* --- Antet articol --- */
.art-kicker {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--eco-green);
    margin-bottom: 1rem;
}
.art-title {
    font-family: "Playfair Display", serif;
    font-weight: 700;
    color: var(--eco-dark);
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.12;
    margin-bottom: 1.25rem;
    text-wrap: balance;
}
.art-lead {
    font-size: 1.175rem;
    line-height: 1.75;
    color: #4B5563;
    margin-bottom: 1.75rem;
}
.art-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.25rem;
    font-size: .8125rem;
    color: #6B7280;
    padding-bottom: 2rem;
    border-bottom: 1px solid #E5E7EB;
}
.art-meta span { display: inline-flex; align-items: center; gap: .375rem; }

/* --- Corp text --- */
.art-body { font-size: 1.0625rem; line-height: 1.8; color: #374151; }
.art-body > p { margin: 0 0 1.5rem; }
.art-body h2 {
    font-family: "Playfair Display", serif;
    font-weight: 700;
    color: var(--eco-dark);
    font-size: clamp(1.5rem, 3.2vw, 2rem);
    line-height: 1.25;
    margin: 3.25rem 0 1.125rem;
    text-wrap: balance;
}
.art-body h3 {
    font-family: "Playfair Display", serif;
    font-weight: 700;
    color: var(--eco-dark);
    font-size: 1.25rem;
    margin: 2.25rem 0 .75rem;
}
.art-body strong { color: var(--eco-dark); font-weight: 600; }
.art-body a { color: var(--eco-green); text-decoration: underline; text-underline-offset: 3px; }
.art-body a:hover { color: var(--eco-dark); }
.art-body ul, .art-body ol { margin: 0 0 1.5rem; padding-left: 1.5rem; }
.art-body ul { list-style: disc; }
.art-body ol { list-style: decimal; }
.art-body li { margin-bottom: .625rem; padding-left: .25rem; }
.art-body li::marker { color: var(--eco-green); }

/* --- Imagini --- */
.art-figure { margin: 2.5rem 0; }
.art-figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 1.25rem;
    box-shadow: 0 10px 30px -12px rgba(42, 59, 44, .35);
}
.art-figure figcaption {
    font-size: .8125rem;
    line-height: 1.6;
    color: #6B7280;
    margin-top: .75rem;
    padding-left: .25rem;
    border-left: 2px solid var(--eco-accent);
    padding-left: .75rem;
}
.art-figure-narrow { max-width: 26rem; margin-left: auto; margin-right: auto; }
.art-figure-tall { max-width: 32rem; margin-left: auto; margin-right: auto; }

/* Imagine lata, iese din coloana de text pe ecrane mari */
.art-figure-wide { margin: 3rem 0; }
@media (min-width: 1024px) {
    .art-figure-wide { width: 56rem; margin-left: -5rem; margin-right: -5rem; }
}

/* --- Citat --- */
.art-quote {
    margin: 2.5rem 0;
    padding: 0 0 0 1.5rem;
    border-left: 3px solid var(--eco-accent);
    font-family: "Playfair Display", serif;
    font-size: 1.375rem;
    line-height: 1.55;
    font-style: italic;
    color: var(--eco-dark);
}
.art-quote cite {
    display: block;
    margin-top: .875rem;
    font-family: Inter, sans-serif;
    font-size: .8125rem;
    font-style: normal;
    color: #6B7280;
}

/* --- Caseta „bun de stiut” --- */
.art-box {
    margin: 2.5rem 0;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-left: 4px solid var(--eco-green);
    border-radius: 1rem;
    padding: 1.5rem 1.75rem;
}
.art-box h3 {
    font-family: Inter, sans-serif;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--eco-green);
    margin: 0 0 .875rem;
}
.art-box p:last-child, .art-box ul:last-child { margin-bottom: 0; }
.art-box ul { margin-bottom: 0; }

/* --- Tabel --- */
.art-table-scroll { overflow-x: auto; margin: 2rem 0; }
.art-table { width: 100%; min-width: 26rem; border-collapse: collapse; font-size: .9375rem; }
.art-table th, .art-table td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid #E5E7EB; }
.art-table th {
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--eco-green);
    font-weight: 700;
}
.art-table tr:last-child td { border-bottom: 0; }
.art-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Surse --- */
.art-sources { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid #E5E7EB; }
.art-sources h2 {
    font-family: Inter, sans-serif;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--eco-green);
    margin: 0 0 1rem;
}
.art-sources ol { font-size: .8125rem; line-height: 1.7; color: #6B7280; padding-left: 1.25rem; }
.art-sources li { margin-bottom: .625rem; }
.art-sources a { color: var(--eco-green); word-break: break-word; }

/* --- Navigare inapoi --- */
.art-back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--eco-green);
}
.art-back:hover { color: var(--eco-dark); }
.art-back svg { width: 1rem; height: 1rem; }

/* Utilitare Tailwind folosite de paginile de articol, absente din build-ul precompilat. */
.sticky { position: sticky; }
.top-0 { top: 0; }
.pt-16 { padding-top: 4rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pb-12 { padding-bottom: 3rem; }
.mt-20 { margin-top: 5rem; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.5rem * (1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.5rem * var(--tw-space-y-reverse));
}
.art-table th:last-child { text-align: right; }

/* Pe telefoane inguste, numele nu trebuie sa impinga butonul de rezervare */
@media (max-width: 430px) {
    .art-brand { font-size: 1rem; gap: .375rem; }
    .art-brand img { width: 1.5rem; height: 1.5rem; }
}

/* Raspunsul scurt din capul articolului - prima informatie extrasa de motoarele AI */
.art-tldr {
    background: #F4F1EA;
    border: 1px solid #E5DFD1;
    border-left: 4px solid var(--eco-accent);
}
.art-tldr h2, .art-tldr h3 { color: #8A7550; font-size: 1.05rem; margin: 0 0 .9rem; }
.art-tldr ul { list-style: none; padding-left: 0; }
.art-tldr li { position: relative; padding-left: 1.5rem; margin-bottom: .75rem; }
.art-tldr li:last-child { margin-bottom: 0; }
.art-tldr li::before {
    content: "";
    position: absolute;
    left: .25rem;
    top: .7em;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: var(--eco-accent);
}

/* Pe telefon, tabelele scurte trebuie sa incapa fara scroll lateral. */
@media (max-width: 34rem) {
    .art-table { min-width: 0; font-size: .875rem; }
    .art-table th,
    .art-table td { padding: .6rem .5rem .6rem 0; }
    .art-table th:last-child,
    .art-table td:last-child { padding-right: 0; }
}