/* ==========================================================================
   HighFlight - Home (front-page.php)
   Replica Documentacion/mock-up-website.jpeg. Cargado solo en is_front_page().
   ========================================================================== */

.hf-home > section{
	position: relative;
	width: 100vw;
	left: 50%;
	transform: translateX(-50%);
}

.hf-container{
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

/* --------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------- */

.hf-hero{
	background-color: var(--hf-bg);
	overflow: hidden;
}

.hf-hero__slides{
	position: relative;
}

.hf-hero__slide{
	position: relative;
	min-height: 88vh;
	display: flex;
	align-items: flex-end;
	opacity: 0;
	position: absolute;
	inset: 0;
	transition: opacity 1.2s ease;
}
.hf-hero__slide.is-active{
	opacity: 1;
	position: relative;
}
.hf-hero__slide:first-child{ position: relative; }

.hf-hero__media{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hf-hero__video{
	object-position: center;
	pointer-events: none;
}

.hf-hero__overlay{
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(10,14,21,0.96) 0%, rgba(10,14,21,0.82) 32%, rgba(10,14,21,0.35) 62%, rgba(10,14,21,0.1) 100%);
}

.hf-hero__content{
	position: relative;
	z-index: 2;
	padding-top: clamp(6rem, 14vw, 10rem);
	padding-bottom: 3rem;
}

.hf-hero__eyebrow{
	color: var(--hf-white);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.85rem;
	max-width: 480px;
	margin: 0 0 0.75rem;
}
.hf-hero__eyebrow .hf-accent{ display: block; font-size: 1rem; }

.hf-hero__headline{
	color: var(--hf-white);
	font-size: clamp(2.75rem, 6.5vw, 5rem);
	margin: 0 0 1.25rem;
	max-width: 640px;
}

.hf-hero__description{
	color: var(--hf-text-muted);
	max-width: 460px;
	margin: 0 0 2rem;
	font-size: 1rem;
	line-height: 1.6;
}

.hf-hero__ctas{
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.hf-hero__footer{
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem;
	padding: 1.5rem 0 2.5rem;
	border-top: 1px solid var(--hf-border);
	margin-top: 1rem;
}

.hf-hero__pager{
	color: var(--hf-text-muted);
	font-size: 0.85rem;
	letter-spacing: 0.05em;
}
.hf-hero__pager-current{ color: var(--hf-white); font-weight: 700; }

.hf-hero__stats{
	display: flex;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	flex-wrap: wrap;
}
.hf-hero__stat{
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.hf-hero__stat-label{
	color: var(--hf-text-muted);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}
.hf-hero__stat-value{
	color: var(--hf-white);
	font-family: var(--hf-font-display);
	font-size: 1.1rem;
	letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------
   2. Features bar + Our Mission
   -------------------------------------------------------------------- */

.hf-features{
	background-color: var(--hf-bg-offwhite);
	padding: 2.5rem 2rem;
}

.hf-features__bar{
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr) 1.3fr;
	gap: 0;
	background-color: var(--hf-bg-light);
	border: 1px solid var(--hf-border-dark);
}

.hf-features__grid{
	display: contents;
}

.hf-feature{
	padding: 2rem 1.5rem;
	border-right: 1px solid var(--hf-border-dark);
}
.hf-feature__icon{
	width: 32px;
	height: 32px;
	margin-bottom: 1rem;
	display: block;
}
.hf-feature__icon--placeholder{
	width: 32px;
	height: 32px;
	margin-bottom: 1rem;
	display: block;
	border: 2px solid var(--hf-accent);
	border-radius: 50%;
}
.hf-feature__title{
	font-size: 1.1rem;
	margin: 0 0 0.5rem;
	color: var(--hf-text-dark);
}
.hf-feature__description{
	font-size: 0.85rem;
	color: var(--hf-text-muted-dark);
	line-height: 1.5;
	margin: 0;
}

.hf-mission{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.75rem;
	padding: 2rem;
	background-color: var(--hf-bg);
	background-size: cover;
	background-position: center;
	text-decoration: none;
	min-height: 100%;
}
.hf-mission__overlay{
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,14,21,0.55) 0%, rgba(10,14,21,0.88) 100%);
}
.hf-mission__text{
	position: relative;
	z-index: 1;
	color: var(--hf-white);
	font-size: 1.3rem;
	line-height: 1.15;
}
.hf-mission__link{ position: relative; z-index: 1; }

/* --------------------------------------------------------------------
   3. Aircraft (Cassutt Special)
   -------------------------------------------------------------------- */

.hf-aircraft{
	background-color: var(--hf-bg-light);
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
}

.hf-aircraft__image-col{
	position: relative;
	background-color: var(--hf-bg-panel);
	clip-path: polygon(0 0, 100% 0, 88% 100%, 0% 100%);
}
.hf-aircraft__image-col img,
.hf-aircraft__image-placeholder{
	width: 100%;
	height: 100%;
	min-height: 480px;
	object-fit: cover;
	display: block;
}
.hf-aircraft__image-placeholder{ background-color: var(--hf-bg-panel); }

.hf-aircraft__content-col{
	position: relative;
	padding: 4rem clamp(2rem, 5vw, 5rem) 4rem 4rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
}

.hf-aircraft__watermark{
	position: absolute;
	top: 50%;
	right: -1rem;
	transform: translateY(-50%) rotate(90deg);
	transform-origin: right center;
	font-family: var(--hf-font-display);
	font-size: 3.5rem;
	letter-spacing: 0.05em;
	color: var(--hf-bg-offwhite);
	white-space: nowrap;
	pointer-events: none;
	z-index: 0;
}

.hf-aircraft__title{
	color: var(--hf-text-dark);
	font-size: clamp(2rem, 4vw, 3rem);
	margin: 0.25rem 0 1rem;
	position: relative;
}
.hf-aircraft__description{
	color: var(--hf-text-muted-dark);
	max-width: 460px;
	line-height: 1.6;
	margin: 0 0 2rem;
	position: relative;
}

.hf-aircraft__specs{
	display: grid;
	grid-template-columns: repeat(2, minmax(140px, 1fr));
	gap: 1.5rem;
	margin-bottom: 2.5rem;
	position: relative;
}
.hf-aircraft__spec{
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.hf-aircraft__spec-label{
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--hf-text-muted-dark);
}
.hf-aircraft__spec-value{
	font-family: var(--hf-font-display);
	color: var(--hf-text-dark);
	font-size: 1.05rem;
}

.hf-aircraft__content-col > .hf-btn{ position: relative; align-self: flex-start; }

/* --------------------------------------------------------------------
   4. Team
   -------------------------------------------------------------------- */

.hf-team{
	background-color: var(--hf-bg-light);
	padding: 5rem 2rem;
	display: grid;
	grid-template-columns: 0.9fr 1.6fr;
	gap: 3rem;
	max-width: 1200px;
	margin: 0 auto;
}

.hf-team__intro{ display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.hf-team__title{ color: var(--hf-text-dark); font-size: clamp(1.9rem, 3.5vw, 2.6rem); margin: 0; }
.hf-team__description{ color: var(--hf-text-muted-dark); line-height: 1.6; margin: 0 0 0.5rem; }

.hf-team__grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

.hf-team-card{
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: 4px;
	overflow: hidden;
	background-color: var(--hf-bg-panel);
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	text-align: left;
	cursor: pointer;
	display: block;
	width: 100%;
}
.hf-team-card:hover .hf-team-card__overlay{ background: linear-gradient(180deg, rgba(10,14,21,0.25) 40%, rgba(10,14,21,0.9) 100%); }
.hf-team-card:focus-visible{ outline: 2px solid var(--hf-accent); outline-offset: 2px; }
.hf-team-card img,
.hf-team-card__placeholder{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hf-team-card__placeholder{ background: linear-gradient(160deg, var(--hf-bg-panel), var(--hf-bg-panel-alt)); }
.hf-team-card__overlay{
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,14,21,0.1) 40%, rgba(10,14,21,0.85) 100%);
}
.hf-team-card__label{
	position: absolute;
	left: 0.9rem;
	right: 0.9rem;
	bottom: 0.9rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.hf-team-card__role{
	color: var(--hf-white);
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.hf-team-card__status{
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

body.hf-modal-open{ overflow: hidden; }

.hf-team-modal{
	position: fixed;
	inset: 0;
	z-index: 1000;
}
.hf-team-modal[hidden]{ display: none; }
.hf-team-modal__overlay{
	position: absolute;
	inset: 0;
	background: rgba(10,14,21,0.85);
}
.hf-team-modal__dialog{
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	width: 100%;
	height: 100%;
	background-color: var(--hf-bg);
	overflow: hidden;
}
.hf-team-modal__image-col{
	background-color: var(--hf-bg-panel);
	height: 100%;
	min-height: 0;
}
.hf-team-modal__image-col img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hf-team-modal__text-col{
	padding: clamp(2rem, 4vw, 3.5rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1rem;
	color: var(--hf-white);
	height: 100%;
	overflow-y: auto;
}
.hf-team-modal__text-col .hf-eyebrow{ color: var(--hf-accent); margin: 0; }
.hf-team-modal__bio{ color: var(--hf-text-muted); line-height: 1.7; margin: 0; }
.hf-team-modal__close{
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	z-index: 2;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.4);
	background: rgba(10,14,21,0.6);
	color: var(--hf-white);
	font-family: inherit;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}
.hf-team-modal__close:hover{ background-color: var(--hf-accent); border-color: var(--hf-accent); color: var(--hf-bg); }
.hf-team-modal__nav{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.4);
	background: rgba(10,14,21,0.6);
	color: var(--hf-white);
	font-family: inherit;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}
.hf-team-modal__nav:hover{ background-color: var(--hf-accent); border-color: var(--hf-accent); color: var(--hf-bg); }
.hf-team-modal__nav--prev{ left: 1.25rem; }
.hf-team-modal__nav--next{ right: 1.25rem; }

@media (max-width: 720px){
	.hf-team-modal__dialog{
		grid-template-columns: 1fr;
		grid-template-rows: 38vh 1fr;
	}
	.hf-team-modal__text-col{
		padding: 1.5rem 1.25rem 4rem;
		justify-content: flex-start;
	}
	.hf-team-modal__close{ top: 0.75rem; right: 0.75rem; }
	.hf-team-modal__nav{ top: auto; bottom: 0.75rem; transform: none; }
	.hf-team-modal__nav--prev{ left: 0.75rem; }
	.hf-team-modal__nav--next{ right: 0.75rem; }
}

/* --------------------------------------------------------------------
   5. Fundador
   -------------------------------------------------------------------- */

.hf-founder{
	background-color: var(--hf-bg);
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
}
.hf-founder__image-col img,
.hf-founder__image-placeholder{
	width: 100%;
	height: 100%;
	min-height: 460px;
	object-fit: cover;
	display: block;
}
.hf-founder__image-placeholder{ background-color: var(--hf-bg-panel); }

.hf-founder__content-col{
	padding: 4rem clamp(2rem, 5vw, 5rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: var(--hf-white);
}
.hf-founder .hf-eyebrow{ color: var(--hf-text-muted); }
.hf-founder__name{ font-size: clamp(2rem, 4vw, 3rem); margin: 0.25rem 0 0.5rem; color: var(--hf-white); }
.hf-founder__title{ font-weight: 700; letter-spacing: 0.04em; margin: 0 0 1.5rem; }
.hf-founder__bio{ color: var(--hf-text-muted); line-height: 1.7; max-width: 520px; margin: 0; }

/* --------------------------------------------------------------------
   6. Latest News / Upcoming Races / Official Store
   -------------------------------------------------------------------- */

.hf-nrs{
	background-color: var(--hf-bg-light);
	padding: 4.5rem 2rem;
	border-top: 1px solid var(--hf-border-dark);
}
.hf-nrs__grid{
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
}
.hf-nrs__col-header{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}
.hf-nrs__col-header h3{ color: var(--hf-text-dark); font-size: 1.2rem; margin: 0; }
.hf-nrs__empty{ color: var(--hf-text-muted-dark); font-size: 0.9rem; }

/* News */
.hf-news-item{
	display: flex;
	gap: 0.75rem;
	align-items: center;
	text-decoration: none;
	margin-bottom: 1rem;
	color: inherit;
}
.hf-news-item img{ width: 64px; height: 48px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.hf-news-item__body{ display: flex; flex-direction: column; gap: 0.2rem; }
.hf-news-item__title{ color: var(--hf-text-dark); font-weight: 600; font-size: 0.9rem; line-height: 1.35; }
.hf-news-item__date{ color: var(--hf-text-muted-dark); font-size: 0.75rem; }
.hf-news-item--featured{ flex-direction: column; align-items: stretch; margin-bottom: 1.25rem; }
.hf-news-item--featured img{ width: 100%; height: 160px; }
.hf-news-item--featured .hf-news-item__title{ font-size: 1rem; }

/* Races */
.hf-race-item{
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--hf-border-dark);
}
.hf-race-item__date{
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.1;
	min-width: 56px;
}
.hf-race-item__month{ font-size: 0.7rem; font-weight: 700; color: var(--hf-accent-dark); }
.hf-race-item__day{ font-size: 0.85rem; font-weight: 700; color: var(--hf-text-dark); }
.hf-race-item__body{ flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.hf-race-item__name{ font-weight: 700; font-size: 0.85rem; color: var(--hf-text-dark); }
.hf-race-item__location{ font-size: 0.75rem; color: var(--hf-text-muted-dark); }
.hf-race-item__cta{ padding: 0.5em 0.9em; font-size: 0.7rem; }

.hf-race-spotlight{ display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.hf-race-spotlight__logo{ max-height: 48px; width: auto; margin-bottom: 0.3rem; }
.hf-race-spotlight__name{ font-weight: 700; font-size: 1rem; color: var(--hf-text-dark); }
.hf-race-spotlight__meta{ font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; color: var(--hf-accent-dark); text-transform: uppercase; }
.hf-race-spotlight__description{ color: var(--hf-text-muted-dark); font-size: 0.9rem; line-height: 1.6; margin: 0.4rem 0 0.6rem; }
.hf-race-spotlight .hf-btn{ padding: 0.6em 1.1em; font-size: 0.75rem; margin-bottom: 1rem; }
.hf-race-spotlight__sponsors-label{ font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hf-text-muted-dark); margin: 0 0 0.4rem; }
.hf-race-spotlight__sponsors{ list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; width: 100%; }
.hf-race-spotlight__sponsors li{ display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.85rem; color: var(--hf-text-dark); border-bottom: 1px solid var(--hf-border-dark); padding-bottom: 0.3rem; }
.hf-race-spotlight__sponsor-name{ display: flex; align-items: center; gap: 0.5rem; }
.hf-race-spotlight__sponsor-logo{ height: 20px; width: auto; max-width: 60px; object-fit: contain; }
.hf-race-spotlight__sponsor-tier{ font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hf-accent-dark); flex-shrink: 0; }

/* Store */
.hf-store-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}
.hf-store-item{
	display: block;
	text-decoration: none;
	border: 1px solid var(--hf-border-dark);
	border-radius: 2px;
	overflow: hidden;
	position: relative;
}
.hf-store-item img{ width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.hf-store-item--featured{ grid-row: span 2; display: flex; flex-direction: column; }
.hf-store-item--featured img{ aspect-ratio: 1; flex: 1; }
.hf-store-item__name{ display: block; padding: 0.75rem 0.75rem 0.1rem; font-weight: 700; font-size: 0.8rem; color: var(--hf-text-dark); }
.hf-store-item__price{ display: block; padding: 0 0.75rem 0.75rem; color: var(--hf-text-muted-dark); font-size: 0.85rem; }

/* --------------------------------------------------------------------
   7. CTA final (Sponsor / Donate)
   -------------------------------------------------------------------- */

.hf-final-cta{
	background-color: var(--hf-bg);
	background-size: cover;
	background-position: center;
	padding: 4.5rem 2rem;
}
.hf-final-cta__overlay{
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(10,14,21,0.35) 0%, rgba(10,14,21,0.55) 45%, rgba(10,14,21,0.85) 75%, rgba(10,14,21,0.95) 100%);
}
.hf-final-cta__inner{
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 3rem;
	color: var(--hf-white);
}
.hf-final-cta .hf-eyebrow{ color: var(--hf-text-muted); }
.hf-final-cta__headline{ color: var(--hf-white); font-size: clamp(1.8rem, 3.5vw, 2.6rem); max-width: 480px; margin: 0.25rem 0 0; }
.hf-final-cta__columns{
	display: flex;
	gap: clamp(2rem, 5vw, 4rem);
	flex-wrap: wrap;
}
.hf-final-cta__col{ max-width: 260px; }
.hf-final-cta__col--widget{ max-width: 320px; }
.hf-final-cta__col--widget .gfm-embed{ max-width: 100%; overflow: hidden; border-radius: 8px; }
.hf-final-cta__col--widget .gfm-embed iframe{ max-width: 100%; }
.hf-gfm-fallback{ display: none; margin-top: 0.5rem; }
.hf-final-cta__col-title{ font-family: var(--hf-font-body); font-weight: 700; margin: 0 0 0.5rem; }
.hf-final-cta__col p{ color: var(--hf-text-muted); font-size: 0.9rem; line-height: 1.5; margin: 0 0 0.75rem; }

/* --------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------- */

@media (max-width: 900px){
	.hf-features__bar{ grid-template-columns: repeat(2, 1fr); }
	.hf-mission{ grid-column: span 2; }
	.hf-aircraft,
	.hf-founder{ grid-template-columns: 1fr; }
	.hf-aircraft__image-col{ clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); }
	.hf-team{ grid-template-columns: 1fr; }
	.hf-team__grid{ grid-template-columns: repeat(2, 1fr); }
	.hf-nrs__grid{ grid-template-columns: 1fr; gap: 3rem; }
	.hf-final-cta__inner{ flex-direction: column; }
}

@media (max-width: 560px){
	.hf-features__bar{ grid-template-columns: 1fr; }
	.hf-mission{ grid-column: span 1; }
	.hf-team__grid{ grid-template-columns: repeat(2, 1fr); }
	.hf-hero__footer{ flex-direction: column; align-items: flex-start; }
}
