/* responsive.css - Mobile-first responsive layer for aganetto.it
   Desktop layout is untouched. Only mobile adjustments below.    */

/* ── Global ────────────────────────────────────────────────────── */

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

/* Border image: never constrained by max-width (its cell is width="1%") */
table[dir="ltr"] > tbody > tr > td:first-child img {
    max-width: none;
    width: 81px;
    height: 807px;
}

/* Border image: sticky while scrolling */
table[dir="ltr"] > tbody > tr > td:first-child > p {
    position: sticky;
    top: 0;
    margin: 0;
}

body {
    overflow-x: hidden;
}

/* ── Mobile only (max 767px) ───────────────────────────────────── */
@media (max-width: 767px) {

    /* Left border image: slightly reduced on mobile */
    table[dir="ltr"] > tbody > tr > td:first-child img {
        width: 65px !important;
        height: auto !important;
    }

    /* Spacer column: reduce */
    table[dir="ltr"] > tbody > tr > td[width="24"] {
        width: 6px !important;
    }

    /* Inner 2-column content tables: stack vertically */
    table[dir="ltr"] > tbody > tr > td:last-child > table,
    table[dir="ltr"] > tbody > tr > td:last-child > table > tbody,
    table[dir="ltr"] > tbody > tr > td:last-child > table > tbody > tr {
        display: block;
        width: 100% !important;
    }

    table[dir="ltr"] > tbody > tr > td:last-child > table > tbody > tr > td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* YouTube iframes: fluid 16:9 */
    iframe {
        max-width: 100%;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
    }

    /* scroll.gif: hidden on mobile */
    img[src$="scroll.gif"],
    img[src*="scroll.gif"] {
        display: none;
    }

    /* Nav buttons: allow graceful wrapping */
    p[align="center"] a img[width="90"] {
        margin: 3px 2px;
    }
}

/* ── Tablet and above (min 768px) ──────────────────────────────── */
@media (min-width: 768px) {

    /* Restore border image to exact original dimensions */
    table[dir="ltr"] > tbody > tr > td:first-child img {
        width: 81px !important;
        height: 807px !important;
    }

    /* scroll.gif: always visible */
    img[src$="scroll.gif"],
    img[src*="scroll.gif"] {
        display: inline;
    }

    /* scroll.gif: sticky while scrolling */
    table[dir="ltr"] > tbody > tr > td:last-child > p:has(img[src*="scroll.gif"]) {
        position: sticky;
        top: 0;
        z-index: 5;
        background-color: #FFFFFF;
        text-align: center;
        padding: 4px 0;
        margin: 0;
    }
}