/**
 * SPORT SPORT - Responsive Styles
 */

/* ========================================
   Large Screens (max-width: 1200px)
   ======================================== */
@media (max-width: 1200px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    .footer-brand {
        grid-column: 1 / -1;
        margin-bottom: var(--spacing-8);
    }
    
    /* Football Field */
    .penalty-area {
        width: 18%;
    }
    
    .penalty-arc {
        width: 70px;
        height: 70px;
    }
    
    .penalty-area.left .penalty-arc {
        right: -35px;
    }
    
    .penalty-area.right .penalty-arc {
        left: -35px;
    }
}

/* ========================================
   Medium Screens (max-width: 992px)
   ======================================== */
@media (max-width: 992px) {
    :root {
        --text-5xl: 2.5rem;
        --text-4xl: 2rem;
        --text-3xl: 1.5rem;
    }
    
    .section {
        padding: var(--spacing-16) 0;
    }
    
    /* Navigation */
    .main-nav {
        display: none;
    }
    
    .header-actions .btn {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    /* Football Field */
    .field-lines {
        top: 4%;
        left: 4%;
        width: 92%;
        height: 92%;
    }
    
    .penalty-area {
        width: 20%;
        height: 55%;
    }
    
    .goal-area {
        width: 40%;
        height: 30%;
    }
    
    .center-circle {
        width: min(18%, 120px);
        padding-bottom: min(18%, 120px);
    }
    
    .penalty-arc {
        width: 60px;
        height: 60px;
    }
    
    .penalty-area.left .penalty-arc {
        right: -30px;
    }
    
    .penalty-area.right .penalty-arc {
        left: -30px;
    }
    
    .field-content .hero-quote {
        padding: var(--spacing-3);
        font-size: clamp(0.8rem, 1.8vw, 1rem);
    }
    
    /* About */
    .about-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-10);
    }
    
    .about-image {
        order: -1;
    }
    
    .about-experience {
        bottom: -20px;
        left: 20px;
        padding: var(--spacing-4);
    }
    
    .about-experience .years {
        font-size: var(--text-3xl);
    }
    
    /* Values */
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Services */
    .services-grid {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin: 0 auto;
    }
    
    /* Projects */
    .projects-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }
    
    /* Partners */
    .partners-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }
    
    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-8);
    }
    
    .footer-bottom .container {
        flex-direction: column;
        gap: var(--spacing-4);
        text-align: center;
    }
}

/* ========================================
   Small Screens (max-width: 768px)
   ======================================== */
@media (max-width: 768px) {
    :root {
        --text-5xl: 2rem;
        --text-4xl: 1.75rem;
        --text-3xl: 1.375rem;
        --text-2xl: 1.25rem;
    }
    
    .container {
        padding: 0 var(--spacing-4);
    }
    
    .section {
        padding: var(--spacing-12) 0;
    }
    
    .section-header {
        margin-bottom: var(--spacing-10);
    }
    
    /* ========================================
       Sports Fields - Mobile (Show Center Area)
       ======================================== */
    
    /* Football Field - Mobile */
    .football-field .field-lines {
        width: 120vw;
        height: calc(120vw / 1.544);
        /* Keep centered but zoom in to show center area */
    }
    
    .football-field .boundary,
    .football-field .center-line,
    .football-field .center-circle,
    .football-field .penalty-area,
    .football-field .goal-area,
    .football-field .penalty-arc,
    .football-field .corner-arc {
        border-width: 2px;
    }
    
    .football-field .center-spot,
    .football-field .penalty-spot {
        width: 6px;
        height: 6px;
    }
    
    /* Basketball Court - Mobile */
    .basketball-court .court-lines {
        width: 130vw;
        height: calc(130vw / 1.88);
    }
    
    .basketball-court .boundary,
    .basketball-court .center-line,
    .basketball-court .center-circle,
    .basketball-court .three-point-area::before,
    .basketball-court .key-area,
    .basketball-court .free-throw-circle {
        border-width: 2px;
    }
    
    .basketball-court .basket {
        width: 8px;
        height: 8px;
    }
    
    /* Tennis Court - Mobile */
    .tennis-court .court-lines {
        width: 140vw;
        height: calc(140vw / 2.167);
    }
    
    .tennis-court .boundary,
    .tennis-court .doubles-alley,
    .tennis-court .service-box,
    .tennis-court .center-service-line,
    .tennis-court .baseline-center {
        border-width: 2px;
    }
    
    .tennis-court .net {
        width: 3px;
    }
    
    /* Volleyball Court - Mobile */
    .volleyball-court .court-lines {
        width: 130vw;
        height: calc(130vw / 2);
    }
    
    .volleyball-court .boundary,
    .volleyball-court .center-line,
    .volleyball-court .attack-line {
        border-width: 3px;
    }
    
    .volleyball-court .net {
        width: 4px;
    }
    
    /* Field Content - Mobile */
    .field-content {
        padding: var(--spacing-4);
        width: 95%;
    }
    
    .field-content .hero-title {
        font-size: clamp(1.8rem, 7vw, 2.5rem);
        margin-bottom: var(--spacing-2);
    }
    
    .field-content .hero-tagline {
        font-size: clamp(0.9rem, 2vw, 1.1rem);
        margin-bottom: var(--spacing-3);
    }
    
    .field-content .hero-quote {
        padding: var(--spacing-3);
        font-size: clamp(0.75rem, 1.6vw, 0.9rem);
        margin-bottom: var(--spacing-4);
        line-height: 1.6;
    }
    
    .field-content .btn-primary {
        padding: var(--spacing-3) var(--spacing-6);
        font-size: var(--text-sm);
    }
    
    /* Field Indicators - Mobile */
    .field-indicators {
        bottom: calc(var(--spacing-4) + 50px);
        gap: var(--spacing-2);
    }
    
    .field-indicators .indicator {
        width: 10px;
        height: 10px;
    }
    
    .hero-field .hero-scroll-indicator {
        bottom: var(--spacing-4);
    }
    
    .hero-field .hero-scroll-indicator span {
        width: 24px;
        height: 40px;
    }
    
    /* Hero */
    .hero {
        min-height: 80vh;
    }
    
    .hero-content {
        padding: var(--spacing-4);
    }
    
    .hero-services {
        flex-direction: column;
        gap: var(--spacing-2);
    }
    
    .hero-scroll-indicator {
        display: none;
    }
    
    /* Values */
    .values-grid {
        grid-template-columns: 1fr;
    }
    
    .value-card {
        padding: var(--spacing-6);
    }
    
    .value-icon {
        width: 60px;
        height: 60px;
        margin-bottom: var(--spacing-4);
    }
    
    .value-icon i {
        width: 28px;
        height: 28px;
    }
    
    /* Services */
    .service-image {
        height: 200px;
    }
    
    .service-content {
        padding: var(--spacing-6);
    }
    
    /* Projects */
    .project-card {
        padding: var(--spacing-6);
    }
    
    .project-icon {
        width: 60px;
        height: 60px;
        margin-bottom: var(--spacing-4);
    }
    
    /* Ambassadors */
    .ambassador-card {
        flex: 0 0 150px;
    }
    
    .ambassador-image {
        width: 100px;
        height: 100px;
    }
    
    /* Partners */
    .partner-card {
        padding: var(--spacing-6);
    }
    
    /* CTA */
    .section-cta {
        padding: var(--spacing-12) 0;
    }
    
    .cta-content h2 {
        font-size: var(--text-2xl);
    }
    
    .cta-content p {
        font-size: var(--text-base);
    }
    
    /* Footer */
    .footer-main {
        padding: var(--spacing-12) 0;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
    }
    
    .footer-brand {
        text-align: center;
    }
    
    .footer-social {
        justify-content: center;
    }
    
    .footer-links,
    .footer-contact {
        text-align: center;
    }
    
    .contact-item {
        justify-content: center;
    }
    
    /* Page Header */
    .page-header {
        padding: var(--spacing-16) 0 var(--spacing-10);
        margin-top: 70px;
    }
    
    .page-header h1 {
        font-size: var(--text-3xl);
    }
    
    .page-header p {
        font-size: var(--text-base);
    }
    
    /* Back to Top */
    .back-to-top {
        width: 44px;
        height: 44px;
        bottom: var(--spacing-4);
        right: var(--spacing-4);
    }
}

/* ========================================
   Extra Small Screens (max-width: 480px)
   ======================================== */
@media (max-width: 480px) {
    :root {
        --text-5xl: 1.75rem;
        --text-4xl: 1.5rem;
        --text-3xl: 1.25rem;
        --text-2xl: 1.125rem;
    }
    
    .header-container {
        padding: var(--spacing-4);
    }
    
    .logo img {
        height: 40px;
    }
    
    .logo-text {
        font-size: var(--text-base);
    }
    
    .btn {
        padding: var(--spacing-3) var(--spacing-6);
        font-size: var(--text-xs);
    }
    
    /* ========================================
       Sports Fields - Extra Small (Zoom to Center)
       ======================================== */
    
    /* Football Field - Focus on center circle */
    .football-field .field-lines {
        width: 160vw;
        height: calc(160vw / 1.544);
    }
    
    .football-field .boundary,
    .football-field .center-line,
    .football-field .center-circle,
    .football-field .penalty-area,
    .football-field .goal-area,
    .football-field .penalty-arc,
    .football-field .corner-arc {
        border-width: 1.5px;
    }
    
    /* Basketball Court */
    .basketball-court .court-lines {
        width: 170vw;
        height: calc(170vw / 1.88);
    }
    
    .basketball-court .boundary,
    .basketball-court .center-line,
    .basketball-court .center-circle,
    .basketball-court .three-point-area::before,
    .basketball-court .key-area,
    .basketball-court .free-throw-circle {
        border-width: 1.5px;
    }
    
    /* Tennis Court */
    .tennis-court .court-lines {
        width: 180vw;
        height: calc(180vw / 2.167);
    }
    
    .tennis-court .boundary,
    .tennis-court .doubles-alley,
    .tennis-court .service-box {
        border-width: 1.5px;
    }
    
    .tennis-court .net {
        width: 2px;
    }
    
    /* Volleyball Court */
    .volleyball-court .court-lines {
        width: 160vw;
        height: calc(160vw / 2);
    }
    
    .volleyball-court .boundary,
    .volleyball-court .center-line,
    .volleyball-court .attack-line {
        border-width: 2px;
    }
    
    .volleyball-court .net {
        width: 3px;
    }
    
    /* Field Content - Extra Small */
    .field-content {
        padding: var(--spacing-3);
        width: 98%;
    }
    
    .field-content .hero-title {
        font-size: clamp(1.5rem, 6vw, 2rem);
        letter-spacing: 0.05em;
    }
    
    .field-content .hero-tagline {
        font-size: clamp(0.8rem, 1.8vw, 1rem);
        margin-bottom: var(--spacing-2);
    }
    
    .field-content .hero-quote {
        padding: var(--spacing-2);
        font-size: 0.7rem;
        line-height: 1.5;
        margin-bottom: var(--spacing-3);
    }
    
    .field-content .btn-primary {
        padding: var(--spacing-2) var(--spacing-4);
        font-size: 0.7rem;
    }
    
    /* Field Indicators - Extra Small */
    .field-indicators {
        bottom: calc(var(--spacing-3) + 45px);
        gap: var(--spacing-2);
    }
    
    .field-indicators .indicator {
        width: 8px;
        height: 8px;
    }
    
    .hero-field .hero-scroll-indicator {
        display: none;
    }
    
    /* Hero */
    .hero-title {
        letter-spacing: 0.05em;
    }
    
    .service-badge {
        padding: var(--spacing-1) var(--spacing-3);
        font-size: var(--text-xs);
    }
    
    /* About */
    .about-experience {
        position: relative;
        bottom: auto;
        left: auto;
        margin-top: var(--spacing-4);
    }
    
    /* Contact Form */
    .form-group {
        margin-bottom: var(--spacing-4);
    }
    
    .form-input,
    .form-textarea {
        padding: var(--spacing-3);
    }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    .header,
    .footer,
    .back-to-top,
    .hero-scroll-indicator,
    #preloader {
        display: none !important;
    }
    
    .hero {
        min-height: auto;
        padding: var(--spacing-8) 0;
    }
    
    .section {
        padding: var(--spacing-8) 0;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
    }
    
    a {
        color: #000;
        text-decoration: underline;
    }
    
    .btn {
        display: none;
    }
}

/* ========================================
   Reduced Motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================
   High Contrast Mode
   ======================================== */
@media (prefers-contrast: high) {
    :root {
        --color-primary: #000080;
        --color-secondary: #ffd700;
    }
    
    .btn-outline {
        border-width: 3px;
    }
    
    .nav-link::after {
        height: 3px;
    }
}

/* ========================================
   Dark Mode Support
   ======================================== */
@media (prefers-color-scheme: dark) {
    /* Optional: Enable if you want automatic dark mode support */
    /* Uncomment the below to enable
    
    :root {
        --color-white: #0f172a;
        --color-black: #ffffff;
        --color-gray-50: #1e293b;
        --color-gray-100: #334155;
        --color-gray-200: #475569;
        --color-gray-300: #64748b;
        --color-gray-400: #94a3b8;
        --color-gray-500: #cbd5e1;
        --color-gray-600: #e2e8f0;
        --color-gray-700: #f1f5f9;
        --color-gray-800: #f8fafc;
        --color-gray-900: #ffffff;
    }
    
    */
}