/* PixelSpot mobile fixes — loaded last (25 Sep 2026). Own file so the minified apple-final.css / other edits don't touch it. */

/* Outdoor LED tile: the 3:2 storefront photo used to be stretched over a 350x560 phone tile with object-fit:cover,
   cutting off the billboard and the shop sign at the sides. On phones it now behaves like the other tiles:
   copy first, then the WHOLE photo at its natural shape underneath (no scrim, no crop). */
@media (max-width: 735px) {
    .ac-tile.ac-cover { min-height: 0 !important; justify-content: flex-start !important; }
    .ac-tile.ac-cover::before,
    .ac-tile.ac-cover.ac-bottom::before { display: none !important; }
    .ac-tile.ac-cover .ac-copy,
    .ac-tile.ac-cover.ac-bottom .ac-copy { padding: 40px 16px 26px !important; }
    .ac-tile.ac-cover .ac-art {
        position: relative !important;
        inset: auto !important;
        height: auto !important;
        width: 100% !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    .ac-tile.ac-cover .ac-art img {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        display: block !important;
    }
}

/* Phones / small tablets: the hero is as tall as its content (no blank block under the buttons) and the story panel starts right
   after it, so the first screen is filled and the story line is already peeking in. */
@media (max-width: 900px) {
    #hero.ac-apple-vision-hero { height: 100vh !important; height: 100svh !important; min-height: 100svh !important; }
    .ac-vp-bottom-bar { padding-bottom: 36px !important; }
    .ac-story {
        min-height: 88vh !important;
        min-height: 88svh !important;
        align-items: flex-start !important;   /* .ac-story is a row flex: align-items is the vertical axis */
        padding-top: 9svh !important;
        padding-bottom: 20svh !important;
    }
    /* the translucent story glass sits over this colour before the pinned hero is behind it: same as the hero, so no seam */
    .ac-hero-stack { background: #000000; }
}

/* Product tiles on phones: they were forced to 560px with the picture pinned to the bottom edge, leaving 200-300px of empty
   black/grey between the buttons and the picture. Now the tile is as tall as its content: copy, then the whole picture. */
@media (max-width: 735px) {
    .ac-tile { min-height: 0 !important; aspect-ratio: auto !important; }
    .ac-tile.ac-render::after { display: none !important; }
    .ac-tile .ac-art {
        position: relative !important;
        left: auto !important; right: auto !important; bottom: auto !important;
        height: auto !important;
        flex: 0 0 auto !important;
        margin-top: 22px !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    .ac-tile .ac-art img {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        display: block !important;
    }
    .ac-tile.ac-light .ac-art { padding: 0 16px 26px !important; }
    .ac-tile.ac-light .ac-art img { width: min(88%, 380px) !important; margin: 0 auto !important; }
    .ac-tile.ac-light.ac-render .ac-art img { object-position: 50% 100% !important; }
}

/* Light tiles: the Service photo is a full-frame photograph, not a cut-out — rounded corners make the rectangle look intentional
   (Apple-style photo card) instead of a crop with a faint lighter edge. Warranty's backdrop equals the tile, so it is unaffected. */
.ac-tile.ac-light .ac-art img { border-radius: 18px; }

/* Phones: the floating WhatsApp button sat on top of "Get your price" in the hero. Lift the button row above it. */
@media (max-width: 700px) {
    .ac-vp-bottom-bar { padding-bottom: 84px !important; }
}

/* Phones: the hero is a full-screen video again, so the story no longer needs to peek in from the top.
   Centre the three lines in the glass panel instead of leaving ~600px of empty dark under them. */
@media (max-width: 900px) {
    .ac-story {
        min-height: 100vh !important;
        min-height: 100svh !important;
        align-items: center !important;
        padding-top: 12svh !important;
        padding-bottom: 12svh !important;
    }
}

/* Ecosystem copy (25 Sep 2026): the hero description and story lines are now full sentences, not 4-word slogans.
   Smaller, calmer sizes so each sits in two clean lines instead of three ragged ones. */
.ac-vp-subtitle {
    font-size: clamp(1rem, 0.78rem + 0.7vw, 1.35rem) !important;
    line-height: 1.4 !important;
    max-width: 58ch !important;
}
.ac-story-inner { max-width: 1000px !important; }
.ac-story-line { font-size: clamp(26px, 1.2rem + 2.4vw, 46px) !important; line-height: 1.22 !important; text-wrap: balance; }
.ac-story-line.ac-story-close { font-size: clamp(26px, 1.2rem + 2.4vw, 46px) !important; }
@media (max-width: 600px) {
    .ac-vp-subtitle { font-size: 0.98rem !important; max-width: none !important; }
    .ac-story-line, .ac-story-line.ac-story-close { font-size: clamp(24px, 6.6vw, 30px) !important; }
}

/* DOOH section on phones (26 Sep 2026): was a full dashboard (~1,330px: video, venue pills, playlist, pricing, four stat cards).
   Now a compact tile like the product grid: headline, buttons, one video screen. The full console stays on desktop and on /dooh-marketplace. */
@media (max-width: 735px) {
    #dooh .ac-dooh-playlist-col,
    #dooh .ac-dooh-network-deck,
    #dooh .ac-dooh-mobile-venues,
    #dooh .ac-dooh-hero-hud-top,
    #dooh .ac-dooh-hero-glow { display: none !important; }
    #dooh { min-height: 0 !important; padding-bottom: 0 !important; }
    #dooh .ac-copy { padding: 40px 16px 22px !important; }
    #dooh .ac-dooh-workspace,
    #dooh .ac-dooh-hero-col {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }
    #dooh .ac-dooh-screen-frame {
        margin: 0 !important;
        width: 100% !important;
        border-radius: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}