/* Shared by all Atletec widgets. The desktop/mobile media query is injected
   inline from Atletec_Elementor_Plugin::responsive_css() (uses Elementor's breakpoint). */

/* Background layer: always fills the whole section and the image / video
   always covers it — no height or size settings. !important also overrides
   height / size values older plugin versions saved into Elementor's CSS. */
.ate-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100% !important;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.ate-bg__img,
.ate-bg__video,
.ate-bg__overlay {
	position: absolute;
	inset: 0;
}

.ate-bg__img {
	background-repeat: no-repeat;
	background-size: cover !important;
	background-position: center;
	background-image: var(--ate-bg-d, none);
}

.ate-bg__video {
	width: 100%;
	height: 100%;
	object-fit: cover !important;
	object-position: center;
}

/* ------------------------------------------------------------------
 * Accessibility (shared: every Atletec style depends on atletec-base)
 * ---------------------------------------------------------------- */

/* Visually hidden, still read by screen readers. */
.ate-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* One visible keyboard focus indicator for all interactive Atletec elements
   (WCAG 2.4.7 / 2.4.11). Blue #2667ff keeps >= 3:1 against white, the dark
   navy and the green accent; the white halo keeps it visible on photos. */
:where(
	.ate-btn,
	.ate-hero__btn,
	.ate-goals__cta,
	.ate-plan__cta,
	.ate-social,
	.ate-text-btn,
	.ate-bubble__link,
	.ate-faq__question,
	.ate-faq a,
	.ate-yt__play-link,
	.ate-meas a,
	.ate-badge a,
	.ate-plan__description a
):focus-visible {
	outline: 3px solid var(--ate-focus, #2667ff);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px #ffffff;
}

/* The play link fills the whole video frame, so draw its ring inside. */
.ate-yt__play-link:focus-visible {
	outline-offset: -7px;
	box-shadow: inset 0 0 0 10px #ffffff;
}

/* Background video is decoration: never show browser video UI — incl. the
   big iOS Safari "play" button shown when Low Power Mode blocks autoplay
   (the poster / first frame stays visible instead). */
.ate-bg__video::-webkit-media-controls,
.ate-bg__video::-webkit-media-controls-panel,
.ate-bg__video::-webkit-media-controls-play-button,
.ate-bg__video::-webkit-media-controls-start-playback-button,
.ate-bg__video::-webkit-media-controls-overlay-play-button {
	display: none !important;
	-webkit-appearance: none;
	opacity: 0 !important;
}

.ate-bg__video {
	pointer-events: none;
}

/* Respect "reduce motion" for every Atletec transition/animation (WCAG 2.3.3).
   Durations are shortened rather than removed so animations that reveal
   content (e.g. the delayed Bubble) still end in their visible state. */
@media (prefers-reduced-motion: reduce) {
	[class*="ate-"],
	[class*="ate-"]::before,
	[class*="ate-"]::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------------
 * Equal-height cards (Card, Frequently card) in Elementor containers
 * ---------------------------------------------------------------- */

/* 1. Same row: Elementor stretches the element wrapper to the row height;
      let the card fill it (older Elementor adds .elementor-widget-container). */
.elementor-element:is(.elementor-widget-atletec-card, .elementor-widget-atletec-frequently-card) {
	align-self: stretch;
}

:is(.elementor-widget-atletec-card, .elementor-widget-atletec-frequently-card) > .elementor-widget-container,
.elementor-widget-atletec-card .ate-card,
.elementor-widget-atletec-frequently-card .ate-freq {
	height: 100%;
}

/* 2. All rows: in a grid holding only these cards, every row gets the
      tallest row's height (1fr rows in an auto-height grid). Grids that mix
      in other elements keep their normal row sizing. Boxed containers put
      the grid on .e-con-inner, full-width ones on .e-grid itself. */
:is(.e-grid, .e-grid > .e-con-inner):has(> :is(.elementor-widget-atletec-card, .elementor-widget-atletec-frequently-card)):not(:has(> :not(.elementor-widget-atletec-card, .elementor-widget-atletec-frequently-card))) {
	grid-auto-rows: 1fr;
}