/* =====================================================================
   LAYOUT - Containers, Sections, Grids, Hero, CTA
   ===================================================================== */

/* ==========================================
   CONTAINERS
   ========================================== */

.container {
    width: 100%;
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

@media (min-width: 640px) {
    .container {
        padding: 0 var(--space-6);
    }
}

@media (min-width: 768px) {
    .container {
        padding: 0 var(--space-8);
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 0 var(--space-8);
    }
}

/* Container Sizes */
.container-sm {
    max-width: var(--container-sm);
}

.container-md {
    max-width: var(--container-md);
}

.container-lg {
    max-width: var(--container-lg);
}

.container-2xl {
    max-width: var(--container-2xl);
}

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

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

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

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

/* Section Container (combines container + section padding) */
.section-container {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

@media (min-width: 640px) {
    .section-container {
        padding: 0 var(--space-8);
    }
}

@media (min-width: 768px) {
    .section-container {
        padding: 0 var(--space-12);
    }
}

@media (min-width: 1024px) {
    .section-container {
        padding: 0 var(--space-8);
    }
}

/* Section Headers */
.section-title {
    font-size: var(--text-3xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-4);
    color: var(--color-text);
}

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

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

.section-subtitle {
    font-size: var(--text-md);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-12) 0;
    text-align: center;
}

.section-description {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    line-height: var(--leading-loose);
    margin-bottom: var(--space-8);
}

@media (min-width: 768px) {
    .section-description {
        font-size: var(--text-md);
    }
}

/* Section Alternate Background */
.section-alt {
    background: var(--color-bg-elevated);
}

/* ==========================================
   HERO SECTION
   ========================================== */

.hero-section {
    padding: var(--space-20) 0 var(--space-16);
    position: relative;
}

@media (min-width: 768px) {
    .hero-section {
        padding: var(--space-32) 0 var(--space-24);
    }
}

@media (min-width: 1024px) {
    .hero-section {
        padding: 10rem 0 var(--space-32);
    }
}

@media (min-width: 1280px) {
    .hero-section {
        padding: 12rem 0 10rem;
    }
}

.hero-container {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

@media (min-width: 640px) {
    .hero-container {
        padding: 0 var(--space-8);
    }
}

@media (min-width: 768px) {
    .hero-container {
        padding: 0 var(--space-12);
    }
}

@media (min-width: 1024px) {
    .hero-container {
        padding: 0 var(--space-8);
    }
}

.hero-text {
    max-width: 100%;
    margin: 0;
    padding: 0 var(--space-2);
}

@media (min-width: 768px) {
    .hero-text {
        max-width: 42rem;
        margin: 0 auto;
        padding: 0 var(--space-4);
    }
}

@media (min-width: 1024px) {
    .hero-text {
        margin: 0 auto;
        max-width: 48rem;
        padding: 0;
    }
}

.hero-title {
    font-size: var(--text-4xl);
    font-weight: var(--font-semibold);
    line-height: 1.05;
    letter-spacing: var(--tracking-tighter);
    margin-bottom: var(--space-4);
    color: var(--color-text);
    text-align: center;
    padding: 0 var(--space-1);
}

@media (min-width: 480px) {
    .hero-title {
        font-size: var(--text-4xl);
        padding: 0 var(--space-2);
    }
}

@media (min-width: 768px) {
    .hero-title {
        font-size: var(--text-5xl);
        margin-bottom: var(--space-8);
        padding: 0;
    }
}

@media (min-width: 1024px) {
    .hero-title {
        font-size: var(--text-6xl);
        margin-bottom: var(--space-10);
    }
}

@media (min-width: 1280px) {
    .hero-title {
        font-size: 4.5rem;
    }
}

.hero-description {
    font-size: var(--text-md);
    color: var(--color-text-muted);
    line-height: var(--leading-loose);
    margin-bottom: var(--space-8);
    font-weight: var(--font-normal);
    text-align: center;
    padding: 0 var(--space-1);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .hero-description {
        font-size: var(--text-lg);
        margin-bottom: var(--space-12);
        padding: 0 var(--space-2);
    }
}

@media (min-width: 1024px) {
    .hero-description {
        font-size: var(--text-xl);
        margin-bottom: var(--space-14);
        padding: 0;
    }
}

.hero-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-2);
}

@media (min-width: 480px) {
    .hero-buttons {
        flex-direction: row;
        gap: var(--space-4);
    }
}

@media (min-width: 768px) {
    .hero-buttons {
        padding: 0;
    }
}

/* ==========================================
   CTA SECTION
   ========================================== */

.cta-section {
    padding: var(--space-16) 0;
    text-align: center;
}

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

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

.cta-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.cta-title {
    font-size: var(--text-4xl);
    font-weight: var(--font-semibold);
    color: var(--color-text);
    margin: 0 0 var(--space-4) 0;
    letter-spacing: var(--tracking-tight);
}

.cta-description {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-8) 0;
    line-height: var(--leading-relaxed);
}

/* ==========================================
   GRIDS
   ========================================== */

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}

@media (min-width: 768px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-10);
    }
}

@media (min-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-12);
    }
}

/* Benefits Grid */
.benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 768px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-8);
    }
}

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

/* Use Cases Grid */
.use-cases-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

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

/* Card Grid */
.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

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

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

/* ==========================================
   MOBILE OPTIMIZATIONS
   ========================================== */

@media (max-width: 480px) {
    .hero-title {
        font-size: var(--text-3xl);
        line-height: 1.05;
    }

    .hero-description {
        font-size: var(--text-base);
        line-height: var(--leading-relaxed);
    }

    .section-title {
        font-size: var(--text-2xl);
        line-height: var(--leading-tight);
    }

    .section-description {
        font-size: var(--text-sm);
        line-height: var(--leading-relaxed);
    }

    .hero-section {
        padding: var(--space-16) 0 var(--space-12);
    }

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

    .cta-section {
        padding: var(--space-16) 0;
    }
}

/* ==========================================
   PRINT STYLES
   ========================================== */

@media print {
    .hero-section,
    .section {
        padding: var(--space-8) 0;
    }

    .hero-title,
    .section-title {
        color: var(--color-text);
    }
}