/* Baseball Basics - Responsive Styles */

/* Mobile First - Base styles in styles.css */

/* Small phones */
@media (max-width: 374px) {
    .header h1 {
        font-size: 1.75rem;
    }

    .tagline {
        font-size: 0.875rem;
    }

    .modal-content {
        padding: var(--spacing-md);
        padding-top: var(--spacing-xl);
    }

    .modal-content .position-title {
        font-size: 1.5rem;
    }

    .field-legend {
        gap: var(--spacing-sm);
    }

    .legend-item {
        font-size: 0.7rem;
    }

    .concept-group {
        width: 100%;
    }

    /* Concept buttons - prevent overflow on very small screens */
    .concept-btn {
        min-width: 80px;
        font-size: 0.8rem;
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    /* Plays bar smaller on small phones */
    .plays-bar {
        padding: var(--spacing-xs);
    }

    .plays-bar-label {
        display: none;
    }

    .play-chip {
        font-size: 0.7rem;
        padding: 8px 10px;
        min-height: 44px;
    }

    /* Glossary search on very small phones */
    .glossary-search {
        flex-direction: column;
    }

    .glossary-search-input {
        width: 100%;
    }

    /* Compact play controls */
    .play-controls {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
    }

    .play-progress {
        order: 5;
        width: 100%;
        max-width: none;
    }
}

/* Mobile (default - up to 767px) */
@media (max-width: 767px) {
    .main-content {
        padding: var(--spacing-md);
    }

    .field-container {
        padding: var(--spacing-sm);
    }

    /* Hide desktop panel on mobile */
    .content-panel {
        display: none;
    }

    /* Mobile touch targets - minimum 44px */
    .action-btn {
        min-height: 44px;
        min-width: 44px;
        padding: var(--spacing-sm) var(--spacing-md);
    }

    /* Modal is primary on mobile */
    .modal {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        top: 0;
        left: 0;
        transform: translateY(100%);
        border-radius: 0;
        border: none;
        border-top: 4px solid var(--baseball-red);
    }

    .modal-overlay.open .modal {
        transform: translateY(0);
    }

    .modal-close {
        top: var(--spacing-md);
        right: var(--spacing-md);
        width: 44px;
        height: 44px;
        font-size: 1.5rem;
    }

    .modal-content {
        padding: var(--spacing-lg);
        padding-top: calc(var(--spacing-2xl) + var(--spacing-lg));
    }

    .modal-nav {
        padding: var(--spacing-sm) 0;
    }

    .modal-nav-btn {
        padding: var(--spacing-md);
        font-size: 1rem;
    }

    /* Concept buttons stacked */
    .concept-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .concept-btn {
        min-width: 100px;
    }

    /* Swipe hint - only show when swipe navigation is enabled */
    .modal.swipe-enabled .modal-content::after {
        content: 'Swipe left/right to navigate';
        display: block;
        text-align: center;
        font-size: 0.75rem;
        color: var(--text-secondary);
        margin-top: var(--spacing-lg);
        opacity: 0.7;
    }

    /* Plays bar mobile */
    .plays-bar {
        padding: var(--spacing-xs) var(--spacing-sm);
        overflow-x: hidden;
    }

    .plays-bar-label {
        font-size: 0.65rem;
    }

    .play-chip {
        font-size: 0.75rem;
        padding: 10px 12px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Speed selector touch targets */
    .speed-btn {
        padding: var(--spacing-sm) var(--spacing-md);
        min-height: 36px;
        min-width: 44px;
    }

    /* Play controls mobile */
    .play-controls {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    .play-progress {
        order: 5;
        width: 100%;
        max-width: none;
        margin-top: var(--spacing-xs);
    }

    .play-info {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 0.85rem;
    }
}

/* Tablet - iPad mini and similar (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .main-content {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;
        gap: var(--spacing-lg);
        padding: var(--spacing-xl);
    }

    .field-container {
        flex: 0 0 55%;
        max-width: 500px;
    }

    .concepts-section {
        flex: 0 0 100%;
        order: 3;
    }

    /* Plays bar tablet */
    .plays-bar {
        max-width: 500px;
    }

    /* Side panel instead of overlay */
    .content-panel {
        position: relative;
        top: auto;
        right: auto;
        width: 40%;
        max-width: 350px;
        height: auto;
        min-height: 400px;
        border-radius: var(--border-radius);
        border: 3px solid var(--dirt-dark);
        border-left: 4px solid var(--baseball-red);
        box-shadow: var(--shadow-medium);
        opacity: 1;
        transform: none;
        transition: opacity var(--transition-normal);
    }

    .content-panel:not(.open) {
        opacity: 0.6;
    }

    .content-panel.open {
        opacity: 1;
    }

    .panel-close {
        display: none;
    }

    .panel-content {
        padding: var(--spacing-lg);
    }

    .position-title {
        font-size: 1.5rem;
    }

    .position-description {
        font-size: 1rem;
    }

    .key-concepts {
        padding: var(--spacing-md);
    }

    .key-concepts h3 {
        font-size: 1rem;
    }

    /* Hide modal on tablet - use panel */
    .modal-overlay {
        display: none;
    }

    .position-indicator {
        padding: var(--spacing-sm);
    }

    .indicator-dot {
        width: 24px;
        height: 24px;
        font-size: 0.45rem;
    }
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
    .header {
        padding: var(--spacing-xl) var(--spacing-lg);
    }

    .header h1 {
        font-size: 3rem;
    }

    .tagline {
        font-size: 1.1rem;
    }

    .main-content {
        padding: var(--spacing-2xl);
    }

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

    /* Slide-in panel from right */
    .content-panel {
        width: var(--panel-width);
    }

    .panel-content {
        padding: var(--spacing-2xl);
        padding-top: calc(var(--spacing-2xl) + 20px);
    }

    .position-title {
        font-size: 2.25rem;
    }

    .position-description {
        font-size: 1.15rem;
    }

    /* Hide modal on desktop - use panel */
    .modal-overlay {
        display: none;
    }

    /* Tooltip on hover for desktop */
    .tooltip {
        display: block;
    }

    /* Better concept layout */
    .concept-buttons {
        gap: var(--spacing-xl);
    }

    .concept-btn {
        min-width: 120px;
    }
}

/* Large Desktop (1440px and up) */
@media (min-width: 1440px) {
    .main-content {
        padding: var(--spacing-2xl) 10%;
    }

    .content-panel {
        width: 450px;
    }
}

/* High contrast / accessibility */
@media (prefers-contrast: high) {
    .marker-bg {
        stroke-width: 3;
    }

    .position-marker:focus .marker-bg {
        stroke-width: 5;
    }

    .content-panel,
    .modal {
        border-width: 4px;
    }

    .coverage-zone.visible {
        opacity: 0.5 !important;
    }
}

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

    .content-panel,
    .modal,
    .position-marker,
    .tooltip,
    .ball-path,
    .coverage-zone {
        transition: none;
    }

    .modal-overlay.open .modal {
        transform: translate(-50%, -50%);
    }

    .position-marker:not(.active) .marker-bg {
        animation: none;
    }
}

/* Print styles */
@media print {
    .content-panel,
    .modal-overlay,
    .footer,
    .concepts-section {
        display: none;
    }

    .field-container {
        max-width: 100%;
        box-shadow: none;
        border: 1px solid #000;
    }

    body {
        background: white;
    }

    body::after {
        display: none;
    }
}