/* Responsive repairs only. Existing desktop page layouts (981px and up) are left intact. */
@media (max-width: 980px) {
    html { max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body.light-theme { width: 100%; max-width: 100%; overflow-x: hidden; }
    @supports (overflow: clip) { html, body.light-theme { overflow-x: clip; } }
    body.light-theme :is(main, .portfolio-intro, .portfolio-stack, .portfolio-category, .section-inner, .editorial-wrap, .ai-wrap, .guide-wrap, .guide-shell, .guide-content, .intro-layout, .intro-summary, .contact-panel, .contact-actions, .ai-section-heading, .ai-contact-layout, .ai-tool-body, .guide-section, .prompt-library) { min-width: 0; }
    body.light-theme :is(h1, h2, h3, h4, p, li, strong) { overflow-wrap: anywhere; }
    /* Clipping is local: moving rails cannot enlarge Safari's root scroll area. */
    body.light-theme :is(.reel-showcase, .reel-viewport, .ai-project-viewport, .client-logos) { min-width: 0; max-width: 100%; overflow: hidden; }
    body.light-theme .reel-viewport { contain: inline-size; isolation: isolate; }
    body.light-theme :is(.ai-grid, .ai-project-grid, .guide-table-scroll, .prompt-library-table, .guide-tab-list, .prompt-library-filters) { min-width: 0; max-width: 100%; overscroll-behavior-x: contain; }
    body.light-theme :is(.guide-table-scroll, .prompt-library-table) { -webkit-overflow-scrolling: touch; }
    /* Critical fix: media and captions now occupy real grid rows, not absolute overlays
       followed by a guessed 18.5rem margin. Long translations / larger text grow naturally. */
    body.light-theme :is(#longGrid, #musicGrid) {
        display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
        gap: 36px !important; width: 100% !important; max-width: none !important;
        padding: 0 !important; margin: 0 !important; align-items: start;
    }
    body.light-theme :is(#longGrid, #musicGrid) > :is(.video-card, .external-card).has-project-meta {
        display: grid !important; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto;
        position: relative; width: 100% !important; min-width: 0; max-width: 100%;
        height: auto !important; min-height: 0 !important; aspect-ratio: auto !important;
        margin: 0 !important; padding: 0 !important; overflow: visible !important;
        transform: none !important; isolation: auto; background: transparent !important;
        border: 0 !important; box-shadow: none !important;
    }
    body.light-theme :is(#longGrid, #musicGrid) .video-media-frame,
    body.light-theme :is(#longGrid, #musicGrid) .external-preview {
        position: relative !important; inset: auto !important; grid-column: 1; grid-row: 1;
        display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9;
        height: auto !important; min-width: 0; overflow: hidden;
        background: #151b23; border-radius: 4px !important;
        -webkit-mask-image: -webkit-radial-gradient(white, black);
    }
    body.light-theme :is(#longGrid, #musicGrid) .video-media-frame > video,
    body.light-theme :is(#longGrid, #musicGrid) .external-preview > :is(img, video) {
        position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
    }
    body.light-theme :is(#longGrid, #musicGrid) .player-overlay {
        position: relative !important; inset: auto !important; grid-column: 1; grid-row: 1;
        align-self: stretch; min-width: 0; width: 100%; height: auto !important; z-index: 3;
        pointer-events: none;
    }
    body.light-theme :is(#longGrid, #musicGrid) .video-card::after { display: none !important; }
    body.light-theme :is(#longGrid, #musicGrid) .music-project-meta {
        position: static !important; inset: auto !important; grid-column: 1; grid-row: 2;
        display: grid; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important;
        width: 100%; min-width: 0; max-width: 100%; height: auto; margin: 14px 0 0 !important;
        padding: 15px 0 0 !important; border-top: 1px solid #dce1e5; z-index: auto;
        overflow: visible; text-align: left;
    }
    body.light-theme :is(#longGrid, #musicGrid) .music-project-meta > div { min-width: 0; }
    body.light-theme :is(#longGrid, #musicGrid) .music-project-code { font-size: 10px; line-height: 1.4; padding: 0; letter-spacing: .08em; }
    body.light-theme :is(#longGrid, #musicGrid) .music-project-meta h3 { margin: 0; font-size: 19px; line-height: 1.4; letter-spacing: -.025em; text-wrap: pretty; }
    body.light-theme :is(#longGrid, #musicGrid) .music-project-meta p { max-width: none; font-size: 14px; line-height: 1.75; margin: 9px 0 0; }
    body.light-theme :is(#longGrid, #musicGrid) .music-project-meta .music-project-achievement { max-width: 100%; width: fit-content; padding: 6px 8px; font-size: 10px; line-height: 1.5; }
    body.light-theme :is(#longGrid, #musicGrid) .music-project-credits { display: flex; flex-wrap: wrap; gap: 14px 24px; margin-top: 17px; padding-top: 14px; }
    body.light-theme :is(#longGrid, #musicGrid) .music-project-credits li { min-width: 0; max-width: 100%; gap: 4px; }
    body.light-theme :is(#longGrid, #musicGrid) .music-project-credits span { font-size: 9px; line-height: 1.5; }
    body.light-theme :is(#longGrid, #musicGrid) .music-project-credits strong { font-size: 12px; line-height: 1.6; }
    /* Fullscreen must remain a media-only surface. Native iOS fullscreen is handled by the video. */
    body.light-theme :is(#longGrid, #musicGrid) .video-card:fullscreen { width: 100% !important; height: 100% !important; background: #000 !important; }
    body.light-theme :is(#longGrid, #musicGrid) .video-card:fullscreen .music-project-meta { display: none !important; }
    body.light-theme :is(#longGrid, #musicGrid) .video-card:fullscreen .video-media-frame { height: 100% !important; aspect-ratio: auto; }
    body.light-theme :is(#longGrid, #musicGrid) .video-card:fullscreen .work-video { object-fit: contain; }
    /* Existing media controls are too wide for two-column reels. On touch screens the JS
       enables native controls after Play; only the custom central play target is retained. */
    body.light-theme.rp-native-players .video-card .control-bar { display: none !important; }
    body.light-theme.rp-native-players .work-video[controls] { transform: none !important; }
    body.light-theme.rp-native-players .play-center { width: 54px; height: 54px; min-width: 44px; min-height: 44px; }
    body.light-theme.rp-native-players .video-card.is-playing .player-overlay { pointer-events: none; }
    body.light-theme.rp-native-players .video-card .work-video[controls] { pointer-events: auto; }
    body.light-theme .hero-rotating-line { max-width: 100%; white-space: normal; }
    body.light-theme .portfolio-intro h1 { overflow-wrap: normal; }
    body.light-theme :is(.contact-actions, .ai-contact-details) { min-width: 0; width: 100%; }
    body.light-theme :is(.contact-link, .ai-contact-details a) { min-width: 0; max-width: 100%; height: auto; }
    body.light-theme :is(.contact-link strong, .ai-contact-details strong) { min-width: 0; overflow-wrap: anywhere; }
    body.light-theme.ai-page :is(section, .ai-tool-entry) { scroll-margin-top: 0; }
    body.light-theme :is(input, select, textarea) { font-size: max(16px, 1rem); }
    .guide-page .prompt-library-search input { font-size: 16px; }
    .guide-page :is(.guide-callout, .guide-production article, .guide-brief-grid > *, .guide-decision-grid > *, .guide-budget-example > *) { min-width: 0; }
    .guide-page :is(pre, code) { white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; }
}
@media (max-width: 700px) {
    /* One 20px gutter, stable stacks and readable type instead of miniature desktop columns. */
    body.light-theme :is(.section-inner, .editorial-wrap, .ai-wrap, .guide-wrap) { width: calc(100% - 40px); margin-inline: auto; }
    body.light-theme .portfolio-intro { padding-top: 32px; }
    body.light-theme .intro-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-bottom: 28px; }
    body.light-theme .portfolio-intro h1 { font-size: clamp(33px, 9.7vw, 49px); line-height: 1.12; }
    body.light-theme .intro-kicker { font-size: 9px; line-height: 1.65; margin-bottom: 16px; letter-spacing: .1em; }
    body.light-theme .intro-summary > p { font-size: 14px; line-height: 1.7; }
    body.light-theme :is(.editorial-button, .ai-button, .reels-toggle) { min-height: 46px; }
    body.light-theme .reel-group { align-items: flex-start; }
    body.light-theme .reel-picture { border-radius: 4px !important; }
    body.light-theme .reel-caption { padding-top: 11px; }
    body.light-theme .reel-caption small { font-size: 9px; line-height: 1.5; }
    body.light-theme .reel-caption strong { font-size: 13px; line-height: 1.5; }
    body.light-theme :is(.section-header, .category-top, .split, .contact-panel) { min-width: 0; }
    body.light-theme :is(.category-top, .ai-section-heading, .ai-home-full-catalog .ai-section-heading) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
    body.light-theme .category-note { max-width: 100%; font-size: 13px; line-height: 1.65; text-align: left; }
    body.light-theme :is(#long-form, #music-videos) { margin-inline: 0 !important; padding-inline: 0 !important; width: 100% !important; }
    body.light-theme :is(#long-form, #music-videos) .category-top { margin-bottom: 22px; }
    body.light-theme .portfolio-stack { gap: 48px; }
    body.light-theme :is(.section-copy, .about-copy p, .services-list li span, .process-card > span) { font-size: 14px !important; line-height: 1.75 !important; }
    body.light-theme .about-copy .statement { font-size: 17px !important; line-height: 1.7 !important; }
    body.light-theme .contact-panel { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 26px !important; padding: 0 !important; }
    body.light-theme #contact h2 { font-size: clamp(29px, 8.8vw, 42px) !important; line-height: 1.12 !important; }
    body.light-theme .contact-link { padding: 18px 16px !important; }
    body.light-theme .contact-link strong { font-size: clamp(15px, 4.1vw, 19px) !important; line-height: 1.5; }
    body.light-theme .footer-inner { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
    /* On touch screens the AI galleries use native horizontal swiping. */
    body.light-theme #ai-reels .ai-project-carousel,
    body.light-theme.ai-page .ai-project-carousel {
        display: block !important;
    }
    body.light-theme #ai-reels .ai-project-viewport,
    body.light-theme.ai-page .ai-project-viewport { width: 100%; }
    body.light-theme #ai-reels .ai-project-carousel-arrow,
    body.light-theme.ai-page .ai-project-arrow {
        display: none !important;
    }
    body.light-theme #ai-reels .ai-grid,
    body.light-theme.ai-page .ai-project-grid {
        overflow-x: auto !important;
        touch-action: pan-x pan-y;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        gap: 14px !important;
        padding-inline: 0 !important;
    }
    body.light-theme #ai-reels .ai-grid .video-card,
    body.light-theme #ai-reels .ai-grid .video-card:nth-child(5),
    body.light-theme #ai-reels .ai-grid .video-card:last-child:nth-child(odd) { flex-basis: 100% !important; }
    body.light-theme.ai-page .ai-project-grid { grid-auto-columns: 100% !important; }
    body.light-theme #ai-reels .ai-grid .video-card,
    body.light-theme.ai-page .ai-project { scroll-snap-stop: always; }
    body.light-theme .ai-hero-description { font-size: 15px; line-height: 1.75; }
    body.light-theme .ai-hero-actions { flex-wrap: wrap; }
    body.light-theme .ai-section-heading > p { margin-left: 0; font-size: 14px; line-height: 1.75; }
    body.light-theme .ai-full-catalog .ai-model-list { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
    body.light-theme .ai-full-catalog .ai-group-heading { display: block; }
    body.light-theme .ai-full-catalog .ai-tool-entry { display: flex; flex-direction: row; gap: 14px; }
    body.light-theme .ai-tool-body p { font-size: 14px; line-height: 1.75; }
    body.light-theme .ai-filters { flex-wrap: wrap; gap: 6px; }
    body.light-theme .ai-filters button { min-height: 42px; padding: 9px 12px; font-size: 12px; }
    body.light-theme .ai-contact-details strong { font-size: clamp(15px, 4.5vw, 20px); }
    body.light-theme .ai-footer { flex-wrap: wrap; gap: 14px; font-size: 12px; }
    body.light-theme .guide-hero-grid { padding-block: 38px 32px; gap: 28px; }
    body.light-theme .guide-hero h1 { font-size: clamp(37px, 10.5vw, 53px); line-height: 1.12; }
    body.light-theme .guide-lead { font-size: 15px; line-height: 1.75; }
    body.light-theme .guide-section { padding-block: 42px; }
    body.light-theme .guide-section h2 { font-size: clamp(29px, 8.4vw, 40px); line-height: 1.14; }
    body.light-theme :is(.guide-opening, .guide-section-lead, .guide-section > p, .prompt-library-content, .guide-prompt-card pre) { font-size: 14px; line-height: 1.8; }
    body.light-theme .guide-prompt-card header { flex-wrap: wrap; gap: 12px; }
    body.light-theme .guide-prompt-card header button { min-height: 44px; }
    body.light-theme .guide-calculator { margin-inline: 0; padding: 22px 18px; }
    body.light-theme :is(.guide-summary, .guide-callout) { padding: 24px 18px; }
    body.light-theme .guide-summary { margin-inline: 0; }
    body.light-theme .guide-summary-actions a { min-width: 0; width: 100%; font-size: 13px; }
    body.light-theme .prompt-library-reader-header { grid-template-columns: 42px minmax(0, 1fr) 44px; gap: 10px; padding: 18px 12px; }
    body.light-theme .prompt-library-close { min-width: 44px; min-height: 44px; }
}
@media (max-width: 359px) {
    body.light-theme :is(.section-inner, .editorial-wrap, .ai-wrap, .guide-wrap) { width: calc(100% - 28px); }
    body.light-theme .contact-link { padding-inline: 12px !important; }
    body.light-theme .contact-link strong { font-size: 15px !important; }
    body.light-theme :is(#longGrid, #musicGrid) .music-project-meta h3 { font-size: 18px; }
}