/**
 * Mobile and touch refinements.
 *
 * The design's own breakpoints already lay the site out correctly on a phone —
 * measured at 320/375/414px, no page-level horizontal scrolling anywhere. What
 * was missing was the touch layer: targets big enough to hit reliably, sliders
 * that behave like native carousels, legible minimum text, and respect for the
 * user's motion and data preferences.
 *
 * Most rules are scoped to `pointer: coarse` rather than a width, because the
 * thing being corrected is finger input, not screen size. A small desktop
 * window keeps the tighter, denser design; a large tablet still gets the
 * bigger targets.
 */

/* =====================================================================
 * 1. Touch targets
 *
 * Apple and Google both recommend ~44px. Icon links here were 12–27px wide,
 * which is a coin-flip to hit. The icons stay visually identical — only the
 * touchable box grows — so nothing about the design changes.
 * ================================================================== */

@media (pointer: coarse) {

    .track-streaming-links a,
    .artist-card-links a,
    .artist-meta-links a,
    .media-card-links a,
    .artist-links a,
    .project-links a,
    .proj-featured-links a,
    .footer-links a,
    .article-share-btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* The header logo is the standard route back to the homepage. */
    .logo-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* The 44px boxes provide their own separation, so the original gaps would
       push these rows too wide. */
    .track-streaming-links,
    .artist-card-links,
    .artist-meta-links,
    .media-card-links,
    .artist-links,
    .project-links,
    .proj-featured-links {
        gap: 4px;
    }

    /* Buttons sat at 40px — just under the threshold. */
    .btn,
    .btn-arrow,
    .btn-arrow-black,
    .btn-book,
    .btn-event,
    .btn-read-article,
    .success-close-btn,
    .booking-submit-btn,
    .contact-badge {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Carousel and slider controls. */
    .slider-btn,
    .proj-nav-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* The "view release" arrow on catalogue cards rendered at 14x14. */
    .project-arrow-link,
    .proj-featured-arrow {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Footer navigation was 18px tall. Padding keeps the text size intact. */
    .footer-nav-link,
    .article-back-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .footer-nav {
        gap: 0 24px;
    }

    /* Slideshow dots must stay visually small, so the hit area is expanded with
       a transparent overlay rather than by resizing the dot itself. */
    .slideshow-dot {
        position: relative;
    }

    .slideshow-dot::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }

    .slideshow-dots {
        gap: 16px;
    }

    /* Removes the legacy 300ms tap delay and stops double-tap zoom on controls. */
    a,
    button,
    .slideshow-dot,
    .folder-tab {
        touch-action: manipulation;
    }
}

/* =====================================================================
 * 2. Horizontal sliders
 *
 * The release strip and the music hero already scroll horizontally, but they
 * scrolled like a plain overflow box: no momentum, no snapping, and a drag
 * could rubber-band the whole page. This makes them behave like native
 * carousels.
 * ================================================================== */

@media (pointer: coarse) {

    .track-list-wrapper,
    .projects-hero-carousel-wrapper,
    .music-hero-carousel-wrapper {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .track-list-wrapper {
        scroll-snap-type: x mandatory;
        scroll-padding-left: 24px;
    }

    .track-list-wrapper .track-card {
        scroll-snap-align: start;
    }

    /* A visible scrollbar over artwork looks like a defect on a phone. */
    .track-list-wrapper::-webkit-scrollbar {
        display: none;
    }

    .track-list-wrapper {
        scrollbar-width: none;
    }
}

/* The release card is a fixed 343.2px at every width in the design, so on a
   phone it filled the screen and the next card sat completely out of sight —
   nothing suggested the strip scrolled.

   Sizing it to show one card plus two thirds of the next makes the scroll
   obvious. The arithmetic: the visible strip is the viewport minus the two
   container gutters; that has to hold 1 card + 1 gap + ⅔ of a card, so
   card = (strip - gap) × ⅗.

   The card also has to stop being a fixed height — the artwork is square, so
   its height now follows the width and the card grows to fit. */

@media (max-width: 600px) {

    .track-list {
        gap: 16px;
    }

    /* 16px gutter each side + one 16px gap = 48px */
    .track-list .track-card {
        flex: 0 0 calc((100vw - 48px) * 0.6);
        width: calc((100vw - 48px) * 0.6);
        height: auto;
    }

    .track-list .track-artwork {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

/* Below 480px the design tightens the gutters to 14px each. */
@media (max-width: 480px) {

    .track-list .track-card {
        flex: 0 0 calc((100vw - 44px) * 0.6);
        width: calc((100vw - 44px) * 0.6);
    }
}

/* =====================================================================
 * 3. Legibility
 *
 * Nothing should fall below 12px on a phone. The project deck's metadata was
 * rendering at 10–11px.
 * ================================================================== */

@media (max-width: 768px) {

    .proj-list-meta,
    .proj-list-artist {
        font-size: 12px;
    }

    .hero-subtitle {
        font-size: 14px;
        line-height: 1.6;
    }

    /* The catalogue grid shrank hardest of all — the artist credit was landing
       at 9px, which is unreadable at arm's length. */
    .project-title {
        font-size: 14px;
        line-height: 1.35;
    }

    .project-artist {
        font-size: 12px;
    }

    .project-bullet,
    .project-meta {
        font-size: 12px;
    }

    /* Roster card names and the media-grid captions on profile pages. */
    .artist-card-name {
        font-size: 14px;
    }

    .media-title-text,
    .stream-on-text {
        font-size: 12px;
    }

}

/* The catalogue keeps its two-column grid below 480px — right for album
   artwork — but the design shrinks the type to 11px/9px to fit a fixed-height
   footer. These raise it to a legible minimum and give the footer the extra
   room that needs. The design rules use !important, so these must too. */
@media (max-width: 480px) {

    .projects-grid .project-card-footer {
        height: 116px !important;
    }

    .projects-grid .project-img-wrapper {
        height: calc(100% - 116px) !important;
    }

    .projects-grid .project-title {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }

    .projects-grid .project-artist,
    .projects-grid .project-bullet {
        font-size: 12px !important;
    }

    /* Button labels drop to 11px at this breakpoint. 12px is the floor. */
    .btn span,
    .btn-book span,
    .btn-arrow span,
    .btn-arrow-black span,
    .btn-event span {
        font-size: 12px !important;
    }
}

/* Stops iOS enlarging text when the phone is turned to landscape. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* The browser default is a bright blue flash, which reads as a glitch against
   this palette. */
html {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.12);
}

/* =====================================================================
 * 4. Notched and rounded displays
 *
 * Only the bottom inset is handled, and only on phone widths. The horizontal
 * gutters are left entirely alone: the design sets .container to 234 / 120 /
 * 60 / 24px across its breakpoints, and any blanket override here would
 * flatten those.
 * ================================================================== */

@media (max-width: 768px) {
    @supports (padding: env(safe-area-inset-bottom)) {

        /* Clears the home indicator on gesture-navigation phones. */
        .footer {
            padding-bottom: calc(60px + env(safe-area-inset-bottom));
        }

        .mobile-nav {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
}

/* =====================================================================
 * 5. Mobile drawer
 *
 * With seven items plus the safe-area inset the drawer can outgrow a short
 * landscape viewport, so let it scroll rather than clipping its last links.
 * ================================================================== */

.mobile-nav {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (pointer: coarse) {
    .mobile-link {
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* =====================================================================
 * 6. Motion and data preferences
 *
 * The homepage runs a 24-card marquee on a continuous 40s loop plus scroll
 * reveals throughout — a real battery cost on a phone, and uncomfortable for
 * anyone prone to motion sickness. Nothing here previously honoured the
 * system setting.
 *
 * The reveal elements start at opacity 0 and are only made visible by script,
 * so they must be forced visible here or the page would appear blank.
 * ================================================================== */

@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;
    }

    .reveal-on-scroll,
    .hero-animate-title,
    .hero-animate-subtitle,
    .hero-animate-cta,
    .hero-animate-tracks {
        opacity: 1 !important;
        transform: none !important;
    }

    .marquee-track {
        animation: none !important;
    }

    /* Without the animation the duplicated marquee rows just repeat, so show a
       single scrollable row instead. */
    .marquee-wrapper {
        overflow-x: auto;
    }

    .hero-video-wrapper {
        display: none;
    }
}

/* Honoured by browsers with Data Saver enabled: skip the background video
   rather than spending a phone's data allowance on decoration. */
@media (prefers-reduced-data: reduce) {

    .hero-video-wrapper {
        display: none;
    }
}