/* ===================================================================
   FIGMA RESPONSIVE - Mobile & Tablet Adjustments
   =================================================================== */

/* ===== TABLET (≤ 1200px) ===== */
@media (max-width: 1200px) {
    /* Hero */
    .figma-hero {
        min-height: 800px;
    }
    
    .figma-hero-title {
        font-size: 72px;
        line-height: 88px;
    }
    
    /* Navbar */
    .figma-navbar {
        padding: 16px 32px !important;
    }
    
    /* Sections */
    .figma-section {
        padding: 32px;
    }
    
    /* Stats grid */
    .figma-stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
    
    /* Footer */
    .figma-footer-content {
        gap: 48px;
    }
}

/* ===== TABLET SMALL (≤ 992px) ===== */
@media (max-width: 992px) {
    /* Hero */
    .figma-hero {
        min-height: 600px;
    }
    
    .figma-hero-title {
        font-size: 56px;
        line-height: 68px;
    }
    
    .figma-hero-content {
        padding: 32px;
    }
    
    /* Navbar collapse to mobile menu */
    .figma-navbar .navbar-collapse {
        background: rgba(0, 0, 0, 0.95);
        padding: 16px;
        border-radius: var(--figma-radius-md);
        margin-top: 16px;
    }
    
    .figma-navbar .nav-link {
        padding: 12px !important;
    }
    
    /* Stats grid */
    .figma-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    /* Footer stack */
    .figma-footer-content {
        flex-direction: column;
        gap: 32px;
    }
}

/* ===== MOBILE (≤ 768px) ===== */
@media (max-width: 768px) {
    /* Hero */
    .figma-hero {
        min-height: 500px;
    }
    
    .figma-hero-title {
        font-size: 40px;
        line-height: 48px;
    }
    
    .figma-hero-content {
        padding: 24px;
        gap: 32px;
    }
    
    /* Navbar */
    .figma-navbar {
        padding: 12px 24px !important;
    }
    
    .figma-navbar .navbar-brand img {
        width: 120px;
        height: 38px;
    }
    
    /* Sections */
    .figma-section {
        padding: 24px;
    }
    
    .figma-section-title {
        font-size: 32px;
        line-height: 39px;
    }
    
    /* Cards */
    .figma-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
        gap: 16px;
    }
    
    .figma-card-title {
        font-size: 24px;
        line-height: 29px;
    }
    
    .figma-card-description,
    .figma-card-link {
        font-size: 16px;
        line-height: 20px;
    }
    
    /* Stats */
    .figma-stats-container {
        padding: 24px;
        gap: 24px;
    }
    
    .figma-stats-title {
        font-size: 24px;
        line-height: 29px;
    }
    
    .figma-stats-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .figma-stat-tile {
        padding: 16px;
    }
    
    /* Progress */
    .figma-progress-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .figma-progress-stats {
        align-items: flex-start;
    }
    
    .figma-progress-footer {
        flex-direction: column;
        align-items: flex-start;
    }
    
    /* Buttons */
    .figma-btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Footer */
    .figma-footer {
        padding: 32px 24px;
    }
    
    .figma-footer-brand {
        font-size: 24px;
        line-height: 32px;
    }
    
    .figma-footer-heading {
        font-size: 20px;
        line-height: 24px;
    }
    
    .figma-footer-text {
        font-size: 16px;
        line-height: 20px;
    }
}

/* ===== MOBILE SMALL (≤ 480px) ===== */
@media (max-width: 480px) {
    /* Hero */
    .figma-hero-title {
        font-size: 32px;
        line-height: 39px;
    }
    
    /* Navbar brand */
    .figma-navbar .navbar-brand {
        flex-direction: column;
        gap: 12px;
    }
    
    /* Buttons */
    .figma-btn-primary,
    .figma-btn-secondary,
    .figma-navbar .btn-join {
        padding: 12px 24px !important;
        font-size: 16px !important;
    }
    
    /* Stats */
    .figma-tabs {
        flex-direction: column;
        width: 100%;
    }
    
    .figma-tab {
        width: 100%;
    }
    
    /* Cards */
    .figma-card-icon {
        width: 48px;
        height: 48px;
    }
    
    .figma-card-icon svg,
    .figma-card-icon i {
        width: 32px;
        height: 32px;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .figma-navbar,
    .figma-btn,
    .figma-scroll-pointer {
        display: none !important;
    }
    
    .figma-hero {
        min-height: auto;
        background: none !important;
    }
    
    .figma-section {
        padding: 16px 0;
    }
    
    .figma-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}