/* ============================================================
   SECTIONS.CSS
   Shared redesign components used across pages as they're
   converted to the new theme: hero, buttons, tideline divider,
   colour sections, pebble cards, split layout.
   Depends on: core.css (colour variables, .full-bleed utility)
   ============================================================ */

/* EYEBROW LABEL */
.eyebrow
{
	font-family: 'KarlaUI', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 1rem;
	color: var(--gold-deep);
	font-weight: 700;
}

/* On dark backgrounds, gold-deep (meant for light backgrounds) fails
   contrast — near-invisible dark gold on dark driftwood. gold-light
   passes WCAG AA (7.7:1 on driftwood) and is already used elsewhere
   on dark backgrounds in the approved palette. */
.section-dark .eyebrow,
.hero-framed .eyebrow
{
	color: var(--gold-light);
}
/* END EYEBROW LABEL */


/* BUTTONS */
.btn-pebble
{
	display: inline-block;
	font-family: 'KarlaUI', sans-serif;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 0.85rem 1.9rem;
	border-radius: 999px;
	text-decoration: none;
	font-size: 0.95rem;
	transition: transform 0.15s ease, background 0.2s ease;
}

.btn-pebble-gold
{
	background: var(--gold);
	color: var(--driftwood);
}

	.btn-pebble-gold:hover
	{
		background: var(--gold-light);
		transform: translateY(-2px);
	}

.btn-pebble-outline
{
	border: 1px solid var(--pebble);
	color: var(--pebble);
}

	.btn-pebble-outline:hover
	{
		border-color: var(--gold-light);
		color: var(--gold-light);
	}
/* END BUTTONS */


/* HERO */
.hero
{
	position: relative;
	min-height: 60vh;
	max-height: 562px;
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center;
	color: var(--pebble);
}

	.hero::after
	{
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(42,37,33,0.35) 0%, rgba(42,37,33,0.2) 22%, rgba(42,37,33,0.55) 60%, rgba(42,37,33,0.92) 100%);
	}

.hero-content
{
	position: relative;
	z-index: 2;
	padding: 4rem 1.5rem 3.5rem;
	max-width: 640px;
	margin: 0 auto;
}

	.hero-content h1
	{
		font-family: 'Macondo';
		font-weight: normal;
		line-height: 1.15;
		font-size: clamp(2.75rem, 6vw, 4.5rem);
		margin: 0 0 0.3em;
		color: var(--pebble);
	}

	.hero-content p
	{
		font-size: 1.15rem;
		max-width: 480px;
		color: var(--sand);
		margin-bottom: 1.75rem;
	}
/* END HERO */


/* HERO-FRAMED (inner pages: contained image split rather than
   full-bleed hero, used when the page photo isn't large enough
   to stretch full-bleed without blur) */
.hero-framed
{
	padding: 6rem 0 4rem;
	background: var(--driftwood);
}

	.hero-framed .split
	{
		align-items: center;
	}

	.hero-framed .split-image img
	{
		max-width: 420px;
		width: 100%;
		margin: 0 auto;
	}
/* END HERO-FRAMED */


/* TIDELINE DIVIDER (signature element) */
.tideline
{
	display: block;
	width: 100%;
	height: 28px;
	margin: 0 auto;
}

	.tideline path
	{
		stroke: var(--gold);
		stroke-width: 1.5;
		fill: none;
		opacity: 0.65;
	}

.section-dark .tideline path
{
	stroke: var(--seaglass);
}
/* END TIDELINE DIVIDER */


/* SECTIONS */
.section
{
	padding: 4.5rem 0;
}

.section-inner
{
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.section-sand
{
	background: var(--sand);
	color: var(--ink);
}

	.section-sand .eyebrow
	{
		color: var(--seaglass-deep);
	}

.section-pebble
{
	background: var(--pebble);
	color: var(--ink);
}

.section-dark
{
	background: var(--driftwood);
	color: var(--pebble);
}

.section-intro
{
	text-align: center;
	max-width: 760px;
	margin: 0 auto 3rem;
}

	.section-intro h2
	{
		font-family: 'Macondo';
		font-weight: normal;
		line-height: 1.15;
		font-size: clamp(2rem, 4vw, 2.75rem);
		margin: 0 0 0.5em;
	}
/* END SECTIONS */


/* PEBBLE CARDS */
.card-grid
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1.5rem;
}

.pebble-card
{
	background: var(--pebble);
	color: var(--ink);
	border-radius: var(--radius-pebble);
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(0,0,0,0.25);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

	.pebble-card:hover
	{
		transform: translateY(-6px);
		box-shadow: 0 18px 34px rgba(0,0,0,0.32);
	}

	.pebble-card img
	{
		width: 100%;
		height: 190px;
		object-fit: cover;
	}

	.pebble-card .pebble-body
	{
		padding: 1.25rem 1.4rem 1.5rem;
	}

		.pebble-card .pebble-body p
		{
			margin: 0 0 0.75rem;
			font-size: 0.98rem;
		}

	.pebble-card .pebble-link
	{
		font-size: 0.85rem;
		font-weight: 700;
		letter-spacing: 0.03em;
		color: var(--gold-deep);
		text-decoration: none;
	}

	/* Service cards: dark variant */
	.pebble-card.on-dark
	{
		background: var(--driftwood-light);
		color: var(--pebble);
		text-align: left;
	}

		.pebble-card.on-dark h3
		{
			font-family: 'KarlaUI', sans-serif;
			font-weight: 700;
			font-size: 1.2rem;
			color: var(--gold-light);
			margin: 0 0 0.5em;
		}

		.pebble-card.on-dark .pebble-body
		{
			padding: 1.6rem 1.5rem;
		}

		.pebble-card.on-dark .pebble-link
		{
			color: var(--gold-light);
		}
/* END PEBBLE CARDS */


/* SPLIT / STORY SECTION */
.split
{
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 3rem;
	align-items: center;
}

	.split img
	{
		border-radius: var(--radius-pebble);
		box-shadow: 0 16px 34px rgba(0,0,0,0.35);
		width: 100%;
	}

	.split h2
	{
		font-family: 'Macondo';
		font-weight: normal;
		line-height: 1.15;
	}

	.split h3
	{
		font-family: 'KarlaUI', sans-serif;
		font-weight: 700;
		color: var(--gold-light);
		font-size: 1.15rem;
		margin-top: 1.5rem;
	}

		.split h3:first-of-type
		{
			margin-top: 0;
		}
/* END SPLIT / STORY SECTION */