/* If the shortcode sits inside a <code> tag, drop the theme's inline code box (it leaves a stray fragment above the gallery). */
code:has(>.kcf-gallery-wrap){display:block;background:none;border:0;padding:0;font:inherit;color:inherit}
.kcf-gallery{--kcf-gap:8px;display:flex;flex-direction:column;margin-block:calc(var(--kcf-gap) / -2)}
/* Fixed mosaic on a 10-unit grid (square = 3 units, tall = 4 units, i.e. 4/3 of a square).
   Cols 1&3: small/tall/small. Cols 2&4: tall/small/small. Gaps are drawn as tile padding so proportions stay exact. */
.kcf-block{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(10,1fr);aspect-ratio:6/5;margin:0 calc(var(--kcf-gap) / -2)}
.kcf-tile{display:block;overflow:hidden;position:relative;min-width:0;min-height:0}
.kcf-tile img{position:absolute;inset:calc(var(--kcf-gap) / 2);width:calc(100% - var(--kcf-gap));height:calc(100% - var(--kcf-gap));object-fit:cover;border-radius:20px;background:#eee;transition:filter .3s ease,transform .3s ease}
.kcf-tile:hover img{filter:brightness(1.1);transform:scale(1.02)}
.kcf-tile:nth-child(1){grid-area:1/1/4/2}
.kcf-tile:nth-child(2){grid-area:4/1/8/2}
.kcf-tile:nth-child(3){grid-area:8/1/11/2}
.kcf-tile:nth-child(4){grid-area:1/2/5/3}
.kcf-tile:nth-child(5){grid-area:5/2/8/3}
.kcf-tile:nth-child(6){grid-area:8/2/11/3}
.kcf-tile:nth-child(7){grid-area:1/3/4/4}
.kcf-tile:nth-child(8){grid-area:4/3/8/4}
.kcf-tile:nth-child(9){grid-area:8/3/11/4}
.kcf-tile:nth-child(10){grid-area:1/4/5/5}
.kcf-tile:nth-child(11){grid-area:5/4/8/5}
.kcf-tile:nth-child(12){grid-area:8/4/11/5}

/* size="same": every tile is the tall size; columns 2 and 4 sit 50px lower. */
.kcf-block--same{grid-template-rows:repeat(3,auto);grid-auto-flow:column;aspect-ratio:auto;padding-bottom:50px}
.kcf-block--same .kcf-tile:nth-child(n){grid-area:auto;aspect-ratio:3/4}
.kcf-block--same .kcf-tile:nth-child(n+4):nth-child(-n+6),.kcf-block--same .kcf-tile:nth-child(n+10):nth-child(-n+12){transform:translateY(50px)}

/* Filter applied: plain row-first grid, 4 per row, so a second row only starts once the first has 4 images. */
.kcf-block.kcf-block--filtered{grid-template-rows:none;grid-auto-rows:auto;grid-auto-flow:row;aspect-ratio:auto;padding-bottom:0}
.kcf-block.kcf-block--filtered .kcf-tile:nth-child(n){grid-area:auto;aspect-ratio:3/4;transform:none}

.kcf-lb{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center}
.kcf-lb img{max-width:92vw;max-height:88vh;object-fit:contain}
.kcf-lb button{position:absolute;background:none;border:0;color:#fff;font-size:42px;line-height:1;cursor:pointer;padding:12px}
.kcf-lb-close{top:8px;right:12px}.kcf-lb-prev{left:8px;top:50%}.kcf-lb-next{right:8px;top:50%}

.kcf-filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:40px}
.kcf-filter{-webkit-appearance:none;appearance:none;border:0;background:#EB002B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 1em center;color:#fff;text-transform:uppercase;border-radius:999px;padding:.6em calc(1em + 12px + 16px) .6em 1.2em;cursor:pointer;font:inherit;font-size:.9em;letter-spacing:.04em}
.kcf-filter option{background:#fff;color:#000;text-transform:none}

.kcf-gallery--square .kcf-tile img{border-radius:0}

/* Phones: two columns instead of four, for the mosaic, same-size and filtered layouts. */
@media (max-width:768px){
	.kcf-gallery .kcf-block,.kcf-gallery .kcf-block--same,.kcf-gallery .kcf-block.kcf-block--filtered{grid-template-columns:repeat(2,1fr);grid-template-rows:none;grid-auto-rows:auto;grid-auto-flow:row;aspect-ratio:auto;padding-bottom:0}
	.kcf-gallery .kcf-block .kcf-tile:nth-child(n):nth-child(n){grid-area:auto;aspect-ratio:3/4;transform:none}
}