/* css/_shared/_role-modal-responsive.css */
/* =============================================================================
   ROLE SELECTION MODAL - RESPONSIVE STYLES
   Path: /css/_shared/_role-modal-responsive.css
   
   Purpose: All media queries for role selection modal
   Dependencies: 
   - /css/_shared/_typography.css (load first)
   - /css/_shared/_role-modal-base.css (load second)
   - /css/_shared/_role-modal-theme.css (load third)
   
   This file contains ONLY media queries - no base styles.
   ========================================================================== */

/* =============================================================================
   TABLET (max-width: 768px)
   ========================================================================== */

@media (max-width: 767.98px) {
    .role-modal {
        padding: 0.75rem;
        align-items: flex-end;
    }

    .role-modal__dialog {
        max-width: 100%;
        border-radius: 1.25rem 1.25rem 0 0;
        max-height: 85vh;
    }

    .role-modal__header {
        padding: 1.5rem 1.25rem 0.75rem;
    }

    .role-modal__title {
        font-size: var(--font-lg, 1.375rem);
    }

    .role-modal__body {
        padding: 0.5rem 1.25rem 1rem;
    }

    .role-option {
        padding: 1rem;
        gap: 0.875rem;
    }

    .role-option__icon {
        width: 44px;
        height: 44px;
    }

    .role-option__icon svg {
        width: 22px;
        height: 22px;
    }

    .role-option__title {
        font-size: var(--font-sm, 0.875rem);
    }

    .role-option__description {
        font-size: var(--font-xs, 0.75rem);
    }

    .role-modal__footer {
        padding: 1rem 1.25rem 1.5rem;
        /* Safe area for bottom notch */
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
    }

    /* Adjust animation for bottom sheet style */
    @keyframes roleModalSlideUp {
        from {
            opacity: 0;
            transform: translateY(100%);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* =============================================================================
   SMALL MOBILE (max-width: 374px)
   ========================================================================== */

@media (max-width: 374px) {
    .role-modal__header {
        padding: 1.25rem 1rem 0.5rem;
    }

    .role-modal__title {
        font-size: var(--font-md, 1.125rem);
    }

    .role-modal__subtitle {
        font-size: var(--font-xs, 0.75rem);
    }

    .role-modal__body {
        padding: 0.5rem 1rem 0.75rem;
    }

    .role-modal__options {
        gap: 0.625rem;
    }

    .role-option {
        padding: 0.875rem;
        gap: 0.75rem;
    }

    .role-option__icon {
        width: 40px;
        height: 40px;
    }

    .role-option__icon svg {
        width: 20px;
        height: 20px;
    }

    .role-option__arrow {
        width: 16px;
        height: 16px;
    }

    .role-modal__footer {
        padding: 0.875rem 1rem 1.25rem;
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
    }

    .role-modal__remember {
        gap: 0.5rem;
    }

    .role-modal__remember-text {
        font-size: var(--font-xs, 0.75rem);
    }
}

/* =============================================================================
   TOUCH DEVICES
   ========================================================================== */

@media (pointer: coarse) {
    .role-option {
        min-height: 72px;
    }

    .role-modal__remember {
        min-height: 44px;
    }

    .role-modal__checkmark {
        width: 22px;
        height: 22px;
    }

    .role-modal__checkmark::after {
        left: 6px;
        top: 2px;
        width: 6px;
        height: 11px;
    }
}

/* =============================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .role-modal,
    .role-modal__dialog {
        animation: none;
    }

    .role-option {
        transition: none;
    }

    .role-option:hover {
        transform: none;
    }

    .role-option__arrow {
        transition: none;
    }

    .role-option:hover .role-option__arrow {
        transform: none;
    }
}

/* =============================================================================
   HIGH CONTRAST MODE
   ========================================================================== */

@media (prefers-contrast: high) {
    .role-modal__dialog {
        border: 2px solid #000;
    }

    .role-option {
        border-width: 2px;
    }

    .role-modal__checkmark {
        border-width: 2px;
    }
}

/* =============================================================================
   LANDSCAPE MOBILE
   ========================================================================== */

@media (max-height: 500px) and (orientation: landscape) {
    .role-modal {
        align-items: center;
        padding: 0.5rem;
    }

    .role-modal__dialog {
        max-height: calc(100vh - 1rem);
        border-radius: 1rem;
    }

    .role-modal__header {
        padding: 1rem 1.25rem 0.5rem;
    }

    .role-modal__body {
        padding: 0.25rem 1.25rem 0.5rem;
    }

    .role-modal__options {
        flex-direction: row;
        gap: 0.75rem;
    }

    .role-option {
        flex: 1;
        flex-direction: column;
        text-align: center;
        padding: 0.875rem;
    }

    .role-option__arrow {
        display: none;
    }

    .role-modal__footer {
        padding: 0.75rem 1.25rem 1rem;
    }
}