/* Hero for the 6th Annual Naples Cardiovascular Summit.
   Ported from a 1920x1080 absolutely positioned design to a fluid layout: design
   measurements are expressed as viewport proportions, so the hero fills the full
   width and height on any screen without distorting the composition.

   Everything is scoped to `.summit-hero` so the block can live inside any theme
   without touching the rest of the page. */

/* Self-hosted typefaces (../fonts/). Only the faces the hero uses are included:
   Palatino Bold Italic for the headline, Geometric 415 Medium and Light for
   the rest. A locally installed copy is used first when available. */
@font-face {
	font-family: "Palatino Web";
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: local("Palatino Bold Italic"), local("Palatino Linotype Bold Italic"),
	     url("../fonts/palatino-bolditalic.woff2") format("woff2");
}

@font-face {
	font-family: "Geometric 415";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: local("Geometr415 Md BT"), url("../fonts/geometric415-medium.woff2") format("woff2");
}

@font-face {
	font-family: "Geometric 415";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: local("Geometr415 Lt BT"), url("../fonts/geometric415-light.woff2") format("woff2");
}

.summit-hero {
	/* Self-hosted faces first, then system fallbacks. */
	--font-display: "Palatino Web", "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", Georgia, serif;
	--font-sans: "Geometric 415", Futura, "Century Gothic", "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
	--font-sans-light: "Geometric 415", Futura, "Century Gothic", "Avenir Next", "Trebuchet MS", system-ui, sans-serif;

	/* Colors as in the design */
	--overlay-red: rgba(197, 54, 39, 0.25);
	--overlay-red-blend: screen;
	--grad-blue-top: rgba(56, 86, 165, 0.5);
	--grad-blue-bottom: rgba(56, 86, 165, 0.54);
	--ink: #fff;

	/* Background fallback: visible while the canvas loads, if the script fails
	   to load, or if the visitor prefers reduced motion. Without it the hero is
	   white and the white text disappears. */
	--hero-media: radial-gradient(120% 120% at 70% 45%, #6d1533 0%, #3d0e2e 45%, #240a22 100%);

	/* Particle palette INSIDE the hero. Not the engine defaults, which are
	   calibrated for compositing over black. Here the particles sit on a
	   mid-toned background in `screen` mode; these pinks, closer to the
	   background, plus the opacity below integrate the wave into the gradient. */
	--particle-high: #ffdfe9;
	--particle-mid: #e9aebf;
	--particle-shadow: #a86f80;
	--particle-opacity: 0.8;

	/* Legibility scrim. Not in the design: there the background is a static
	   image with the particle stream kept away from the text. An animated
	   background cannot guarantee that, and the text needs WCAG AA 4.5:1
	   contrast. Reinforces what the art already does: darken the left, where
	   the text sits. */
	--scrim: rgba(28, 8, 26, 0.66);

	/* Left gutter: aligned to the page's 1280px boxed container, not the raw
	   viewport, so the hero content lines up with the sections below it once
	   the hero goes full-bleed. --content-pad should match the container's
	   own left padding (check the "Welcome" section's computed padding-left
	   in devtools and adjust if it isn't 1rem). */
	--content-max: 1280px;
	--content-pad: 1rem;
	--gutter: max(1.5rem, calc((100vw - var(--content-max)) / 2 + var(--content-pad)));
}

.summit-hero,
.summit-hero *,
.summit-hero *::before,
.summit-hero *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------- structure */

.summit-hero {
    position: relative;
    width: 100%;

    min-height: clamp(550px, 70vh, 800px);

    display: grid;
    place-items: stretch;
    overflow: hidden;
    isolation: isolate;
    background: #240a22;
    color: var(--ink);
    font-family: var(--font-sans);
    line-height: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

/* Breaks out of a centered content column to span the full viewport width. */
.summit-hero--full-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Theme-defensive resets: themes commonly style headings, paragraphs, images
   and links globally. Everything the hero needs is restated here. */
.summit-hero p,
.summit-hero h1 {
	margin: 0;
	padding: 0;
}

.summit-hero img {
	max-width: none;
	border: 0;
	box-shadow: none;
}

.summit-hero__media,
.summit-hero__overlay,
.summit-hero__grad,
.summit-hero__scrim {
	position: absolute;
	pointer-events: none;
}

.summit-hero__media {
	inset: 0;
	background: var(--hero-media);
}

.summit-hero__bg,
.summit-hero__canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.summit-hero__canvas {
	/* `screen` instead of normal alpha: the points ADD light over the background
	   instead of covering it. With normal alpha a pink point over a similarly
	   toned plum background is barely visible. */
	mix-blend-mode: screen;
	opacity: var(--particle-opacity);
}

.summit-hero__overlay {
	inset: 0;
	background: var(--overlay-red);
	/* The overlay sits above the particles, as in the design. `multiply` would
	   dim them; `screen` tints without eating the points. */
	mix-blend-mode: var(--overlay-red-blend);
}

/* Two gradients from the design: 619 high out of 1080 = 57.3%, one anchored at
   the top and one at the bottom. The bottom one is the same rotated 180 degrees,
   so in CSS it is the same angle with the gradient reversed. */
.summit-hero__grad {
	left: 0;
	right: 0;
	height: 57.3%;
}

.summit-hero__grad--top {
	top: 0;
	background: linear-gradient(171.811deg, var(--grad-blue-top) 1.96%, rgba(56, 86, 165, 0) 44.78%);
}

.summit-hero__grad--bottom {
	bottom: 0;
	background: linear-gradient(-8.189deg, var(--grad-blue-bottom) 1.96%, rgba(56, 86, 165, 0) 44.78%);
}

/* Above the three color layers and below the content. */
.summit-hero__scrim {
	inset: 0;
	background: linear-gradient(
		90deg,
		var(--scrim) 0%,
		rgba(28, 8, 26, 0.5) 34%,
		rgba(28, 8, 26, 0) 64%
	);
}

/* On narrow screens the text spans the full width, so the scrim does too. */
@media (max-width: 48rem) {
	.summit-hero__scrim {
		background: linear-gradient(
			90deg,
			var(--scrim) 0%,
			rgba(28, 8, 26, 0.55) 60%,
			rgba(28, 8, 26, 0.42) 100%
		);
	}
}

/* ---------------------------------------------------------------- content */

.summit-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(1rem, 2vh, 1.75rem);
    padding: clamp(2rem, 6vh, 5rem) var(--gutter);
    min-height: inherit;
}

/* --- logo + eyebrow, vertically centered relative to each other as in the design */

.summit-hero__brand {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
	flex-wrap: wrap;
}

.summit-hero__logo {
    display: block;
    width: clamp(5rem, 8vw, 9rem);
    height: auto;
    aspect-ratio: 1;
}

.summit-hero__eyebrow {
    margin: 0;
    max-width: min(27.76vw, 33.3125rem);
    color: inherit;
    font-size: clamp(1.424rem, 1.317rem + 0.3425vw, 1.728rem);
    font-weight: 500;
    line-height: 1.2;
    text-wrap: balance;
}

.summit-hero__eyebrow sup {
	font-size: 0.5em;
	vertical-align: super;
	line-height: 0;
}

/* --- title */

.summit-hero__title {
    margin: 0;
    max-width: min(60vw, 70rem);
    color: inherit;
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", serif;
    font-style: italic;
    /* Requested lighter than bold. The self-hosted "Palatino Web" face only
       ships a Bold Italic (700) static, so on visitors who load that file the
       browser will still render at 700 regardless of this value, no matter
       how low it's set. Fallback fonts (Palatino Linotype, Book Antiqua,
       Georgia) do respect this and will render lighter. To get a genuinely
       lighter self-hosted weight, a regular/medium Palatino Italic .woff2
       needs to be added as a second @font-face src and referenced here. */
    font-weight: 500 !important;
    font-size: clamp(2.074rem, 1.85rem + .9vw, 2.986rem);
    line-height: 1.15;
    letter-spacing: normal;
    text-transform: none;
    text-wrap: balance;
}

/* --- date and venue */

.summit-hero__meta {
    margin: 0;
    margin-top: clamp(1rem, 3vh, 2rem);
    display: flex;
    flex-direction: column;
    color: inherit;
    font-size: clamp(1.266rem, 1.2047rem + 0.1961vw, 1.44rem);
    line-height: 1.4;
}

.summit-hero__date { font-weight: 500; }

.summit-hero__venue { font-family: var(--font-sans-light); font-weight: 300; }

/* --- button */
.summit-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: clamp(0.5rem, 2vh, 1.25rem);
    min-width: clamp(11rem, 12vw, 14rem);
    padding: 0.85rem 2rem;
    border: clamp(2px, 0.26vw, 5px) solid var(--ink);
    border-radius: clamp(6px, 0.52vw, 10px);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: clamp(1rem, 0.95rem + .4vw, 1.25rem);
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    transition:
        background-color 160ms ease,
        color 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}

.summit-hero__cta,
.summit-hero__cta:visited,
.summit-hero__cta:focus {
    color: white;
    text-decoration: none;
    box-shadow: none;
}

.summit-hero__cta:hover {
    background: #ffffff;
    color: #c53627;
    border-color: #ffffff;
}

.summit-hero__cta:active { transform: translateY(1px); }

/* Custom focus ring: the default outline gets lost on such a textured
   background. Offset outside the white border so it is always visible. */
.summit-hero__cta:focus-visible {
	outline: 3px solid #ffd9e4;
	outline-offset: 4px;
}

/* ---------------------------------------------------------------- adjustments */

/* Short landscape viewports (rotated phone) leave the hero no room to breathe:
   shrink the spacing instead of letting the content overflow. */
@media (max-height: 32rem) and (orientation: landscape) {
	.summit-hero__content {
		padding-block: clamp(1.25rem, 6vh, 2.5rem);
		gap: clamp(0.625rem, 2vh, 1.25rem);
	}
	.summit-hero__brand { gap: clamp(0.75rem, 2.5vw, 2rem); }
}

@media (prefers-reduced-motion: reduce) {
	.summit-hero__cta { transition: none; }
}