/**
 * Rich content section — namespace .ps-rich-section
 */

.ps-rich-section {
    position: relative;
    overflow: hidden;
}

.ps-rich-section--bg-white {
    background: var(--white);
}

.ps-rich-section--bg-light {
    background: var(--gray-50);
}

.ps-rich-section--bg-none {
    background: transparent;
}

.ps-rich-section--space-compact {
    padding-top: 40px;
    padding-bottom: 40px;
}

.ps-rich-section--space-default {
    padding-top: 64px;
    padding-bottom: 64px;
}

.ps-rich-section--space-spacious {
    padding-top: 50px;
    padding-bottom: 50px;
}

.ps-rich-section__inner {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-padding-x);
    padding-right: var(--page-padding-x);
}

/* Вирівняно з .layout-container (default) та ширшими рядами як у top-bar (1229px). */
.ps-rich-section--width-narrow .ps-rich-section__inner {
    max-width: 40rem;
}

.ps-rich-section--width-default .ps-rich-section__inner {
    max-width: var(--container-max);
}

.ps-rich-section--width-wide .ps-rich-section__inner {
    max-width: 1229px;
}

.ps-rich-section--align-left .ps-rich-section__inner {
    text-align: left;
}

.ps-rich-section--align-center .ps-rich-section__eyebrow,
.ps-rich-section--align-center .ps-rich-section__title,
.ps-rich-section--align-center .ps-rich-section__lead,
.ps-rich-section--align-center .ps-rich-section__actions {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.ps-rich-section--align-center .ps-rich-section__title {
    max-width: 48rem;
}

.ps-rich-section--align-center .ps-rich-section__lead {
    max-width: 40rem;
}

.ps-rich-section__eyebrow {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: uppercase;
    color: var(--gray-500);
}

.ps-rich-section__title {
    margin: 0 0 16px;
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: normal;
    color: var(--color-secondary);
}

.ps-rich-section__lead {
    margin: 0 0 28px;
    font-size: 18px;
    line-height: 1.65;
    color: var(--gray-600);
    max-width: 48rem;
}

.ps-rich-section--align-center .ps-rich-section__content {
    text-align: left;
}

.ps-rich-section__content {
    font-size: var(--text-base-size);
    line-height: var(--text-base-line);
    color: var(--gray-700);
}

.ps-rich-section__content > *:first-child {
    margin-top: 0;
}

.ps-rich-section__content > *:last-child {
    margin-bottom: 0;
}

.ps-rich-section__content h2 {
    margin: 2rem 0 0.75rem;
    font-size: var(--text-3xl-size);
    font-weight: 700;
    color: var(--color-secondary);
    line-height: 1.2;
}

.ps-rich-section__content h3 {
    margin: 1.75rem 0 0.6rem;
    font-size: var(--text-xl-size);
    font-weight: 700;
    color: var(--color-secondary);
}

.ps-rich-section__content h4 {
    margin: 1.5rem 0 0.5rem;
    font-size: var(--text-lg-size);
    font-weight: 700;
    color: var(--gray-800);
}

.ps-rich-section__content p {
    margin: 0 0 1rem;
}

.ps-rich-section__content ul,
.ps-rich-section__content ol {
    margin: 0 0 1.25rem;
    padding-left: 1.35rem;
}

.ps-rich-section__content li {
    margin-bottom: 0.45rem;
}

.ps-rich-section__content li > ul,
.ps-rich-section__content li > ol {
    margin-top: 0.45rem;
    margin-bottom: 0.45rem;
}

.ps-rich-section__content blockquote {
    margin: 1.5rem 0;
    padding: 16px 20px 16px 20px;
    border-left: 4px solid rgba(246, 193, 46, 0.45);
    background: rgba(249, 250, 251, 0.85);
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: var(--gray-600);
}

.ps-rich-section__content a {
    color: var(--color-secondary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ps-rich-section__content a:hover {
    color: var(--color-blue-dark);
}

.ps-rich-section__content strong {
    font-weight: 700;
    color: var(--gray-900);
}

.ps-rich-section__actions {
    margin-top: 32px;
}

.ps-rich-section--align-center .ps-rich-section__actions {
    display: flex;
    justify-content: center;
}

@media (max-width: 639px) {
    .ps-rich-section--space-default {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .ps-rich-section--space-spacious {
        padding-top: 30px;
        padding-bottom: 30px;
    }
}