/*
Theme Name: Lotte Ruesink 2026
Theme URI: https://lotteruesink.nl
Author: Mull2media
Author URI: https://mull2media.nl
Description: Blokthema voor Lotte Ruesink Photography, opgezet vanuit het Lovable-ontwerp. Geen page-builder: alle content staat als blokken in de database, zodat die zowel in de editor als via de REST-API (Claude-koppeling) bewerkbaar is.
Version: 0.2.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lotteruesink-2026
*/

/* Opmaak hoort in theme.json. Hier staat alleen wat daar niet in kan.
   De waarden komen uit src/styles.css van het Lovable-ontwerp. */

html,
body {
	overflow-x: clip;
}

/* ---------------------------------------------------------------
   Labeltje boven een kop. In het ontwerp .eyebrow
   --------------------------------------------------------------- */
.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.76rem;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta);
}

/* Handschrift-accent. In het ontwerp .font-script */
.is-style-handschrift {
	font-family: var(--wp--preset--font-family--sacramento);
	font-size: clamp(1.9rem, 3vw, 2.4rem);
	line-height: 1.25;
	color: var(--wp--preset--color--terracotta);
}

/* ---------------------------------------------------------------
   Tekstlink met onderlijn. In het ontwerp .text-link
   Het ontwerp gebruikt deze in plaats van gevulde knoppen op de
   hero en onder de secties.
   --------------------------------------------------------------- */
.is-style-tekstlink a,
a.is-style-tekstlink {
	display: inline-block;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--terracotta);
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.35rem;
	transition: color 200ms ease, border-color 200ms ease;
}

.is-style-tekstlink a:hover,
a.is-style-tekstlink:hover {
	color: var(--wp--preset--color--bruin);
}

/* Lichte variant, voor gebruik op een donkere foto. */
.is-style-tekstlink-licht a,
a.is-style-tekstlink-licht {
	display: inline-block;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fffdfa;
	border-bottom: 1px solid rgba(255, 253, 250, 0.6);
	padding-bottom: 0.35rem;
	transition: border-color 200ms ease;
}

.is-style-tekstlink-licht a:hover,
a.is-style-tekstlink-licht:hover {
	border-bottom-color: #fffdfa;
}

/* ---------------------------------------------------------------
   Kaart met zachte rand en schaduw. In het ontwerp .editorial-card
   --------------------------------------------------------------- */
.is-style-kaart {
	border: 1px solid var(--wp--preset--color--rand);
	background: var(--wp--preset--color--kaart);
	border-radius: 2rem;
	box-shadow: 0 18px 40px -28px rgba(58, 44, 38, 0.22);
}

/* ---------------------------------------------------------------
   Navigatie in de header en de footerkolommen
   --------------------------------------------------------------- */
.wp-block-navigation {
	--wp--style--block-gap: 1.6rem;
}

.wp-block-navigation .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bruin-zacht);
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--terracotta);
}

/* ---------------------------------------------------------------
   Hero: de tekst staat op een donkere foto. Het ontwerp gebruikt
   een gradient die onderin zwaarder is dan bovenin, zodat het
   gezicht in de foto zichtbaar blijft.
   --------------------------------------------------------------- */
.lr-hero .wp-block-cover__background {
	background: linear-gradient(180deg, rgba(37, 30, 27, 0.08), rgba(35, 29, 26, 0.72)) !important;
	opacity: 1 !important;
}

.lr-hero {
	min-height: 110svh;
}

@media (max-width: 781px) {
	.lr-hero {
		min-height: 92svh;
	}
}

/* Quote-banden over een foto: hetzelfde principe, iets lichter. */
.lr-band .wp-block-cover__background {
	background: linear-gradient(180deg, rgba(37, 30, 27, 0.35), rgba(35, 29, 26, 0.55)) !important;
	opacity: 1 !important;
}

/* ---------------------------------------------------------------
   Instagram-strook: zes vierkanten, volle breedte, minimale kier
   --------------------------------------------------------------- */
.lr-instagram .wp-block-columns {
	gap: 4px;
}

.lr-instagram figure,
.lr-instagram img {
	margin: 0;
	border-radius: 0 !important;
}

.lr-instagram img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	height: 100%;
	display: block;
}

/* ---------------------------------------------------------------
   Kleine correcties
   --------------------------------------------------------------- */
.wp-block-image img {
	display: block;
}

/* De footerkolommen gebruiken kleine lijstjes zonder opsomtekens. */
.lr-footer ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.lr-footer li {
	margin-bottom: 0.5rem;
}

/* ---------------------------------------------------------------
   Reviews: in het ontwerp een horizontaal scrollende kaartenrij,
   geen raster. Kaart 292 x 182 px, quote in Cormorant en afgekapt
   op vier regels. Met scroll-snap in plaats van JavaScript.
   --------------------------------------------------------------- */
.lr-reviews .wp-block-columns {
	display: flex;
	flex-wrap: nowrap !important;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 0;
	padding-bottom: 1rem;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--rand) transparent;
}

.lr-reviews .wp-block-column.lr-quote-card {
	flex: 0 0 292px !important;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	min-height: 182px;
	padding: 20px;
	border-radius: 2rem;
	border: 1px solid var(--wp--preset--color--rand);
	background: var(--wp--preset--color--kaart);
	box-shadow: 0 18px 40px -28px rgba(58, 44, 38, 0.22);
}

.lr-quote-label {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.6rem;
	line-height: 1.4;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta);
	margin: 0;
}

.lr-quote-text {
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--wp--preset--color--bruin);
	margin: 0.5rem 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lr-quote-naam {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.6rem;
	line-height: 1.4;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bruin-zacht);
	margin: auto 0 0;
	padding-top: 0.75rem;
}

/* ---------------------------------------------------------------
   Regelafstanden zoals in het ontwerp. Tailwind koppelt die aan de
   tekstgrootte (leading-7 bij text-sm, leading-8 bij text-base);
   theme.json kan dat niet per maat, dus hier.
   --------------------------------------------------------------- */
.has-klein-font-size {
	line-height: 2;      /* 14px -> 28px, leading-7 */
}

.has-basis-font-size {
	line-height: 2;      /* 16px -> 32px, leading-8 */
}

.has-groot-font-size {
	line-height: 1.78;   /* 18px -> 32px */
}

/* De carousel-kaart mag niet meegroeien met de kolomverdeling van
   WordPress; het ontwerp gebruikt een vaste kaartbreedte. */
.lr-reviews .wp-block-columns > .wp-block-column.lr-quote-card {
	flex: 0 0 292px !important;
	max-width: 292px;
	--wp--style--block-gap: 0;
}

.lr-quote-card > * {
	margin-block-start: 0;
}

/* De kaart rekent zijn breedte inclusief padding, anders wordt hij
   breder dan de 292px die het ontwerp aanhoudt. */
.lr-reviews .wp-block-column.lr-quote-card {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------
   Fotoproducten: in het ontwerp is elke kolom een kaart met het
   beeld strak bovenin (vaste hoogte 288px) en 28px tekstpadding.
   --------------------------------------------------------------- */
.lr-producten .wp-block-columns > .wp-block-column {
	background: var(--wp--preset--color--kaart);
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: 2rem;
	overflow: hidden;
	box-shadow: 0 18px 40px -28px rgba(58, 44, 38, 0.22);
}

.lr-producten .wp-block-column > figure {
	margin: 0;
}

.lr-producten .wp-block-column figure img {
	display: block;
	width: 100%;
	height: 288px;
	object-fit: cover;
	border-radius: 0;
	aspect-ratio: auto;
}

.lr-producten .wp-block-column > :not(figure) {
	padding-inline: 28px;
}

.lr-producten .wp-block-column > h3 {
	margin-top: 28px;
}

.lr-producten .wp-block-column > p:last-child {
	padding-bottom: 28px;
	margin-top: 12px;
}