/* =============================================
   CONTENT GRID SYSTEM
   main.content-grid defines the columns.
   Sections with class="full-width" bleed edge-to-edge.
   Inner content is constrained by padding-inline.
============================================= */

/* ── Fix main ───────────────────────────────── */
main.content-grid {
    contain: none; /* override "contain: layout style" from style.css */
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* ── Grid columns ───────────────────────────── */
.content-grid {
    --padding-inline: 1rem;
    /* --content-max-width inherited from :root in style.css */
    --breakout-max-width: 85ch;
    --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);

    width: 100%;
    display: grid;
    grid-template-columns:
        [full-width-start] minmax(var(--padding-inline), 1fr)
        [breakout-start]   minmax(0, var(--breakout-size))
        [content-start]    min(100% - (var(--padding-inline) * 2), var(--content-max-width))
        [content-end]      minmax(0, var(--breakout-size))
        [breakout-end]     minmax(var(--padding-inline), 1fr)
        [full-width-end];
}

/* Default: content column */
.content-grid > :not(.breakout, .full-width) {
    grid-column: content;
    width: 100%;
    padding-inline: 0;
}

.content-grid > .breakout   { grid-column: breakout; }
.content-grid > .full-width { grid-column: full-width; }


/* =============================================
   FULL-WIDTH SECTIONS
   All sections have class="full-width" in HTML,
   so they span the entire viewport.
   Padding-inline pushes inner content to match
   the content-column boundaries.
============================================= */
.content-grid > .full-width {
    grid-column: full-width;
    width: 100%;
    /* Content stays within --content-max-width via padding */
    padding-inline: max(var(--padding-inline, 1rem), calc((100% - var(--content-max-width, 1500px)) / 2));
    box-sizing: border-box;
}

/* ── Hero is special: nested grid so hero-content
   snaps to the exact content-start column edge ── */
.hero {
    padding-inline: 0 !important; /* grid handles alignment, not padding */

    display: grid;
    grid-template-columns:
        [full-width-start] minmax(var(--padding-inline, 1rem), 1fr)
        [breakout-start]   minmax(0, var(--breakout-size, 0px))
        [content-start]    min(100% - (var(--padding-inline, 1rem) * 2), var(--content-max-width, 1500px))
        [content-end]      minmax(0, var(--breakout-size, 0px))
        [breakout-end]     minmax(var(--padding-inline, 1rem), 1fr)
        [full-width-end];
    align-items: center;
}

.hero-content {
    grid-column: content;
    max-width: 600px;
    position: relative;
    z-index: 2;
    padding-block: 2rem;
    padding-inline: 0;
}

@media (max-width: 768px) {
    .hero-content {
        grid-column: content;
        max-width: 100%;
        text-align: center;
        padding-block: 1.5rem;
    }
}


/* =============================================
   FOOTER
============================================= */
footer {
    grid-column: full-width;
    width: 100%;
}

.footer-content,
.footer-bottom {
    max-width: var(--content-max-width, 1500px);
    margin-inline: auto;
    padding-inline: 1rem;
}


/* =============================================
   SECTION TITLE / SUBTITLE
============================================= */
.section-title {
    display: block;
    text-align: center;
    left: unset;
    transform: unset;
}

.section-title::after {
    left: 50%;
    transform: translateX(-50%);
}

.section-subtitle {
    display: block;
    text-align: center;
}


/* =============================================
   CONTAINER RESET
============================================= */
.container {
    max-width: 100%;
    padding-inline: 0;
    margin: 0;
    width: 100%;
}