/* Carlo Tours — Shared primitives.
   Global resets WordPress does not ship, plus utilities reused across sections.
   Every value references a theme.json token. */

/* --- 1. Box-sizing. WordPress does not reset to border-box. Scoped to our prefix. --- */
[class*="carlo-"],
[class*="carlo-"]::before,
[class*="carlo-"]::after,
[class*="carlo-"] * {
	box-sizing: border-box;
}

/* --- 2. Keyboard-only focus ring. Core ships none. --- */
:focus:not(:focus-visible) {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* --- 3. Remove blockGap stripes between full-bleed sections. --- */
.wp-site-blocks > * {
	margin-block-start: 0;
}

.entry-content > [class*="carlo-"] {
	margin-block-start: 0;
}

/* --- 4. Eyebrow label --- */
.carlo-eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: var(--wp--custom--tracking-wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* --- 5. Primary (WhatsApp) call to action.
       Works both as a bare <a class="carlo-cta"> and on a core/button
       carrying the carlo-cta class. core/button puts className on the
       OUTER div.wp-block-button, so the bare selector has to exclude it --
       otherwise the pill is painted twice, once on the wrapper and once
       on the real link inside it. --- */
.carlo-cta:not(.wp-block-button),
.wp-block-button.carlo-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	padding: 1rem 1.75rem;
	border: var(--wp--custom--rule) solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color 0.3s var(--wp--custom--ease),
		border-color 0.3s var(--wp--custom--ease),
		color 0.3s var(--wp--custom--ease);
}

.carlo-cta:not(.wp-block-button):hover,
.carlo-cta:not(.wp-block-button):focus,
.wp-block-button.carlo-cta .wp-block-button__link:hover,
.wp-block-button.carlo-cta .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.carlo-cta svg,
.wp-block-button.carlo-cta .wp-block-button__link svg {
	width: 1.15em;
	height: 1.15em;
	flex: none;
	fill: currentColor;
}

/* --- 6. Quiet text link with a trailing rule (editorial secondary action) --- */
.carlo-link {
	display: inline-block;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	border-bottom: var(--wp--custom--rule) solid var(--wp--preset--color--contrast);
	padding-bottom: 0.25rem;
	transition:
		color 0.3s var(--wp--custom--ease),
		border-color 0.3s var(--wp--custom--ease);
}

.carlo-link:hover {
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

/* --- 7. Thin divider --- */
.carlo-rule {
	border: 0;
	border-top: var(--wp--custom--rule) solid var(--wp--preset--color--line);
	margin: 0;
	opacity: 1;
}

/* --- 8. Section shell.
       Every page section below the hero is a full-bleed block that paints its
       own background (required: these ride the serialize_blocks() fast lane,
       so there is no core/group wrapper to carry the wash). --- */
.carlo-section {
	padding-block: var(--wp--custom--section-y);
	background-color: var(--wp--preset--color--base);
}

.carlo-section--tint {
	background-color: var(--wp--preset--color--surface);
}

.carlo-section--dark {
	background-color: var(--wp--preset--color--contrast);
}

/* --- 9. Content container.
       Mirrors the theme's own content/wide sizes so sections line up with
       the header bar and with each other. --- */
.carlo-wrap {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-inline: var(--wp--custom--gutter);
}

.carlo-wrap--wide {
	max-width: var(--wp--style--global--wide-size);
}

/* --- 10. Section head: eyebrow, title, intro. --- */
.carlo-head__title {
	margin: var(--wp--preset--spacing--30) 0 0;
	max-width: 20ch;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 500;
	line-height: var(--wp--custom--line-snug);
	letter-spacing: var(--wp--custom--tracking-tight);
	color: var(--wp--preset--color--contrast);
	text-wrap: balance;
}

.carlo-head__intro {
	margin: var(--wp--preset--spacing--30) 0 0;
	max-width: 52ch;
	font-size: var(--wp--preset--font-size--md);
	line-height: var(--wp--custom--line-body);
	color: var(--wp--preset--color--muted);
}

.carlo-head__note {
	margin: var(--wp--preset--spacing--20) 0 0;
	max-width: 52ch;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

/* Two-column head: title holds the left column, intro the right. */
@media (min-width: 900px) {
	.carlo-head--split {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: clamp(2.5rem, 6vw, 6rem);
		align-items: end;
	}

	.carlo-head--split .carlo-head__eyebrow,
	.carlo-head--split .carlo-head__title {
		grid-column: 1;
	}

	.carlo-head--split .carlo-head__intro,
	.carlo-head--split .carlo-head__note {
		grid-column: 2;
		grid-row: span 1;
		margin-top: 0;
	}

	.carlo-head--split .carlo-head__intro {
		grid-row: 2;
	}

	.carlo-head--split .carlo-head__note {
		grid-row: 3;
		margin-top: var(--wp--preset--spacing--20);
	}
}

/* --- 11. Small uppercase meta label (durations, counts, captions). --- */
.carlo-meta {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: var(--wp--custom--tracking-wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* --- 12. Horizontal rail shared by the tour and review carousels.
       Native scroll-snap: swipe and trackpad work with no JS at all.
       The arrow buttons are progressive enhancement -- they ship with the
       hidden attribute and carlo-rails.js removes it. --- */
.carlo-rail {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Let the rail bleed to the right edge while its first card stays on
	   the content column. */
	padding-inline: max(
		var(--wp--custom--gutter),
		calc((100% - var(--wp--style--global--content-size)) / 2)
	);
	padding-block: 2px;
	scrollbar-width: none;
}

.carlo-rail::-webkit-scrollbar {
	display: none;
}

.carlo-rail > * {
	scroll-snap-align: start;
	flex: 0 0 auto;
}

.carlo-rail-nav {
	display: flex;
	gap: var(--wp--preset--spacing--10);
}

.carlo-rail-nav[hidden] {
	display: none;
}

.carlo-rail-nav button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: var(--wp--custom--rule) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition:
		border-color 0.3s var(--wp--custom--ease),
		color 0.3s var(--wp--custom--ease),
		opacity 0.3s var(--wp--custom--ease);
}

.carlo-rail-nav button:hover:not(:disabled) {
	border-color: var(--wp--preset--color--contrast);
}

.carlo-rail-nav button:disabled {
	opacity: 0.3;
	cursor: default;
}

.carlo-rail-nav svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
}

/* --- 13. Reduced motion: drop the smooth scroll and the panel animation. --- */
@media (prefers-reduced-motion: reduce) {
	.carlo-rail {
		scroll-behavior: auto;
	}

	[class*="carlo-"],
	[class*="carlo-"] * {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}