/*
 * Container looks: Surface and Layout options on Elementor containers.
 * Card and panel surfaces give their padding, gap and radius through
 * Elementor's own container variables, so a value set in the editor
 * (Layout → Padding/Gaps, Style → Border radius) wins over the look's
 * default. Mobile first.
 */

/* ---------- Surface: page sections ---------- */

/* Boxed sections keep fixed padding and inner gap: Elementor puts a boxed container's block padding
   on its inner box, so its variables would move the spacing. */
:is(.hmf-surface--section, .hmf-surface--section-tint, .hmf-surface--hero, .hmf-surface--hero-center) {
	padding: 44px 20px;
	background: var(--hc-white);
}

:is(.hmf-surface--section, .hmf-surface--section-tint, .hmf-surface--hero, .hmf-surface--hero-center) > .e-con-inner {
	gap: 26px;
}

.hmf-surface--section-tint {
	background: var(--hc-sky);
}

.hmf-surface--hero {
	background: radial-gradient(ellipse at 100% 0, var(--hc-gold-soft), transparent 65%), var(--hc-sky);
}

:is(.hmf-surface--section, .hmf-surface--section-tint, .hmf-surface--hero, .hmf-surface--hero-center) :is(.hmf-section-heading, .hmf-lqip-image) {
	margin: 0;
}

:is(.hmf-surface--section, .hmf-surface--section-tint, .hmf-surface--hero, .hmf-surface--hero-center) :is(a, button, summary):focus-visible {
	outline: 3px solid var(--hc-blue);
	outline-offset: 4px;
}

:is(.hmf-surface--section, .hmf-surface--section-tint, .hmf-surface--hero, .hmf-surface--hero-center)[id] {
	scroll-margin-block-start: 110px;
}

:is(.hmf-surface--section, .hmf-surface--section-tint, .hmf-surface--hero, .hmf-surface--hero-center) [id] {
	scroll-margin-block-start: 110px;
}

/* Plain column containers inside a section stack with the section rhythm. Variables only (zero
   specificity), so a gap or padding saved in the editor wins. */
:where(.hmf-surface--section, .hmf-surface--section-tint, .hmf-surface--hero, .hmf-surface--hero-center) .e-con-full:not(:where([class*="hmf-surface--"])) {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--gap: 24px;
	--row-gap: 24px;
	--column-gap: 24px;
}

/* Navy sections keep their saved padding (only used on sections that set it). */
.hmf-surface--navy {
	background-color: var(--hc-ink);
}

/* ---------- Surface: cards and panels ---------- */

:is(.hmf-surface--card, .hmf-surface--card-tint) {
	--padding-top: 28px;
	--padding-right: 24px;
	--padding-bottom: 28px;
	--padding-left: 24px;
	--gap: 20px;
	--row-gap: 20px;
	--column-gap: 20px;
	--border-radius: 24px;
	border: 1px solid var(--hc-line);
	background: var(--hc-white);
}

.hmf-surface--card-tint {
	background: var(--hc-sky);
}

:is(.hmf-surface--navy-panel, .hmf-surface--offer) {
	--padding-top: 30px;
	--padding-right: 20px;
	--padding-bottom: 30px;
	--padding-left: 20px;
	--border-radius: 30px;
	background:
		radial-gradient(320px circle at 100% 0%, rgb(255 178 56 / 0.2), transparent 70%),
		radial-gradient(300px circle at 0% 100%, rgb(4 107 210 / 0.28), transparent 70%),
		linear-gradient(150deg, var(--hc-ink), #1a1c33);
	box-shadow: 0 40px 80px -40px rgb(15 16 29 / 0.7);
	color: #cbd5e1;
}

.hmf-surface--glass {
	--padding-top: 12px;
	--padding-right: 14px;
	--padding-bottom: 12px;
	--padding-left: 14px;
	--border-radius: 18px;
	border: 1px solid rgb(255 255 255 / 0.14);
	background: rgb(255 255 255 / 0.08);
	color: #e2e8f0;
}

/* ---------- Layout ---------- */

:is(.hmf-layout--two-up, .hmf-layout--split, .hmf-layout--split-wide, .hmf-layout--grid-3, .hmf-layout--grid-4).e-con-full {
	gap: 24px;
}

.hmf-layout--two-up.e-con-full,
.hmf-layout--two-up > .e-con-inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

:is(.hmf-layout--grid-3, .hmf-layout--grid-4).e-con-full,
:is(.hmf-layout--grid-3, .hmf-layout--grid-4) > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
	:is(.hmf-surface--section, .hmf-surface--section-tint, .hmf-surface--hero, .hmf-surface--hero-center) {
		padding: 64px 28px;
	}

	:is(.hmf-surface--navy-panel, .hmf-surface--offer) {
		--padding-top: 44px;
		--padding-right: 40px;
		--padding-bottom: 44px;
		--padding-left: 40px;
	}

	.hmf-layout--two-up.e-con-full,
	.hmf-layout--two-up > .e-con-inner {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.hmf-layout--two-up > :is(.e-con, .elementor-widget),
	.hmf-layout--two-up > .e-con-inner > :is(.e-con, .elementor-widget) {
		flex: 1 1 calc(50% - 24px);
		inline-size: calc(50% - 12px);
	}

	.hmf-layout--grid-3.e-con-full,
	.hmf-layout--grid-3 > .e-con-inner {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hmf-layout--grid-4.e-con-full,
	.hmf-layout--grid-4 > .e-con-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1025px) {
	:is(.hmf-surface--section, .hmf-surface--section-tint, .hmf-surface--hero, .hmf-surface--hero-center) {
		padding: 80px 24px;
	}

	:is(.hmf-surface--navy-panel, .hmf-surface--offer) {
		--padding-top: 56px;
		--padding-right: 52px;
		--padding-bottom: 56px;
		--padding-left: 52px;
	}

	:is(.hmf-layout--split, .hmf-layout--split-wide).e-con-full,
	:is(.hmf-layout--split, .hmf-layout--split-wide) > .e-con-inner {
		display: grid;
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		align-items: center;
		gap: 20px 48px;
	}

	.hmf-layout--split-wide.e-con-full,
	.hmf-layout--split-wide > .e-con-inner {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
		gap: 48px;
	}

	/* Text stacks in the first column; a trailing media item spans it in the second. */
	:is(.hmf-layout--split, .hmf-layout--split-wide).e-con-full > :last-child:not(:nth-child(-n + 2)),
	:is(.hmf-layout--split, .hmf-layout--split-wide) > .e-con-inner > :last-child:not(:nth-child(-n + 2)) {
		grid-column: 2;
		grid-row: 1 / span 2;
		margin: 0;
	}

	:is(.hmf-layout--split, .hmf-layout--split-wide).e-con-full > :last-child:nth-child(n + 4),
	:is(.hmf-layout--split, .hmf-layout--split-wide) > .e-con-inner > :last-child:nth-child(n + 4) {
		grid-row: 1 / span 3;
	}

	.hmf-layout--grid-4.e-con-full,
	.hmf-layout--grid-4 > .e-con-inner {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* A course hero's trailing image spans the heading, copy and actions rows. */
@media (min-width: 1025px) {
	.hmf-surface--hero.hmf-layout--split > .e-con-inner > :last-child {
		grid-row: 1 / 4;
	}
}

/* Linked course cards: an arrow at the end, balanced titles. */
a.hmf-surface--card-tint::after {
	content: "";
	position: absolute;
	inset-inline-end: 20px;
	inset-block-start: calc(50% - 11px);
	inline-size: 22px;
	block-size: 22px;
	background: var(--hc-blue);
	mask: var(--hc-icon-arrow) center / contain no-repeat;
}

a.hmf-surface--card-tint .elementor-heading-title {
	text-wrap: balance;
}

/* Proposed: hero backgrounds of single pages (spacing stays the hero's or the editor's). */
.hmf-surface--hero-center {
	background: radial-gradient(ellipse at 50% 0, #fff6e6, transparent 65%), var(--hc-sky);
}

.hmf-surface--hero-blue {
	background: radial-gradient(at 10% 80%, #e6effa 0, transparent 55%), var(--hc-sky);
}

/* Proposed: price offer panel, the navy panel with a gold corner glow and a deep blue end. */
.hmf-surface--offer {
	background:
		radial-gradient(320px circle at 100% 0%, rgb(255 178 56 / 0.28), transparent 65%),
		linear-gradient(160deg, var(--hc-ink), #1a1c33 60%, var(--hc-blue-deep));
}