/* ============================================================
   GALLERY SLIDER
   Split out of style.css — see functions.php for the enqueue.
   ============================================================ */

/* ============================================================
   4. GALLERY SLIDER
   (the "About Us" block's own styles, including its gallery slider
   arrows, moved to css/miami-about-us.css — see functions.php)
   ============================================================ */

/* --- section: background, spacing and title — Figma node 181:3850
   (desktop), 292:1330 (tablet, <=991px here to match this file's own
   arrow-offset breakpoint below), 298:2540 (mobile, <=767px) --- */

.gallery-slider-section {
	background: var(--cream);
	padding: 200px 30px 240px;
}

@media (max-width: 991px) {
	.gallery-slider-section {
		padding: 104px 92px 128px;
	}
}

@media (max-width: 767px) {
	.gallery-slider-section {
		padding: 56px 20px;
	}
}

.gallery-slider-section__inner {
	display: grid;
	grid-template-areas: "slider";
	row-gap: 88px;
	max-width: 1110px;
	margin-inline: auto;
}

@media (max-width: 991px) {
	.gallery-slider-section__inner {
		row-gap: 72px;
	}
}

@media (max-width: 767px) {
	.gallery-slider-section__inner {
		grid-template-areas: "arrows" "slider";
		row-gap: 32px;
		justify-items: start;
	}
}

/* mobile-only arrow pair, shown above the title instead of overlaid on the
   slider — Figma node 298:2542. Desktop/tablet keep the overlay arrows on
   .gallery-slider-wrap below; the two sets never show at the same time. */
.gallery-slider-section__arrows {
	display: none;
}

@media (max-width: 767px) {
	.gallery-slider-section__arrows {
		grid-area: arrows;
		display: flex;
		gap: 8px;
	}
}

.gallery-slider-section__arrows .swiper-outer-left,
.gallery-slider-section__arrows .swiper-outer-right {
	position: relative;
	background-color: var(--cream-dark);
	width: 46px;
	height: 34px;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.gallery-slider-section__arrows .swiper-outer-left:hover,
.gallery-slider-section__arrows .swiper-outer-right:hover {
	background-color: var(--mocha);
}

/* Slider only goes inert at an edge when it isn't looping — toggled by
   js/miami-gallery-slider.js, same is-disabled convention as
   .about-slide__photo .swiper-arrow.is-disabled in css/miami-about-us.css. */
.gallery-slider-section__arrows .swiper-outer-left.is-disabled,
.gallery-slider-section__arrows .swiper-outer-right.is-disabled {
	background-color: var(--cream-dark);
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

.gallery-slider-section__arrows .swiper-outer-left:before,
.gallery-slider-section__arrows .swiper-outer-right:before {
	position: absolute;
	content: '';
	width: 22px;
	height: 2px;
	top: 16px;
	left: 13px;
	background: var(--black);
}

.gallery-slider-section__arrows .swiper-outer-left:after,
.gallery-slider-section__arrows .swiper-outer-right:after {
	position: absolute;
	content: '';
	width: 11px;
	height: 11px;
	top: 50%;
	border-left: 1.5px solid var(--black);
	border-top: 1.5px solid var(--black);
	box-sizing: border-box;
}

.gallery-slider-section__arrows .swiper-outer-left:after {
	left: 11px;
	transform: translateY(-50%) rotate(-45deg);
}

.gallery-slider-section__arrows .swiper-outer-right:after {
	right: 11px;
	transform: translateY(-50%) rotate(135deg);
}

/* min-width:0 breaks the CSS Grid "auto min-size" feedback loop: without it, the
   swiper JS measuring/setting an explicit pixel width on .swiper-wrapper can push
   this grid item's intrinsic content size, which grows the (implicit, auto-sized)
   "slider" track, which the JS then re-measures as a (now bigger) container on
   the next reflow — runaway growth. Same issue/fix as .about-slide__photo in
   css/miami-about-us.css.
   width:100% guards the same loop a second way, needed only below 767px:
   .gallery-slider-section__inner switches to justify-items:start there (so
   its "arrows" item doesn't stretch full-width), which also stops this grid
   item from stretching to the track — leaving it to size off its own
   (circular) content again despite min-width:0. */
.gallery-slider-wrap {
	grid-area: slider;
	position: relative;
	min-width: 0;
	width: 100%;
}

.gallery-slide__title {
	margin: 0 0 24px;
	font-family: var(--font-display);
	font-size: 40px;
	line-height: 1.2;
	letter-spacing: -1px;
	font-feature-settings: "dlig" 1;
	text-transform: uppercase;
	text-align: center;
	color: var(--black);
}

@media (max-width: 767px) {
	.gallery-slide__title {
		margin-bottom: 16px;
		font-size: 16px;
		letter-spacing: normal;
		text-align: left;
	}
}

/* Plain CSS grid of square tiles — any gallery image count just wraps onto
   as many rows as it needs, no JS layout pass required (see
   shortcodes/miami_gallery_slider.php's header comment for why this
   replaced an isotope.js masonry grid). */
.gallery-slide__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

@media (max-width: 1024px) {
	.gallery-slide__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 767px) {
	.gallery-slide__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}
}

.gallery-slide__grid-item {
	display: block;
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
}

.gallery-slide__grid-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- fixed layouts for specific photo counts (design reference, 2026-08-19) --- */

/* 4 photos: plain 2x2 grid of square tiles, at every breakpoint (overrides
   the 4/3-col wrapping grid above — .gallery-slide__grid-item's square
   aspect-ratio already gives the right tile shape, so nothing else changes). */
.gallery-slide__grid.gallery-slide__grid--4 {
	grid-template-columns: repeat(2, 1fr);
}

/* 8 photos: mosaic of 8 tiles on a 4-column x 4-row grid —
       a a b c
       a a b d
       e f h h
       g g h h
   (letters = grid-template-areas below, mapped to the 8 images in upload
   order via :nth-child). Tile proportions measured off the reference
   design; only worth doing at tablet/desktop widths — below that it falls
   back to the plain wrapping grid above, same as any other photo count. */
@media (min-width: 768px) {
	.gallery-slide__grid.gallery-slide__grid--8 {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(4, 1fr);
		grid-template-areas:
			"a a b c"
			"a a b d"
			"e f h h"
			"g g h h";
		aspect-ratio: 1.07;
	}

	.gallery-slide__grid--8 .gallery-slide__grid-item {
		aspect-ratio: auto;
	}

	.gallery-slide__grid--8 .gallery-slide__grid-item:nth-child(1) { grid-area: a; }
	.gallery-slide__grid--8 .gallery-slide__grid-item:nth-child(2) { grid-area: b; }
	.gallery-slide__grid--8 .gallery-slide__grid-item:nth-child(3) { grid-area: c; }
	.gallery-slide__grid--8 .gallery-slide__grid-item:nth-child(4) { grid-area: d; }
	.gallery-slide__grid--8 .gallery-slide__grid-item:nth-child(5) { grid-area: e; }
	.gallery-slide__grid--8 .gallery-slide__grid-item:nth-child(6) { grid-area: f; }
	.gallery-slide__grid--8 .gallery-slide__grid-item:nth-child(7) { grid-area: g; }
	.gallery-slide__grid--8 .gallery-slide__grid-item:nth-child(8) { grid-area: h; }
}

.gallery-slider-wrap .swiper-slide {
	width: 100%;
}

.gallery-slider-wrap .swiper-arrow {
	position: absolute;
	top: calc(50% + 0.5px);
	background-color: var(--cream-dark);
	width: 60px;
	height: 44px;
	border-radius: 3px;
	cursor: pointer;
	transition: background-color 0.3s ease;
	z-index: 2;
}

.gallery-slider-wrap .swiper-arrow:hover {
	background-color: var(--mocha);
}

/* Only goes inert when the slider isn't looping (see this shortcode's Loop
   param) — toggled by js/miami-gallery-slider.js, same is-disabled
   convention as .about-slide__photo .swiper-arrow.is-disabled in
   css/miami-about-us.css. */
.gallery-slider-wrap .swiper-arrow.is-disabled {
	background-color: var(--cream-dark);
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

.gallery-slider-wrap .swiper-arrow:before {
	position: absolute;
	content: '';
	width: 26px;
	height: 2px;
	top: 21px;
	left: 17px;
	background: var(--black);
}

.gallery-slider-wrap .swiper-arrow-left {
	left: -60px;
	transform: translate(-100%, -50%);
}

.gallery-slider-wrap .swiper-arrow-right {
	right: -60px;
	transform: translate(100%, -50%);
}

@media (max-width: 991px) {
	.gallery-slider-wrap .swiper-arrow-left {
		left: -16px;
	}
	.gallery-slider-wrap .swiper-arrow-right {
		right: -16px;
	}
}

@media (max-width: 767px) {
	.gallery-slider-wrap .swiper-arrow {
		display: none;
	}
}

.gallery-slider-wrap .swiper-arrow-left:after,
.gallery-slider-wrap .swiper-arrow-right:after {
	position: absolute;
	content: '';
	width: 15px;
	height: 15px;
	top: 50%;
	border-left: 2px solid var(--black);
	border-top: 2px solid var(--black);
	box-sizing: border-box;
}

.gallery-slider-wrap .swiper-arrow-left:after {
	left: 17px;
	transform: translateY(-50%) rotate(-45deg);
}

.gallery-slider-wrap .swiper-arrow-right:after {
	right: 17px;
	transform: translateY(-50%) rotate(135deg);
}

.gallery-slider-wrap .pagination {
	display: none;
}