/* Bento-style mosaic grid for punch_science_gallery.php */

.css-fieldset {
	border-radius: 10px;
}

/* Bento / Newest-First view toggle — same look as the data calendar's Polarized/Clear
   switch (styles/punch_datacalendar_styles.css's .cal-toggle-*), duplicated under
   gallery-* names rather than shared, per this codebase's existing convention of small
   per-page copies (see e.g. punch_overlay_json.php's duplicated fetch/parse helpers). */
#gallery-view-control {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 10px 0 4px 0;
}
#gallery-view-description {
	margin: 0 0 20px 0;
	font-size: 0.9rem;
	font-style: italic;
	color: #bbb;
}
.gallery-toggle-prefix-label {
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
}
#gallery-view-toggle-group {
	display: flex;
	align-items: center;
	gap: 8px;
}
.gallery-toggle-label {
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: #888;
	transition: color .2s;
	user-select: none;
}
.gallery-toggle-label-active {
	color: #fff;
}
.gallery-toggle-switch {
	position: relative;
	display: inline-block;
	width: 52px;
	height: 28px;
	cursor: pointer;
}
.gallery-toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute;
}
.gallery-toggle-slider {
	position: absolute;
	inset: 0;
	background: #7ff4fe;
	border-radius: 28px;
	transition: background .25s;
}
.gallery-toggle-slider::before {
	content: '';
	position: absolute;
	width: 22px;
	height: 22px;
	left: 3px;
	top: 3px;
	background: #051e24;
	border-radius: 50%;
	transition: transform .25s;
}
.gallery-toggle-switch input:checked + .gallery-toggle-slider::before {
	transform: translateX(24px);
}
.gallery-toggle-switch:focus-within .gallery-toggle-slider {
	outline: 2px solid #F37C01;
	outline-offset: 2px;
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 110px;
	grid-auto-flow: dense;
	gap: 14px;
	margin: 20px 0;
}

/* Baseline shape before punch_gallery.js's layoutBento() runs (and its no-JS fallback).
   Wide-layout placement (grid-column/grid-row start+span) is otherwise computed and set
   as inline styles by layoutBento(), which packs every visible tile into the very first
   open grid cell it can find — this guarantees no interior gaps, which plain CSS
   grid-auto-flow: dense could not (it only fills a gap when some later shape happens to
   fit it exactly; a wrong-shaped leftover hole just stays empty). The size-small/wide/tall/
   large classes rendered by PHP for $gallery_items[n]['size'] no longer carry CSS of their
   own — layoutBento() reads them purely as a data hint for which footprint to prefer. */
.gallery-cell { grid-column: span 2; grid-row: span 2; }

.gallery-cell {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	background: #062E36;
	box-shadow: 0 0 0 2px #7ff4fe;
	transition: box-shadow .2s ease-in-out, transform .2s ease-in-out;
}
.gallery-cell:hover,
.gallery-cell:focus-visible {
	box-shadow: 0 0 0 2px #F37C01;
}
.gallery-cell img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gallery-cell-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 10px 12px 8px 12px;
	background: linear-gradient(to top, rgba(5,30,36,0.92) 0%, rgba(5,30,36,0.55) 60%, rgba(5,30,36,0) 100%);
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: left;
	pointer-events: none;
}
.gallery-cell-title {
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.25;
	transition: color .2s ease-in-out;
}
/* Title turns orange with the border on hover / keyboard focus. */
.gallery-cell:hover .gallery-cell-title,
.gallery-cell:focus-visible .gallery-cell-title {
	color: #F37C01;
}
.gallery-cell-caption {
	color: #cfeff2;
	font-size: 0.8rem;
	line-height: 1.2;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gallery-play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 54px;
	height: 54px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(5,30,36,0.65);
	pointer-events: none;
}
.gallery-play-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 0 10px 16px;
	border-color: transparent transparent transparent #fff;
	transform: translate(-50%, -50%);
}

/* Category filter (.css-fieldset wrapper already styled globally in punch_styles.css) */
.gallery-filter-row {
	display: flex;
	flex-wrap: wrap;          /* lets the category block drop below the buttons when narrow */
	align-items: baseline;    /* buttons' text lines up with the first line of categories */
	gap: 10px 20px;
	margin-left: 3px;
}
.gallery-filter-actions {
	display: inline-flex;
	gap: 10px;
	flex: none;
}
/* Categories wrap inside their own block, so lines 2+ start under the first category. */
.gallery-filter-cats {
	flex: 1 1 280px;          /* drops below the buttons once less than ~280px is left */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
}
/* A unit the row can't break inside (see the pairing note in punch_science_gallery.php). */
.gallery-filter-pair {
	display: inline-flex;
	align-items: center;
	gap: 20px;
}
.gallery-filter-actions button {
	background: transparent;
	border: 2px solid #7ff4fe;
	color: #7ff4fe;
	padding: 3px 12px;
	border-radius: 14px;
	cursor: pointer;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 0.9rem;
	transition: color .2s ease-in-out, border-color .2s ease-in-out;
}
.gallery-filter-actions button:hover,
.gallery-filter-actions button:focus-visible {
	color: #F37C01;
	border-color: #F37C01;
}
#gallery-filter-group label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #ddd;
	font-size: 1.15rem;
	cursor: pointer;
}
#gallery-filter-group input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 4px;
	background: #7ff4fe;
	position: relative;
	cursor: pointer;
	transition: background-color .2s ease-in-out;
}
#gallery-filter-group input[type="checkbox"]:hover,
#gallery-filter-group input[type="checkbox"]:focus-visible {
	background: #F37C01;
}
#gallery-filter-group input[type="checkbox"]:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
#gallery-filter-group input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 2px;
	width: 5px;
	height: 9px;
	border: solid #051e24;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* ---- Gallery modal ---- */
#gallerydialog {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 0;
	background: #051e24;
	color: #ddd;
	overflow: hidden;
	scrollbar-width: none;
}
#gallerydialog::backdrop {
	background: rgba(0,0,0,0.75);
}
#gallerydialog[open] {
	display: flex;
	flex-direction: row;
	animation: gallery-modal-zoom 0.25s ease-out;
}
@keyframes gallery-modal-zoom {
	from { transform: scale(0.85); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

#gallery-modal-close,
#gallery-panel-toggle {
	position: absolute;
	top: 8px;
	z-index: 3;
	background: transparent;
	border: none;
	color: #7ff4fe;
	cursor: pointer;
	transition: color .2s ease-in-out;
}
#gallery-modal-close:hover, #gallery-modal-close:focus-visible,
#gallery-panel-toggle:hover, #gallery-panel-toggle:focus-visible {
	color: #F37C01;
}
#gallery-modal-close {
	right: 16px;
	font-size: 34px;
	font-weight: bold;
	line-height: 1;
}
#gallery-panel-toggle {
	right: 60px;
	font-size: 0.85rem;
	padding: 6px 10px;
	border: 2px solid currentColor;
	border-radius: 14px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
}

#gallery-modal-stage {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
}
#gallery-modal-stage img,
#gallery-modal-stage video {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
#gallery-embed-wrap {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
}
#gallery-embed-wrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

#gallery-modal-panel {
	flex: 0 0 320px;
	width: 320px;
	box-sizing: border-box;
	padding: 54px 24px 24px 24px;
	background: #062E36;
	overflow-y: auto;
	transition: flex-basis .3s ease-in-out, width .3s ease-in-out, padding .3s ease-in-out, opacity .2s ease-in-out;
}
#gallery-modal-panel.panel-collapsed {
	flex-basis: 0;
	width: 0;
	padding-left: 0;
	padding-right: 0;
	opacity: 0;
	overflow: hidden;
}
#gallery-modal-panel h2 {
	margin: 0 0 10px 0;
	color: #fff;
	font-size: 1.2rem;
}
#gallery-modal-caption {
	white-space: pre-line;
}
#gallery-modal-panel dl {
	margin: 16px 0 0 0;
}
#gallery-modal-panel dt {
	color: #fff;
	font-weight: 700;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-top: 10px;
}
#gallery-modal-panel dd {
	margin: 2px 0 0 0;
	color: #ddd;
}
#gallery-modal-more {
	margin: 16px 0 0 0;
}
#gallery-modal-more a {
	color: #7ff4fe;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-decoration: none;
	transition: color .2s ease-in-out;
}
#gallery-modal-more a:hover,
#gallery-modal-more a:focus-visible {
	color: #F37C01;
}
.gallery-modal-more-note {
	font-size: 0.8rem;
	font-style: italic;
	color: #bbb;
}

/* Newest-First grid view: its own 3-column template (Freeform/bento stays at 4 — see
   .gallery-grid above), showing 3 tiles across at desktop width. Every visible tile gets
   the same fixed footprint — 1 column wide, matching JS's DATE_ORDER_GRID_COLUMNS=3, so 3
   cells tile each row with zero gaps (a 2-column span here would leave a 1-column dangling
   gap each row, since 3 isn't evenly divisible by 2). A single row span can't express a
   ratio between 2:1 and a true 1:1 square (there's no whole number of rows between 1 and
   2), so the tile's actual aspect ratio (1.5:1 — "halfway to square" from the original 2:1)
   comes from JS's DATE_ORDER_ROW_DIVISOR in updateRowHeight(), not from rows/cols here.
   Plain CSS grid auto-placement then tiles them in DOM order — already 'published'-date
   descending, from the PHP-side usort — with no packing needed. Scoped to the wide
   breakpoint only: at #gallery-grid.gallery-cell's own specificity this would otherwise
   outrank (and break) the narrow layout's uniform sizing below, since adding a class only
   increases specificity, never decreases it. */
@media (min-width: 851px) {
	#gallery-grid.date-order-view {
		grid-template-columns: repeat(3, 1fr);
	}
	#gallery-grid.date-order-view .gallery-cell {
		grid-column: span 1;
		grid-row: span 1;
	}
}

/* Freeform's own narrow breakpoint — below this width it keeps packing (still its own
   bento mosaic, still no interior gaps), just at 3 columns instead of 4
   (GRID_COLUMNS_NARROW in punch_gallery.js, which this must match). No .gallery-cell
   override here, unlike the give-up floors further below — layoutBento() keeps setting
   each cell's own grid-column/grid-row inline, it just does the math against 3 columns
   now. Scoped with :not(.date-order-view) so it can't also apply to Newest-First grid
   between this width and its own (wider, and fully give-up) breakpoint further below. */
@media (max-width: 700px) {
	#gallery-grid:not(.date-order-view) { grid-template-columns: repeat(3, 1fr); margin: 15px 10px; }
}

/* Newest-First grid's own narrow breakpoint (wider than Freeform's, above) — plus the
   modal's, which doesn't depend on grid view at all and stays unscoped here. */
@media (max-width: 850px) {
	#gallery-modal-panel {
		position: absolute;
		inset: 0;
		flex-basis: auto;
		width: 100%;
		z-index: 2;
		transform: translateY(0);
		transition: transform .3s ease-in-out;
	}
	#gallery-modal-panel.panel-collapsed {
		transform: translateY(-100%);
		width: 100%;
		flex-basis: auto;
		padding: 54px 24px 24px 24px;
		opacity: 1;
	}

	#gallery-grid.date-order-view { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; margin: 15px 10px; }
	#gallery-grid.date-order-view .gallery-cell { grid-column: span 1; grid-row: span 2; }
}

/* Universal single-column floor, both views. Written with both the .date-order-view and
   :not(.date-order-view) selectors (rather than a plain #gallery-grid) purely so its
   specificity matches-or-beats the two view-scoped blocks above — otherwise, at this
   width, this rule and (say) Freeform's 700px block would both technically match, and the
   more specific one (the 700px block's, since adding a class can only ever raise
   specificity) would win regardless of this block's later source position, leaving
   Freeform stuck at 2 columns instead of reaching a true single column. */
@media (max-width: 500px) {
	#gallery-grid.date-order-view,
	#gallery-grid:not(.date-order-view) {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
	}
	#gallery-grid.date-order-view .gallery-cell,
	#gallery-grid:not(.date-order-view) .gallery-cell {
		grid-column: 1 / -1;
		grid-row: auto;
		aspect-ratio: 4 / 3;
	}
	/* Both layouts are a single column here, so the toggle and its description don't apply. */
	#gallery-view-control,
	#gallery-view-description {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	#gallerydialog[open] { animation: none; }
	#gallery-modal-panel { transition: none; }
	.gallery-cell { transition: none; }
}