/*
	Category / occasion tiles — the [scentury_tiles] shortcode.
	Loaded sitewide, since these are placed in Elementor on any page.

	Exact match source: Home.dc.html (Shop The Collection / By Occasion).
	Every value below was read from that file, not approximated.
*/

.hc-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
}

.page-content .hc-tile,
.hc-tile {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	border-radius: 16px;
	overflow: hidden;
	transition: transform 0.3s ease;
	text-decoration: none;
	background: var(--hc-bg-alt);
}

.hc-tile:hover {
	transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
	.hc-tile {
		transition: none;
	}

	.hc-tile:hover {
		transform: none;
	}
}

.hc-tile__media {
	display: block;
	width: 100%;
	height: 100%;
}

.hc-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
	Darkens the lower half so the name stays readable over any photo.
	The colour and its starting point come in as variables so the widget can
	set each from its own control (a control's selector can only write its own
	value, not read another's).
*/
.hc-tile__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(27, 35, 83, 0) var(--hc-tile-overlay-start, 40%),
		var(--hc-tile-overlay, rgba(15, 19, 45, 0.82)) 100%
	);
	pointer-events: none;
}

.hc-tile__foot {
	position: absolute;
	left: 20px;
	bottom: 20px;
	right: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	pointer-events: none;
}

.hc-tile__label {
	color: var(--hc-white);
	font-family: var(--hc-font-display);
	font-weight: 700;
	font-size: 24px;
	text-transform: uppercase;
}

/*
	`display: flex` is structure, not styling: the element is a span, so without
	it the centring and flex-shrink below do nothing and the arrow breaks out of
	the foot row. The "Show arrow" control still wins when it is switched off —
	Elementor scopes its rule to the widget, which outranks this selector.
*/
.hc-tile__arrow {
	display: flex;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* ==========================================================================
   Category / occasion toggle

   Both panels are in the page with one hidden, so the tiles in either are
   real, followable links regardless of whether the script runs.
   ========================================================================== */
/*
	Only structure here — no spacing, alignment or colour. Every one of those
	is a control in the widget, and hardcoding a value would silently override
	whatever the container or the widget's own settings say.
*/
.hc-tiles-tabs__toggle {
	display: flex;
}

.hc-tiles-tabs__track {
	display: flex;
	border-style: solid;
}

.hc-tiles-tabs__btn {
	background: none;
	border: none;
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/*
	!important because Elementor's own reset sets display on widget children,
	which would otherwise beat the hidden attribute and show both panels.
*/
.hc-tiles-tabs__panel[hidden] {
	display: none !important;
}

/* ==========================================================================
   Slider mode

   Uses the Swiper that ships with Elementor, so no extra library is loaded —
   and nothing at all loads when the widget is left as a grid.
   ========================================================================== */
.hc-tiles-slider {
	position: relative;
	overflow: hidden;
}

/* Swiper lays the slides out itself; the grid rules must not fight it. */
.hc-tiles-slider .swiper-wrapper {
	display: flex;
	align-items: stretch;
}

.hc-tiles-slider .swiper-slide {
	height: auto;
}

.hc-tiles-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--hc-white);
	color: var(--hc-navy);
	border: 1px solid var(--hc-navy-12);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(27, 35, 83, 0.12);
	transition: background 0.2s ease, color 0.2s ease;
}

.hc-tiles-slider__nav:hover {
	background: var(--hc-navy);
	color: var(--hc-white);
}

.hc-tiles-slider__nav--prev {
	left: 10px;
}

.hc-tiles-slider__nav--next {
	right: 10px;
}

/* Swiper hides its own disabled buttons with this class. */
.hc-tiles-slider__nav.swiper-button-disabled {
	opacity: 0.35;
	pointer-events: none;
}

.hc-tiles-slider .swiper-pagination {
	position: static;
	margin-top: 20px;
}

.hc-tiles-slider .swiper-pagination-bullet {
	background: var(--hc-navy);
	opacity: 0.25;
}

.hc-tiles-slider .swiper-pagination-bullet-active {
	background: var(--hc-cyan);
	opacity: 1;
}

/*
	Mixed mode: a grid on desktop, a slider below.

	The markup is the slider's either way — one set of tiles in the page, so no
	duplicate links. Above the breakpoint Swiper switches itself off (its
	`enabled: false` breakpoint) and these rules lay the same slides out as a
	grid. The breakpoint matches the one in the widget's Swiper options.
*/
@media (min-width: 1025px) {
	.hc-tiles-slider--mixed .swiper-wrapper {
		display: grid;
		grid-template-columns: repeat(var(--hc-grid-cols, 4), 1fr);
		gap: var(--hc-grid-gap, 20px);
		/* Swiper leaves its last transform behind when it stops. */
		transform: none !important;
	}

	.hc-tiles-slider--mixed .swiper-slide {
		width: auto !important;
		margin: 0 !important;
	}

	.hc-tiles-slider--mixed .hc-tiles-slider__nav,
	.hc-tiles-slider--mixed .swiper-pagination {
		display: none;
	}
}

/* Shown in the editor when there is nothing to display yet. */
.hc-tiles-empty {
	color: var(--hc-navy-50);
	font-size: 14px;
	padding: 24px;
	border: 1px dashed var(--hc-navy-15);
	border-radius: 12px;
	text-align: center;
}