/*
 * Folder Gallery 3.1.1 — responsive thumbnail grid + masonry layout.
 *
 * The gallery container carries CSS custom properties set by the shortcode:
 *   --fg-w      thumbnail base width (defines the auto-fill breakpoint)
 *   --fg-gap    gap between thumbnails
 *   --fg-pad    thumbnail padding
 *   --fg-border thumbnail border width
 *   --fg-cols   maximum number of columns on large screens (class fg_cols_max)
 *   --fg-ratio  fixed aspect ratio when a thumbnail height is set (class fg_ratio)
 *
 * The column count adapts automatically to the viewport width (phone,
 * tablet, desktop): each column is at least min(--fg-w, 100%) wide, and
 * as many columns as fit are created. No JavaScript, no fixed breakpoints.
 */

.fg_gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(var(--fg-w, 160px), 100%), 1fr));
	gap: var(--fg-gap, 5px);
	margin: 0 0 1em;
	max-width: 100%;
}

/* Cap the column count on large screens when the "columns" option is set:
 * the container cannot grow wider than N thumbnail tracks + the gaps between
 * them, so the auto-fill grid never creates more than N columns. On smaller
 * screens the grid keeps adapting downward as usual.
 * Each track is --fg-w wide; padding and border live INSIDE the thumbnail
 * (img is width:100% / box-sizing:border-box), so they must NOT be added to
 * the cap — otherwise a large padding would inflate the cap and let extra
 * columns appear. */
.fg_gallery.fg_cols_max {
	max-width: calc(
		var(--fg-cols) * var(--fg-w, 160px)
		+ (var(--fg-cols) - 1) * var(--fg-gap, 5px)
	);
}

.fg_thumbnail {
	min-width: 0; /* allow shrinking inside the grid track */
	text-align: center;
}

.fg_thumbnail a {
	display: block;
}

.fg_gallery img {
	display: block;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	margin: 0;
	padding: var(--fg-pad, 2px);
	border: var(--fg-border, 1px) solid #ddd;
	background: #fff;
}

/* Fixed thumbnail height requested: keep every cell at the same ratio.
 * (Thumbnails are already cropped server-side; the ratio keeps the grid
 * uniform while images load and across older cached thumbnails.) */
.fg_gallery.fg_ratio img {
	aspect-ratio: var(--fg-ratio);
	object-fit: cover;
}

.fg_gallery img:hover {
	border-color: #888;
}

/* -------------------------------------------------------------------------
 * v2.0.3 — MASONRY LAYOUT (layout="masonry" / class fg_masonry).
 * Implemented with CSS multi-column: column-width sets the ideal column
 * size (same breakpoint logic as the grid) and the browser creates as many
 * columns as fit. Supported by all browsers, no JavaScript — native CSS
 * Grid masonry (grid-template-rows: masonry) is still not usable in
 * production as of July 2026 (caniuse.com).
 * Pictures keep their natural aspect ratio (height is forced to auto by
 * the shortcode in masonry mode). Note: items flow top-to-bottom inside
 * each column, then continue in the next column; the lightbox order
 * still follows the configured sort order.
 * ------------------------------------------------------------------------- */
.fg_gallery.fg_masonry {
	display: block;
	/* NB: column-width n'accepte PAS de pourcentage (contrairement à
	 * minmax() côté grid) : min(var(--fg-w), 100%) serait invalide et
	 * la déclaration entière serait ignorée (une seule colonne).
	 * Pas besoin de plafond de toute façon : column-width est indicatif,
	 * le navigateur ne crée jamais de colonne plus large que le conteneur. */
	column-width: var(--fg-w, 160px);
	column-gap: var(--fg-gap, 5px);
}

/* Max Columns option: with column-width also set, column-count acts as a
 * MAXIMUM — fewer columns are created on small screens as usual.
 * The max-width cap inherited from .fg_cols_max keeps the container from
 * stretching, exactly like in grid mode. */
.fg_gallery.fg_masonry.fg_cols_max {
	column-count: var(--fg-cols);
}

.fg_gallery.fg_masonry .fg_thumbnail {
	break-inside: avoid;         /* never split a picture between two columns */
	margin: 0 0 var(--fg-gap, 5px);
}

/* Thumbnails hidden but kept in the DOM (thumbnails="single" / "n"):
 * the lightbox gallery needs the links. */
.fg_hidden {
	display: none;
}

/* thumbnails="none": no grid, just the title link (images stay in the DOM
 * for the lightbox but are not displayed).
 * v2.0.4 — column reset: defense in depth for the masonry + link-only
 * combination (the shortcode no longer emits fg_masonry in link-only mode,
 * but a hand-written fg_masonry class must not fragment the title link
 * into narrow columns either). */
.fg_gallery.fg_linkonly {
	display: block;
	column-width: auto;
	column-count: auto;
}
.fg_gallery.fg_linkonly img {
	display: none;
}
.fg_gallery.fg_linkonly .fg_thumbnail {
	display: inline;
	text-align: left;
}
.fg_gallery.fg_linkonly .fg_thumbnail a {
	display: inline;
}
/* Higher specificity than the two rules above, so hidden entries stay hidden
 * in link-only mode too. */
.fg_gallery.fg_linkonly .fg_thumbnail.fg_hidden {
	display: none;
}

.fg_title_link { font-weight: bold; }
.fg_title      { font-style: italic; }
.fg_caption    { font-style: italic; font-size: 0.9em; overflow-wrap: break-word; }

/* Phones: slightly tighter gaps so more of the width goes to the pictures.
 * v2.0.4 — masonry needs its own rules here: the 'gap' shorthand on
 * .fg_gallery (specificity 0,1,0) is beaten by the column-gap set on
 * .fg_gallery.fg_masonry (0,2,0), and the vertical spacing in masonry
 * comes from the thumbnail margin, not from 'gap'. */
@media (max-width: 480px) {
	.fg_gallery {
		gap: min(var(--fg-gap, 5px), 4px);
	}
	.fg_gallery.fg_masonry {
		column-gap: min(var(--fg-gap, 5px), 4px);
	}
	.fg_gallery.fg_masonry .fg_thumbnail {
		margin-bottom: min(var(--fg-gap, 5px), 4px);
	}
}


/* -------------------------------------------------------------------------
 * v3.0.0 -- BUILT-IN LIGHTBOX (Folder Gallery is now independent of Easy
 * Fancybox / Firelight Lightbox or any other lightbox plugin). Overlay,
 * navigation buttons, caption and counter driven by js/fg-lightbox.js.
 * Deliberately theme-neutral (dark overlay, light controls) regardless of
 * the site's own light/dark styling -- the same convention every lightbox
 * uses, since the overlay covers the whole viewport.
 * ------------------------------------------------------------------------- */
.fg_lightbox_overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(10, 10, 12, 0.92);
	padding: 32px;
}
.fg_lightbox_overlay[hidden] { display: none; }

.fg_lightbox_figure {
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.fg_lightbox_img {
	display: block;
	max-width: 90vw;
	max-height: 78vh;
	width: auto;
	height: auto;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
	background: #111;
}

.fg_lightbox_caption {
	color: #f2f2f2;
	font-size: 0.95em;
	text-align: center;
	max-width: 80vw;
}
.fg_lightbox_caption[hidden] { display: none; }

.fg_lightbox_counter {
	color: #bdbdbd;
	font-size: 0.8em;
	font-variant-numeric: tabular-nums;
}
.fg_lightbox_counter[hidden] { display: none; }

.fg_lightbox_loading {
	position: absolute;
	width: 32px;
	height: 32px;
	border: 3px solid rgba(255, 255, 255, 0.25);
	border-top-color: #fff;
	border-radius: 50%;
	animation: fg_lightbox_spin 0.8s linear infinite;
}
.fg_lightbox_loading[hidden] { display: none; }

@keyframes fg_lightbox_spin {
	to { transform: rotate(360deg); }
}

.fg_lightbox_btn {
	position: absolute;
	appearance: none;
	border: none;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fg_lightbox_btn:hover { background: rgba(0, 0, 0, 0.55); }
.fg_lightbox_btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
.fg_lightbox_btn[hidden] { display: none; }

.fg_lightbox_close { top: 16px; right: 16px; }
.fg_lightbox_prev   { left: 16px; top: 50%; transform: translateY(-50%); }
.fg_lightbox_next   { right: 16px; top: 50%; transform: translateY(-50%); }
.fg_lightbox_play   { top: 16px; left: 16px; font-size: 16px; }
.fg_lightbox_play.fg_lightbox_playing { background: rgba(0, 0, 0, 0.55); }

body.fg_lightbox_open { overflow: hidden; }

@media (max-width: 600px) {
	.fg_lightbox_overlay { padding: 12px; }
	.fg_lightbox_btn { width: 38px; height: 38px; font-size: 18px; }
	.fg_lightbox_prev { left: 6px; }
	.fg_lightbox_next { right: 6px; }
	.fg_lightbox_play { top: 10px; left: 10px; font-size: 14px; }
	.fg_lightbox_close { top: 10px; right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.fg_lightbox_loading { animation: none; border-top-color: rgba(255, 255, 255, 0.25); }
}