/* Shared storefront/editor surface. All rules stay inside the new block;
 * the existing V2 parent owns the section width, gutters and block heading. */
.v2-image-panels-grid {
    display: grid;
    grid-template-columns: repeat(var(--v2-panel-count, 1), minmax(0, 1fr));
    column-gap: var(--v2-panel-gap, 24px);
    row-gap: 0;
    align-items: start;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.v2-image-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

/* The original bitmap, not a cover/background image, defines every coordinate.
 * Different image aspect ratios are allowed in the same row without stretching. */
.v2-image-panel > img[data-v2-panel-image],
.v2-image-panel-link > img[data-v2-panel-image] {
    display: block;
    position: static;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    aspect-ratio: auto;
    object-fit: contain;
    box-sizing: border-box;
}

.v2-image-panel-link,
.v2-image-panel-area {
    position: absolute;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-decoration: none;
    box-sizing: border-box;
}

.v2-image-panel-link {
    inset: 0;
    z-index: 1;
}

/* Server HTML may put the image itself inside its whole-image link. In that
 * form the link must stay in flow, while the empty sibling link created by the
 * JS API remains an absolute layer. :has also preserves no-JS image rendering;
 * has-image is the runtime fallback for browsers without that selector. */
.v2-image-panel-link.has-image {
    position: relative;
    inset: auto;
}

.v2-image-panel-link:has(> img[data-v2-panel-image]) {
    position: relative;
    inset: auto;
}

.v2-image-panel-area {
    z-index: 3;
}

/* Transparent rasters retain their original alpha and aspect ratio. The
 * percentage rectangle is the complete hit target, exactly like link areas;
 * contain avoids stretching or cropping a uploaded badge/logo. */
.v2-image-panel-area > img[data-v2-panel-overlay-image] {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    object-fit: contain;
    pointer-events: none;
}

.v2-image-panel-area.is-image-area:not(.is-overlay-ready) {
    visibility: hidden;
}

.v2-image-panel-link[href],
.v2-image-panel-area[href] {
    cursor: pointer;
}

.v2-image-panel-link:not([href]),
.v2-image-panel-area:not([href]) {
    pointer-events: none;
    cursor: default;
}

/* Keep focus inside the image. The two-tone ring remains visible against both
 * light and dark photographs; areas remain separate sibling links, never nests. */
.v2-image-panel-link:focus,
.v2-image-panel-area:focus {
    outline: 3px solid #ffffff;
    outline-offset: -5px;
    box-shadow: inset 0 0 0 7px #202020;
}

.v2-image-panel-link:focus:not(:focus-visible),
.v2-image-panel-area:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* JS sets the natural-aspect height and one uniform scale on this fixed 1000px
 * plane. No media-query font sizes: line breaks, padding and all proportions
 * are measured once in baseline coordinates, then travel with the image. */
.v2-image-panel-text-plane {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 1000px;
    height: 0;
    margin: 0;
    padding: 0;
    transform: scale(0);
    transform-origin: 0 0;
    pointer-events: none;
    font-family: 'Plus Jakarta Sans', Arial, sans-serif;
    letter-spacing: 0;
    box-sizing: border-box;
}

.v2-image-panel-text {
    position: absolute;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: inherit;
    font-size: var(--v2-panel-fit-font-size, var(--v2-panel-font-size, 48px));
    color: #ffffff;
    line-height: 1.2;
    text-align: left;
    letter-spacing: 0;
    white-space: pre-wrap;
    overflow-wrap:normal;
    word-break: normal;
    pointer-events: none;
    box-sizing: border-box;
}

.v2-image-panel-text.has-background {
    padding: .4em .5em;
    background: rgba(var(--v2-panel-bg-rgb, 0, 0, 0), calc(var(--v2-panel-bg-opacity, 0) / 100));
}
/* Overlay typography must participate in the panel's uniform fit-to-image
 * scale. Relative presets prevent fixed pixels escaping a fitted text plane. */
.v2-image-panel-text .v2-image-panel-copy.is-rich .v2-copy-size-1{font-size:.75em}
.v2-image-panel-text .v2-image-panel-copy.is-rich .v2-copy-size-2{font-size:.875em}
.v2-image-panel-text .v2-image-panel-copy.is-rich .v2-copy-size-3{font-size:inherit}
.v2-image-panel-text .v2-image-panel-copy.is-rich .v2-copy-size-4{font-size:1.5em}
.v2-image-panel-text .v2-image-panel-copy.is-rich .v2-copy-size-5{font-size:2.375em}
.v2-image-panel-text .v2-image-panel-copy.is-rich .v2-copy-size-6{font-size:3.5em}
.v2-image-panel-text .v2-image-panel-copy.is-rich .v2-copy-size-7{font-size:4.75em}
.v2-image-panel-text .v2-image-panel-copy.is-rich h3{font-size:1.5em!important}
.v2-image-panel-text .v2-image-panel-copy.is-rich h4,.v2-image-panel-text .v2-image-panel-copy.is-rich .v2-copy-style-lead{font-size:1.25em!important}
.v2-image-panel-text .v2-image-panel-copy.is-rich a[href]{pointer-events:auto}

.v2-image-panel-text > .v2-image-panel-heading,
.v2-image-panel-text > .v2-image-panel-copy {
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-family: inherit;
    color: inherit;
    text-align: inherit;
    letter-spacing: 0;
    white-space: pre-wrap;
    overflow-wrap:normal;
    word-break: normal;
}

.v2-image-panel-text > .v2-image-panel-heading {
    font-size: 1em;
    font-weight: 700;
    line-height: 1.2;
}

.v2-image-panel-text > .v2-image-panel-copy {
    font-size: .5em;
    font-weight: 400;
    line-height: 1.45;
}

.v2-image-panel-heading + .v2-image-panel-copy {
    margin-top: .6em;
}
/* Rich bodies still inherit the overlay's 1000px proportional text plane.
 * Only paragraph/list rhythm changes; never replace its font size with px. */
.v2-image-panel-text > .v2-image-panel-copy.is-rich{white-space:normal}
.v2-image-panel-copy.is-rich p{font:inherit;color:inherit;line-height:inherit;margin:0 0 1em;padding:0;white-space:normal}
.v2-image-panel-copy.is-rich ul,.v2-image-panel-copy.is-rich ol{margin:0 0 1em;padding-left:1.5em;white-space:normal}
.v2-image-panel-copy.is-rich>:last-child{margin-bottom:0}

/* A loading/broken image has no reliable hit coordinates. Visibility also
 * removes its links from keyboard navigation and its text from the a11y tree. */
.v2-image-panel:not(.is-ready) > .v2-image-panel-link,
.v2-image-panel:not(.is-ready) > .v2-image-panel-text-plane,
.v2-image-panel:not(.is-ready) > .v2-image-panel-area {
    visibility: hidden;
}

@media (max-width: 760px) {
    .v2-image-panels-grid {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
        row-gap: var(--v2-panel-gap, 24px);
    }
}

/* Miniature admin frames represent an explicit device, not the current browser
 * viewport. Their chosen mode must override the storefront media query, while
 * the single-item editor canvas naturally remains a one-column grid. */
.v2-preview-frame.is-desktop .v2-image-panels-grid,
.v2-preview-frame.is-tablet .v2-image-panels-grid {
    grid-template-columns: repeat(var(--v2-panel-count, 1), minmax(0, 1fr));
    column-gap: var(--v2-panel-gap, 24px);
    row-gap: 0;
}

.v2-preview-frame.is-mobile .v2-image-panels-grid {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: var(--v2-panel-gap, 24px);
}

/* Publisher preview headings have their own mobile typography. These more
 * specific, panel-only rules preserve the baseline ratios inside that frame
 * without changing headings or paragraphs in any other publishing block. */
.v2-preview-frame .v2-preview-block .v2-image-panel-text > .v2-image-panel-heading,
.v2-preview-frame .v2-preview-block .v2-image-panel-text > .v2-image-panel-copy {
    margin: 0;
    padding: 0;
    font-family: inherit;
    color: inherit;
    text-align: inherit;
    letter-spacing: 0;
    white-space: pre-wrap;
    overflow-wrap:normal;
}

.v2-preview-frame .v2-preview-block .v2-image-panel-text > .v2-image-panel-heading {
    font-size: 1em;
    font-weight: 700;
    line-height: 1.2;
}

.v2-preview-frame .v2-preview-block .v2-image-panel-text > .v2-image-panel-copy {
    font-size: .5em;
    font-weight: 400;
    line-height: 1.45;
}

.v2-preview-frame .v2-preview-block .v2-image-panel-heading + .v2-image-panel-copy {
    margin-top: .6em;
}