/*
 * KISS Flickr Gallery – public styles.
 *
 * Layout only. No font-family, font-size, font-weight or text colour is
 * declared here (overlay text excepted, for contrast); the theme wins.
 * Every visual constant is a custom property on .kf-gallery. Selectors carry
 * at most one class and there is no !important anywhere.
 */

.kf-gallery {
	--kf-gap: 6px;
	--kf-row-height: 240px;
	--kf-row-height-sm: 150px;
	--kf-col: 240px;
	--kf-album-min: 220px;
	--kf-header-gap: 2em;
	--kf-album-title-size: 22px;
	--kf-desc-lines: 2;
	--kf-radius: 4px;
	--kf-overlay-bg: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0) 65%);
	--kf-overlay-color: #fff;
	--kf-transition: 160ms ease;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	/* Extra room above the gallery when it is scrolled into view; fixed headers are measured by the script. */
	scroll-margin-top: var(--kf-scroll-margin, 0px);
}

.kf-gallery *,
.kf-gallery *::before,
.kf-gallery *::after {
	box-sizing: inherit;
}

.kf-gallery [hidden] {
	display: none;
}

/* ---------------------------------------------------------------- Albums */

.kf-albums {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--kf-album-min)), 1fr));
	gap: calc(var(--kf-gap) * 2);
	/* Native cover ratios give uneven card heights; never stretch a card to the tallest in its row. */
	align-items: start;
}

/*
 * Fixed column count (Columns setting). The count is a ceiling, not a rule:
 * a column is never narrower than --kf-album-min, so narrower screens drop
 * columns on their own instead of squeezing the count into the width. The
 * -1px keeps auto-fill from rounding a full-width row down to one column
 * fewer. Phones can pin a count with the --fixed-sm rule further down.
 */
.kf-albums--fixed {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--kf-album-min), calc((100% - (var(--kf-album-cols, 4) - 1) * var(--kf-gap) * 2) / var(--kf-album-cols, 4) - 1px))), 1fr));
}

/*
 * A card is a CSS grid with one column: row 1 the cover, row 2 the
 * title/count block, row 3 the description. Overlay and hover modes move
 * the title/count block into row 1 so it stacks on the cover, which keeps
 * the scrim the size of the cover and leaves the description below it.
 */
.kf-album {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	position: relative;
	text-decoration: none;
	color: inherit;
	border-radius: var(--kf-radius);
	outline-offset: 2px;
}

.kf-album:focus-visible {
	outline: 2px solid currentColor;
}

.kf-album-cover {
	grid-column: 1;
	grid-row: 1;
	display: block;
	position: relative;
	aspect-ratio: var(--ratio, 1);
	overflow: hidden;
	border-radius: var(--kf-radius);
	background: rgba(127, 127, 127, .12);
}

.kf-album-cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Themes that force img { height: auto } cannot undo min/max, so the cover always fills its box. */
	min-height: 100%;
	max-height: 100%;
	transition: transform var(--kf-transition);
}

.kf-album:hover .kf-album-cover img,
.kf-album:focus-within .kf-album-cover img {
	transform: scale(1.02);
}

.kf-album-meta {
	grid-column: 1;
	grid-row: 2;
	display: block;
	padding: .5em 0 0;
}

/*
 * Card title: a heading element so the theme's heading font applies; the
 * size comes from the Album title size setting. Two classes on purpose:
 * theme and builder rules such as `.elementor-kit-11 h3` or `.wrapper h3`
 * would otherwise outrank a single class and force their own size.
 */
.kf-albums .kf-album-name {
	display: block;
	margin: 0 0 .15em;
	font-size: var(--kf-album-title-size);
	font-weight: 400;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

.kf-album-count {
	font-size: .85em;
	font-weight: 600;
}

.kf-album-count {
	display: block;
	opacity: .75;
}

.kf-album-desc {
	grid-column: 1;
	grid-row: 3;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--kf-desc-lines);
	overflow: hidden;
	padding-top: .5em;
	opacity: .85;
}

/* overlay and hover modes: title and count over the cover with a scrim for contrast; the description stays below */
.kf-albums--overlay .kf-album-meta,
.kf-albums--hover .kf-album-meta {
	grid-row: 1;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: .75em;
	border-radius: var(--kf-radius);
	background: var(--kf-overlay-bg);
	color: var(--kf-overlay-color);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.kf-albums--overlay .kf-album-count,
.kf-albums--hover .kf-album-count {
	opacity: .9;
}

/* Theme heading colours are usually dark; on the scrim the title must stay light. */
.kf-albums--overlay .kf-album-name,
.kf-albums--hover .kf-album-name {
	color: inherit;
}

/* Description inside the overlay (default placement). */
.kf-albums--overlay .kf-album-meta .kf-album-desc,
.kf-albums--hover .kf-album-meta .kf-album-desc {
	padding-top: .35em;
	opacity: .9;
}

/* hover mode only: hidden until hover or keyboard focus */
.kf-albums--hover .kf-album-meta {
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--kf-transition), visibility var(--kf-transition);
}

.kf-albums--hover .kf-album:hover .kf-album-meta,
.kf-albums--hover .kf-album:focus-within .kf-album-meta {
	opacity: 1;
	visibility: visible;
}

/* touch devices have no hover: fall back to static */
@media (hover: none) {
	.kf-albums--hover .kf-album-meta {
		grid-row: 2;
		display: block;
		padding: .5em 0 0;
		background: none;
		color: inherit;
		text-shadow: none;
		opacity: 1;
		visibility: visible;
	}
}

/* hidden mode: text stays in the DOM for assistive tech and crawlers */
.kf-albums--hidden .kf-album-meta,
.kf-albums--hidden .kf-album-desc {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ----------------------------------------------------------- Album header */

.kf-album-header {
	margin: 0 0 var(--kf-header-gap);
}

.kf-back {
	margin: 0 0 1.25em;
}

.kf-album-title {
	margin: 0 0 .4em;
}

.kf-album-count {
	margin: 0 0 .9em;
	opacity: .75;
}

.kf-album-description {
	margin: 0 0 1em;
	max-width: 72ch;
}

/* Header alignment setting; "inherit" leaves the theme's alignment alone. */
.kf-align-left {
	text-align: left;
}

.kf-align-center {
	text-align: center;
}

.kf-align-center .kf-album-description {
	margin-inline: auto;
}

/* --------------------------------------------------------------- Photo grid */

.kf-grid {
	width: 100%;
}

.kf-item {
	margin: 0;
	position: relative;
}

.kf-thumb {
	display: block;
	position: relative;
	aspect-ratio: var(--ratio, 1.5);
	overflow: hidden;
	border-radius: var(--kf-radius);
	background: rgba(127, 127, 127, .12);
	outline-offset: 2px;
}

.kf-thumb:focus-visible {
	outline: 2px solid currentColor;
}

.kf-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100%;
	max-height: 100%;
	object-fit: cover;
}

/* Justified: flex rows sized from each photo's ratio. */
.kf-grid--justified {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kf-gap);
}

.kf-grid--justified .kf-item {
	flex: var(--ratio, 1.5) 1 calc(var(--ratio, 1.5) * var(--kf-row-height));
	min-width: 0;
}

/* Phantom last item absorbs leftover space so the final row keeps its height. */
.kf-grid--justified::after {
	content: "";
	flex: 9999 0 auto;
}

@media (max-width: 600px) {
	.kf-grid--justified .kf-item {
		flex-basis: calc(var(--ratio, 1.5) * var(--kf-row-height-sm));
	}
}

/*
 * Masonry: CSS grid with row spans computed from ratio + column width (JS).
 * Rows are 2px with no row gap; the vertical gap is folded into each span so
 * the space below every photo is the same to within a pixel. (With larger
 * rows plus a row gap the leftover varied by up to 13px from photo to photo.)
 */
.kf-grid--masonry {
	display: grid;
	grid-auto-rows: 2px;
	column-gap: var(--kf-gap);
	row-gap: 0;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--kf-col)), 1fr));
}

.kf-grid--masonry .kf-item {
	grid-row-end: span var(--span, 120);
}

/* Fixed column count (Columns setting): a ceiling, as for .kf-albums--fixed, with --kf-col as the floor. */
.kf-grid--fixed {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--kf-col), calc((100% - (var(--kf-cols, 4) - 1) * var(--kf-gap)) / var(--kf-cols, 4) - 1px))), 1fr));
}

@media (max-width: 600px) {
	.kf-albums--fixed-sm {
		grid-template-columns: repeat(var(--kf-album-cols-sm, 2), minmax(0, 1fr));
	}

	.kf-grid--fixed-sm {
		grid-template-columns: repeat(var(--kf-cols-sm, 2), minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------ Controls */

.kf-sentinel {
	height: 1px;
}

.kf-actions {
	text-align: center;
	margin: calc(var(--kf-gap) * 2) 0 0;
}

.kf-button {
	display: inline-block;
	font: inherit;
	color: inherit;
	background: rgba(127, 127, 127, .15);
	border: 1px solid currentColor;
	border-radius: var(--kf-radius);
	padding: .5em 1.25em;
	cursor: pointer;
}

.kf-status {
	margin: .5em 0 0;
	min-height: 1.4em;
	opacity: .75;
}

.kf-status:empty {
	display: none;
}

.kf-credit {
	margin: .75em 0 0;
	font-size: .8em;
	opacity: .6;
	text-align: right;
}

.kf-notice {
	padding: .75em 1em;
	border: 1px dashed currentColor;
	border-radius: var(--kf-radius);
	opacity: .8;
}

.kf-empty {
	opacity: .75;
}

/* ------------------------------------------------------------ Lightbox UI */

/*
 * PhotoSwipe's controls are <button>s. Page builders and themes style every
 * button on the site (Elementor's kit rules, for one), which turns the
 * close, zoom and arrow controls into large coloured blocks. Two classes
 * outrank those rules; the values restore PhotoSwipe's own geometry.
 */
.pswp .pswp__button,
.pswp .pswp__button:hover,
.pswp .pswp__button:focus,
.pswp .pswp__button:active {
	width: 50px;
	height: 60px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline-offset: -2px;
	color: inherit;
	line-height: 1;
	transform: none;
	transition: none;
}

.pswp .pswp__button--close {
	margin-right: 6px;
}

.pswp .pswp__button--arrow,
.pswp .pswp__button--arrow:hover,
.pswp .pswp__button--arrow:focus {
	width: 75px;
	height: 100px;
}

.pswp .kf-pswp-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: .75em max(1em, 6vw) 1em;
	background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
	max-height: 40vh;
	overflow: auto;
	pointer-events: none;
}

.pswp .kf-pswp-caption:empty {
	display: none;
}

.pswp .kf-pswp-caption > * {
	pointer-events: auto;
}

/* Photo title: a heading (theme font), sized to stand out; colour forced light for the dark backdrop. */
.pswp .kf-pswp-title {
	display: block;
	margin: 0 0 .35em;
	padding: 0;
	font-size: 1.35em;
	line-height: 1.2;
	color: inherit;
}

.pswp .kf-pswp-text {
	opacity: .9;
}

.pswp .kf-pswp-text p {
	margin: 0 0 .5em;
}

.pswp .kf-pswp-links {
	margin-top: .35em;
}

/* Links take the theme's link colour; only the underline is ours. */
.pswp .kf-pswp-links a {
	text-decoration: underline;
	margin-right: 1em;
}

.pswp .kf-pswp-live {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Caption alignment setting. Centered captions are kept to a readable measure. */
.pswp .kf-pswp-caption--center {
	text-align: center;
}

.pswp .kf-pswp-caption--center > * {
	max-width: 72ch;
	margin-inline: auto;
}

.pswp .kf-pswp-caption--center .kf-pswp-links a {
	margin: 0 .6em;
}

@media (max-width: 600px) {
	.pswp .kf-pswp-caption {
		max-height: 30vh;
		padding-inline: 1em;
	}
}

.pswp {
	height: 100dvh;
}

/* ------------------------------------------------------------ Motion */

@media (prefers-reduced-motion: reduce) {
	.kf-gallery {
		--kf-transition: 0s;
	}

	.kf-album:hover .kf-album-cover img,
	.kf-album:focus-within .kf-album-cover img {
		transform: none;
	}
}