/* Contactpagina — opbouw volgt verkoop-template.css, aangevuld met het
   contactformulier in de linkerkolom. */

.page-template-template-contact-tentrend .site,
.page-template-template-contact-tentrend #content,
.page-template-template-contact-tentrend .site-main {
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.tt-contact-page {
	--tt-content-max: 1120px;
	--tt-content-gutter: 28px;
	background: var(--tt-bg);
	color: var(--tt-text);
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-bottom: 1px;
}

.tt-contact-page .tt-container {
	width: min(var(--tt-content-max), calc(100% - (var(--tt-content-gutter) * 2)));
	margin: 0 auto;
}

/* ---------------------------------------------------------------- Hero */

.tt-contact-hero {
	padding: 138px 0 18px;
	background: var(--tt-bg);
}

.tt-contact-hero__frame {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	background: rgba(36, 25, 12, 0.08);
	box-shadow: 0 18px 40px rgba(44, 28, 14, 0.08);
	aspect-ratio: 16 / 5;
}

.tt-contact-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------- Intro */

/* Zonder headerafbeelding is dit de eerste sectie; dan moet de padding de
   vaste header vrijhouden. Staat de hero er wel, dan doet die dat al. */
.tt-contact-intro {
	padding: 138px 0 0;
}

.tt-contact-hero + .tt-contact-intro {
	padding-top: 34px;
}

/* align-items: stretch (en niet start, zoals op verkoop) zodat beide kolommen
   even hoog zijn: de galerij rekt mee met de tekstlengte links. */
.tt-contact-intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(360px, 0.96fr);
	gap: clamp(36px, 5vw, 72px);
	align-items: stretch;
}

.tt-contact-intro__copy {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding-top: 0.125rem;
}

.tt-contact-intro__label {
	margin: 0 0 0.875rem;
	font-family: "TT Chocolates", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--tt-gold, #997a38);
}

.tt-contact-intro__title {
	margin: 0;
	font-family: var(--tt-font-heading);
	font-size: clamp(3rem, 5vw, 4.25rem);
	font-weight: 400;
	line-height: 0.94;
	letter-spacing: -0.06em;
	color: var(--tt-title, #3c1c09);
}

.tt-contact-intro__text {
	margin: 1.125rem 0 0;
	max-width: 82ch;
	font-family: "TT Chocolates", sans-serif;
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tt-title, #3c1c09);
}

.tt-contact-intro__secondary {
	margin-top: auto;
	padding-top: clamp(2rem, 4vw, 3.75rem);
}

/* Anders dan op verkoop géén white-space: nowrap — de tweede titel hier is
   langer en moet gewoon over twee regels kunnen lopen. */
.tt-contact-intro__title--secondary {
	max-width: 16ch;
	font-size: clamp(3.15rem, 5.5vw, 4.95rem);
	line-height: 0.94;
}

.tt-contact-intro__italic {
	margin: 0;
	font-family: var(--tt-font-heading);
	font-size: clamp(3rem, 5.2vw, 4.7rem);
	font-style: italic;
	font-weight: 500;
	line-height: 0.9;
	letter-spacing: -0.06em;
	color: var(--tt-title, #3c1c09);
}

/* ----------------------------------------------------------- Formulier */

.tt-contact-form-wrap {
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.tt-contact-form__title {
	margin: 0 0 0.875rem;
	font-family: "TT Chocolates", sans-serif;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--tt-title, #3c1c09);
}

/* Zelfde vormtaal als het offerteformulier (style.css, .tt-offerte-*): geen
   eigen kader of vlak eromheen, wel dezelfde zandkleurige velden met rechte
   hoeken en dezelfde labels. */
.tt-contact-form {
	display: grid;
	gap: 14px;
}

.tt-contact-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.tt-contact-form__field {
	display: grid;
	align-content: start;
	gap: 6px;
	min-width: 0;
}

.tt-contact-form__label {
	display: block;
	font-family: "TT Chocolates", sans-serif;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.15;
	text-transform: uppercase;
	color: #6d5b4b;
}

.tt-contact-form__required {
	display: inline-block;
	margin-left: 2px;
	color: #8f6a34;
	font-size: 0.9em;
}

.tt-contact-form input[type="text"],
.tt-contact-form input[type="email"],
.tt-contact-form textarea {
	width: 100%;
	height: 46px;
	min-height: 0;
	padding: 0 12px;
	border: 1px solid rgba(133, 111, 87, 0.28);
	border-radius: 0;
	background: rgba(241, 230, 211, 0.9);
	color: #2f2115;
	font-family: "TT Chocolates", sans-serif;
	font-size: 0.85rem;
	line-height: 1.2;
	box-sizing: border-box;
	box-shadow: none;
	transition: border-color 160ms ease, background-color 160ms ease;
}

.tt-contact-form input::placeholder,
.tt-contact-form textarea::placeholder {
	color: rgba(102, 84, 65, 0.42);
}

.tt-contact-form textarea {
	height: auto;
	min-height: 150px;
	padding-top: 12px;
	padding-bottom: 12px;
	resize: vertical;
}

.tt-contact-form input:focus,
.tt-contact-form textarea:focus {
	outline: none;
	border-color: #8f6a34;
	box-shadow: none;
}

.tt-contact-form .has-error {
	border-color: #b3261e;
	background: rgba(179, 38, 30, 0.05);
}

/* Honeypot: onbereikbaar voor bezoekers, wel invulbaar voor bots. */
.tt-contact-form__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.tt-contact-form__feedback {
	margin: 0;
	font-family: "TT Chocolates", sans-serif;
	font-size: 0.8rem;
	line-height: 1.35;
	letter-spacing: 0.04em;
}

.tt-contact-form__feedback:empty {
	display: none;
}

.tt-contact-form__feedback.is-success {
	color: #4a6b3a;
}

.tt-contact-form__feedback.is-error {
	color: #b3261e;
}

/* Zelfde knop als .tt-offerte-submit. Wel met een maximum: de linkerkolom is
   hier veel breder dan het popup-paneel, waardoor 78% een enorme knop zou
   opleveren. */
.tt-contact-form__submit {
	display: block;
	width: 78%;
	max-width: 300px;
	min-height: 0;
	padding: 13px 16px;
	border: 0;
	border-radius: 6px;
	background: #b08a47;
	color: #fff7eb;
	font-family: "TT Chocolates", sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	transition: background 160ms ease;
}

.tt-contact-form__submit:hover,
.tt-contact-form__submit:focus-visible {
	background: #8f6a34;
	outline: none;
}

.tt-contact-form__submit:disabled {
	opacity: 0.7;
	cursor: default;
}

/* ------------------------------------------------------------- Galerij */

/* Twee rijen: de stage pakt alle resterende hoogte (1fr), de thumbstrip houdt
   zijn eigen hoogte. Daardoor is de afstand tussen de grote afbeelding en de
   drie thumbs altijd exact de gap, hoe lang of kort de tekst links ook is. */
.tt-contact-gallery {
	--tt-gallery-thumb-gap: 16px;
	position: relative;
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	gap: 18px;
	align-self: stretch;
}

.tt-contact-gallery__stage {
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	background:
		linear-gradient(160deg, rgba(255, 248, 239, 0.64), rgba(186, 159, 124, 0.18)),
		rgba(36, 25, 12, 0.08);
	box-shadow:
		0 18px 40px rgba(44, 28, 14, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.4);
	/* Geen aspect-ratio: de hoogte volgt de kolom. De min-height is de bodem
	   voor als de tekst links heel kort is. */
	min-height: clamp(320px, 30vw, 460px);
	isolation: isolate;
}

.tt-contact-gallery__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform, opacity, filter;
}

.tt-contact-gallery__image--current {
	z-index: 1;
	opacity: 1;
	transform: scale(1);
	transition: opacity 220ms ease, transform 220ms ease;
}

/* Duurt 260ms; de JS commit de wissel na 280ms. Pas je de één aan, pas dan
   ook de ander aan (assets/js/contact-template.js). */
.tt-contact-gallery__image--next {
	z-index: 2;
	opacity: 0;
	transform: scale(0.94);
	transition: opacity 260ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tt-contact-gallery.is-transitioning .tt-contact-gallery__image--current {
	opacity: 0;
	transform: scale(1.02);
}

.tt-contact-gallery.is-transitioning .tt-contact-gallery__image--next {
	opacity: 1;
	transform: scale(1);
}

.tt-contact-gallery__overlay {
	position: absolute;
	inset: auto 0 0;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px;
	background: linear-gradient(180deg, rgba(18, 12, 8, 0) 0%, rgba(18, 12, 8, 0.66) 100%);
}

.tt-contact-gallery__nav {
	display: flex;
	align-items: center;
	gap: 10px;
}

.tt-contact-gallery__nav-button {
	position: relative;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba(245, 239, 228, 0.24);
	border-radius: 50%;
	background: rgba(22, 18, 13, 0.24);
	backdrop-filter: blur(8px);
	cursor: pointer;
	transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.tt-contact-gallery__nav-button::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 12px;
	border-top: 2px solid #f5efe4;
	border-right: 2px solid #f5efe4;
}

.tt-contact-gallery__nav-button--prev::before {
	transform: translate(-35%, -50%) rotate(-135deg);
}

.tt-contact-gallery__nav-button--next::before {
	transform: translate(-65%, -50%) rotate(45deg);
}

.tt-contact-gallery__nav-button:hover,
.tt-contact-gallery__nav-button:focus-visible {
	outline: none;
	transform: translateY(-1px);
	border-color: rgba(245, 239, 228, 0.48);
	background: rgba(245, 239, 228, 0.14);
}

.tt-contact-gallery__nav-button:focus,
.tt-contact-gallery__nav-button:active {
	outline: none;
	border-color: rgba(245, 239, 228, 0.24);
	background: rgba(22, 18, 13, 0.24);
	box-shadow: none;
}

.tt-contact-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--tt-gallery-thumb-gap);
}

.tt-contact-gallery__thumb {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 14px;
	background: transparent;
	cursor: pointer;
	overflow: hidden;
	box-shadow: 0 12px 24px rgba(44, 28, 14, 0.08);
	transition: transform 220ms ease, box-shadow 220ms ease;
}

.tt-contact-gallery__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: inherit;
	opacity: 0;
	transition: opacity 220ms ease, inset 220ms ease;
}

.tt-contact-gallery__thumb.is-active {
	transform: translateY(-3px);
	box-shadow: 0 20px 34px rgba(44, 28, 14, 0.16);
}

.tt-contact-gallery__thumb.is-active::after {
	inset: 6px;
	opacity: 1;
}

/* Zonder deze regel kleurt button:focus uit de parent-theme reset de thumb
   roze (#c36) zodra je hem aanklikt. Staat vóór :hover zodat hover wint. */
.tt-contact-gallery__thumb:focus,
.tt-contact-gallery__thumb:active {
	outline: none;
	background: transparent;
	color: inherit;
}

.tt-contact-gallery__thumb:hover,
.tt-contact-gallery__thumb:focus-visible {
	outline: none;
	transform: translateY(-2px);
}

.tt-contact-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	filter: saturate(0.88) brightness(0.95);
	transform: scale(1);
	transition: transform 260ms ease, filter 260ms ease;
}

.tt-contact-gallery__thumb.is-active img,
.tt-contact-gallery__thumb:hover img,
.tt-contact-gallery__thumb:focus-visible img {
	filter: saturate(1.02) brightness(1);
	transform: scale(1.03);
}

/* ---------------------------------------------------------------- USPs */

.tt-contact-usp {
	padding: 72px 0 12px;
}

.tt-contact-usp .tt-usp-grid {
	margin-top: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 46px;
}

.tt-contact-usp .tt-usp-item {
	min-width: 0;
}

.tt-contact-usp .tt-usp-item h3 {
	font-family: var(--tt-font-heading);
	font-size: 2rem;
	line-height: 0.92;
	margin: 16px 0 12px;
	font-style: italic;
	font-weight: 500;
	color: var(--tt-title);
	transform: skewX(-8deg);
	transform-origin: left center;
}

.tt-contact-usp .tt-usp-item p {
	margin: 0;
	max-width: none;
	font-family: "TT Chocolates", sans-serif;
	font-weight: 500;
	font-size: 0.9rem;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color: var(--tt-title);
}

.tt-contact-usp .tt-usp-icon {
	display: block;
}

.tt-contact-usp .tt-usp-icon img {
	width: 72px;
	height: auto;
	display: block;
	padding: 0;
	border: 1px solid var(--tt-icon-border, #a69d93);
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	color: var(--tt-gold, #997a38);
}

/* ------------------------------------------------------------- Content */

.tt-contact-content {
	padding: 24px 0 0;
}

/* --------------------------------------------------------------- Logos */

/* Ruim bemeten: de padding boven houdt de titel los van de USP's, de padding
   onder houdt de logo's los van de afbeeldingssectie (die zelf geen padding
   aan de bovenkant heeft). */
.tt-contact-logos {
	padding: 112px 0 104px;
	background: var(--tt-bg);
}

.tt-contact-logos__title {
	margin: 0 0 28px;
	text-align: center;
	font-family: var(--tt-font-heading);
	font-size: clamp(2.8rem, 5vw, 4.2rem);
	font-weight: 400;
	line-height: 0.94;
	letter-spacing: -0.06em;
	color: var(--tt-title, #3c1c09);
}

.tt-contact-logos__title em {
	font-style: italic;
	font-weight: 500;
}

.tt-contact-logos .tt-logo-row {
	margin-top: 0;
	overflow: hidden;
	width: 100%;
	/* De items hieronder meten zich af tegen deze rij (100cqw), die al exact de
	   contentbreedte is. Meten tegen .tt-logo-track kan niet: die is
	   width: max-content, dus percentages zouden cyclisch zijn. */
	container-type: inline-size;
}

.tt-contact-logos .tt-logo-track {
	--tt-logo-visible: 8;
	--tt-logo-gap: 6px;
	display: flex;
	align-items: center;
	gap: var(--tt-logo-gap);
	width: max-content;
	animation: tt-contact-logo-marquee 42s linear infinite;
	will-change: transform;
}

.tt-contact-logos .tt-logo-row:hover .tt-logo-track,
.tt-contact-logos .tt-logo-row:focus-within .tt-logo-track {
	animation-play-state: paused;
}

.tt-contact-logos .tt-logo-item,
.tt-contact-logos .tt-logo-fallback {
	flex: 0 0 calc((100cqw - (var(--tt-logo-gap) * (var(--tt-logo-visible) - 1))) / var(--tt-logo-visible));
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 64px;
}

.tt-contact-logos .tt-logo-item img {
	max-height: 118px;
	width: auto;
	max-width: 100%;
	opacity: 0.9;
	object-fit: contain;
}

.tt-contact-logos .tt-logo-fallback {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--tt-logo-muted);
	opacity: 0.9;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

@keyframes tt-contact-logo-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(calc(-50% - (var(--tt-logo-gap) / 2))); }
}

/* --------------------------------------------------- Afbeeldingssectie */

.tt-contact-image-section {
	padding: 0 0 132px;
	background: var(--tt-bg);
}

/* ---------------------------------------------------------- Responsive */

@media (min-width: 1024px) {
	.tt-contact-page {
		--tt-content-max: 1200px;
		--tt-content-gutter: 36px;
	}
}

@media (min-width: 1440px) {
	.tt-contact-page {
		--tt-content-max: 1220px;
		--tt-content-gutter: 48px;
	}
}

@media (min-width: 1490px) {
	.tt-contact-page {
		--tt-content-max: 1440px;
		--tt-content-gutter: 64px;
	}
}

@media (max-width: 1024px) {
	.tt-contact-page {
		--tt-content-gutter: 34px;
	}

	.tt-contact-hero {
		padding-top: 110px;
	}

	.tt-contact-intro {
		padding-top: 110px;
	}

	.tt-contact-hero + .tt-contact-intro {
		padding-top: 28px;
	}

	.tt-contact-hero__frame {
		border-radius: 18px;
		aspect-ratio: 16 / 7;
	}

	.tt-contact-intro__grid {
		grid-template-columns: minmax(0, 1fr) minmax(300px, 0.92fr);
		gap: 28px;
	}

	.tt-contact-intro__title {
		font-size: clamp(2.65rem, 6vw, 3.65rem);
	}

	.tt-contact-intro__title--secondary,
	.tt-contact-intro__italic {
		font-size: clamp(2.8rem, 6vw, 4rem);
	}

	.tt-contact-usp {
		padding-top: 56px;
	}

	.tt-contact-logos {
		padding: 88px 0 80px;
	}

	.tt-contact-image-section {
		padding-bottom: 104px;
	}

	.tt-contact-logos .tt-logo-track {
		--tt-logo-visible: 6;
	}
}

@media (max-width: 767px) {
	.tt-contact-page {
		--tt-content-gutter: 16px;
	}

	.tt-contact-hero {
		padding-top: 82px;
		padding-bottom: 12px;
	}

	.tt-contact-intro {
		padding-top: 82px;
	}

	.tt-contact-hero + .tt-contact-intro {
		padding-top: 24px;
	}

	.tt-contact-hero__frame {
		border-radius: 16px;
		aspect-ratio: 16 / 9;
	}

	.tt-contact-intro__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.tt-contact-intro__copy {
		padding-top: 0;
	}

	.tt-contact-intro__text {
		margin-top: 1rem;
		font-size: 0.75rem;
		letter-spacing: 0.12em;
	}

	.tt-contact-intro__secondary {
		margin-top: 0;
		padding-top: 2rem;
	}

	.tt-contact-intro__title {
		font-size: clamp(2.4rem, 10vw, 3.2rem);
	}

	.tt-contact-intro__title--secondary,
	.tt-contact-intro__italic {
		font-size: clamp(2.55rem, 10vw, 3.4rem);
		max-width: none;
	}

	.tt-contact-form__row {
		grid-template-columns: 1fr;
	}

	.tt-contact-form__submit {
		width: 100%;
		max-width: none;
	}

	/* Eén kolom: er is geen tekstkolom meer om de hoogte op af te stemmen,
	   dus valt de stage terug op een vaste verhouding. */
	.tt-contact-gallery {
		grid-template-rows: auto auto;
		gap: 12px;
	}

	.tt-contact-gallery__stage {
		border-radius: 16px;
		min-height: 0;
		aspect-ratio: 16 / 11;
	}

	.tt-contact-gallery__overlay {
		padding: 14px;
	}

	.tt-contact-gallery__nav-button {
		width: 40px;
		height: 40px;
	}

	.tt-contact-gallery__thumbs {
		gap: 10px;
	}

	.tt-contact-gallery__thumb {
		border-radius: 12px;
	}

	/* Op een derde van de schermbreedte is 16/9 erg ondiep. */
	.tt-contact-gallery__thumb img {
		aspect-ratio: 4 / 3;
	}

	.tt-contact-usp {
		padding: 48px 0 4px;
	}

	.tt-contact-usp .tt-usp-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.tt-contact-logos {
		padding: 64px 0 60px;
	}

	.tt-contact-logos__title {
		margin-bottom: 20px;
		font-size: clamp(2.2rem, 10vw, 3rem);
		line-height: 1;
	}

	/* Zelfde opzet als de logo-carrousel op de homepage (home-template.css). */
	.tt-contact-logos .tt-logo-track {
		--tt-logo-visible: 3;
		--tt-logo-gap: 4px;
		animation-duration: 28s;
	}

	.tt-contact-logos .tt-logo-item img {
		max-height: 88px;
	}

	.tt-contact-image-section {
		padding-bottom: 72px;
	}
}