/**
 * Editorial section helpers.
 *
 * Reusable CSS for the full-bleed editorial bands (PRO BAND, and future ones)
 * built by hand in Oxygen. These express the few things Tailwind utilities
 * cannot hold up against Oxygen's global resets.
 */

/**
 * Full-bleed cover media.
 *
 * Oxygen ships a global `img { height: auto }` reset that wins over Tailwind's
 * h-full, so an Oxygen Image placed inside an absolutely-positioned frame never
 * fills its height and the photo letterboxes. Put curel-cover on the frame (the
 * positioned parent); its image then covers the frame at a fixed size. The frame
 * keeps whatever position/inset the Tailwind utilities give it.
 */
.curel-cover > img,
.curel-cover img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center;
}

/**
 * Editorial display headings.
 *
 * Oxygen's unlayered h1/h2 rules pin font-size + line-height and beat Winden's
 * @layer utilities, so a hand-built Oxygen heading ignores its text-[clamp…] /
 * leading-[…] classes (it renders at Oxygen's default ~32px). Add one of these
 * real-CSS classes to the heading to restore the staging size.
 *
 *   cur-display-hero     big intro / page title   clamp(40px, 7vw, 96px)
 *   cur-display-section  a section / CTA title     clamp(28px, 4vw, 56px)
 */
.cur-display-hero {
	font-size: clamp( 40px, 7vw, 96px ) !important;
	line-height: 0.95 !important;
	letter-spacing: -0.035em !important;
	font-weight: 700 !important;
	/* Oxygen keeps the browser's default h1 margin (~0.67em → 64px at this size),
	   which the staging resets to 0; spacing comes from the eyebrow/paragraph. */
	margin: 0 !important;
}
.cur-display-section {
	font-size: clamp( 28px, 4vw, 56px ) !important;
	line-height: 1.1 !important;
	letter-spacing: -0.025em !important;
	font-weight: 700 !important;
	/* Reset only the top (the bottom is left to the heading's own mb-* utility). */
	margin-top: 0 !important;
}

/**
 * Editorial CTA links (the colophon / "Ver tudo" style). Oxygen text-links render
 * as plain block links, so add cur-link to a primary underlined link (it gets an
 * arrow) or cur-link-muted to a secondary one.
 */
.cur-link,
.cur-link-muted {
	display: inline-flex !important;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	font-size: 0.875rem;
	line-height: 1.2;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid var( --color-fg, #0a0a0a );
	color: var( --color-fg, #0a0a0a );
	text-decoration: none !important;
	transition: gap 0.2s var( --ease-smooth, cubic-bezier( 0.25, 1, 0.5, 1 ) ),
		color 0.2s ease, border-color 0.2s ease;
}
.cur-link::after {
	content: "";
	flex: none;
	width: 14px;
	height: 10px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M0 5h17M12 1l5 4-5 4'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M0 5h17M12 1l5 4-5 4'/%3E%3C/svg%3E") no-repeat center / contain;
}
.cur-link:hover {
	gap: 0.75rem;
}
.cur-link-muted {
	color: var( --color-muted, #767676 );
	border-bottom-color: var( --color-hair, #e5e5e5 );
}
.cur-link-muted:hover {
	color: var( --color-fg, #0a0a0a );
	border-bottom-color: var( --color-fg, #0a0a0a );
}

/**
 * Long-form body copy typed in an Oxygen Rich Text (Garantia, Envios, and any
 * future Termos / Privacidade). Put cur-prose on the Rich Text module so the
 * client can type paragraphs — and lists — with no inline classes: children get
 * the body type and the vertical rhythm the design wants. The original markup
 * spaced the <p>s with a flex `gap-4`, but inside one rich-text element that gap
 * is lost, so re-create the 16px rhythm between blocks here. Oxygen zeroes the
 * paragraph margins, hence the !important on the spacing.
 */
.cur-prose {
	font-size: 1rem;
	line-height: 1.75;
	color: color-mix( in oklab, var( --color-fg, #0a0a0a ) 85%, transparent );
}
.cur-prose > * {
	margin: 0 !important;
}
.cur-prose > * + * {
	margin-top: 1rem !important;
}