/* Public Custom Pages gallery polish. Loaded after the stable Core styles. */
.inkorly-custom-page-public__gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    width: min(1100px, 100%);
}

.inkorly-custom-page-public__gallery--count-1 {
    grid-template-columns: minmax(0, 640px);
    justify-content: center;
    width: min(640px, 100%);
}

.inkorly-custom-page-public__gallery--count-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(900px, 100%);
}

.inkorly-custom-page-public__gallery-item {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
}

/*
 * Apply the public Custom Page image treatment at the wrapper level rather than
 * relying on one renderer-specific image class. This covers the normal v2
 * gallery renderer as well as the legacy/rollback fallback, which can emit
 * plain <img> elements without the gallery-image class.
 */
.inkorly-custom-page-public img {
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

/*
 * Let the image element keep the same box as the visible artwork. For portrait
 * images, forcing width: 100% while also capping max-height creates a wider
 * transparent/letterboxed element around the picture; the radius then clips
 * that outer box instead of the visible portrait corners. Intrinsic width with
 * max-width/max-height keeps portrait and landscape images equally round.
 */
.inkorly-custom-page-public__gallery-image {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 520px;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

@media (max-width: 900px) {
    .inkorly-custom-page-public__gallery,
    .inkorly-custom-page-public__gallery--count-2,
    .inkorly-custom-page-public__gallery--count-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .inkorly-custom-page-public__gallery--count-1 {
        grid-template-columns: minmax(0, 640px);
        width: min(640px, 100%);
    }
}

@media (max-width: 767px) {
    .inkorly-custom-page-public__gallery,
    .inkorly-custom-page-public__gallery--count-1,
    .inkorly-custom-page-public__gallery--count-2,
    .inkorly-custom-page-public__gallery--count-3 {
        grid-template-columns: 1fr;
        width: 100%;
        gap: 18px;
    }

    .inkorly-custom-page-public__gallery-image {
        max-height: none;
    }
}