/**
 * @file responsive.css
 * @description Consolidated responsive/mobile styles for all components
 *
 * @requires All other CSS files (loads last)
 * @usedBy index.php (loaded after all component CSS)
 *
 * @status COMPLETE
 */

/* ==================== TABLET & MOBILE (max-width: 768px) ==================== */
@media (max-width: 768px) {
    /* Header */
    .header {
        padding: 8px 12px;
    }

    .logo {
        font-size: 0.85rem;
    }

    .logo-icon {
        font-size: 1rem;
    }

    .header-mode-tabs {
        display: none;
    }

    /* Search */
    .search-input {
        width: 100px;
    }

    .search-input:focus {
        width: 130px;
    }

    /* Surprise button - hide text */
    .surprise-btn span:last-child {
        display: none;
    }

    /* Mode selection */
    .mode-cards {
        flex-direction: column;
        align-items: center;
    }

    .mode-card {
        width: 100%;
        max-width: 260px;
    }

    /* Student settings */
    .student-settings {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 10px;
    }

    /* Side panel - full width on mobile */
    .side-panel {
        width: 100%;
        right: -100%;
    }

    /* BCE Pane */
    .bce-pane-input-group {
        flex-direction: column;
        gap: 12px;
    }

    .bce-pane-button {
        width: 100%;
    }

    .bce-expander {
        margin: 8px;
        padding: 12px;
    }

    .bce-input-group {
        flex-direction: column;
    }

    .bce-search-btn {
        width: 100%;
    }

    /* Goal grid */
    .goal-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .goal-card {
        padding: 15px 10px;
    }

    .goal-icon {
        font-size: 1.3rem;
        margin-bottom: 5px;
    }

    .goal-name {
        font-size: 0.8rem;
    }

    /* Ribbons */
    .ribbons {
        gap: 6px;
        padding: 10px;
    }

    .ribbon-btn {
        padding: 6px 12px;
        font-size: 0.75rem;
    }

    /* Writer board */
    .writer-board-modal {
        width: calc(100% - 32px);
        max-height: calc(100vh - 32px);
        margin: 16px;
    }

    .writer-board-content {
        padding: 20px 16px;
    }

    .writer-input-group {
        flex-direction: column;
        gap: 12px;
    }

    .writer-button {
        width: 100%;
    }
}

/* ==================== SMALL MOBILE (max-width: 520px) ==================== */
@media (max-width: 520px) {
    /* Carousel */
    .carousel-modal {
        max-width: 95%;
        border-radius: 16px;
    }

    .carousel-slide {
        padding: 45px 25px 25px;
    }

    .slide-icon {
        font-size: 3rem;
    }

    .slide-title {
        font-size: 1.2rem;
    }

    .slide-description {
        font-size: 0.9rem;
    }

    .carousel-arrow {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
}

/* ==================== DESKTOP (min-width: 640px) ==================== */
@media (min-width: 640px) {
    /* Memory aids sheet - center as modal */
    .memory-aids-sheet {
        position: fixed;
        top: 50%;
        left: 50%;
        bottom: auto;
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0;
        max-width: 500px;
        width: 90%;
        max-height: 80vh;
        border-radius: 20px;
    }

    .memory-aids-overlay.active .memory-aids-sheet {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    /* Hide mobile handle on desktop */
    .memory-aids-handle {
        display: none;
    }
}

/* ==================== LARGE DESKTOP (min-width: 1024px) ==================== */
@media (min-width: 1024px) {
    /* Add any large screen specific styles here */
}

/* ==================== PRINT STYLES ==================== */
@media print {
    .header,
    .carousel-overlay,
    .memory-aids-overlay,
    .side-panel,
    .bce-pane,
    .search-overlay,
    .immersive-overlay {
        display: none !important;
    }

    .screen {
        display: block !important;
        padding-top: 0 !important;
    }

    body {
        background: white !important;
        color: black !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;
    }
}