/* ==============================================
   GET School Global — Layout System
   Container, Grid, Typography utilities
   ============================================== */

/* ==================== */
/* CONTAINER            */
/* ==================== */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    padding-left: max(var(--container-padding), env(safe-area-inset-left));
    padding-right: max(var(--container-padding), env(safe-area-inset-right));
}

/* ==================== */
/* SECTIONS             */
/* ==================== */

.section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}

.section--cream {
    background:
        /* Gradiente diagonal */
        linear-gradient(135deg,
            rgba(245, 197, 24, 0.25) 0%,
            rgba(245, 197, 24, 0.08) 25%,
            transparent 50%,
            rgba(245, 197, 24, 0.05) 75%,
            rgba(245, 197, 24, 0.2) 100%),
        var(--color-cream);
}

/* Seção com fundo branco + gradiente dourado */
.section--gradient {
    background:
        /* Gradiente diagonal mais intenso */
        linear-gradient(125deg,
            rgba(245, 197, 24, 0.35) 0%,
            rgba(245, 197, 24, 0.12) 20%,
            transparent 45%,
            rgba(245, 197, 24, 0.08) 80%,
            rgba(245, 197, 24, 0.28) 100%),
        var(--color-white);
}

.section--white {
    background-color: var(--color-white);
}

.section--dark {
    background-color: var(--color-black);
    color: var(--color-white);
}

/* Section header */
.section__overline {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-4);
}

.section__headline {
    font-size: var(--text-3xl);
    font-weight: var(--font-medium);
    line-height: 1.25;
    color: var(--color-black);
    margin-bottom: var(--space-6);
}

.section__subtitle {
    font-size: var(--text-lg);
    font-weight: var(--font-regular);
    line-height: var(--leading-relaxed);
    color: var(--color-gray-700);
    max-width: 720px;
}

.section__header {
    margin-bottom: var(--space-12);
}

.section__header--center {
    text-align: center;
}

.section__header--center .section__subtitle {
    margin-left: auto;
    margin-right: auto;
}

/* ==================== */
/* GRID SYSTEM          */
/* ==================== */

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

/* Courses grid: 1 → 2 → 3 cols */
.grid-courses {
    grid-template-columns: 1fr;
}

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

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

/* Info cards grid: 1 → 2 cols, or 1 → 2 → 4 cols */
.grid-info {
    grid-template-columns: 1fr;
}

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

/* "Para Quem É" grid: 1 → 2 → 3 on large (5 cards, last row centered) */
.grid-audience {
    grid-template-columns: 1fr;
}

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

@media (min-width: 1024px) {
    .grid-audience {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .grid-audience>* {
        width: calc((100% - 2 * var(--space-6)) / 3);
    }
}

/* How it works grid: 1 → 2 → 4 cols */
.grid-how {
    grid-template-columns: 1fr;
}

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

@media (min-width: 1024px) {
    .grid-how {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==================== */
/* TYPOGRAPHY UTILITIES */
/* ==================== */

/* Display */
.text-display {
    font-size: var(--text-4xl);
    font-weight: var(--font-light);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-black);
}

@media (min-width: 768px) {
    .text-display {
        font-size: var(--text-5xl);
    }
}

@media (min-width: 1024px) {
    .text-display {
        font-size: var(--text-7xl);
    }
}

/* Heading 1 */
.text-h1 {
    font-size: var(--text-3xl);
    font-weight: var(--font-medium);
    line-height: var(--leading-tight);
    letter-spacing: -0.01em;
    color: var(--color-black);
}

@media (min-width: 768px) {
    .text-h1 {
        font-size: var(--text-4xl);
    }
}

@media (min-width: 1024px) {
    .text-h1 {
        font-size: var(--text-5xl);
    }
}

/* Heading 2 */
.text-h2 {
    font-size: var(--text-2xl);
    font-weight: var(--font-medium);
    line-height: 1.25;
    color: var(--color-black);
}

@media (min-width: 768px) {
    .text-h2 {
        font-size: var(--text-3xl);
    }
}

/* Heading 3 */
.text-h3 {
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    line-height: 1.3;
    color: var(--color-black);
}

@media (min-width: 768px) {
    .text-h3 {
        font-size: var(--text-2xl);
    }
}

/* Body Large */
.text-body-lg {
    font-size: var(--text-lg);
    font-weight: var(--font-regular);
    line-height: var(--leading-relaxed);
    color: var(--color-gray-700);
}

@media (min-width: 768px) {
    .text-body-lg {
        font-size: var(--text-xl);
    }
}

/* Body */
.text-body {
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    line-height: var(--leading-relaxed);
    color: var(--color-gray-700);
}

/* Caption / Overline */
.text-caption {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: 1.4;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==================== */
/* RESPONSIVE SECTION   */
/* ==================== */

@media (min-width: 768px) {
    .section {
        padding-top: var(--space-20);
        padding-bottom: var(--space-20);
    }

    .section__headline {
        font-size: var(--text-4xl);
    }
}

@media (min-width: 1024px) {
    .section {
        padding-top: var(--space-24);
        padding-bottom: var(--space-24);
    }
}

/* ==================== */
/* SCROLL ANIMATIONS    */
/* ==================== */

.fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children */
.fade-in-stagger>* {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in-stagger.is-visible>*:nth-child(1) {
    transition-delay: 0s;
    opacity: 1;
    transform: translateY(0);
}

.fade-in-stagger.is-visible>*:nth-child(2) {
    transition-delay: 0.1s;
    opacity: 1;
    transform: translateY(0);
}

.fade-in-stagger.is-visible>*:nth-child(3) {
    transition-delay: 0.2s;
    opacity: 1;
    transform: translateY(0);
}

.fade-in-stagger.is-visible>*:nth-child(4) {
    transition-delay: 0.3s;
    opacity: 1;
    transform: translateY(0);
}

.fade-in-stagger.is-visible>*:nth-child(5) {
    transition-delay: 0.4s;
    opacity: 1;
    transform: translateY(0);
}

.fade-in-stagger.is-visible>*:nth-child(6) {
    transition-delay: 0.5s;
    opacity: 1;
    transform: translateY(0);
}

.fade-in-stagger.is-visible>*:nth-child(7) {
    transition-delay: 0.6s;
    opacity: 1;
    transform: translateY(0);
}

.fade-in-stagger.is-visible>*:nth-child(8) {
    transition-delay: 0.7s;
    opacity: 1;
    transform: translateY(0);
}

.fade-in-stagger.is-visible>*:nth-child(9) {
    transition-delay: 0.8s;
    opacity: 1;
    transform: translateY(0);
}

.fade-in-stagger.is-visible>*:nth-child(10) {
    transition-delay: 0.9s;
    opacity: 1;
    transform: translateY(0);
}