/*
 * Coordinotes Widgets — Pinterest-aanbeveling
 *
 * Eén enkele "Like it? Pin it!"-kaart: de hele kaart is een klikbare link
 * (.cw-pinterest-card) naar Pinterest's "pin opslaan"-venster, met een
 * zelf-geüploade afbeelding en een tekstgedeelte ernaast. Geen eigen JS
 * nodig (geen carrousel/sleepgedrag zoals bij de andere drie widgets) —
 * enkel CSS, inclusief de hover-animatie op de afbeelding.
 */

.cw-pinterest-wrapper {
	max-width: 100%;
}

.cw-pinterest-card {
	display: flex;
	text-decoration: none;
	color: inherit;
	box-sizing: border-box;
}

.cw-pinterest-card,
.cw-pinterest-card:hover,
.cw-pinterest-card:focus,
.cw-pinterest-card:visited {
	text-decoration: none;
}

.cw-pinterest-image-wrap {
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
}

.cw-pinterest-image-wrap img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cw-pinterest-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

.cw-pinterest-heading {
	margin: 0 0 12px;
}

.cw-pinterest-subheading {
	margin: 0 0 24px;
}

.cw-pinterest-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	white-space: nowrap;
}

/*
 * Hover-animatie op de afbeelding, geactiveerd door hover op de hele kaart
 * (niet enkel op de afbeelding zelf, want de hele kaart is de klikbare
 * link — zie CW_Widget_Pinterest::render()). De transition-duur komt van
 * de "Duur"-stijlcontrole via de --cw-pinterest-transition CSS-variabele
 * (met een vaste fallback voor het geval de controle nog niet is
 * opgeslagen).
 */
.cw-pinterest-image-wrap img,
.cw-pinterest-image-wrap {
	transition-duration: var( --cw-pinterest-transition, 0.35s );
	transition-timing-function: ease;
}

.cw-pinterest-anim-zoom .cw-pinterest-image-wrap img {
	transition-property: transform;
}
.cw-pinterest-anim-zoom .cw-pinterest-card:hover .cw-pinterest-image-wrap img {
	transform: scale( 1.08 );
}

.cw-pinterest-anim-lift .cw-pinterest-image-wrap {
	transition-property: transform, box-shadow;
}
.cw-pinterest-anim-lift .cw-pinterest-card:hover .cw-pinterest-image-wrap {
	transform: translateY( -8px );
	box-shadow: 0 12px 24px -8px rgba( 0, 0, 0, 0.35 );
}

.cw-pinterest-anim-rotate .cw-pinterest-image-wrap img {
	transition-property: transform;
}
.cw-pinterest-anim-rotate .cw-pinterest-card:hover .cw-pinterest-image-wrap img {
	transform: rotate( -2deg ) scale( 1.04 );
}

.cw-pinterest-button {
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cw-pinterest-empty {
	padding: 20px;
	background: #fef3c7;
	color: #92400e;
	border-radius: 6px;
	font-size: 14px;
}

/* Op smalle schermen: layout-controle staat standaard al op "column" via de
   responsive default van de "Layout"-stijlcontrole, dus hier geen extra
   media-query nodig — dat blijft volledig instelbaar per breakpoint. */