/**
 * Text A page template — scoped overrides
 *
 * Depends on assets/css/jocelyne-pages.css (loaded for this template via
 * jocelyne_custom_pages_assets() in functions.php). All rules here are
 * namespaced under .page-text-a so they never leak to other pages.
 *
 * Three layout modes driven by a body-level class on the template wrapper:
 *   .layout-none        — plain stacked sections, no box (default)
 *   .layout-all-in-box  — all sections wrapped in one bordered card
 *   .layout-per-section — each <h2> section is its own bordered card
 */

/* ------------------------------------------------------------------
 * Base: remove the H2 underline + slate accent bar from jocelyne-pages.css
 * (rules at jocelyne-pages.css:66-83 do not apply on this template)
 * ------------------------------------------------------------------ */
.jocelyne-page.page-text-a h2 {
    border-bottom: none;
    padding-bottom: 0;
    margin-top: 1rem;
}
.jocelyne-page.page-text-a h2::after {
    display: none;
}

/* Tighten H3 rhythm */
.jocelyne-page.page-text-a h3 {
    margin-top: 1rem;
}

/* Reasonable measure for editorial reading */
.jocelyne-page.page-text-a section .content-wrapper {
    max-width: 80%;
}

/* Shrink the gap between hero and first heading */
.jocelyne-page.page-text-a .jocelyne-hero {
    padding-bottom: 1.5rem;
}
.jocelyne-page.page-text-a .jocelyne-hero + section {
    padding-top: 1.5rem;
}

/* Keep subsequent sections snug with each other */
.jocelyne-page.page-text-a section + section {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

/* Restore generous bottom breathing room on the last section */
.jocelyne-page.page-text-a section:last-child {
    padding-bottom: 4rem;
}

/* ------------------------------------------------------------------
 * Layout: all-in-box
 * Wrap every non-hero section's content area in a single visual card.
 * We achieve "one box" by giving each section's .content-wrapper the same
 * bordered surface and removing inter-section padding so they read as
 * one continuous panel. The first non-hero card gets the top corners,
 * the last card gets the bottom corners, the middle cards have no radius.
 * ------------------------------------------------------------------ */
.jocelyne-page.page-text-a.layout-all-in-box .jocelyne-hero + section .content-wrapper {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-top: 1px solid #e0e0e0;
}
.jocelyne-page.page-text-a.layout-all-in-box section:not(.jocelyne-hero) .content-wrapper {
    background-color: var(--jocelyne-white, #ffffff);
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    padding: 2rem 2.5rem;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}
.jocelyne-page.page-text-a.layout-all-in-box section:not(.jocelyne-hero):last-child .content-wrapper {
    border-bottom: 1px solid #e0e0e0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding-bottom: 2.5rem;
}
.jocelyne-page.page-text-a.layout-all-in-box section + section {
    padding-top: 0;
    padding-bottom: 0;
}
.jocelyne-page.page-text-a.layout-all-in-box section:not(.jocelyne-hero) .container {
    padding-top: 0;
    padding-bottom: 0;
}

/* ------------------------------------------------------------------
 * Layout: per-section
 * Each <h2> section becomes its own bordered card (mirrors the archival
 * tone of .jocelyne-partner-card from jocelyne-pages.css:505-518).
 * ------------------------------------------------------------------ */
.jocelyne-page.page-text-a.layout-per-section section:not(.jocelyne-hero) .content-wrapper {
    background-color: var(--jocelyne-white, #ffffff);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 2rem 2.5rem;
    margin-bottom: 1.25rem;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.jocelyne-page.page-text-a.layout-per-section section:not(.jocelyne-hero) .content-wrapper:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    border-color: var(--jocelyne-slate-light, #b8c5d3);
}

/* ------------------------------------------------------------------
 * Mobile
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .jocelyne-page.page-text-a section .content-wrapper {
        max-width: 100%;
    }
    .jocelyne-page.page-text-a .jocelyne-hero {
        padding-bottom: 1rem;
    }
    .jocelyne-page.page-text-a section + section {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .jocelyne-page.page-text-a.layout-all-in-box section:not(.jocelyne-hero) .content-wrapper,
    .jocelyne-page.page-text-a.layout-per-section section:not(.jocelyne-hero) .content-wrapper {
        padding: 1.25rem 1.5rem;
        max-width: 100%;
    }
}