/* ============================================================
   SECTIONS — koji-academy-theme/css/sections.css
   Section containers, bands, layout utilities
   ============================================================ */

/* Base section */
.section {
    padding-block: var(--space-xl);
}

/* Section variants */
.section--alt {
    background-color: var(--color-bg-alt);
}
.section--dark {
    background-color: var(--color-bg-dark);
    color: #fff;
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
    color: #fff;
}
.section--dark p {
    color: rgba(255,255,255,0.85);
}
.section--dark .section-heading__label {
    color: var(--color-soft-teal);
}

/* Colour band variants */
.band--sky  { background-color: rgba(123,170,184,0.12); }
.band--sage { background-color: rgba(106,140,128,0.12); }
.band--sand { background-color: rgba(196,180,154,0.12); }

/* Container */
.container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-sm);
}
@media (min-width: 768px) {
    .container {
        padding-inline: var(--space-md);
    }
}

/* Two column grid layout */
.two-col-grid {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
}
@media (min-width: 901px) {
    .two-col-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .two-col-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
}

/* Two col — image left, content right */
.two-col-grid--img-left img {
    border-radius: var(--radius-xl);
    width: 100%;
    height: auto;
}

/* Two col — content left, image right */
.two-col-grid--img-right {
    direction: ltr;
}
@media (min-width: 768px) {
    .two-col-grid--img-right {
        grid-template-columns: 1fr 1fr;
    }
    .two-col-grid--img-right img {
        order: 2;
    }
    .two-col-grid--img-right .two-col-grid__content {
        order: 1;
    }
}
.two-col-grid--img-right img {
    border-radius: var(--radius-xl);
    width: 100%;
    height: auto;
}

/* CTA band — centred text and button */
.cta-band {
    text-align: center;
}
.cta-band h2 {
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: var(--space-sm);
}
.cta-band p {
    font-size: var(--text-lg);
    color: var(--color-muted);
    max-width: 52ch;
    margin-inline: auto;
    margin-bottom: var(--space-md);
}
.section--dark .cta-band p {
    color: rgba(255,255,255,0.85);
}

/* Intro band — centred heading + text, no cards */
.intro-band {
    max-width: 800px;
    margin-inline: auto;
    text-align: center;
}
.intro-band p {
    font-size: var(--text-lg);
    color: var(--color-muted);
    margin-inline: auto;
}

/* Placeholder image block — used before real images are set */
.img-placeholder {
    background: var(--color-sky-blue);
    border-radius: var(--radius-xl);
    opacity: 0.3;
    width: 100%;
}


@media (max-width: 600px) {

	.two-col-grid img {
    	border-radius: var(--radius-md) !important;
    }

}