/* ==========================================================================
   VIC Theme — VIC Section Header (.vic-section-intro)

   Eyebrow + heading (.__title) and description. Loaded only on pages that
   use the widget (elementor-widgets/section-header.php).

     --left | --center | --right            stacked, all text on one side
     --split | --split-reverse              heading block and description side by side (LG+)
     --width-{narrow|wide|full}             stacked layouts
     --ratio-{50-50|60-40|40-60}            split: heading / description
     --valign-{end|start|center}            split
     --size-{h1|h2|h3}                      heading size
     [data-vic-reveal]                      entrance (assets/js/reveal.js)
   ========================================================================== */

.vic-section-intro {
	--vic-intro-width: var(--measure-body);     /* 720 */
	--vic-intro-col-gap: var(--space-16);        /* 64 → 96 (XL) */

	margin-block-end: var(--heading-gap);        /* 24 / 28 / 32 / 40 / 48 */
}

@media (min-width: 1440px) {
	.vic-section-intro { --vic-intro-col-gap: var(--space-24); }
}

.vic-section-intro > *,
.vic-section-intro__title > * {
	margin: 0;
}

.vic-section-intro__eyebrow {
	margin-block-end: var(--gap-eyebrow);
}

.vic-section-intro__heading {
	color: var(--color-heading);
	font-size: var(--text-h2-size);
	font-weight: var(--weight-bold);
	line-height: var(--text-h2-line);
	letter-spacing: var(--text-h2-tracking);
	text-wrap: balance;
}

.vic-section-intro--size-h1 .vic-section-intro__heading {
	font-size: var(--text-h1-size);
	line-height: var(--text-h1-line);
	letter-spacing: var(--text-h1-tracking);
}

.vic-section-intro--size-h3 .vic-section-intro__heading {
	font-size: var(--text-h3-size);
	font-weight: var(--weight-semibold);
	line-height: var(--text-h3-line);
	letter-spacing: var(--text-h3-tracking);
}

.vic-section-intro__description {
	max-width: var(--measure-body);
	margin-block-start: var(--gap-heading);
	font-size: var(--text-body-lg-size);
	line-height: var(--text-body-lg-line);
}

:is(.surface-dark, .on-dark) .vic-section-intro__heading,
.vic-section-intro.on-dark .vic-section-intro__heading {
	color: var(--color-on-dark);
}

/* --------------------------------------------------------------------------
   Stacked: Left · Center · Right
   -------------------------------------------------------------------------- */
.vic-section-intro--width-narrow { --vic-intro-width: var(--measure-body); }
.vic-section-intro--width-wide   { --vic-intro-width: 60rem; }  /* 960 */
.vic-section-intro--width-full   { --vic-intro-width: 100%; }

.vic-section-intro:is(.vic-section-intro--left, .vic-section-intro--center, .vic-section-intro--right) {
	max-width: var(--vic-intro-width);
}

.vic-section-intro--center {
	margin-inline: auto;
	text-align: center;
}

.vic-section-intro--center .vic-section-intro__description {
	margin-inline: auto;
}

.vic-section-intro--right {
	margin-inline-start: auto;
	text-align: right;
}

.vic-section-intro--right .vic-section-intro__description {
	margin-inline-start: auto;
}

/* --------------------------------------------------------------------------
   Split: heading block | description (reverse swaps the columns). Stacked,
   heading first, below LG.
   -------------------------------------------------------------------------- */
.vic-section-intro--ratio-60-40 { --vic-intro-cols: minmax(0, 3fr) minmax(0, 2fr); }
.vic-section-intro--ratio-40-60 { --vic-intro-cols: minmax(0, 2fr) minmax(0, 3fr); }

@media (min-width: 1024px) {
	.vic-section-intro:is(.vic-section-intro--split, .vic-section-intro--split-reverse) {
		display: grid;
		grid-template-columns: var(--vic-intro-cols, minmax(0, 1fr) minmax(0, 1fr));
		column-gap: var(--vic-intro-col-gap);
		align-items: end;
	}

	.vic-section-intro--valign-start  { align-items: start; }
	.vic-section-intro--valign-center { align-items: center; }

	.vic-section-intro:is(.vic-section-intro--split, .vic-section-intro--split-reverse) .vic-section-intro__description {
		margin-block-start: 0;
	}

	/* Reverse: heading block in the right column, description in the left. */
	.vic-section-intro--split-reverse .vic-section-intro__title {
		grid-column: 2;
		grid-row: 1;
	}

	.vic-section-intro--split-reverse .vic-section-intro__description {
		grid-column: 1;
		grid-row: 1;
	}

	/* Reverse: the ratio still reads heading / description. */
	.vic-section-intro--split-reverse.vic-section-intro--ratio-60-40 { --vic-intro-cols: minmax(0, 2fr) minmax(0, 3fr); }
	.vic-section-intro--split-reverse.vic-section-intro--ratio-40-60 { --vic-intro-cols: minmax(0, 3fr) minmax(0, 2fr); }
}

/* --------------------------------------------------------------------------
   Entrance (once; reveal.js adds .is-armed, then .is-inview)
   -------------------------------------------------------------------------- */
@keyframes vic-intro-fade-up { from { opacity: 0; transform: translateY(16px); } }
@keyframes vic-intro-fade    { from { opacity: 0; } }
@keyframes vic-intro-failsafe { to { opacity: 1; } }

html.js body:not(.elementor-editor-active) .vic-section-intro[data-vic-reveal]:not(.is-inview) {
	opacity: 0;
}

html.js body:not(.elementor-editor-active) .vic-section-intro[data-vic-reveal]:not(.is-armed):not(.is-inview) {
	animation: vic-intro-failsafe 1ms 2.5s forwards;
}

.vic-section-intro.is-inview[data-vic-reveal] {
	animation: vic-intro-fade-up 600ms var(--ease-standard) backwards;
}

.vic-section-intro.is-inview[data-vic-reveal="fade"] {
	animation-name: vic-intro-fade;
}

@media (prefers-reduced-motion: reduce) {
	.vic-section-intro {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}