/* ================================================================
   LMAS Nominee Hero — Module Stylesheet (V14.2.5).

   This is a restoration, not a redesign: it combines the image-fill
   handling proven in the V14.0 custom widget (object-fit: cover,
   never letterboxed/stretched, regardless of source image
   dimensions — see .lma-nomhero-portrait-img, UNCHANGED below) with
   the typography, spacing, badges, and layout philosophy of the
   original Elementor + Toolset nominee hero.

   Brand tokens below are scoped locally to `.lma-nomhero` under their
   own `--nh-*` names, using the exact values from the brand brief,
   rather than the plugin-wide `--lma-*`/`--am-*` tokens in
   lma-design-system.css (whose values differ slightly, e.g.
   --lma-text: #ffffff vs brief white #F5F0E8) — this keeps every
   other module's shared tokens untouched while giving this widget
   the exact palette its brief specifies.
   ================================================================ */

.lma-nomhero {
	--nh-gold:        #C9973A;
	--nh-gold-light:  #E8C46A;
	--nh-gold-pale:   #F5E6B8;
	--nh-gold-dark:   #8B6420;
	--nh-black:       #060608;
	--nh-charcoal:    #0F0F12;
	--nh-charcoal2:   #1A1A20;
	--nh-white:       #F5F0E8;
	--nh-white-dim:   rgba(245,240,232,0.7);
	--nh-white-faint: rgba(245,240,232,0.35);

	padding: 64px 24px 24px;
	/* V14.3.2 — Issue: the social icon row was butting straight up against
	   whatever section follows this widget on the page (no gap of its own
	   to fall back on). This widget's bottom edge is the social row, so a
	   fixed margin-bottom here guarantees breathing room no matter what
	   Elementor section/spacing follows.
	   V15.2.1 — that fix combined with the full 64px bottom padding
	   (unchanged from top/sides at the time) stacked up to ~104px of dead
	   space after the social row — reduced bottom padding independently
	   of top/sides and shrunk the margin so the total gap is tighter. */
	margin-bottom: 16px;
	background: #060608;
}

.lma-nomhero-container {
	max-width: 1140px;
	margin: 0 auto;
}

/* Two inner containers side by side (image / details) inside one outer
   container — deliberately flexbox, not CSS Grid. Older/mobile Safari
   has a well-known bug class where `aspect-ratio` sizing on a Grid
   item can miscalculate the track's height, letting that item visually
   overlap the row that follows it — which is exactly what kept
   happening here (the portrait rendering over the badges/name that
   come right after it in the details column). Flexbox does not share
   that bug class, and gives the same 1 : 1.2 proportional split via
   flex-grow instead of grid-template-columns. */
.lma-nomhero-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	/* V14.3.4 — Issue: details column (name/badges/bio/stats/social) was
	   shorter than the image column, so the social icon row landed well
	   above the portrait's bottom edge instead of lining up with it.
	   align-items:stretch makes both columns match the row's height
	   (driven by the taller one — normally the image, via its own
	   aspect-ratio-sized portrait). .lma-nomhero-right is already a flex
	   column with `margin-top: auto` on .lma-nomhero-social (see below),
	   so once it's stretched to full height that rule pushes the social
	   row down to flush with the image's bottom edge. This is Flexbox,
	   not Grid, so it isn't affected by the Grid+aspect-ratio Safari bug
	   noted above — and the mobile breakpoint below still forces
	   height:auto on both columns once they stack, so this only applies
	   to the side-by-side desktop/tablet layout. */
	align-items: stretch !important;
}

/* ── Image column — portrait + gradient + Edition/Official badges ──
   V15.3.1 — aspect-ratio moved here (onto the flex item itself) from
   .lma-nomhero-portrait below. Previously the portrait's own
   aspect-ratio fully determined its height independent of its
   stretched parent, so when the details column (name/fields/stats)
   was the taller side — e.g. a long bio, or the labeled
   Real Names/Genre/Short Bio fields added in V15.3 pushing the column
   taller than a 4:5 image — .lma-nomhero-left would stretch to match,
   but the portrait itself stayed short, leaving empty space below the
   image and the social icons no longer aligning with its bottom edge.
   With aspect-ratio on .lma-nomhero-left instead, and the portrait set
   to height:100% below, the portrait now always fills exactly whatever
   height this column resolves to — its own natural 4:5 height when
   the image is the taller/reference side (the original, still-working
   case), or the stretched taller height when the text column is
   taller (the newly-fixed case). Same aspect ratio either way; this
   only changes WHICH element the ratio is calculated on. */
.lma-nomhero-left {
	position: static !important;
	flex: 1 1 320px;
	min-width: 280px;
	aspect-ratio: 4 / 5;
	align-self: stretch !important;
}

.lma-nomhero-portrait {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 24px;
	overflow: hidden;
	border: 1px solid rgba(201,151,58,0.18);
	background: var(--nh-charcoal);
	box-shadow:
		inset 0 0 0 1px rgba(201,151,58,0.08),
		0 20px 48px rgba(0,0,0,0.35);
	/* Unclickable: static portrait, no hover/press affordance of any kind
	   (no zoom, no glow, no cursor change) — pointer-events:none also
	   means the :hover rules below never activate. */
	cursor: default;
	pointer-events: none;
}

/* Image-fill handling — proven in the custom widget, UNCHANGED in
   intent: always fills the container, never stretched/letterboxed,
   regardless of the source photo's own dimensions or aspect ratio.
   V14.2.7: made defensive with !important. Most WP themes ship a
   generic responsive-image reset along the lines of
   `img { max-width: 100%; height: auto; }` — if that rule's
   specificity ties with (or beats) `.lma-nomhero-portrait-img` and
   loads after it, "height: auto" wins and the image reverts to its
   own intrinsic aspect ratio instead of covering the box, which is
   exactly what leaves a gap at the bottom of the frame. !important
   here means the fill behaves identically no matter what image is
   uploaded or what the active theme does elsewhere. object-position
   is biased down slightly (rather than dead-center) so a natural
   headshot's subject reads large and centered instead of leaving a
   band of empty space above their head. */
.lma-nomhero-portrait-img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center 30%;
}
.lma-nomhero-portrait-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 5rem;
	font-weight: 700;
	color: var(--nh-gold);
	text-transform: uppercase;
	font-family: 'Outfit', sans-serif;
}

/* Soft contrast gradient — darker at the very top and bottom (where the
   two badges sit), transparent through the middle so the portrait's
   subject stays fully visible. Not clickable, not decorative noise. */
.lma-nomhero-portrait-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(6,6,8,0.4) 0%,
		rgba(6,6,8,0) 22%,
		rgba(6,6,8,0) 58%,
		rgba(6,6,8,0.7) 100%
	);
}

/* Edition badge — small floating pill, top-left. Icon+text treatment
   matches the "Verified Nominee" badge in the details column, per the
   brief's request to visually tie the two together. */
.lma-nomhero-edition-badge {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 100px;
	border: 1px solid rgba(200,164,90,0.55);
	background: rgba(6,6,8,0.35);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: var(--nh-gold-light);
	font-family: 'Outfit', sans-serif;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
}
.lma-nomhero-edition-icon {
	width: 12px;
	height: 12px;
	flex: none;
}

/* Official Nominee badge — glass card, bottom-left: a gold star-in-circle
   icon beside a two-line "OFFICIAL / NOMINEE" text stack. */
.lma-nomhero-official-badge {
	position: absolute;
	left: 20px;
	bottom: 20px;
	z-index: 2;
	max-width: calc(100% - 40px);
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 20px 10px 10px;
	border-radius: 100px;
	border: 1px solid rgba(200,164,90,0.55);
	background: rgba(6,6,8,0.45);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.lma-nomhero-official-icon {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid rgba(200,164,90,0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--nh-gold-light);
}
.lma-nomhero-official-icon svg { width: 18px; height: 18px; }
.lma-nomhero-official-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.lma-nomhero-official-eyebrow {
	font-family: 'Outfit', sans-serif;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--nh-gold-pale);
	opacity: 0.85;
	line-height: 1;
}
.lma-nomhero-official-main {
	font-family: 'Outfit', sans-serif;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--nh-gold-light);
	line-height: 1.15;
}

/* ── Details column ───────────────────────────────────────────────── */
.lma-nomhero-right {
	position: static !important;
	flex: 1.2 1 380px;
	min-width: 280px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-height: 0;
	align-self: stretch !important;
}

.lma-nomhero-toprow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}

/* Role badge — restored exactly from the original Elementor design. */
.lma-nomhero-badge {
	background: rgba(201,151,58,0.1);
	border: 1px solid rgba(201,151,58,0.25);
	color: var(--nh-gold-light);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.25rem 0.75rem;
	border-radius: 100px;
	font-family: 'Outfit', sans-serif;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	white-space: nowrap;
}

/* Nominee stage name — restored exactly from the original design. */
.lma-nomhero-name {
	margin: 0 0 12px;
	font-family: "Cormorant Garamond", serif;
	font-size: clamp(3rem, 5vw, 5rem);
	font-weight: 600;
	text-transform: capitalize;
	line-height: 1em;
	color: var(--nh-white);
}

/* Real name — restored exactly from the original design. */
.lma-nomhero-realname {
	margin: 0;
	font-family: "Cormorant Garamond", serif;
	font-size: 18px;
	font-weight: 300;
	font-style: italic;
	color: var(--nh-white-dim);
}

/* ── Genre pills — restored exactly from the original design ─────── */
.lma-nomhero-genres {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}
.lma-nomhero-genre-pill {
	background: rgba(245,240,232,0.06);
	border: 1px solid rgba(245,240,232,0.1);
	color: var(--nh-white-dim);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	padding: 0.2rem 0.65rem;
	border-radius: 100px;
	font-family: Outfit, sans-serif;
	display: inline-block;
}

/* ── Labeled field blocks (Real Names / Genre / Short Bio) ────────
   Each field gets its own icon + gold uppercase label, with a gold
   divider above it — same divider treatment as .lma-nomhero-divider
   below, just applied per-field via border-top instead of a separate
   <hr>, so label + divider + value stay visually grouped as one unit. */
.lma-nomhero-field {
	padding-top: 22px;
	margin-top: 22px;
	border-top: 1px solid rgba(201,151,58,0.22);
}
.lma-nomhero-field-label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	color: var(--nh-gold);
	font-family: Outfit, sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.lma-nomhero-field-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* ── Divider — separates identity block / bio / stats / social ───── */
.lma-nomhero-divider {
	display: block;
	border: none;
	height: 1px;
	margin: 24px 0 28px !important; /* !important: guards against a theme's `hr { margin: 0 }` reset. */
	background: linear-gradient(to right, rgba(201,151,58,0.55), rgba(201,151,58,0) 75%);
}

/* ── Biography — heading removed, text sits directly under genres ── */
.lma-nomhero-bio-text {
	max-width: 60ch;
	margin: 0;
	color: var(--nh-white-dim);
	font-size: 1rem;
	line-height: 1.75;
}
.lma-nomhero-bio-text p:last-child { margin-bottom: 0; }

/* ── Statistics — same glass/gold visual style, fixed overflow ───── */
.lma-nomhero-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	/* V15.3.1 — Issue: stats sat flush against whatever field (usually
	   Short Bio) precedes them, with no margin of its own to fall back
	   on — fine with a one-line bio, cramped with a longer one. A fixed
	   margin-top here guarantees breathing room regardless of how long
	   the preceding field's content is. */
	margin-top: 28px;
	margin-bottom: 32px;
}
.lma-nomhero-statcard {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 10px;
	padding: 20px 22px;
	min-height: 112px;
	background: rgba(245,240,232,0.04);
	border: 1px solid rgba(245,240,232,0.1);
	border-radius: 16px;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.lma-nomhero-statcard:hover {
	transform: translateY(-3px);
	border-color: var(--nh-gold);
	box-shadow: 0 10px 24px rgba(0,0,0,0.3), 0 0 16px rgba(201,151,58,0.18);
}
.lma-nomhero-statcard-icon {
	width: 26px;
	height: 26px;
	color: var(--nh-gold);
	fill: var(--nh-gold);
}
.lma-nomhero-statcard-icon svg { width: 100%; height: 100%; }
.lma-nomhero-statcard-value {
	font-size: 1.7rem;
	font-weight: 700;
	color: var(--nh-white);
	line-height: 1.1;
	font-family: 'Outfit', sans-serif;
}
.lma-nomhero-statcard-label {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nh-white-faint);
	font-family: 'Outfit', sans-serif;
}

/* ── Social links — static/decorative row (V14.2.7, exact client spec) ── */
.lma-nomhero-social {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: auto;
}
.lma-nomhero-social-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(245,240,232,0.04);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(245,240,232,0.12);
	color: rgba(245,240,232,0.7);
	fill: currentColor;
	transition: all 0.2s ease;
}
.lma-nomhero-social-btn svg { width: 16px; height: 16px; }
.lma-nomhero-social-btn:hover,
.lma-nomhero-social-btn:focus-visible {
	background: var(--nh-gold);
	border-color: var(--nh-gold);
	color: var(--nh-black);
}
.lma-nomhero-social-btn:focus-visible {
	outline: 2px solid var(--nh-gold);
	outline-offset: 2px;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	/* Tablet: two columns retained per the brief, tighter gap. */
	.lma-nomhero { padding: 48px 24px; }
	.lma-nomhero-grid { gap: 32px; }
}

@media (max-width: 768px) {
	/* Below tablet: stack vertically, image first, details second.
	   Defensive resets: if this widget is dropped inside an Elementor
	   section/column with its own fixed or min-height (common for
	   "hero" sections), a stretched flex ancestor can otherwise
	   compress this widget's box below its natural content height —
	   which, combined with any vertical centering, is exactly what
	   pushed the top of the details column (badges/name) up behind the
	   portrait image instead of appearing below it. flex-direction:
	   column here is explicit and doesn't rely on flex-wrap's own
	   auto-collapse point, so the stacking order is guaranteed. */
	.lma-nomhero,
	.lma-nomhero-container,
	.lma-nomhero-grid,
	.lma-nomhero-left,
	.lma-nomhero-right {
		height: auto !important;
		min-height: 0 !important;
	}
	.lma-nomhero-grid { flex-direction: column; }
	.lma-nomhero-left,
	.lma-nomhero-right {
		flex-basis: auto;
		width: 100%;
	}

	/* V15.6.2 — Issue: .lma-nomhero-social's `margin-top: auto` (see
	   base rule above) exists to push the social row down flush with a
	   *stretched, taller* column in the desktop side-by-side layout.
	   Once the layout stacks vertically here, .lma-nomhero-right's
	   height is just its own natural content height (no extra free
	   space for an auto margin to absorb), so this should resolve to 0
	   — but real mobile browsers resolve `margin-top: auto` inside an
	   auto-height flex column inconsistently, which is exactly what
	   was pushing the social icons down into whatever Elementor section
	   follows this widget on the page. Overriding to a fixed value
	   removes any ambiguity: it's simply the next field block's normal
	   spacing, same as everything else in this stacked layout. */
	.lma-nomhero-social {
		margin-top: 24px;
	}
}

@media (max-width: 640px) {
	.lma-nomhero { padding: 32px 16px 16px; margin-bottom: 12px; }
	.lma-nomhero-grid { gap: 24px; }
	/* Stats stack full-width on mobile (per reference design) rather
	   than staying in a cramped 3-column grid. */
	.lma-nomhero-stats { grid-template-columns: 1fr; gap: 12px; }
	.lma-nomhero-statcard { align-items: center; text-align: center; }
	/* Everything else stays left-aligned — the identity block, genre
	   pills, and social row should never re-center on small screens. */

	/* Tighter badge insets/sizing so neither badge ever crowds the
	   portrait or gets clipped on a narrow phone screen. */
	.lma-nomhero-edition-badge { top: 14px; left: 14px; font-size: 0.62rem; padding: 5px 12px; }
	.lma-nomhero-edition-icon { width: 10px; height: 10px; }
	.lma-nomhero-official-badge { left: 14px; bottom: 14px; padding: 8px 16px 8px 8px; max-width: calc(100% - 28px); }
	.lma-nomhero-official-icon { width: 30px; height: 30px; }
	.lma-nomhero-official-icon svg { width: 15px; height: 15px; }
	.lma-nomhero-official-main { font-size: 1rem; }
}

/* Respect reduced-motion preferences for the hover lift/zoom effects.
   (Portrait no longer has a hover effect — see .lma-nomhero-portrait,
   pointer-events:none — so it's excluded here now.) */
@media (prefers-reduced-motion: reduce) {
	.lma-nomhero-statcard,
	.lma-nomhero-social-btn { transition: none; }
	.lma-nomhero-statcard:hover { transform: none; }
}