/* mobile-content.css
   Shared mobile reset for the site's content-fragment template families.
   Everything here is scoped to @media (max-width: 768px) - above that width
   this file changes nothing, so desktop rendering is untouched.

   Linked into each file by scripts/add-mobile-support.js (see that script
   for the exact file list each tier applies to). New artwork/exhibition
   pages should be run through that script rather than hand-edited. */

@media (max-width: 768px) {

    /* ---- mainFrame.html (default "Home" content) ----
       The page title is pinned with position:relative; left:170px; which
       pushes 44px bold text far enough right to clip on a phone. */
    .header_a {
        position: static;
        left: auto;
        top: auto;
        font-size: 28px;
        padding: 24px 16px 0 16px;
        box-sizing: border-box;
    }

    /* ---- Tier 1: single-artwork pages (.pic1/.pic2/.pic3 + _txt captions) ----
       Desktop pins each image/caption to hardcoded left/top coordinates set
       in the page's own inline <style> block. On mobile, drop the coordinates
       and let image-then-caption stack in normal document flow. */
    .pic1, .pic2, .pic3 {
        position: static;
        left: auto;
        top: auto;
        right: auto;
        width: 100%;
        margin: 0 0 16px 0;
        text-align: center;
    }

    .pic1 img, .pic2 img, .pic3 img {
        max-width: 100%;
        height: auto;
    }

    .pic1_txt, .pic2_txt, .pic3_txt {
        position: static;
        left: auto;
        top: auto;
        width: auto;
        max-width: 100%;
        padding: 0 16px 24px 16px;
        box-sizing: border-box;
    }

    /* ---- Tier 2a: text-content pages (#divCont/#divText) ----
       vitaFrame.html, kontaFrame.html, and the small heading block at the
       top of publiFrame.html/veroeffentlichungenFrame.html. */
    #divCont {
        position: static;
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 16px;
        box-sizing: border-box;
    }

    #divText {
        position: static;
        top: auto;
        left: auto;
    }

    #divCont table {
        width: 100%;
    }

    /* vitaFrame.html's profile photo */
    #divPic_new {
        position: static;
        height: auto;
        top: auto;
        left: auto;
        margin-top: 16px;
    }

    #divPic_new img {
        max-width: 100%;
        height: auto;
    }

    /* ---- Tier 2b: publication/press tables (#divInhalt, .table, .imageEntry) ----
       publiFrame.html and veroeffentlichungenFrame.html size #divInhalt with
       an inline style="width:1500px;..." attribute, which beats an external
       stylesheet on specificity alone - !important is used deliberately here,
       scoped to this media query, rather than editing the inline attribute
       (which would also change desktop rendering). */
    #divInhalt {
        position: static !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #divInhalt .table {
        border-spacing: 0;
    }

    #divInhalt .imageEntry {
        width: 78vw;
        max-width: 320px;
    }

    #divInhalt .imageEntry img {
        max-width: 100%;
        height: auto;
    }

    /* ---- Bespoke list pages (ausstFrame.html, upcomingFrame.html) ----
       Both pin their content div with an inline style="margin-left:170px;
       width:87%;..." attribute, which (like #divInhalt above) beats a plain
       external-stylesheet rule on specificity - !important is used here for
       the same reason, scoped to this media query only. */
    .mobile-fluid-content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 0 16px;
        box-sizing: border-box;
    }

    /* ausstFrame.html embeds a couple of <video width="640" height="360">
       "Vernissage" clips with hardcoded HTML width/height attributes, which
       force horizontal scrolling on any narrower viewport. */
    .mobile-fluid-content video {
        max-width: 100%;
        width: 100% !important;
        height: auto;
    }

    /* ---- Tier 4: exhibition photo-set pages (wide single-row <table>) ----
       dialog_2026.html, liebe_2026.html, and siblings share the same
       .inhalt > table structure: one row, alternating image/spacer cells,
       each image ~380px tall, sized for the desktop popup. On mobile this
       becomes a horizontally swipeable strip instead of trying to reflow
       the table into a vertical stack. */
    .inhalt {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        max-width: 100vw;
        box-sizing: border-box;
    }

    .inhalt table td {
        scroll-snap-align: start;
    }

    .inhalt table td img {
        max-height: 60vh;
        width: auto;
        max-width: 85vw;
        height: auto;
    }

    .inhalt table td.titel,
    .inhalt table td.text,
    .inhalt table td.beschreibung {
        min-width: 85vw;
        max-width: 85vw;
        white-space: normal;
        box-sizing: border-box;
    }
}