/* ================================================================
   LMA Awards Manager — Official Winners Directory.

   This file contains ONLY directory-specific layout/composition rules.
   All visual component styling (cards, buttons, badges, ribbons, stat
   cards, hero, dropdowns, search field, skeletons, etc.) lives in the
   shared lma-design-system.css and is reused here via lma-ui-* classes
   — see register_public_assets() in class-lma-module-winners-directory.php,
   which loads the design system as a dependency of this file.
   ================================================================ */

.lma-windir {
	padding: 0 24px 80px;
	overflow: hidden;
	isolation: isolate;
}

/* ── Hero ────────────────────────────────────────────────────────── */
.lma-windir-hero {
	padding: 56px 24px 32px;
	margin: 0 -24px 28px;
}

/* ── Stats bar ───────────────────────────────────────────────────── */
.lma-windir .lma-ui-stats-bar {
	margin: 0 auto 28px;
	max-width: 900px;
}

/* ── Controls row (search + filters) ────────────────────────────── */
.lma-windir-controls {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 32px;
	align-items: stretch;
}

.lma-windir-search { flex: 2 1 320px; }

.lma-windir-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	flex: 3 1 560px;
}
.lma-windir-select-wrap { flex: 1 1 150px; min-width: 130px; }
.lma-windir-sort-wrap { flex: 1 1 140px; }

/* ── Category groups (winners grouped by category) ────────────────── */
.lma-windir-category-group { margin-bottom: 32px; position: relative; z-index: 1; }
.lma-windir-category-group.is-collapsed .lma-windir-grid { display: none; }

.lma-windir-category-heading { margin-bottom: 20px; }
.lma-windir-trophy-icon {
	width: 20px;
	height: 20px;
	color: var(--lma-gold);
	fill: var(--lma-gold);
	flex-shrink: 0;
}
.lma-windir-trophy-icon svg { width: 100%; height: 100%; }
.lma-windir-category-name {
	font-weight: 800;
	font-size: 1.1rem;
	color: var(--lma-text);
	letter-spacing: 0.02em;
}
.lma-windir-view-all {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--lma-text-dim);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}
.lma-windir-view-all:hover { color: var(--lma-gold); }

/* ── Grid ────────────────────────────────────────────────────────── */
.lma-windir-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
}

/* Default responsive fallback (the widget's "columns" control sets
   this inline via Elementor selectors for Desktop/Tablet/Mobile; this
   adds the brief's extra "laptop" 5-column step, same approach as the
   Nominees Directory). */
@media (max-width: 1400px) { .lma-windir-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1024px) { .lma-windir-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .lma-windir-grid { grid-template-columns: repeat(2, 1fr); } }

/* A pending ("not yet announced") category still occupies the grid as
   a single full-width-ish placeholder rather than stretching to fill
   all 6 columns awkwardly — cap it to a reasonable card-like width. */
.lma-windir-grid:has(> .lma-ui-pending-card:only-child) {
	grid-template-columns: minmax(220px, 320px);
}

/* ── Card composition ─────────────────────────────────────────────────
   Image-dominant overlay card — identical structure/sizing to the
   Nominee Card (.lma-ui-card-overlay in the shared design system).
   The photo fills the entire card; there is no separate content
   section beneath it. Name, submitted work, and winner status are
   overlaid on the bottom portion of the photo via the shared gradient. */
.lma-windir-card {
	display: block;
	text-decoration: none;
	color: inherit;
}
.lma-windir-card[aria-disabled="true"] {
	cursor: default;
}

.lma-windir-card-name {
	font-size: 0.805rem;
	font-weight: 700;
	margin: 0;
	color: var(--lma-text);
	line-height: 1.25;
	text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
.lma-windir-card-role {
	font-size: 0.595rem;
	font-weight: 500;
	color: var(--lma-gold);
	margin: 2px 0 0;
	text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.lma-windir-card-work {
	font-size: 0.7rem;
	color: var(--lma-gold);
	margin: 2px 0 0;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}

/* ── Skeleton grid (directory-specific column layout only) ────────── */
.lma-windir-skeleton {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
	position: relative;
	z-index: 1;
}
.lma-windir-skeleton[data-active] { display: grid; }
.lma-windir-skeleton:not([data-active]) { display: none; }

@media (max-width: 1400px) { .lma-windir-skeleton { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1024px) { .lma-windir-skeleton { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .lma-windir-skeleton { grid-template-columns: repeat(2, 1fr); } }

/* ── Load more wrapper (button itself uses lma-ui-btn-outline) ───── */
.lma-windir-load-more-wrap {
	position: relative;
	z-index: 1;
}