/* Responsive breakpoints for mobile and tablet */

/* Tablet */
@media (max-width: 1024px) {
    :root {
        --text-width: 40%;
        --text-max-width: 400px;
        --font-size-h1: 2rem;
        --font-size-h2: 1.5rem;
    }

    .verse-card {
        width: 250px;
        min-width: 250px;
    }
}

/* Mobile landscape / small tablet */
@media (max-width: 768px) {
    /* Stack layout: graphic on top, text below */
    .scroll__graphic--fixed {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 45vh;
    }

    .scroll__content {
        width: 100%;
        max-width: none;
        margin-top: 45vh;
        padding: var(--spacing-sm);
    }

    .step {
        min-height: var(--step-height-mobile);
        padding: var(--spacing-sm);
    }

    :root {
        --font-size-h1: 1.75rem;
        --font-size-h2: 1.25rem;
        --font-size-base: 15px;
    }

    .legend {
        top: var(--spacing-sm);
        right: var(--spacing-sm);
        padding: var(--spacing-xs);
    }

    .book-label {
        font-size: 6px;
    }

    .testament-label {
        font-size: 9px;
    }

    /* Carousel adjustments for mobile */
    .verse-card {
        width: 85vw;
        min-width: 85vw;
    }

    .carousel-track {
        scroll-padding-left: var(--spacing-sm);
    }
}

/* Mobile portrait */
@media (max-width: 480px) {
    :root {
        --font-size-h1: 1.5rem;
        --font-size-h2: 1.15rem;
        --font-size-base: 14px;
        --spacing-md: 1.5rem;
        --spacing-sm: 0.75rem;
    }

    .scroll__graphic--fixed {
        height: 40vh;
    }

    .scroll__content {
        margin-top: 40vh;
    }

    .step {
        min-height: 40vh;
    }

    .step h1 {
        margin-bottom: var(--spacing-sm);
    }

    /* Reduce book labels on small screens */
    .book-label {
        font-size: 5px;
    }

    .testament-label {
        font-size: 8px;
    }

    /* Reduce arc stroke for clarity on small screens */
    .arc-path {
        stroke-width: 0.25;
    }

    .arc-path--highlight {
        stroke-width: 0.8;
    }

    /* Quote styling for mobile */
    .step .quote {
        font-size: var(--font-size-base);
    }

    /* Verse card adjustments */
    .verse-card {
        width: 90vw;
        min-width: 90vw;
    }

    .source-verse .verse-text,
    .target-verse .verse-text {
        font-size: 0.75rem;
    }
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .step,
    .arc-path,
    .book-label {
        transition: none;
    }

    .carousel-track {
        scroll-behavior: auto;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --arc-opacity-base: 0.3;
        --arc-opacity-active: 0.8;
        --color-text-muted: #d0d0d0;
    }
}