/* Contact page. Mobile-first: single column throughout, widening into two-column
   About and Contact grids on larger screens. Loaded only for the Contact template. */

.sl-contactpage {
	padding-top: var(--sl-gap-lg);
	padding-bottom: 3rem;
}
.sl-contactpage > * + * { margin-top: 2.5rem; }

.sl-eyebrow {
	margin: 0 0 1rem;
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--sl-text);
}

/* ---------- About ---------- */

.sl-about {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sl-gap-lg);
	align-items: stretch;
}

.sl-about__card { display: flex; flex-direction: column; }
.sl-about__h { margin-bottom: 0.875rem; }
.sl-about__body { margin-bottom: 1.5rem; }

.sl-about__features {
	list-style: none;
	margin: auto 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
.sl-about__feature {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: 0.75rem;
	row-gap: 0.15rem;
	align-items: center;
}
.sl-about__feature-icon {
	grid-row: 1 / 3;
	align-self: start;
	display: inline-flex;
	color: var(--sl-red);
}
.sl-about__feature-icon .sl-ico { width: 28px; height: 28px; }
.sl-about__feature-title { font-weight: 700; align-self: end; }
.sl-about__feature-text {
	font-size: 0.875rem;
	color: var(--sl-text-muted);
	align-self: start;
}

.sl-about__figure {
	margin: 0;
	border-radius: var(--sl-radius-lg);
	overflow: hidden;
	background: var(--sl-surface-2);
	min-height: 260px;
}
.sl-about__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 860px) {
	.sl-about { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.sl-about__features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* Three narrow tiles read better stacked (icon over title over text). */
	.sl-about__feature {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		/* Centred to match the report's summary and feature tiles. */
		justify-items: center;
		text-align: center;
		/* Tiles are stretched to equal height by the parent grid; pack their rows to
		   the top so the icon→title gap is identical and the titles share a baseline. */
		align-content: start;
	}
	.sl-about__feature-icon { grid-row: auto; margin-bottom: 0.4rem; }
	.sl-about__feature-title { align-self: auto; }
}

/* ---------- Contact ---------- */

.sl-contact {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sl-gap-lg);
	align-items: start;
}

.sl-contact__lead {
	margin: 0 0 1.25rem;
	color: var(--sl-text-muted);
	line-height: 1.6;
}

.sl-contact__details { list-style: none; margin: 0; padding: 0; }
.sl-contact__detail {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
}
.sl-contact__detail + .sl-contact__detail { margin-top: 1.125rem; }
.sl-contact__detail-icon {
	flex: none;
	display: inline-flex;
	color: var(--sl-red);
}
.sl-contact__detail-icon .sl-ico { width: 26px; height: 26px; }
.sl-contact__detail-body { display: flex; flex-direction: column; gap: 0.15rem; }
.sl-contact__detail-label { font-weight: 700; font-size: 0.9375rem; }
.sl-contact__detail-value { color: var(--sl-text-muted); }
a.sl-contact__detail-value { color: var(--sl-red); text-decoration: none; }
a.sl-contact__detail-value:hover { text-decoration: underline; }

.sl-contact__side { display: flex; flex-direction: column; gap: var(--sl-gap-lg); }

/* Social buttons */
.sl-socials { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.sl-social {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 12px;
	color: #fff;
	text-decoration: none;
	transition: transform 0.15s ease, filter 0.15s ease;
}
.sl-social:hover { transform: translateY(-2px); filter: brightness(1.07); }
.sl-social:focus-visible { outline: 2px solid var(--sl-red); outline-offset: 2px; }
.sl-social--fb { background: #1877f2; }
.sl-social--yt { background: #ff0000; }
.sl-social--mail { background: var(--sl-surface-2); color: var(--sl-text); border: 1px solid var(--sl-border); }
.sl-social--mail:hover { color: var(--sl-red); }

/* Story CTA card */
.sl-story__h { display: flex; align-items: center; gap: 0.5rem; }
.sl-story__icon { display: inline-flex; color: var(--sl-red); }

@media (min-width: 860px) {
	.sl-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- Message form ---------- */

.sl-formcard {
	margin-top: var(--sl-gap-lg);
	scroll-margin-top: calc(var(--sl-header-h) + 1rem);
}
.sl-formcard > h2 { margin-bottom: 1rem; }

.sl-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sl-form__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sl-gap);
}
.sl-form > * + * { margin-top: var(--sl-gap); }

.sl-field { display: flex; flex-direction: column; gap: 0.375rem; }
.sl-field label { font-size: 0.875rem; font-weight: 600; color: var(--sl-text); }
.sl-field input,
.sl-field textarea {
	width: 100%;
	padding: 0.625rem 0.75rem;
	background: var(--sl-surface-2);
	border: 1px solid var(--sl-border);
	border-radius: 8px;
	color: var(--sl-text);
	font: inherit;
	line-height: 1.5;
}
.sl-field textarea { resize: vertical; min-height: 8rem; }
.sl-field input::placeholder,
.sl-field textarea::placeholder { color: var(--sl-text-faint); }
.sl-field input:focus,
.sl-field textarea:focus {
	outline: none;
	border-color: var(--sl-red);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sl-red) 22%, transparent);
}

.sl-notice {
	margin: 0 0 1.25rem;
	padding: 0.75rem 1rem;
	border-radius: 10px;
	border: 1px solid transparent;
	font-size: 0.9375rem;
}
.sl-notice--ok {
	color: var(--sl-positive);
	background: color-mix(in srgb, var(--sl-positive) 12%, transparent);
	border-color: color-mix(in srgb, var(--sl-positive) 35%, transparent);
}
.sl-notice--err {
	color: var(--sl-negative);
	background: color-mix(in srgb, var(--sl-negative) 12%, transparent);
	border-color: color-mix(in srgb, var(--sl-negative) 35%, transparent);
}

@media (min-width: 620px) {
	.sl-form__row { grid-template-columns: 1fr 1fr; }
}