/*
 * VioScans - Violet's IP Playground - layout correction v1.0
 * Scope: ONLY <main class="vio-page ipp-page"> and its own cards.
 * The existing header, shared footer, stylesheets, scripts and PNGs are untouched.
 * Loaded AFTER violet-ip-playground-robotic.css.
 */

/* Images should own their available column rather than inherit thumbnail caps. */
main.ipp-page .ipp-hero-art,
main.ipp-page .ipp-side-figure,
main.ipp-page .ipp-callout-card {
    min-width: 0;
    box-sizing: border-box;
}

main.ipp-page .ipp-hero-art .ipp-robot-picture,
main.ipp-page .ipp-side-figure .ipp-robot-picture,
main.ipp-page .ipp-callout-card .ipp-robot-picture {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

main.ipp-page .ipp-hero-art .ipp-robot-image,
main.ipp-page .ipp-side-figure .ipp-robot-image,
main.ipp-page .ipp-callout-card .ipp-robot-image {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain;
    object-position: center top;
    vertical-align: top;
}

main.ipp-page > section {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    overflow: hidden; /* Round art to existing card borders; not the site header. */
}

main.ipp-page .ipp-hero-copy,
main.ipp-page .ipp-hero-art,
main.ipp-page .ipp-split-head > div,
main.ipp-page .ipp-slim-head > div,
main.ipp-page .section-bd,
main.ipp-page .bits-area,
main.ipp-page .play-form > div {
    min-width: 0;
}

/* Preserve the original hero composition, but uncap its image column. */
main.ipp-page .ipp-hero-art {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: start;
    overflow: hidden;
}

/* Consistent side-by-side illustration treatment for the four lower cards. */
@media (min-width: 961px) {
    main.ipp-page > .ipp-hero {
        display: grid !important;
        grid-template-columns: minmax(0, 56fr) minmax(0, 44fr) !important;
        align-items: stretch;
        gap: 0 !important;
        padding: 0 !important;
    }

    main.ipp-page .ipp-hero-copy {
        grid-column: 1;
        grid-row: 1;
        order: 0 !important;
        width: 100% !important;
        padding: clamp(22px, 2.7vw, 36px) !important;
        box-sizing: border-box;
    }

    main.ipp-page .ipp-hero-art {
        grid-column: 2;
        grid-row: 1;
        order: 0 !important;
        width: 100% !important;
        min-height: 0 !important;
    }

    main.ipp-page .section-card > .section-hd.ipp-split-head {
        display: grid !important;
        grid-template-columns: minmax(0, 57fr) minmax(0, 43fr) !important;
        align-items: center !important;
        gap: 0 !important;
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    main.ipp-page .section-card > .section-hd.ipp-split-head.reverse {
        grid-template-columns: minmax(0, 43fr) minmax(0, 57fr) !important;
    }

    /* Only the COPY receives inset padding. The artwork meets the outer edge. */
    main.ipp-page .section-card > .ipp-split-head > div:not(.ipp-side-figure) {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        margin: 0 !important;
        padding: clamp(24px, 2.7vw, 36px) !important;
        box-sizing: border-box;
    }

    main.ipp-page .section-card > .ipp-split-head > .ipp-side-figure {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        justify-self: stretch;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
    }

    main.ipp-page .section-card > .ipp-split-head.reverse > .ipp-side-figure {
        grid-column: 1;
    }

    main.ipp-page .section-card > .ipp-split-head.reverse > div:not(.ipp-side-figure) {
        grid-column: 2;
    }

    /* Bit Awakening: put the live tool BELOW its title, ALONGSIDE Violet,
       instead of postponing the entire tool until after a tall image/caption. */
    main.ipp-page > .ipp-workbench.card {
        display: grid !important;
        grid-template-columns: minmax(0, 56fr) minmax(0, 44fr) !important;
        grid-template-rows: auto auto auto;
        column-gap: 0 !important;
        row-gap: 0 !important;
        align-items: start;
        padding: 0 !important;
    }

    main.ipp-page > .ipp-workbench > .ipp-slim-head,
    main.ipp-page > .ipp-workbench > .section-bd {
        display: contents !important;
    }

    main.ipp-page > .ipp-workbench > .ipp-slim-head > div:first-child {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        padding: clamp(24px, 2.7vw, 36px) clamp(22px, 2.4vw, 32px) 8px !important;
        margin: 0 !important;
    }

    main.ipp-page > .ipp-workbench > .ipp-slim-head > .ipp-callout-card {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: start;
        justify-self: stretch;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
    }

    main.ipp-page > .ipp-workbench > .section-bd > .bits-area {
        grid-column: 1;
        grid-row: 2;
        padding: 12px clamp(22px, 2.4vw, 32px) 28px !important;
        margin: 0 !important;
    }

    main.ipp-page > .ipp-workbench > .section-bd > .grid-3 {
        grid-column: 1 / -1;
        grid-row: 3;
        margin: 0 !important;
        padding: 16px clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 32px) !important;
    }
}

/* The Bit callout text should have padding instead of hugging its frame. */
main.ipp-page .ipp-callout-card .ipp-callout-text {
    box-sizing: border-box;
    min-width: 0;
    padding: clamp(14px, 2vw, 22px) !important;
}

/* Prevent long CIDR, DNS, and classful-hint values from widening mobile cards. */
main.ipp-page .mini-card,
main.ipp-page .atlas-card,
main.ipp-page .mini-card .v,
main.ipp-page .v-atlas-range,
main.ipp-page .play-input {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}

/* Tablet and phone: full-width artwork first, comfortable copy immediately below. */
@media (max-width: 960px) {
    main.ipp-page > .ipp-hero {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }

    main.ipp-page .ipp-hero-art {
        order: -1;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    main.ipp-page .ipp-hero-copy {
        order: 2;
        width: 100% !important;
        max-width: none !important;
        flex: none !important;
        padding: clamp(20px, 4vw, 34px) !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    main.ipp-page .section-card > .section-hd.ipp-split-head,
    main.ipp-page > .ipp-workbench > .section-hd.ipp-slim-head {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    main.ipp-page .section-card > .ipp-split-head > .ipp-side-figure,
    main.ipp-page > .ipp-workbench > .ipp-slim-head > .ipp-callout-card {
        order: -1;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        flex: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    main.ipp-page .section-card > .ipp-split-head > div:not(.ipp-side-figure),
    main.ipp-page > .ipp-workbench > .ipp-slim-head > div:first-child {
        order: 2;
        width: 100% !important;
        max-width: none !important;
        flex: none !important;
        padding: clamp(20px, 4vw, 34px) !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    main.ipp-page > .ipp-workbench.card {
        display: block !important;
        padding: 0 !important;
    }

    main.ipp-page > .ipp-workbench > .section-bd {
        display: block !important;
        padding: 0 clamp(20px, 4vw, 34px) clamp(20px, 4vw, 34px) !important;
        margin: 0 !important;
    }

    main.ipp-page > .ipp-workbench > .section-bd > .bits-area {
        margin: 0 !important;
        padding: 0 !important;
    }

    main.ipp-page > .ipp-workbench > .section-bd > .grid-3 {
        margin-top: 18px !important;
        padding: 0 !important;
    }
}

/* Small smartphones: keep all interactive widgets and values inside the card. */
@media (max-width: 560px) {
    main.ipp-page .play-form {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        width: 100%;
    }

    main.ipp-page .play-form > div,
    main.ipp-page .play-form .play-input,
    main.ipp-page .play-form .play-btn {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    main.ipp-page .bits-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px;
    }

    main.ipp-page .bits-area .grid-2,
    main.ipp-page .section-bd .grid-2,
    main.ipp-page .section-bd .grid-3,
    main.ipp-page .section-bd .oracle-grid,
    main.ipp-page .section-bd .atlas-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    main.ipp-page .big-mono {
        font-size: clamp(20px, 5vw, 30px);
        overflow-wrap: anywhere;
    }

    main.ipp-page .bit-row,
    main.ipp-page .weights {
        display: grid !important;
        grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
        gap: 3px !important;
    }

    main.ipp-page .bit-row .bit-btn {
        box-sizing: border-box;
        width: 100% !important;
        min-width: 0 !important;
        padding: 8px 0 !important;
    }
}