/* =========================================================
   BASE — Tipografie, layout, section headers
   ========================================================= */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.container--narrow {
    max-width: 760px;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background:
        radial-gradient(circle at top right, rgba(235, 45, 92, 0.08), transparent 25%),
        linear-gradient(180deg, #ffffff 0%, var(--color-bg) 38%, #ffffff 100%);
}

main {
    position: relative;
}

.section {
    position: relative;
    padding-block: var(--space-section);
}

.section--bg    { background-color: var(--color-bg); }
.section--white { background-color: var(--color-white); }
.section--navy  { background-color: var(--color-navy); }
.section--pink  { background: linear-gradient(135deg, var(--color-pink-dark) 0%, var(--color-pink) 45%, #ff5d83 100%); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-navy);
    letter-spacing: -0.03em;
    text-wrap: balance;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
    font-size: var(--text-base);
    line-height: var(--leading-loose);
    color: var(--color-text-light);
    text-wrap: pretty;
}

p + p { margin-top: var(--space-md); }

a {
    color: var(--color-pink);
    transition: color var(--trans-fast);
}

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

strong { font-weight: var(--weight-bold); }
em     { font-style: italic; }

.section-header {
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
    margin-bottom: var(--space-2xl);
}

.section-header--left {
    text-align: left;
    margin-inline: 0;
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-pink);
    margin-bottom: var(--space-md);
}

.section-label::before {
    content: '';
    width: 2.25rem;
    height: 1px;
    background-color: currentColor;
    opacity: 0.5;
}

.section-title {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    line-height: 1.08;
    color: var(--color-navy);
    margin-bottom: var(--space-md);
}

.section-subtitle {
    max-width: 620px;
    margin-inline: auto;
    font-size: var(--text-lg);
    color: var(--color-text-light);
    line-height: var(--leading-loose);
}

.section--navy .section-title,
.section--navy h2,
.section--navy h3 {
    color: var(--color-white);
}

.section--navy .section-subtitle,
.section--navy p {
    color: rgba(255, 255, 255, 0.72);
}

.section--navy .section-label {
    color: var(--color-pink-light);
}

.section--pink .section-title,
.section--pink h2,
.section--pink h3 {
    color: var(--color-white);
}

.section--pink p,
.section--pink .section-subtitle {
    color: rgba(255, 255, 255, 0.84);
}

.text-pink  { color: var(--color-pink); }
.text-navy  { color: var(--color-navy); }
.text-muted { color: var(--color-navy-40); }
.text-white { color: var(--color-white); }
.text-center{ text-align: center; }

.grid {
    display: grid;
    gap: var(--space-xl);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (min-width: 768px) {
    .grid--2-md { grid-template-columns: repeat(2, 1fr); }
    .grid--3-md { grid-template-columns: repeat(3, 1fr); }
}

.entry-content ul,
.entry-content ol {
    padding-left: var(--space-lg);
    margin-bottom: var(--space-md);
}

.entry-content ul  { list-style: disc; }
.entry-content ol  { list-style: decimal; }
.entry-content li  { margin-bottom: var(--space-sm); line-height: var(--leading-loose); }

/* ── Prose (pagini statice, GDPR) ─────────────────────── */

.prose {
    max-width: 720px;
    font-size: var(--text-base);
    color: var(--color-navy);
    line-height: 1.75;
}

.prose h2 {
    font-family: var(--font-body);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--color-navy);
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-navy-08);
}

.prose h3 {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-sm);
}

.prose p {
    margin-bottom: var(--space-md);
}

.prose ul, .prose ol {
    padding-left: 1.25rem;
    margin-bottom: var(--space-md);
}

.prose li {
    margin-bottom: var(--space-sm);
    line-height: 1.65;
}

.prose a {
    color: var(--color-pink);
    text-decoration: underline;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-lg) 0;
    font-size: var(--text-sm);
}

.prose th {
    text-align: left;
    padding: 0.65rem 0.75rem;
    background: var(--color-bg);
    border-bottom: 2px solid var(--color-navy-08);
    font-weight: var(--weight-semibold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-light);
}

.prose td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--color-navy-08);
    vertical-align: top;
}

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

@media (max-width: 639px) {
    .prose {
        font-size: var(--text-sm);
    }

    .prose table {
        font-size: var(--text-xs);
    }

    .prose th,
    .prose td {
        padding: 0.5rem 0.6rem;
    }
}