/* =========================================================
   PAGE.PHP — Pagini generice (confidențialitate, termeni etc.)
   ========================================================= */

/* ── Hero ───────────────────────────────────────────────── */

.page-hero {
    background-color: var(--color-navy);
    padding-block: 4rem 3.5rem;
    text-align: center;
}

.page-hero__inner {
    max-width: 680px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
}

.page-hero__label {
    color: var(--color-pink-light);
    margin-bottom: 0;
}

.page-hero__title {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: var(--weight-extrabold);
    color: var(--color-white);
    line-height: var(--leading-snug);
}

.page-hero__meta {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.45);
}

/* ── Conținut ───────────────────────────────────────────── */

.page-body {
    background-color: var(--color-white);
}

.page-featured-img {
    max-width: 860px;
    margin-inline: auto;
    margin-bottom: var(--sp-12);
    border-radius: var(--radius-card-lg);
    overflow: hidden;
}

.page-featured-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* Entry content tipografie */
.page-entry {
    max-width: 760px;
    margin-inline: auto;
    font-size: var(--text-base);
    line-height: var(--leading-loose);
    color: var(--color-navy);
}

.page-entry h2 {
    font-size: var(--text-2xl);
    font-weight: var(--weight-extrabold);
    color: var(--color-navy);
    line-height: var(--leading-snug);
    margin-top: var(--sp-10);
    margin-bottom: var(--sp-4);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--color-navy-08);
}

.page-entry h2:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.page-entry h3 {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-navy);
    margin-top: var(--sp-8);
    margin-bottom: var(--sp-3);
}

.page-entry h4 {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-navy);
    margin-top: var(--sp-6);
    margin-bottom: var(--sp-2);
}

.page-entry p {
    color: var(--color-navy);
    opacity: 0.82;
    margin-bottom: var(--sp-5);
}

.page-entry p:last-child {
    margin-bottom: 0;
}

.page-entry a {
    color: var(--color-pink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.page-entry a:hover {
    color: var(--color-pink-dark);
}

.page-entry ul,
.page-entry ol {
    padding-left: var(--sp-6);
    margin-bottom: var(--sp-6);
    color: var(--color-navy);
    opacity: 0.82;
}

.page-entry ul { list-style: disc; }
.page-entry ol { list-style: decimal; }

.page-entry li {
    margin-bottom: var(--sp-2);
    line-height: var(--leading-loose);
}

.page-entry blockquote {
    border-left: 3px solid var(--color-pink);
    padding: var(--sp-5) var(--sp-6);
    background-color: var(--color-bg);
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    margin-block: var(--sp-8);
}

.page-entry blockquote p {
    font-size: var(--text-lg);
    font-style: italic;
    opacity: 1;
    margin-bottom: 0;
}

.page-entry img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-card);
    display: block;
    margin-block: var(--sp-8);
}

.page-entry hr {
    border: none;
    border-top: 1px solid var(--color-navy-08);
    margin-block: var(--sp-10);
}

.page-entry table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--sp-8);
    font-size: var(--text-sm);
}

.page-entry th {
    background-color: var(--color-navy);
    color: var(--color-white);
    font-weight: var(--weight-medium);
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
}

.page-entry td {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--color-navy-08);
    color: var(--color-navy);
    opacity: 0.82;
}

.page-entry tr:last-child td {
    border-bottom: none;
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 768px) {
    .page-hero__title {
        font-size: var(--text-3xl);
    }

    .page-entry table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .page-entry th,
    .page-entry td {
        min-width: 10rem;
    }
}