/* ==========================================================================
   CASA PAGE TEMPLATES
   Reusable editorial and customer-care layouts for Casa Artisans.
   ========================================================================== */

.casa-page {
	margin-bottom: 0;
}

.casa-page__container {
	max-width: 880px;
	margin-right: auto;
	margin-left: auto;
}

.casa-page__hero {
	width: 100vw;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
	padding: var(--space-16) var(--container-padding) var(--space-12);
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border-light);
	text-align: center;
}

.casa-page__hero--editorial {
	background: var(--color-cream);
}

.casa-page__eyebrow,
.casa-section-eyebrow {
	margin: 0 0 var(--space-4);
	color: var(--color-trust);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.15em;
	line-height: 1.4;
	text-transform: uppercase;
}

.casa-page__title {
	max-width: 760px;
	margin: 0 auto;
	font-size: var(--text-2xl);
	line-height: 1.1;
}

.casa-page__intro {
	max-width: 720px;
	margin: var(--space-5) auto 0;
	color: var(--color-text);
	font-size: var(--text-md);
	line-height: 1.65;
}

.casa-page__intro p:last-child,
.casa-page__content p:last-child {
	margin-bottom: 0;
}

.casa-page__content {
	padding: var(--space-12) 0 var(--space-16);
	font-size: var(--text-base);
	line-height: 1.7;
}

.casa-page--about-story .casa-page__content {
	padding-top: 0;
}

.casa-page--policy .casa-page__content:not(.casa-page__content--visual),
.casa-page--faq .casa-page__content:not(.casa-page__content--visual),
.casa-page--standard .casa-page__content:not(.casa-page__content--visual) {
	max-width: 820px;
}

.casa-page__content--visual {
	max-width: none;
	padding: 0;
}

.casa-page__content--visual h2,
.casa-page__content--visual h3 {
	margin-top: 0;
	margin-bottom: 0;
}

.casa-page__content h2,
.casa-page__content h3 {
	margin-top: var(--space-10);
	margin-bottom: var(--space-4);
}

.casa-page__content h2:first-child,
.casa-page__content h3:first-child {
	margin-top: 0;
}

.casa-page__content ul,
.casa-page__content ol {
	margin-left: 1.35em;
}

.casa-page__content li {
	margin-bottom: var(--space-2);
}

.casa-button-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
	margin-top: var(--space-6);
}

.casa-button-row--center {
	justify-content: center;
}

/* Story sections */

.casa-story-intro,
.casa-story-section {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
	align-items: center;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-16) 0;
}

.casa-story-intro__media,
.casa-story-section__media,
.casa-story-tile__media {
	background: var(--color-gray-light);
}

.casa-story-intro__image,
.casa-story-section__image,
.casa-story-tile__image,
.casa-story-media__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.casa-story-intro__media {
	min-height: 320px;
}

.casa-story-intro__title,
.casa-story-section__title,
.casa-story-media__title,
.casa-page-cta__title {
	margin-bottom: var(--space-5);
	font-family: var(--font-body);
	font-size: var(--text-xl);
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.25;
	text-transform: uppercase;
}

.casa-story-intro__text,
.casa-story-section__text,
.casa-story-media__intro,
.casa-page-cta__text {
	color: var(--color-text);
	font-size: var(--text-md);
	line-height: 1.65;
}

.casa-story-intro--no-image .casa-story-intro__content,
.casa-story-section--no-image .casa-story-section__content {
	width: 100%;
	max-width: 820px;
	margin-right: auto;
	margin-left: auto;
}

.casa-story-media {
	width: 100vw;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
	padding: var(--space-16) var(--container-padding);
	background: var(--color-cream);
}

.casa-story-media__header {
	max-width: 820px;
	margin: 0 auto var(--space-8);
	text-align: center;
}

.casa-story-media__frame,
.casa-story-media__figure {
	max-width: 1120px;
	margin: 0 auto;
}

.casa-story-media__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--color-text);
}

.casa-story-media__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.casa-story-media figcaption {
	margin-top: var(--space-3);
	color: var(--color-text-light);
	font-size: var(--text-sm);
	text-align: center;
}

.casa-story-tiles {
	padding: var(--space-12) 0;
}

.casa-story-tiles__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4);
	max-width: var(--container-max);
	margin: 0 auto;
}

.casa-story-tile {
	display: grid;
	gap: var(--space-3);
	color: var(--color-text);
	text-decoration: none;
}

.casa-story-tile__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.casa-story-tile__title {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.casa-story-tile:hover .casa-story-tile__image,
.casa-story-tile:focus .casa-story-tile__image {
	opacity: 0.88;
}

/* Values and CTA */

.casa-values-grid {
	width: 100vw;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
	padding: var(--space-12) var(--container-padding);
	background: var(--color-cream);
}

.casa-values-grid__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	max-width: var(--container-max);
	margin: 0 auto;
	text-align: center;
}

.casa-value__title {
	margin-bottom: var(--space-3);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-trust);
}

.casa-value__text {
	max-width: 280px;
	margin: 0 auto;
	color: var(--color-text-light);
	font-size: var(--text-sm);
	line-height: 1.65;
}

.casa-page-cta {
	margin: var(--space-12) auto 0;
	padding: var(--space-10) var(--space-6);
	background: var(--color-cream);
	text-align: center;
}

.casa-page-cta__text {
	max-width: 680px;
	margin: 0 auto;
}

/* Product anatomy */

.casa-product-anatomy {
	max-width: var(--container-max);
	margin: 0 auto;
}

.casa-product-anatomy__heading {
	margin-bottom: var(--space-8);
	text-align: center;
}

.casa-product-anatomy__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	align-items: start;
}

.casa-product-anatomy__media {
	position: relative;
	background: var(--color-gray-light);
}

.casa-product-anatomy__image {
	width: 100%;
	height: auto;
}

.casa-product-anatomy__hotspot {
	position: absolute;
	top: var(--y);
	left: var(--x);
	width: 44px !important;
	min-width: 44px !important;
	height: 44px !important;
	min-height: 44px !important;
	padding: 0 !important;
	border: 1px solid var(--color-bg) !important;
	background: var(--color-brand) !important;
	color: var(--color-bg) !important;
	box-shadow: 0 4px 12px rgba(43, 37, 32, 0.22) !important;
	transform: translate(-50%, -50%);
}

.casa-product-anatomy__hotspot span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: var(--text-xs);
	line-height: 1;
}

.casa-product-anatomy__hotspot:hover,
.casa-product-anatomy__hotspot:focus,
.casa-product-anatomy__hotspot.is-active {
	background: var(--color-text) !important;
	border-color: var(--color-bg) !important;
	color: var(--color-bg) !important;
	transform: translate(-50%, -50%) scale(1.04);
}

.casa-product-anatomy__panel {
	padding: var(--space-6);
	border: 1px solid var(--color-border-light);
	background: var(--color-bg);
	box-shadow: 0 10px 30px rgba(43, 37, 32, 0.08);
}

.casa-product-anatomy__panel h3,
.casa-product-anatomy__fallback strong {
	display: block;
	margin-bottom: var(--space-2);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--color-trust);
}

.casa-product-anatomy__fallback {
	margin: var(--space-8) 0 0;
	padding-left: 1.35em;
}

.casa-product-anatomy__fallback li {
	margin-bottom: var(--space-5);
}

/* FAQ and policy */

.casa-faq-group {
	margin-bottom: var(--space-10);
}

.casa-faq-group__title {
	margin-bottom: var(--space-5);
	font-family: var(--font-body);
	font-size: var(--text-lg);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.casa-faq {
	border-top: 1px solid var(--color-border-light);
}

.casa-faq:last-child {
	border-bottom: 1px solid var(--color-border-light);
}

.casa-faq__question {
	position: relative;
	padding: var(--space-5) var(--space-8) var(--space-5) 0;
	color: var(--color-text);
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}

.casa-faq__question::-webkit-details-marker {
	display: none;
}

.casa-faq__question::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	color: var(--color-trust);
	font-size: var(--text-lg);
	font-weight: 300;
}

.casa-faq[open] .casa-faq__question::after {
	content: "-";
}

.casa-faq__answer {
	max-width: 720px;
	padding-bottom: var(--space-5);
	color: var(--color-text-light);
}

.casa-policy:not(.casa-page__content--visual) h2 {
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border-light);
	font-family: var(--font-body);
	font-size: var(--text-lg);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

@media (min-width: 768px) {
	.casa-page__hero {
		padding-top: var(--space-20);
		padding-bottom: var(--space-16);
	}

	.casa-page__title {
		font-size: 48px;
	}

	.casa-story-intro--has-image,
	.casa-story-section--has-image {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.casa-story-intro--image-right .casa-story-intro__media,
	.casa-story-section--image-right .casa-story-section__media {
		order: 2;
	}

	.casa-story-tiles__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-5);
	}

	.casa-story-tiles--count-2 .casa-story-tiles__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.casa-story-tiles--count-3 .casa-story-tiles__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.casa-values-grid__inner {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.casa-values-grid--count-2 .casa-values-grid__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.casa-values-grid--count-3 .casa-values-grid__inner {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.casa-product-anatomy__layout {
		grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
		gap: var(--space-8);
	}

	.casa-product-anatomy__panel {
		position: sticky;
		top: var(--space-8);
	}
}

@media (max-width: 767px) {
	.casa-page__hero {
		padding-top: var(--space-12);
		padding-bottom: var(--space-10);
	}

	.casa-page__title,
	.casa-story-intro__title,
	.casa-story-section__title,
	.casa-story-media__title,
	.casa-page-cta__title {
		font-size: var(--text-xl);
	}

	.casa-story-intro,
	.casa-story-section {
		padding: var(--space-10) 0;
	}

	.casa-button-row,
	.casa-button-row .button {
		width: 100%;
	}

	.casa-product-anatomy__hotspot {
		width: 40px !important;
		min-width: 40px !important;
		height: 40px !important;
		min-height: 40px !important;
	}
}