/**
 * ShadiHall — Featured Halls Standalone Section
 * For shortcode: [shadihall_featured_halls]
 *
 * Uses the same CSS-variable tokens as the main sh-homepage stylesheet so
 * both files can coexist without conflicts. Drop this file into your theme
 * or plugin's CSS bundle alongside the existing shadihall-homepage.css.
 *
 * Variables expected (already defined by shadihall-homepage.css or your theme):
 *   --sh-font-body, --sh-font-head
 *   --sh-text, --sh-text-muted
 *   --sh-bg, --sh-bg-alt, --sh-white
 *   --sh-border
 *   --sh-red, --sh-red-dark, --sh-red-light
 *   --sh-gold
 *   --sh-radius, --sh-radius-lg
 *   --sh-shadow, --sh-shadow-lg
 *   --sh-transition
 * ========================================================================== */

/* ==========================================================================
   OUTER WRAPPER
   The .sh-homepage class re-uses the token scope from the homepage stylesheet.
   .sh-featured-halls-standalone is our own hook for specificity overrides.
   ========================================================================== */

.sh-featured-halls-standalone {
	font-family: var(--sh-font-body);
	color: var(--sh-text);
	background: var(--sh-bg);
}

.sh-featured-halls-standalone * {
	box-sizing: border-box;
}

/* ==========================================================================
   SECTION HEADER ROW
   ========================================================================== */

.sh-fhs__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	max-width: 1200px;
	margin: 0 auto 40px;
	padding: 0 24px;
}

.sh-fhs__header-text {
	flex: 1 1 auto;
}

/* Inherits .sh-section__eyebrow, .sh-section__title, .sh-section__desc from
   the shared homepage stylesheet. No re-declaration needed. */

.sh-fhs__see-all {
	flex: 0 0 auto;
	align-self: flex-start;
	margin-top: 4px;
	white-space: nowrap;
}

/* ==========================================================================
   CARDS GRID
   ========================================================================== */

.sh-fhs__grid {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
}

/* ==========================================================================
   INDIVIDUAL HALL CARD
   Builds on .shadihall-hall-card and .sh-hall-card defined in the main
   stylesheet, adding hover lift and image proportions.
   ========================================================================== */

.sh-fhs__card {
	background: var(--sh-white);
	border: 1px solid var(--sh-border);
	border-radius: var(--sh-radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: box-shadow var(--sh-transition), transform var(--sh-transition),
	            border-color var(--sh-transition);
}

.sh-fhs__card:hover {
	box-shadow: var(--sh-shadow-lg);
	transform: translateY(-4px);
	border-color: var(--sh-red);
}

/* Image link — fills a fixed-ratio area */
.sh-fhs__img-link {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--sh-bg-alt);
}

.sh-fhs__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.sh-fhs__card:hover .sh-fhs__img {
	transform: scale(1.04);
}

/* Placeholder when no cover image exists */
.sh-fhs__img-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sh-bg-alt);
	font-size: 52px;
	color: var(--sh-text-muted);
}

/* Card body */
.sh-fhs__body {
	padding: 18px 16px 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0;
}

/* Featured badge (inherits .shadihall-featured-badge positioning) */
.sh-fhs__card .shadihall-featured-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--sh-gold, #ffd700);
	color: #5a3a00;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 50px;
	z-index: 2;
	box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

/* ==========================================================================
   "BROWSE MORE" LINK BELOW GRID
   ========================================================================== */

.sh-fhs__browse-more {
	max-width: 1200px;
	margin: 36px auto 0;
	padding: 0 24px;
	text-align: center;
}

/* ==========================================================================
   EMPTY / COMING SOON STATE
   ========================================================================== */

.sh-fhs__empty {
	max-width: 700px;
	margin: 40px auto;
	padding: 56px 40px;
}

.sh-fhs__empty-features {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px 20px;
	margin-top: 28px;
}

.sh-fhs__empty-feature {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--sh-white);
	padding: 10px 18px;
	border-radius: 50px;
	border: 1px solid var(--sh-border);
	font-size: 13px;
	font-weight: 500;
	color: var(--sh-text);
}

/* ==========================================================================
   OPTIONAL CTA BANNER  (show_cta_banner="true")
   Inherits full banner layout from sh-homepage stylesheet.
   Only a top-margin spacer is needed here.
   ========================================================================== */

.sh-fhs__cta {
	margin-top: 64px;
}

/* ==========================================================================
   FULL-WIDTH BLEED HELPERS
   Mirrors the homepage stylesheet's bleed rules so the banner/CTA escapes
   any theme padding when used inside a standard page layout.
   ========================================================================== */

.sh-featured-halls-standalone .sh-cta-banner {
	margin-left:  calc(-1 * var(--wp--style--root--padding-left,  0px));
	margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px));
	width: calc(100% + var(--wp--style--root--padding-left,  0px)
	                  + var(--wp--style--root--padding-right, 0px));
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
	.sh-fhs__grid {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
		gap: 18px;
	}
}

@media (max-width: 640px) {
	.sh-fhs__header {
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 28px;
		padding: 0 16px;
	}

	.sh-fhs__see-all {
		align-self: stretch;
		text-align: center;
	}

	.sh-fhs__grid {
		grid-template-columns: 1fr;
		padding: 0 16px;
		gap: 16px;
	}

	.sh-fhs__browse-more {
		padding: 0 16px;
		margin-top: 24px;
	}

	.sh-fhs__browse-more .sh-btn {
		display: block;
		text-align: center;
	}

	.sh-fhs__empty {
		padding: 40px 20px;
	}

	.sh-fhs__empty-features {
		flex-direction: column;
		align-items: center;
	}
}