/**
 * 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-submit-btn,
    /* Inquiry-type chips sat at 42px — just under the threshold. */
    .contact-chip,
    .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;
    }

    /* Shop: catalogue filters and cart controls. */
    .category-pill,
    .product-overlay-btn,
    .cart-checkout-btn,
    #catalogSort,
    #catalogSearch {
        min-height: 44px;
    }

    .cart-drawer-close,
    .quantity-control-btn,
    .cart-item-remove {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* The quantity row gets wide once each control is 44px, so tighten it. */
    .cart-item-controls {
        gap: 2px;
    }

    /* 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,
    .service-images-grid,
    .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);
    }
}

/* =====================================================================
 * Homepage artist marquee
 *
 * The card is a fixed 360x400 at every width in the design, so on a phone a
 * single card filled the screen. Sizing it to half the viewport (minus the
 * gap) puts two on screen at once.
 *
 * The card keeps its 360:400 proportions via aspect-ratio, so the height
 * follows the new width instead of staying at 400px.
 * ================================================================== */

@media (max-width: 768px) {

    .testimonial-rows .marquee-track {
        gap: 12px;
    }

    .testimonial-rows .artist-card-v2 {
        width: calc((100vw - 12px) / 2);
        height: auto;
        aspect-ratio: 360 / 400;
    }

    /* 30px of padding on a ~180px card left almost no room for the name. */
    .testimonial-rows .artist-card-overlay {
        padding: 14px;
    }

    /* The design already drops this to 20px !important at this breakpoint,
       which is too large once the card is half as wide. */
    .testimonial-rows .artist-name {
        font-size: 15px !important;
        letter-spacing: 0.5px;
        line-height: 1.2;
    }

    .testimonial-rows .artist-links {
        gap: 2px;
        margin-top: 4px;
    }

    /* Halving the card width halves the distance the track travels, so the
       same duration would read as half speed. */
    .testimonial-rows .scroll-left .marquee-track,
    .testimonial-rows .scroll-right .marquee-track {
        animation-duration: 25s;
    }
}

/* =====================================================================
 * Homepage producers banner
 *
 * The same problem as the artist marquee above, and the same fix. The card is
 * a fixed 400x400 at every width, so on a 375px phone a single card was wider
 * than the screen itself — you could see one at a time and nothing else.
 *
 * The banner stays the horizontal scroller it is in the design. Only the card
 * shrinks, to half the visible width, so two sit on screen at once and the
 * rest are a swipe away. The track keeps `width: max-content` and the
 * scrollbar keeps its 20px of room below.
 *
 * 42px is the 28px of container padding (14 a side), the 12px gap between the
 * two visible cards, and 2px of slack so subpixel rounding can never shave the
 * edge off the second card.
 *
 * overflow-y matters here: `overflow-x: auto` computes overflow-y to auto too,
 * and a browser that draws classic scrollbars then reserves a ~15px vertical
 * gutter it never uses — which was clipping the second card. There is only one
 * row in this track, so nothing can overflow vertically anyway.
 *
 * Scoped to the banner because `.producer-card` is also used, unscoped, by the
 * /producers/ roster further down style.css.
 * ================================================================== */

@media (max-width: 768px) {

    .producers-banner {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .producers-banner-content {
        gap: 14px;
    }

    /* Show 1 full card and roughly 2/3 of the next card to clearly communicate horizontal scroll */
    .producers-banner .producer-card {
        flex: 0 0 calc((100vw - 48px) * 0.60);
        width: calc((100vw - 48px) * 0.60);
        min-width: 190px;
        max-width: 320px;
        height: auto;
        aspect-ratio: 1 / 1;
        padding: 16px;
        scroll-snap-align: start;
    }

    /* 24px on a ~167px card wrapped most names onto three lines.
       Producer names are single unbroken words ("CHIBOOPLAYTHEBEAT"), which
       cannot wrap on their own and were being clipped by the card's
       overflow: hidden — hence anywhere rather than normal wrapping. */
    .producers-banner .producer-info h3 {
        font-size: 15px;
        letter-spacing: 0.5px;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .producers-banner .producer-info .producer-genre {
        font-size: 12px;
        letter-spacing: 0.5px;
        margin-top: 4px;
    }
}

/* =====================================================================
 * 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;
    }
}


/* =====================================================================
 * Account & Authentication Mobile Responsive Styling
 * ================================================================== */
@media (max-width: 991px) {
    .account-dashboard-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .account-sidebar-nav {
        position: static;
    }

    .dashboard-welcome-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
    }

    .view-order-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .order-header-total {
        text-align: left;
    }

    .order-addresses-grid,
    .account-addresses-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .account-hero-section {
        padding: 110px 0 40px;
    }

    .auth-panel {
        padding: 28px 20px;
    }

    .auth-title {
        font-size: 20px;
    }

    .form-row-group.two-cols,
    .form-fields-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .dashboard-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .stat-card {
        padding: 16px;
    }

    .stat-value {
        font-size: 24px;
    }

    .quick-actions-grid {
        grid-template-columns: 1fr;
    }

    .download-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .btn-download-file {
        width: 100%;
        justify-content: center;
    }

    .btn-account-primary,
    .btn-auth-submit {
        width: 100%;
    }
}

/* Touch Targets >= 44px on coarse pointers */
@media (pointer: coarse) {
    .auth-tab-btn {
        min-height: 48px;
    }

    .account-nav-link {
        min-height: 48px;
    }

    .btn-toggle-pw {
        min-width: 44px;
        min-height: 44px;
    }

    .btn-order-action,
    .btn-address-edit,
    .btn-address-add {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

@media (max-width: 768px) {
    .account-main-section,
    .account-main-section.is-auth-page {
        padding: 90px 0 50px !important;
    }
}
@media (max-width: 640px) {
    .catalog-top-actions,
    .shop-toolbar {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 12px !important;
    }
    .sort-select-wrapper,
    .sort-wrapper {
        min-width: 150px !important;
    }
}
/* Services Hero mobile typography and 250px top spacing */
@media (max-width: 768px) {
    .services-hero {
        min-height: auto !important;
        height: auto !important;
        padding-top: 250px !important;
        padding-bottom: 20px !important;
    }
    .services-hero .hero-tag {
        font-size: 13px !important;
        letter-spacing: 2.5px !important;
    }
    .services-hero .hero-title,
    .services-hero .hero-title-fade,
    .services-hero .hero-title-solid {
        font-size: 24px !important;
        line-height: 1.35 !important;
        letter-spacing: 0 !important;
    }
}