/**
 * Home layout.
 *
 * Gutters, type, and component overrides below are local to Page 02.
 * They are not theme.json tokens and they do not change the component defaults.
 *
 * The five approved frames are validation points, not five markups: one
 * mobile-first rule set plus the 768, 1024, and 1440 breakpoints. Sections are
 * never given a fixed height; the frame geometry is reproduced with padding,
 * gaps, and grid tracks so real copy keeps growing.
 */

.br-home {
	--br-home-gutter: 12px;
	--br-home-section-space: 48px;

	/*
	 * Distance from a section header to the content it introduces, and from
	 * that content to the trailing "ver todas" link. Each value is measured on
	 * the approved frame for the breakpoint.
	 */
	--br-home-gap-universes: 32px;
	--br-home-gap-rhythm: 32px;
	--br-home-gap-instagram: 24px;

	background: var(--wp--preset--color--surface-base);
	color: var(--wp--preset--color--text-primary);
}

@media (min-width: 390px) {

	.br-home {
		--br-home-gutter: 20px;
	}
}

@media (min-width: 768px) {

	.br-home {
		--br-home-gutter: 40px;
		--br-home-section-space: 80px;
		--br-home-gap-universes: 48px;
		--br-home-gap-rhythm: 40px;
		--br-home-gap-instagram: 32px;
	}
}

@media (min-width: 1024px) {

	.br-home {
		--br-home-gutter: 48px;
		--br-home-section-space: 120px;
		--br-home-gap-universes: 64px;
		--br-home-gap-rhythm: 56px;
		--br-home-gap-instagram: 48px;
	}
}

@media (min-width: 1440px) {

	.br-home {
		--br-home-gutter: 80px;
	}
}

.br-home-section {
	padding: var(--br-home-section-space) var(--br-home-gutter);
}

.br-home-section__inner {
	width: 100%;
	max-width: 1280px;
	margin-right: auto;
	margin-left: auto;
}

.br-home .br-section-header {
	max-width: none;
}

.br-home-hero {
	padding: 0;
	background: var(--wp--preset--color--surface-subtle);
}

.br-home-hero__layout {
	display: flex;
	flex-direction: column;
}

.br-home-hero__content {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
	width: 100%;
	max-width: 1280px;
	margin-right: auto;
	margin-left: auto;
	padding: 32px var(--br-home-gutter);
}

.br-home-hero__title,
.br-home-hero__intro,
.br-home-universe__title,
.br-home-universe__text,
.br-home-about__body,
.br-home-careers__title,
.br-home-careers__intro,
.br-home .br-section-header__title,
.br-home .br-section-header__description {
	overflow-wrap: anywhere;
}

.br-home-hero__title {
	margin: 0;
	color: var(--wp--preset--color--text-primary);
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.3px;
	line-height: 36px;
}

.br-home-hero__intro {
	margin: 0;
	color: var(--wp--preset--color--text-secondary);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
}


/* The approved CTA frame is 112px tall: 8px lead-in, two 46px buttons, 12px apart. */
.br-home-hero__actions {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	align-items: flex-start;
	width: 100%;
	padding-top: 8px;
}

.br-home-hero__actions .br-button {
	width: 100%;
}

.br-home-hero__media {
	order: -1;
}

.br-home-hero .br-home-fixed {
	display: block;
	width: 100%;
	height: 240px;
	object-fit: cover;
}

.br-home-universes {
	background: var(--wp--preset--color--surface-base);
}

.br-home-universes__grid,
.br-home-universes__row {
	display: grid;
	gap: 20px;
}

.br-home-universes__grid {
	margin-top: var(--br-home-gap-universes);
}

/*
 * Figma strokes the card on the inside and measures the inset from the outer
 * edge, so the CSS border is taken out of the padding. That keeps the text
 * panel and the card outline exactly where the approved frames put them.
 */
.br-home-universe {
	--br-universe-inset: var(--br-home-gutter);

	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 280px;
	padding: calc(var(--br-universe-inset) - 1.5px);
	overflow: hidden;
	border: 1.5px solid var(--wp--preset--color--brand-primary);
	border-radius: var(--wp--custom--radius--xl);
}

/*
 * Owner decision, visual polish R1: all four universe cards use brand-primary.
 * The previous accent modifier stays harmless if an older class is still present.
 */
.br-home-universe--accent,
.br-home-universe:hover,
.br-home-universe--accent:hover {
	border-color: var(--wp--preset--color--brand-primary);
}

.br-home-universe .br-home-fixed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.br-home-universe::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(from var(--wp--preset--color--surface-overlay) r g b / 25%);
}

.br-home-universe__panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--wp--preset--spacing--md);
	border-radius: var(--wp--custom--radius--lg);
	background: rgb(from var(--wp--preset--color--surface-overlay) r g b / 62.745%);
	color: var(--wp--preset--color--text-inverse);
}

.br-home-universe__title {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	line-height: 23px;
}

.br-home-universe__text {
	margin: 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	opacity: 0.9;
}

.br-home-about {
	background: var(--wp--preset--color--surface-subtle);
}

/*
 * One markup, two reading orders. Below 768 the four parts are grid items in
 * the approved mobile order; from 768 up the wrapper becomes a real box again
 * and holds the right-hand column beside the photograph.
 */
.br-home-about__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"header"
		"media"
		"body"
		"action";
	gap: var(--wp--preset--spacing--lg);
}

.br-home-about__content {
	display: contents;
}

.br-home-about__header {
	grid-area: header;
	min-width: 0;
}

.br-home-about__media {
	grid-area: media;
	min-width: 0;
}

.br-home-about__body {
	grid-area: body;
	min-width: 0;
	color: var(--wp--preset--color--text-secondary);
	font-size: 14px;
	line-height: 22px;
}

.br-home-about__action {
	grid-area: action;
	min-width: 0;
}

.br-home-about .br-home-fixed {
	display: block;
	width: 100%;
	height: 240px;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--xl);
}

.br-home-about__body p {
	margin: 0 0 var(--wp--preset--spacing--md);
}

.br-home-about__body p:last-child {
	margin-bottom: 0;
}

.br-home-about__action .br-button {
	width: 100%;
}

.br-home-stores {
	background: var(--wp--preset--color--surface-base);
}

.br-home-stores__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	margin-top: var(--br-home-gap-rhythm);
}

.br-home .br-store-card--compact {
	max-width: none;
}

.br-home .br-store-card--compact .br-store-card__media {
	height: 200px;
	aspect-ratio: auto;
}

.br-home-offers {
	background: var(--wp--preset--color--surface-subtle);
}

.br-home-offers .br-offer-card {
	margin-top: var(--br-home-gap-rhythm);
}

.br-home .br-offer-card--teaser.br-offer-card--horizontal,
.br-home .br-offer-card--featured.br-offer-card--horizontal {
	width: 100%;
	max-width: none;
}

.br-home-more {
	margin: var(--br-home-gap-rhythm) 0 0;
	text-align: center;
}

.br-home-more__link {
	color: var(--wp--preset--color--brand-primary);
	font-size: var(--wp--custom--type--label-large--font-size);
	font-weight: 600;
	line-height: var(--wp--custom--type--label-large--line-height);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.br-home-more__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-primary);
	outline-offset: 2px;
}

.br-home-instagram {
	background: var(--wp--preset--color--surface-base);
}

/*
 * Two placements of one Follow control share this grid. Below 768 only the
 * placement after the posts is shown, so tab order matches the picture.
 * From 768 up only the placement beside the tabs is shown.
 */
.br-home-instagram__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"tabs"
		"content"
		"follow";
	gap: var(--br-home-gap-instagram);
	margin-top: var(--br-home-gap-instagram);
}

.br-home-instagram__tabs {
	grid-area: tabs;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs);
	max-width: 100%;
	min-width: 0;
}

.br-home-instagram__actions {
	grid-area: follow;
	max-width: 100%;
	min-width: 0;
}

.br-home-instagram__actions--desktop {
	display: none;
}

.br-home-instagram__content {
	grid-area: content;
	min-width: 0;
}

.br-home-instagram__follow {
	max-width: 100%;
	min-width: 0;
}

.br-home-instagram__follow .br-button {
	width: 100%;
}

.br-home .br-social-tab,
.br-home-instagram__follow .br-button {
	max-width: 100%;
	overflow-wrap: anywhere;
}

.br-home-instagram__panel[hidden],
.br-home-instagram__follow[hidden] {
	display: none;
}

.br-home-instagram__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.br-home-instagram__item {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
}

.br-home-instagram__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.br-home-instagram__item:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-primary);
	outline-offset: 2px;
}

.br-home-instagram__message {
	margin: 0;
	padding: 24px 16px;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface-muted);
	color: var(--wp--preset--color--text-secondary);
	text-align: center;
	min-height: 72px;
}

.br-home-instagram__skeleton {
	display: block;
	aspect-ratio: 1;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface-muted);
}

.br-home-instagram__skeleton-tab {
	width: 9.5rem;
	height: 2.5rem;
	aspect-ratio: auto;
	border-radius: var(--wp--custom--radius--full);
}

.br-home-instagram__skeleton-tab--wide {
	width: 12.5rem;
}

.br-home-instagram__skeleton-cta {
	width: 15rem;
	max-width: 100%;
	height: 2.875rem;
	aspect-ratio: auto;
}

@media (prefers-reduced-motion: no-preference) {

	.br-home-instagram__skeleton {
		animation: br-home-shimmer 1.4s ease-in-out infinite;
	}
}

@keyframes br-home-shimmer {

	50% {
		opacity: 0.55;
	}
}

.br-home-careers {
	background: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--text-inverse);
	text-align: center;
}

/*
 * Badge to headline, headline to body, and body to CTA are three different
 * steps. The flex gap carries the smallest one and the two wider steps are
 * topped up, so a missing badge or headline never leaves a stray margin.
 */
.br-home-careers__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
	width: 100%;
	max-width: 720px;
	margin-right: auto;
	margin-left: auto;
}

.br-home-careers__title {
	margin: 0;
	font-size: 24px;
	font-weight: 800;
	line-height: 30px;
}

.br-home-careers__intro {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 20px;
	opacity: 0.8;
}

.br-home-careers .br-home-careers__action.br-button {
	width: 100%;
	border-color: transparent;
	background: var(--wp--preset--color--brand-accent);
	color: var(--wp--preset--color--text-inverse);
}

.br-home-careers__title:not(:first-child),
.br-home-careers .br-home-careers__action.br-button:not(:first-child) {
	margin-top: 12px;
}

.br-home-careers .br-home-careers__action.br-button:hover,
.br-home-careers .br-home-careers__action.br-button:active {
	background: var(--wp--preset--color--brand-accent-strong);
	color: var(--wp--preset--color--text-inverse);
}

@media (min-width: 768px) {

	/*
	 * 60px of section padding plus a centred row reproduces the approved
	 * geometry: content at y=60, the shorter photograph centred at y=124.
	 */
	.br-home-hero {
		padding: 60px var(--br-home-gutter);
	}

	.br-home-hero__layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 32px;
		align-items: center;
		max-width: 1280px;
		margin-right: auto;
		margin-left: auto;
	}

	.br-home-hero__content {
		max-width: none;
		margin: 0;
		padding: 0;
	}

	.br-home-hero__actions {
		width: auto;
	}

	.br-home-hero__actions .br-button {
		width: min(230px, 100%);
	}

	.br-home-hero__media {
		order: 0;
	}

	.br-home-hero .br-home-fixed {
		height: 340px;
		border-radius: var(--wp--custom--radius--xl);
	}

	.br-home-hero__title {
		font-size: 32px;
		font-weight: 700;
		letter-spacing: -0.8px;
		line-height: 40px;
	}

	.br-home-universes__grid,
	.br-home-universes__row {
		gap: 24px;
	}

	.br-home-universes__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));

		/*
		 * The approved tablet row pairs a 139px card with a 154px one, so the
		 * cards must not be stretched to a shared row height here.
		 */
		align-items: start;
	}

	.br-home-universe {
		--br-universe-inset: 24px;

		min-height: 0;
	}

	.br-home-universe::after {
		background: rgb(from var(--wp--preset--color--surface-overlay) r g b / 35%);
	}

	/*
	 * Figma stores lineHeight=AUTO on this frame. 15px reproduces the
	 * approved 30px and 45px text boxes with this font and fixture.
	 * 390 and 320 keep the explicit 16px rule. 1024 replaces this with 18px.
	 */
	.br-home-universe__text {
		line-height: 15px;
	}

	.br-home-about__layout {
		grid-template-columns: 300px minmax(0, 1fr);
		grid-template-areas: "media content";
		gap: 40px;
		align-items: center;
	}

	.br-home-about__content {
		grid-area: content;
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--lg);
		min-width: 0;
	}

	.br-home-about__action {
		align-self: flex-start;
	}

	.br-home-about__action .br-button {
		width: auto;
	}

	.br-home-about .br-home-fixed {
		height: 380px;
	}

	.br-home-stores__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.br-home-instagram__layout {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"tabs follow"
			"content content";
		align-items: center;
		column-gap: var(--wp--preset--spacing--md);
	}

	.br-home-instagram__actions {
		justify-self: end;
	}

	.br-home-instagram__actions--desktop {
		display: block;
	}

	.br-home-instagram__actions--mobile {
		display: none;
	}

	.br-home-instagram__follow .br-button {
		width: auto;
	}

	.br-home-instagram__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
	}

	.br-home-careers__inner {
		gap: 16px;
	}

	.br-home-careers__title {
		font-size: 28px;
		line-height: 36px;
	}

	.br-home-careers__intro {
		font-size: 15px;

		/* 150% of 15px on the approved tablet frame. */
		line-height: 22.5px;
	}

	.br-home-careers .br-home-careers__action.br-button {
		width: auto;
	}

	.br-home-careers__title:not(:first-child) {
		margin-top: 0;
	}

	.br-home-careers .br-home-careers__action.br-button:not(:first-child) {
		margin-top: 8px;
	}
}

@media (min-width: 1024px) {

	.br-home-hero {
		padding: 51px var(--br-home-gutter);
	}

	.br-home-hero__layout {
		grid-template-columns: minmax(0, 1fr) 600px;
		gap: 64px;
	}

	.br-home-hero__content {
		gap: var(--wp--preset--spacing--lg);
	}

	.br-home-hero__actions {
		padding-top: 12px;
	}

	.br-home-hero .br-home-fixed {
		height: 460px;
	}

	.br-home-hero__title {
		font-size: 36px;
		letter-spacing: -1px;
		line-height: 44px;
	}

	.br-home-hero__intro {
		font-size: 16px;
		line-height: 24px;
	}

	.br-home-universes__grid,
	.br-home-universes__row {
		gap: 32px;
	}

	.br-home-universes__row {
		align-items: stretch;
	}

	.br-home-universe::after {
		background: rgb(from var(--wp--preset--color--surface-overlay) r g b / 30%);
	}

	.br-home-universes__row--wide-first {
		grid-template-columns: minmax(0, 1fr) 480px;
	}

	.br-home-universes__row--wide-last {
		grid-template-columns: 480px minmax(0, 1fr);
	}

	.br-home-universe {
		--br-universe-inset: 40px;

		min-height: 420px;
	}

	.br-home-universe__panel {
		gap: var(--wp--preset--spacing--xs);
		padding: var(--wp--preset--spacing--lg);
	}

	.br-home-universe__title {
		font-size: 24px;
		line-height: 30px;
	}

	.br-home-universe__text {
		font-size: 14px;
		line-height: 18px;
	}

	.br-home-about__layout {
		grid-template-columns: 520px minmax(0, 1fr);
		gap: 80px;
	}

	.br-home-about .br-home-fixed {
		width: 520px;
		height: 480px;
	}

	.br-home-about__body {
		font-size: 16px;
		line-height: 26px;
	}

	.br-home-stores__grid {
		gap: 32px;
	}

	.br-home-instagram__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 20px;
	}

	.br-home-careers__title {
		font-size: 36px;
		line-height: 44px;
	}

	.br-home-careers__intro {
		font-size: 16px;
		line-height: 26px;
	}

	.br-home-careers .br-home-careers__action.br-button:not(:first-child) {
		margin-top: 16px;
	}
}

@media (min-width: 1440px) {

	.br-home-hero {
		padding: 80px var(--br-home-gutter);
	}

	.br-home-hero__title {
		font-size: 48px;
		line-height: 56px;
	}

	.br-home-hero__intro {
		font-size: 18px;
		line-height: 28px;
	}

	.br-home-hero__actions {
		flex-direction: row;
		gap: var(--wp--preset--spacing--md);
	}

	.br-home-hero__actions .br-button {
		width: auto;
	}
}