/**
 * Massage “Zen” layout (prototype) — self-contained, scoped to .laublife-massage-zen
 * ---------------------------------------------------------------------------
 * Remove by deleting this file and removing the enqueue in functions.php
 * (search: laublife-massage-zen-prototype).
 */

/* --- tokens (from sample) --- */
.site .site-content .laublife-massage-zen p {
	max-width: 42rem !important;
	font-family: "Cormorant", Georgia, "Times New Roman", serif;
	margin: 0 auto;
	font-size: 1.25rem;
	line-height: 1.6;
	color: var(--massage-text-colour);
}
.slug-massage {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Newsreader", "Cormorant", Georgia, "Times New Roman", serif;
  }
  h6 {
    margin: 0.5rem 0 0;
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--massage-small-header-colour);
  }
}
.slug-massage {

	.page-content {
		padding-top: 0;
	}
	/* Tile size: source art is 512×512; ~500px tiles = obvious repeat + soft seams (intentional “design” look). */
	.laublife-massage-zen {
		--mz-on-surface: #1a1c1a;
		--mz-on-primary: #ffffff;
		--mz-surface-container: #edeeea;
		--mz-decor-10: color-mix(in srgb, var(--massage-heading-colour) 10%, transparent);
		color: var(--mz-on-surface);
		
		/* full-bleed within main so the texture reads “page” wide */
		width: 100%;
		max-width: 100%;
		position: relative;
		overflow-x: clip;
		box-sizing: border-box;
	}
	
	.laublife-massage-zen,
	.laublife-massage-zen * {
		box-sizing: border-box;
	}

	/* Fluid images (large src dimensions / WP img attributes won’t overflow the layout). */
	.laublife-massage-zen img,
	.laublife-massage-zen-below img {
		max-width: 100%;
		height: auto;
	}
	
	/* --- header --- */
	.laublife-massage-zen__header {
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 3rem 1.5rem;
		border-bottom: 1px solid var(--mz-decor-10);
	}
	
	@media (min-width: 48rem) {
		.laublife-massage-zen__header {
			padding: 3rem 4rem;
		}
	}
	
	.laublife-massage-zen__header-inner {
		text-align: center;
	}
	
	.laublife-massage-zen__title {
		margin: 0;
		font-size: clamp(2rem, 3.5vw, 3rem);
		font-weight: 400;
		font-style: italic;
		line-height: 1.1;
		letter-spacing: -0.02em;
		color: var(--massage-heading-colour);
	}
	
	
	/* --- main --- */
	.laublife-massage-zen__main {
		width: 100%;
		max-width: 1100px;
		margin: 0 auto;
		padding: 0 1.5rem;
	}
	
	@media (min-width: 48rem) {
		.laublife-massage-zen__main {
			padding: 0 2rem 4rem;
		}
	}
	
	@media (min-width: 64rem) {
		.laublife-massage-zen__main {
			padding: 0 4rem 4rem;
		}
	}
	
	/* --- section --- */
	.laublife-massage-zen__section {
		padding: 7.5rem 0; /* 120px from sample “section-padding” */
		display: flex;
		flex-direction: column;
		gap: 2rem;
	}
	
	.laublife-massage-zen__section + .laublife-massage-zen__section {
		border-top: 1px solid var(--mz-decor-10);
	}
	
	.laublife-massage-zen__img {
		vertical-align: middle;
	}
	
	.laublife-massage-zen__figure-wrap {
		width: 100%;
		overflow: hidden;
		margin: 0;
	}
	
	.laublife-massage-zen__figure-wrap img {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
		filter: grayscale(0.2) sepia(0.1);
		transition: filter 0.5s ease;
	}
	
	.laublife-massage-zen__figure-wrap a:hover img,
	.laublife-massage-zen__figure-wrap img:hover {
		filter: grayscale(0) sepia(0);
	}
	
	.laublife-massage-zen__blurb {
		width: 100%;
		max-width: 42rem;
		margin: 0 auto;
		margin-top: 0.5rem;
		text-align: center;
	}
	
	.laublife-massage-zen__section-title {
		margin: 0 0 1rem;
		font-size: clamp(1.5rem, 2.4vw, 2rem);
		font-weight: 500;
		font-style: italic;
		line-height: 1.2;
		color: var(--massage-heading-colour);
	}
	.laublife-massage-zen__actions {
		margin-top: 2rem;
	}
	
	/* --- buttons + links (ui-label) --- */
	.laublife-massage-zen__btn {
		appearance: none;
		font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
		font-size: 0.75rem;
		border-radius: 999px;
		font-weight: 600;
		line-height: 1;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		text-decoration: none;
		padding: 0.75rem 2rem;
		border: 0;
		cursor: pointer;
		color: var(--mz-on-primary);
		background: var(--massage-heading-colour);
		/* bevel-outset from sample */
		border-top: 1px solid rgba(255, 255, 255, 0.4);
		border-left: 1px solid rgba(255, 255, 255, 0.4);
		border-bottom: 1px solid rgba(19, 66, 61, 0.2);
		border-right: 1px solid rgba(19, 66, 61, 0.2);
		transition: transform 0.12s ease;
	}
	
	.laublife-massage-zen__btn:active {
		transform: scale(0.97);
	}
	
	.laublife-massage-zen__text-link {
		font-family: "Newsreader", "Times New Roman", Times, Georgia, serif;
		font-size: 1.125rem;
		line-height: 1.6;
		color: var(--massage-heading-colour);
		text-decoration: underline;
		text-underline-offset: 8px;
		text-decoration-color: color-mix(in srgb, var(--massage-heading-colour) 30%, transparent);
		transition: text-decoration-color 0.2s ease;
	}
	
	.laublife-massage-zen__text-link:hover {
		text-decoration-color: var(--massage-heading-colour);
	}
	
	.laublife-massage-zen a.laublife-massage-zen__text-link {
		color: var(--massage-heading-colour);
	}
	
}