/*
 * CARO Jewelry — Native Astra / Gutenberg Design System
 * Applies only to migrated content wrapped in .caro-page.
 */

.caro-page {
	--caro-reading: 800px;
	--caro-wide: 1200px;
	--caro-section-space: clamp(48px, 7vw, 96px);
	--caro-block-space: clamp(20px, 3vw, 34px);
	--caro-small-space: clamp(12px, 2vw, 18px);
	--caro-radius: 0;
	--caro-content-gutter: clamp(20px, 4vw, 42px);

	width: 100%;
	color: var(--caro-ink, #111);
}

.caro-page,
.caro-page * {
	box-sizing: border-box;
}

/* ---------------------------------------
   GLOBAL CONTENT GEOMETRY
--------------------------------------- */

.caro-page .caro-shell {
	width: min(
		calc(100% - (var(--caro-content-gutter) * 2)),
		var(--caro-wide)
	);
	margin-inline: auto;
}

.caro-page .caro-reading {
	width: min(
		calc(100% - (var(--caro-content-gutter) * 2)),
		var(--caro-reading)
	);
	margin-inline: auto;
}

.caro-page .caro-section {
	padding-block: var(--caro-section-space);
}

.caro-page .caro-section--compact {
	padding-block: clamp(32px, 5vw, 64px);
}

.caro-page .caro-section--flush {
	padding-block: 0;
}

/* ---------------------------------------
   VERTICAL RHYTHM
--------------------------------------- */

.caro-page .caro-flow > * {
	margin-top: 0;
	margin-bottom: 0;
}

.caro-page .caro-flow > * + * {
	margin-top: var(--caro-block-space);
}

.caro-page .caro-flow--tight > * + * {
	margin-top: var(--caro-small-space);
}

/* ---------------------------------------
   TYPOGRAPHY
--------------------------------------- */

.caro-page h1,
.caro-page h2,
.caro-page h3,
.caro-page h4,
.caro-page h5,
.caro-page h6 {
	margin-top: 0;
	color: inherit;
	line-height: 1.15;
	text-wrap: balance;
}

.caro-page h1 {
	font-size: clamp(2.25rem, 5vw, 4.4rem);
	letter-spacing: -0.025em;
}

.caro-page h2 {
	font-size: clamp(1.8rem, 3.5vw, 3rem);
	letter-spacing: -0.02em;
}

.caro-page h3 {
	font-size: clamp(1.35rem, 2.5vw, 2rem);
}

.caro-page p,
.caro-page li {
	line-height: 1.7;
}

.caro-page .caro-lead {
	font-size: clamp(1.08rem, 1.8vw, 1.3rem);
	line-height: 1.65;
}

/* ---------------------------------------
   LINKS
--------------------------------------- */

.caro-page a {
	text-underline-offset: 0.18em;
}

.caro-page .caro-text-link {
	color: inherit;
	text-decoration: underline;
}

/* ---------------------------------------
   IMAGES / MEDIA
--------------------------------------- */

.caro-page img {
	display: block;
	max-width: 100%;
	height: auto;
}

.caro-page figure {
	margin: 0;
}

.caro-page figcaption {
	margin-top: 10px;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--caro-muted, #6d6d6d);
}

/* ---------------------------------------
   STANDARD GRID
--------------------------------------- */

.caro-page .caro-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
}

.caro-page .caro-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
}

.caro-page .caro-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: stretch;
}

/* ---------------------------------------
   HERO
--------------------------------------- */

.caro-page .caro-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(420px, 62vh, 720px);
}

.caro-page .caro-hero__content {
	position: relative;
	z-index: 2;
	max-width: 720px;
}

.caro-page .caro-hero__eyebrow {
	margin-bottom: 14px;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ---------------------------------------
   EDITORIAL / IMAGE + COPY
--------------------------------------- */

.caro-page .caro-editorial {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(36px, 7vw, 96px);
	align-items: center;
}

.caro-page .caro-editorial--reverse .caro-editorial__media {
	order: 2;
}

.caro-page .caro-editorial__media img {
	width: 100%;
}

/* ---------------------------------------
   POLICY / LONG-FORM PAGES
--------------------------------------- */

.caro-page .caro-policy h2 {
	margin-top: clamp(40px, 6vw, 64px);
}

.caro-page .caro-policy h3 {
	margin-top: clamp(28px, 4vw, 40px);
}

.caro-page .caro-policy ul,
.caro-page .caro-policy ol {
	padding-left: 1.4em;
}

.caro-page .caro-policy li + li {
	margin-top: 0.55em;
}

/* ---------------------------------------
   CTA
--------------------------------------- */

.caro-page .caro-cta {
	padding: clamp(40px, 6vw, 72px);
	text-align: center;
	background: var(--caro-soft, #f7f7f7);
}

.caro-page .caro-cta > * {
	max-width: 760px;
	margin-inline: auto;
}

/* ---------------------------------------
   BUTTONS
--------------------------------------- */

.caro-page .wp-block-button__link,
.caro-page .caro-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 28px;
	border: 1px solid var(--caro-black, #050505);
	border-radius: 0;
	background: var(--caro-black, #050505);
	color: #fff;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition:
		background-color .2s ease,
		color .2s ease,
		border-color .2s ease;
}

.caro-page .wp-block-button__link:hover,
.caro-page .wp-block-button__link:focus-visible,
.caro-page .caro-button:hover,
.caro-page .caro-button:focus-visible {
	background: #fff;
	color: var(--caro-black, #050505);
}

/* ---------------------------------------
   FORMS
--------------------------------------- */

.caro-page input[type="text"],
.caro-page input[type="email"],
.caro-page input[type="tel"],
.caro-page input[type="url"],
.caro-page input[type="search"],
.caro-page input[type="number"],
.caro-page select,
.caro-page textarea {
	width: 100%;
	min-height: 48px;
	padding: 11px 14px;
	border: 1px solid var(--caro-border, #e6e6e6);
	border-radius: 0;
	background: #fff;
	color: var(--caro-ink, #111);
	font: inherit;
}

.caro-page textarea {
	min-height: 150px;
	resize: vertical;
}

.caro-page input:focus,
.caro-page select:focus,
.caro-page textarea:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ---------------------------------------
   WORDPRESS BLOCK NORMALIZATION
--------------------------------------- */

.caro-page .wp-block-image,
.caro-page .wp-block-gallery,
.caro-page .wp-block-columns,
.caro-page .wp-block-group {
	margin-top: 0;
	margin-bottom: 0;
}

.caro-page .wp-block-columns {
	gap: clamp(28px, 5vw, 72px);
}

.caro-page .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--caro-border, #e6e6e6);
}

/* ---------------------------------------
   RESPONSIVE
--------------------------------------- */

@media (max-width: 921px) {

	.caro-page .caro-grid,
	.caro-page .caro-editorial {
		grid-template-columns: 1fr;
	}

	.caro-page .caro-grid--3,
	.caro-page .caro-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.caro-page .caro-editorial--reverse .caro-editorial__media {
		order: initial;
	}

	.caro-page .caro-hero {
		min-height: auto;
		padding-block: clamp(56px, 10vw, 96px);
	}
}

@media (max-width: 600px) {

	.caro-page {
		--caro-content-gutter: 20px;
		--caro-section-space: 48px;
	}

	.caro-page .caro-grid--3,
	.caro-page .caro-grid--4 {
		grid-template-columns: 1fr;
	}

	.caro-page .caro-cta {
		padding: 36px 22px;
	}
}