/**
 * Grid Box Widget — Picklemall Widgets
 */

/* ── Section wrapper ──────────────────────────────────────────────────────── */

.pm-gb-section {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* ── Top border overlay ───────────────────────────────────────────────────── */

.pm-gb-border {
	position: absolute;
	top: -60px;
	left: 0;
	width: 100%;
	height: auto;
	display: block;
	pointer-events: none;
	user-select: none;
	z-index: 0;
	mix-blend-mode: multiply;
}

/* ── Title ────────────────────────────────────────────────────────────────── */

.pm-gb-header {
	text-align: center;
	/*
	 * top-border.svg is 1920×351 px → display height ≈ 18.28vw at any viewport.
	 * Add 2rem breathing room so the title always clears the border.
	 */
	padding: calc(6vw + 2rem) 1rem clamp(2rem, 4vw, 4rem);
}

.pm-gb-title {
	font-family: var(--pm-font-header, 'A Love of Thunder', serif);
	font-size: clamp(2rem, 8vw, 3rem);
	color: var(--pm-color-dark, #1a3030);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.15;
	margin: 0;
}

.pm-gb-title-graffiti {
	display: block;
	font-family: var(--pm-font-graffiti, 'Permanent Marker', cursive);
	color: var(--pm-color-orange, #E85D22);
	text-transform: none;
	letter-spacing: 0.01em;
}

/* ── Grid ─────────────────────────────────────────────────────────────────── */

/*
 * 5 fixed-width columns (1 empty | 3 content | 1 empty).
 * Total: 5 × 450px = 2250px, centred inside a narrower viewport so each
 * empty side-column is partially clipped — creating the "bleeds to edge" look.
 * overflow:hidden on .pm-gb-section clips the excess.
 */
.pm-gb-grid {
	display: grid;
	grid-template-columns: repeat(5, 450px);
	grid-auto-rows: 350px;
	justify-content: center;
	width: 100%;
}

/* ── Cells (shared) ───────────────────────────────────────────────────────── */

.pm-gb-cell {
	position: relative;
	overflow: hidden;
	box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12);
}

.pm-gb-cell--empty {
	pointer-events: none;
	user-select: none;
}

/* ── Cell background image — lives inside the overlay, blends with dark green */

.pm-gb-cell-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
	mix-blend-mode: soft-light;
	opacity: 0.65;
}

/* ── Icon badge (circle + SVG) ────────────────────────────────────────────── */

.pm-gb-icon {
	position: absolute;
	top: 1.25rem;
	left: 1.25rem;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: #FFC6AD;
	display: flex;
	align-items: center;
	justify-content: center;
	/* sits above the overlay */
	z-index: 6;
	pointer-events: none;
	user-select: none;
	transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
	            height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.pm-gb-icon img {
	width: 54%;
	height: 54%;
	object-fit: contain;
	display: block;
}

.pm-gb-cell--content:hover .pm-gb-icon {
	width: 60px;
	height: 60px;
}

/* ── Default cell title ───────────────────────────────────────────────────── */

.pm-gb-cell-title {
	position: absolute;
	bottom: 1.5rem;
	left: 1.25rem;
	right: 1.25rem;
	font-family: var(--pm-font-header, 'A Love of Thunder', serif);
	font-size: clamp(1.4rem, 2vw, 1.75rem);
	color: var(--pm-color-dark, #1a3030);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0;
	z-index: 2;
	line-height: 1.1;
	transition: opacity 0.25s ease;
}

/* Fade out the default title when the overlay is present */
.pm-gb-cell--content:hover .pm-gb-cell-title {
	opacity: 0;
}

/* ── Hover overlay ────────────────────────────────────────────────────────── */

.pm-gb-overlay {
	position: absolute;
	inset: 0;
	background-color: var(--pm-color-primary-d40, #063b383b);
	transform: translateY(100%);
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 5;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 1.5rem 1.25rem;
}

.pm-gb-cell--content:hover .pm-gb-overlay {
	transform: translateY(0);
}

/* Overlay content block */
.pm-gb-overlay-content {
	position: relative;
	z-index: 1;
}

.pm-gb-overlay-title {
	font-family: var(--pm-font-header, 'A Love of Thunder', serif);
	font-size: clamp(1.4rem, 2vw, 1.75rem);
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 0.5rem;
	line-height: 1.1;
}

.pm-gb-overlay-subtitle {
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.82);
	margin: 0;
	line-height: 1.5;
}

/* ── Tablet: drop empty cells, stretch to 3 equal columns ────────────────── */

@media (max-width: 1449px) {
	.pm-gb-grid {
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: 350px;
	}

	.pm-gb-cell--empty {
		display: none;
	}
}

/* ── Mobile slider (hidden on desktop) ────────────────────────────────────── */

.pm-gb-slider {
	display: none;
}

.pm-gb-slider-track {
	display: flex;
	flex-wrap: nowrap;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

.pm-gb-slide {
	flex: 0 0 100%;
	width: 100%;
	min-width: 0;
}

.pm-gb-slide-img-wrap {
	height: 400px;
	overflow: hidden;
	position: relative;
	margin: 12px;
}

.pm-gb-slide-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.pm-gb-slide-body {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 0.625rem;
	padding: 1.25rem 1.5rem 0.75rem;
}

.pm-gb-slide-content {
	flex: 1;
	min-width: 0;
}

.pm-gb-slide-num {
	font-family: var(--pm-font-header, 'A Love of Thunder', serif);
	color: var(--pm-color-primary-l40, #17E6DB);
	font-size: 3rem;
	opacity: 0.4;
	line-height: 1;
	user-select: none;
	flex-shrink: 0;
}

.pm-gb-slide-title {
	font-family: var(--pm-font-graffiti, 'TheGraffitiFont', cursive);
	font-size: 1.625rem;
	color: var(--pm-color-orange, #E85D22);
	margin: 0 0 0.375rem;
	line-height: 1.1;
}

.pm-gb-slide-subtitle {
	font-size: var(--pm-text-body-sm, 0.9375rem);
	color: var(--pm-color-type-body, #333741);
	margin: 0;
	line-height: 1.5;
}

/* ── Slider footer ────────────────────────────────────────────────────────── */

.pm-gb-slider-footer {
	display: flex;
	align-items: center;
	padding: 1.25rem 1.5rem 1.75rem;
	gap: 1.25rem;
}

.pm-gb-slider-progress {
	flex: 1;
	height: 2px;
	background: rgba(0, 0, 0, 0.12);
	border-radius: 2px;
	overflow: hidden;
}

.pm-gb-slider-bar {
	height: 100%;
	background: var(--pm-color-dark, #1F2121);
	border-radius: 2px;
	transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pm-gb-slider-arrows {
	display: flex;
	gap: 0.5rem;
	flex-shrink: 0;
}

.pm-gb-arrow {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.14);
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--pm-color-dark, #1F2121);
	box-shadow: var(--pm-shadow-sm);
	transition: opacity 0.2s ease, box-shadow 0.2s ease;
	padding: 0;
	line-height: 0;
}

.pm-gb-arrow:disabled {
	opacity: 0.3;
	cursor: default;
	box-shadow: none;
}

.pm-gb-arrow:not(:disabled):hover {
	box-shadow: var(--pm-shadow-md);
}

/* ── Switch to slider on mobile ───────────────────────────────────────────── */

@media (max-width: 768px) {
	.pm-gb-grid {
		display: none;
	}

	.pm-gb-slider {
		display: block;
	}
}