/* Base wrapper */

.wp-block-group-is-layout-flow {
	padding-left: 20px;
	padding-right: 20px;
}

/* container */
.lpl-pres-gallery {
	display: flex !important;
	flex-wrap: wrap;
	gap: var(--lpl-row-gap, 8px);
	align-items: stretch;
}

/* Items: base */
.lpl-pres-gallery__item {
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Optional inner wrapper */
.lpl-pres-gallery--img-container {
    height: 100%;
}

/* Default row height (overridable via inline style / block config) */
.lpl-pres-gallery--justified {
    --lpl-row-height: 350px;
}

/* Justified layout – each item flexes based on its aspect ratio */

.lpl-pres-gallery--justified .lpl-pres-gallery__item,
.lpl-pres-gallery--justified::after {
/*    --lpl-row-height: 350px;                 /* default row height */
    --lpl-width: 0;
    --lpl-height: 0;
    --lpl-aspect: calc(var(--lpl-width) / var(--lpl-height));
    flex-basis: calc(var(--lpl-aspect) * var(--lpl-row-height));
}

/* Items grow based on ratio (for full rows) */
.lpl-pres-gallery--justified .lpl-pres-gallery__item {
    flex-grow: calc(var(--lpl-aspect) * 100);
    margin: 0;
}

/* Pseudo fills line (for full justification) */
.lpl-pres-gallery--justified::after {
    --lpl-width: 2;
    --lpl-height: 1;
    content: '';
    flex-grow: 1000000;
}

/* Images – keep natural aspect, no cropping/distortion */
.lpl-pres-gallery--justified .lpl-pres-gallery__item img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Last row: don't stretch */
.lpl-pres-gallery--justified.no-fill-last .lpl-pres-gallery__item.is-last-row {
    flex-grow: 0;      /* last-row items don't share free space */
}

.lpl-pres-gallery--justified.no-fill-last::after {
    flex-grow: 0;      /* pseudo doesn’t stretch either */
}


/* Make sure images fill the height and crop to fit */

.lpl-pres-gallery__link {
	display: block;
	width: 100%;
	height: 100%;
}

/*
.lpl-pres-gallery__image {
	object-fit: cover;
	block-size: var(--lpl-row-height, 350px);
}
*/
.lpl-pres-gallery__item img:hover {
    filter: brightness(70%);
}


/* -----------------------------------------
   LPL Presentation – Captions (two-axis API)
   Mode (visibility):
   - .lpl-pres-gallery--captions-mode-none
   - .lpl-pres-gallery--captions-mode-always
   - .lpl-pres-gallery--captions-mode-hover

   Position (geometry):
   - .lpl-pres-gallery--captions-pos-below
   - .lpl-pres-gallery--captions-pos-middle
   - .lpl-pres-gallery--captions-pos-bottom
------------------------------------------ */

/* Base caption style */
.lpl-pres-gallery__caption {
    font-size: var(--lpl-caption-font-size, 0.9rem);
    line-height: 1.35;
    margin: 0;
}

/* ========== MODE: none ========== */
.lpl-pres-gallery--captions-mode-none .lpl-pres-gallery__caption {
    display: none;
}

/* ========== POSITION: below ========== */
.lpl-pres-gallery--captions-pos-below .lpl-pres-gallery__item {
    display: flex;
    flex-direction: column;
}

.lpl-pres-gallery--captions-pos-below .lpl-pres-gallery__caption {
    position: static;
    color: inherit;
    margin-top: 0.35rem;
    opacity: 1;
    transform: none;
    background: none;
    padding: 0;
}

/* For below-captions we generally don't want overlay hover behaviors */
.lpl-pres-gallery--captions-pos-below .lpl-pres-gallery__item {
    cursor: default;
}

/* ========== POSITION: middle overlay ========== */
.lpl-pres-gallery--captions-pos-middle .lpl-pres-gallery__caption {
    position: absolute;
    inset-inline: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: #fff;
    padding: 0.5rem 0.75rem;
    pointer-events: none;
}

/* ========== POSITION: bottom overlay (gradient) ========== */
.lpl-pres-gallery--captions-pos-bottom .lpl-pres-gallery__caption {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
    color: #fff;
    pointer-events: none;
}

/* Optional: normalize <p> inside captions */
.lpl-pres-gallery__caption p {
    margin: 0 !important;
    padding: 0;
}

/* ========== MODE: always ========== */
/* For overlay positions, "always" means visible immediately */
.lpl-pres-gallery--captions-mode-always .lpl-pres-gallery__caption {
    opacity: 1;
}

/* ========== MODE: hover ========== */
/* Hover mode sets initial hidden state for overlay positions */
.lpl-pres-gallery--captions-mode-hover.lpl-pres-gallery--captions-pos-middle .lpl-pres-gallery__caption,
.lpl-pres-gallery--captions-mode-hover.lpl-pres-gallery--captions-pos-bottom .lpl-pres-gallery__caption {
    opacity: 0;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

/* Bottom overlay gets the nice slide-up effect */
.lpl-pres-gallery--captions-mode-hover.lpl-pres-gallery--captions-pos-bottom .lpl-pres-gallery__caption {
    transform: translateY(10px);
}

/* On hover / focus-within show */
.lpl-pres-gallery--captions-mode-hover .lpl-pres-gallery__item:hover .lpl-pres-gallery__caption,
.lpl-pres-gallery--captions-mode-hover .lpl-pres-gallery__item:focus-within .lpl-pres-gallery__caption {
    opacity: 1;
    transform: translateY(0);
}

/* Hover cursor hint for overlay modes */
.lpl-pres-gallery--captions-mode-hover.lpl-pres-gallery--captions-pos-middle .lpl-pres-gallery__item,
.lpl-pres-gallery--captions-mode-hover.lpl-pres-gallery--captions-pos-bottom .lpl-pres-gallery__item {
    cursor: pointer;
}

/* When mode is hover but position is below, we keep captions always visible */
.lpl-pres-gallery--captions-mode-hover.lpl-pres-gallery--captions-pos-below .lpl-pres-gallery__caption {
    opacity: 1;
    transform: none;
}

/* Small-screen tweak: reduce row height a bit */
@media (max-width: 768px) {
    .lpl-pres-gallery {
        --lpl-row-height: 180;
    }
}

.lpl-pres-list { display: block; }
.lpl-pres-list__item { margin: 0 0 1.5rem 0; }
.lpl-pres-list__title { margin: 0 0 0.5rem 0; }
.lpl-pres-list__caption { opacity: 0.8; }