/**
 * KSM PG frontend styles.
 *
 * Loaded only when the [ksm_pg_gallery] or [image_content] shortcode actually
 * renders on a page (lazy-enqueued from the shortcode handler).
 *
 * The grid column count is driven by the CSS custom property --ksm-pg-cols,
 * set inline on the wrapper from the Group's Columns meta. Themes can
 * override the visual look at the variable level (no specificity wars).
 *
 * @package KSM_PG
 * @license GPL-2.0+
 */

.ksm-pg-gallery {
    display: grid;
    grid-template-columns: repeat(var(--ksm-pg-cols, 4), 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
}

.ksm-pg-gallery__item {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.ksm-pg-gallery__item img,
.ksm-pg-gallery__image {
    width: 100%;
    height: 100%;
    max-height: 250px;
    object-fit: cover;
    display: block;
}

/* Responsive fallback. */
@media (max-width: 768px) {
    .ksm-pg-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .ksm-pg-gallery {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------ */
/* [image_content] — single body image with optional alignment.        */
/* Scoped to .ksm-pg-content-image so we never fight a theme's own      */
/* .alignleft/.alignright rules globally.                               */
/* ------------------------------------------------------------------ */
.ksm-pg-content-image {
    margin: 0 0 1.25em;
    max-width: 100%;
}

.ksm-pg-content-image img {
    height: auto;
    max-width: 100%;
}

.ksm-pg-content-image.alignright {
    float: right;
    max-width: 50%;
    margin: 0.25em 0 1em 1.5em;
}

.ksm-pg-content-image.alignleft {
    float: left;
    max-width: 50%;
    margin: 0.25em 1.5em 1em 0;
}

.ksm-pg-content-image.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.ksm-pg-content-image.alignnone {
    display: block;
}

/* On small screens, drop floats so the image never crushes the text. */
@media (max-width: 480px) {
    .ksm-pg-content-image.alignleft,
    .ksm-pg-content-image.alignright {
        float: none;
        max-width: 100%;
        margin: 0 0 1.25em;
    }
}