/* ============================================
   LAYOUT SYSTEM
   CSS Grid, Subgrid, and Container Queries
   ============================================ */

/* ========== BASE CONTAINER ========== */
.container {
    width: 90%;
    max-width: var(--container-xl, 1200px);
    margin-inline: auto;
    padding-inline: var(--space-4, 1rem);
}

/* Container query context */
.container {
    container-type: inline-size;
    container-name: main;
}

/* ========== MAIN GRID LAYOUT ========== */
.rot-grid {
    display: grid;
    gap: var(--space-8, 2rem);
    grid-template-columns: repeat(12, 1fr);
}

/* Subgrid support for nested layouts */
@supports (grid-template-columns: subgrid) {
    .rot-grid>.rot-subgrid {
        display: grid;
        grid-template-columns: subgrid;
    }
}

/* ========== FEATURE GRID ========== */
.features-grid {
    container-type: inline-size;
    container-name: features;
    display: grid;
    gap: var(--space-8, 2rem);
    grid-template-columns: 1fr;
}

@container features (min-width: 500px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container features (min-width: 800px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========== GALLERY GRID ========== */
.gallery-grid {
    container-type: inline-size;
    container-name: gallery;
    display: grid;
    gap: var(--space-8, 2rem);
    grid-template-columns: 1fr;
}

@container gallery (min-width: 400px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container gallery (min-width: 700px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========== TESTIMONIALS GRID ========== */
.testimonials-grid {
    container-type: inline-size;
    container-name: testimonials;
    display: grid;
    gap: var(--space-8, 2rem);
    grid-template-columns: 1fr;
}

@container testimonials (min-width: 500px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container testimonials (min-width: 800px) {
    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========== STORY LAYOUT ========== */
.story-content {
    container-type: inline-size;
    container-name: story;
    display: flex;
    flex-direction: column;
    gap: var(--space-8, 2rem);
}

@container story (min-width: 700px) {
    .story-content {
        flex-direction: row;
        align-items: center;
    }

    .story-content img {
        flex: 0 0 45%;
        max-width: 500px;
    }

    .story-text {
        flex: 1;
    }
}

/* ========== HERO LAYOUT ========== */
.hero {
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    /* Dynamic viewport height */
}

.hero-content {
    container-type: inline-size;
    container-name: hero;
    text-align: center;
    max-width: 800px;
}

@container hero (max-width: 500px) {
    .hero-content h1 {
        font-size: var(--text-2xl);
    }

    .hero-content p {
        font-size: var(--text-base);
    }
}

/* ========== CTA LAYOUTS ========== */
.cta,
.final-cta {
    display: grid;
    place-items: center;
    min-height: 60vh;
}

.cta-content,
.final-content {
    container-type: inline-size;
    container-name: cta;
    text-align: center;
    max-width: 700px;
}

/* ========== SOCIAL LINKS ========== */
.social-links {
    container-type: inline-size;
    container-name: social;
    display: flex;
    gap: var(--space-6, 1.5rem);
    justify-content: center;
    flex-wrap: wrap;
}

@container social (max-width: 400px) {
    .social-links {
        flex-direction: column;
        align-items: center;
        gap: var(--space-4, 1rem);
    }

    .social-btn {
        width: 100%;
        max-width: 200px;
        text-align: center;
    }
}

/* ========== UTILITY GRID CLASSES ========== */
.rot-cols-1 {
    grid-template-columns: 1fr;
}

.rot-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.rot-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.rot-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Auto-fit responsive grid */
.rot-cols-auto {
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}

/* Span utilities */
.rot-span-full {
    grid-column: 1 / -1;
}

.rot-span-2 {
    grid-column: span 2;
}

.rot-span-3 {
    grid-column: span 3;
}

.rot-span-4 {
    grid-column: span 4;
}

.rot-span-6 {
    grid-column: span 6;
}

/* ========== SECTION SPACING ========== */
.rot-section {
    padding-block: var(--space-16, 4rem);
}

.rot-section-lg {
    padding-block: var(--space-24, 6rem);
}

/* ========== BREAKPOINT FALLBACKS ========== */
/* For browsers without container query support */
@supports not (container-type: inline-size) {
    @media (min-width: 768px) {

        .features-grid,
        .gallery-grid,
        .testimonials-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (min-width: 1024px) {

        .features-grid,
        .gallery-grid,
        .testimonials-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (min-width: 768px) {
        .story-content {
            flex-direction: row;
            align-items: center;
        }
    }
}