/* Homepage hero: slider with dots on phones (HomepageHero.php). */
@media (max-width: 781px) {
	.amless-hero .wp-block-columns {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 0 !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.amless-hero .wp-block-columns::-webkit-scrollbar {
		display: none;
	}

	.amless-hero .wp-block-columns > .wp-block-column {
		flex: 0 0 100% !important;
		min-width: 100%;
		margin: 0 !important;
		scroll-snap-align: center;
		scroll-snap-stop: always;
	}

	/* A banner, not a full screen: leave room to see what comes next. */
	.amless-hero .wp-block-cover {
		min-height: 62vh !important;
		max-height: 520px;
	}

	.amless-hero-dots {
		display: flex;
		justify-content: center;
		gap: 0;
		padding: 4px 0 0;
	}

	/* 24px touch target (WCAG 2.5.8); the visible dot is the content box. */
	.amless-hero-dots button {
		box-sizing: content-box;
		width: 8px;
		height: 8px;
		min-height: 0;
		padding: 8px;
		border: 0;
		border-radius: 999px;
		background: var(--mbf-color-border, #d4d2d8) content-box;
		transition: width 0.25s ease, background-color 0.25s ease;
		cursor: pointer;
	}

	.amless-hero-dots button[aria-current="true"] {
		width: 24px;
		background: var(--mbf-color-primary, #202025) content-box;
	}
}

@media (min-width: 782px) {
	.amless-hero-dots {
		display: none;
	}
}

/* Darken the bottom of each hero photo so the white headline always reads. */
.amless-hero .wp-block-cover::after {
	content: "";
	position: absolute;
	inset: 40% 0 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(20, 19, 24, 0) 0%, rgba(20, 19, 24, 0.55) 100%);
}

.amless-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

/*
 * Trust bar under the hero (group "amless-trust"): on phones the four
 * points stacked with their descriptions took a whole screen. Show them as
 * a compact 2×2 grid, icon + title only (the details live on the policy
 * pages and the product page).
 */
@media (max-width: 781px) {
	.amless-trust {
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}

	.amless-trust > .wp-block-columns {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 10px !important;
	}

	.amless-trust > .wp-block-columns > .wp-block-column {
		margin: 0 !important;
		padding: 12px;
		border-radius: 12px;
		background: #f6f4f1;
	}

	.amless-trust .wp-block-columns .wp-block-columns {
		align-items: center !important;
		gap: 10px !important;
		margin: 0 !important;
	}

	.amless-trust .wp-block-column[style*="flex-basis:24px"] {
		flex: 0 0 22px !important;
	}

	.amless-trust .wp-block-image img {
		width: 22px !important;
		height: 22px !important;
	}

	.amless-trust .is-style-mbf-paragraph-without-margin {
		font-size: 13px !important;
		font-weight: 600;
		line-height: 1.3;
	}

	.amless-trust .is-style-mbf-layout-margin-1 {
		display: none;
	}

	/* Dots sit right under the slide. */
	.amless-hero .amless-hero-dots {
		padding: 10px 0 0;
	}

	.amless-hero + * ,
	.amless-hero {
		margin-bottom: 0 !important;
	}
}

@media (max-width: 781px) {
	/* The theme turns each column into display:contents on phones, so the
	   covers themselves are the slides: make each one a full-width page. */
	.amless-hero .wp-block-columns > .wp-block-column > .wp-block-cover {
		flex: 0 0 100% !important;
		width: 100% !important;
		min-width: 100%;
		scroll-snap-align: center;
		scroll-snap-stop: always;
	}

	/* Theme flow layout adds 32px above every block; not above the dots. */
	.amless-hero .amless-hero-dots {
		margin-top: 0 !important;
	}

	.amless-trust .is-style-mbf-columns-4-style {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 10px !important;
	}

	.amless-trust .is-style-mbf-columns-4-style > .wp-block-column {
		margin: 0 !important;
		padding: 12px;
		border-radius: 12px;
		background: #f6f4f1;
	}
}

/* The visually hidden homepage H1 is the first block: don't let the theme's
   block gap push the hero down because of it. */
.amless-home-h1 + .amless-hero {
	margin-top: 0 !important;
}

/* Hero buttons: solid white pill, same as the "Quero o look" CTA. */
.amless-hero .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 22px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: #202025 !important; /* literal: dark covers redefine --mbf-color-primary as white */
	font-size: 14px !important;
	font-weight: 700 !important;
	white-space: nowrap;
	text-decoration: none;
}

.amless-hero .wp-block-button__link:hover,
.amless-hero .wp-block-button__link:focus-visible {
	background: #f1f1f1 !important;
	color: #202025 !important;
}

/* Hero headlines: readable at a glance, max ~2 lines in a third-width column. */
.amless-hero .wp-block-cover h2.wp-block-heading {
	max-width: 15em;
	font-size: clamp(24px, 2.1vw, 30px) !important;
	line-height: 1.15 !important;
	letter-spacing: -0.01em;
}

@media (max-width: 781px) {
	.amless-hero .wp-block-cover h2.wp-block-heading {
		font-size: 26px !important;
	}
}