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

   This file contains ONLY directory-specific layout/composition rules.
   All visual component styling (cards, buttons, badges, dropdowns,
   search field, pill nav, 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-nominees-directory.php,
   which loads the design system as a dependency of this file.
   ================================================================ */

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

/* ── Header ──────────────────────────────────────────────────── */
/* V13.3.2: top spacing now lives here (matching Official Winners'
   .lma-windir-hero exactly — same values, same architecture) instead
   of as root-level padding-top. Previously .lma-nomdir carried a 64px
   padding-top of its own with no hero-specific rule at all, so the
   "dark strip above the hero" was really just unstyled root padding —
   this was the root cause, not a wrapper element or theme issue. */
.lma-nomdir-hero {
	padding: 56px 24px 32px;
	margin: 0 -24px 28px;
}

.lma-nomdir-header {
	position: relative;
	z-index: 1;
}

/* ── Statistics → Controls spacing (V13.3) ───────────────────────────
   The stats bar and the search/filter row previously had no margin
   between them at all (each is just a bare block-level sibling), which
   read as cramped. Scoped to .lma-nomdir specifically — per the V13.3
   brief this fix applies to the Official Nominees page only, not the
   other directories' stats bars. */
.lma-nomdir .lma-ui-stats-bar { margin-bottom: 32px; }
@media (max-width: 1024px) { .lma-nomdir .lma-ui-stats-bar { margin-bottom: 28px; } }
@media (max-width: 640px)  { .lma-nomdir .lma-ui-stats-bar { margin-bottom: 22px; } }

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

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

.lma-nomdir-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	flex: 3 1 480px;
}
.lma-nomdir-select-wrap { flex: 1 1 160px; min-width: 140px; }
.lma-nomdir-sort-wrap { flex: 1 1 150px; }

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

/* Default responsive fallback when no Elementor responsive control
   override is present (the widget's "columns" control sets this
   inline via Elementor selectors for Desktop/Tablet/Mobile — these
   media queries add the brief's extra "laptop" 5-column step, which
   Elementor's 3-tier responsive system doesn't expose as a 4th
   separately editable control). */
@media (max-width: 1400px) { .lma-nomdir-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1024px) { .lma-nomdir-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .lma-nomdir-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Card composition ─────────────────────────────────────────────────
   Image-dominant overlay card (per the Premium Nominee & Winner Card
   Redesign brief). The card root is an <a> (the whole card links to the
   profile). The photo fills the entire card — there is no separate
   content section beneath it; name/role/nominations are overlaid on
   the bottom portion of the photo via the gradient defined on
   .lma-ui-card-overlay in the shared design system. */
.lma-nomdir-card {
	display: block;
	text-decoration: none;
	color: inherit;
}
.lma-nomdir-card[aria-disabled="true"] {
	cursor: default;
}

/* Compact badge — smaller pill, smaller star, smaller text than the
   shared default, matching the reference design's proportions exactly. */
.lma-nomdir-badge {
	font-size: 0.56rem;
	padding: 3px 8px;
	gap: 4px;
}
.lma-nomdir-badge .lma-ui-badge-icon {
	width: 8px;
	height: 8px;
}

.lma-nomdir-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-nomdir-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-nomdir-card-noms {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.78rem;
	color: var(--lma-text-dim);
	white-space: nowrap;
	margin-top: 8px;
	text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.lma-nomdir-star-icon { width: 12px; height: 12px; fill: var(--lma-gold); flex-shrink: 0; }

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

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

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