/* Maries maakt het — WordPress-aanpassingen voor de secties Diensten, Portfolio en Contact.
 * site.css (uit de preview) blijft leidend; dit bestand haalt alleen de bijwerkingen van
 * WordPress-blokken weg (flow-marges, galerijopmaak, Contact Form 7). */

/* ---------- Gedeeld: WordPress flow-layout-marges neutraliseren ---------- */
.wp-block-group.diensten,
.wp-block-group.portfolio,
.wp-block-group.contact { margin-block: 0; }

:is(.diensten, .portfolio, .contact) .is-layout-flow > * { margin-block: 0; }

/* Marges uit site.css opnieuw zetten (de regel hierboven is specifieker) */
:is(.diensten, .portfolio, .contact) .is-layout-flow > .kicker { margin-bottom: 1rem; }
:is(.diensten, .portfolio) .is-layout-flow > .sectie-kop { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
:is(.diensten, .portfolio) .is-layout-flow > .sectie-kop__intro { margin: 0; }

/* ---------- Diensten ---------- */
.diensten .dienst > .dienst__icoon { margin-bottom: 1.75rem; }
.diensten .dienst > h3 { margin-bottom: .85rem; }
.diensten .dienst > p { margin-bottom: 1em; }
.diensten .dienst > .dienst__cta { flex: none; align-self: flex-start; margin: 0; }
.diensten .dienst__cta .dienst__link { display: inline-flex; margin-top: .5rem; }

/* ---------- Portfolio: core/gallery als masonry (CSS columns) ---------- */
.wp-block-gallery.has-nested-images.werk {
	display: block;
	columns: 3 300px;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
}
.wp-block-gallery.has-nested-images.werk figure.wp-block-image:not(#individual-image) {
	display: block;
	width: 100%;
	margin: 0 0 1.25rem;
	break-inside: avoid;
}
.wp-block-gallery.has-nested-images.werk figure.wp-block-image img {
	display: block;
	width: 100%;
	max-width: 100% !important;
	height: auto;
	border-radius: var(--radius);
	background: var(--creme);
	/* Zoom binnen de afgeronde rand, zoals .werk__knop in de preview */
	clip-path: inset(0 round var(--radius));
	transition: transform .5s ease, clip-path .5s ease;
}
.wp-block-gallery.has-nested-images.werk figure.wp-block-image:hover img {
	transform: scale(1.03);
	/* 1.456% = (1 - 1/1.03) / 2: zichtbaar vlak blijft even groot, hoeken blijven 20px */
	clip-path: inset(1.456% round calc(var(--radius) / 1.03));
}
.wp-block-gallery.has-nested-images.werk figure.wp-block-image:has(figcaption)::before { content: none; display: none; }
.wp-block-gallery.has-nested-images.werk figure.wp-block-image figcaption {
	position: static;
	max-height: none;
	overflow: visible;
	margin: 0;
	padding: .7rem .25rem 0;
	background: none;
	color: inherit;
	font-size: .95rem;
	line-height: 1.4;
	text-align: left;
	text-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	mask-image: none;
}
.wp-block-gallery.has-nested-images.werk figure.wp-block-image figcaption strong { display: block; font-size: 1rem; }

/* Lightbox van WordPress (core/image "Vergroten bij klikken") in de huisstijl van de preview */
.werk .wp-lightbox-container button.lightbox-trigger {
	background-color: rgba(119, 69, 57, .55);
	border-radius: 50%;
}
.werk .wp-lightbox-container button.lightbox-trigger:hover,
.werk .wp-lightbox-container button.lightbox-trigger:focus-visible { background-color: var(--bruin); }
/* De overlay neemt de klassen van de figuur over; .reveal mag hem niet verbergen */
.wp-lightbox-overlay figure.reveal { opacity: 1; transform: none; transition: none; }
.wp-lightbox-overlay .wp-block-image img { border-radius: var(--radius-s); }
.wp-lightbox-overlay .scrim { background-color: rgb(40, 22, 17) !important; opacity: .9; }
.wp-lightbox-overlay .wp-lightbox-close-button,
.wp-lightbox-overlay .wp-lightbox-navigation-button {
	display: grid; place-items: center;
	width: 52px; height: 52px; min-width: 0; min-height: 0;
	padding: 0 !important; border-radius: 50%;
	background: var(--creme) !important; fill: var(--bruin) !important; color: var(--bruin);
}
.wp-lightbox-overlay .wp-lightbox-close-button:hover,
.wp-lightbox-overlay .wp-lightbox-navigation-button:hover { background: var(--geel) !important; fill: var(--bruin-diep) !important; }
.wp-lightbox-overlay .wp-lightbox-navigation-button[hidden] { display: none; }

/* ---------- Contact ---------- */
.contact .is-layout-flow > .contact__kop { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.contact .contact__kop > .contact__intro { margin: 1.25rem 0 0; }
.contact .contactkaart > h3 { margin-bottom: 1.5rem; color: inherit; }

/* Contactgegevens: groepjes met term en waarde (in de preview een <dl>) */
.contact .contactkaart__lijst > div { padding-bottom: 1.1rem; border-bottom: 1px solid rgba(245, 229, 217, .2); }
.contact .contactkaart__lijst > div:last-child { border-bottom: 0; padding-bottom: 0; }
.contact .contactkaart__lijst .contactkaart__term {
	margin: 0; max-width: none;
	font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: rgba(245, 229, 217, .85);
}
.contact .contactkaart__lijst .contactkaart__waarde { margin: .2rem 0 0; max-width: none; font-size: 1.15rem; font-weight: 600; }

/* ---------- Contact Form 7 in de formulierkaart ---------- */
/* core/shortcode zet er een <p> omheen (wpautop); die mag geen ruimte innemen */
.formulier > p { display: contents; }
.formulier > .wpcf7,
.formulier .wpcf7-form { margin: 0; }
.formulier .wpcf7-form { display: grid; gap: 1.25rem; }
.formulier .wpcf7-form > p,
.formulier .wpcf7-form .veld > p,
.formulier .wpcf7-form .vinkje > p,
.formulier .wpcf7-form .formulier__actie > p { display: contents; }
.formulier .wpcf7-form br { display: none; }
.formulier .wpcf7-form .hidden-fields-container,
.formulier .wpcf7-form fieldset[hidden] { display: none; }

.formulier .wpcf7-form-control-wrap { display: block; }
.formulier .veld .wpcf7-form-control:not(.wpcf7-acceptance) {
	display: block; width: 100%; margin: 0; padding: .85rem 1rem;
	border: 1.5px solid var(--bruin-zacht); border-radius: var(--radius-s);
	background: #fff; color: var(--bruin); font: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.formulier .veld textarea.wpcf7-form-control { resize: vertical; min-height: 9rem; }
.formulier .veld .wpcf7-form-control:focus { outline: none; border-color: var(--bruin); box-shadow: 0 0 0 4px rgba(237, 174, 79, .45); }
.formulier .veld .wpcf7-not-valid,
.formulier .veld [aria-invalid="true"] { border-color: #a5321f; }
.formulier .wpcf7-not-valid-tip { margin-top: .4rem; color: #a5321f; font-size: .9rem; font-weight: 700; }

/* Akkoord-vinkje */
.formulier .vinkje { display: block; }
.formulier .vinkje .wpcf7-list-item { display: block; margin: 0; }
.formulier .vinkje .wpcf7-list-item > label { display: flex; align-items: flex-start; gap: .7rem; font-size: .95rem; font-weight: 400; cursor: pointer; }
.formulier .vinkje input[type="checkbox"] { flex: none; width: 22px; height: 22px; margin: .1rem 0 0; accent-color: var(--bruin); }

/* Verzendknop (krijgt class "button" uit het formulier) */
.formulier .wpcf7-submit { margin: 0; -webkit-appearance: none; appearance: none; }
.formulier .wpcf7 form.submitting .wpcf7-submit { cursor: progress; }
.formulier .wpcf7-spinner { margin: 0; background-color: var(--bruin); }

/* Meldingen na verzenden */
.formulier .wpcf7 form .wpcf7-response-output {
	margin: 0; padding: 0; border: 0;
	font-weight: 700;
}
.formulier .wpcf7 form.sent .wpcf7-response-output { padding: .7rem 1rem; border-radius: var(--radius-s); background: var(--creme); }
.formulier .wpcf7 form.invalid .wpcf7-response-output,
.formulier .wpcf7 form.unaccepted .wpcf7-response-output,
.formulier .wpcf7 form.payment-required .wpcf7-response-output,
.formulier .wpcf7 form.failed .wpcf7-response-output,
.formulier .wpcf7 form.aborted .wpcf7-response-output,
.formulier .wpcf7 form.spam .wpcf7-response-output { color: #a5321f; }