/* Structurele layout van het deelnemersblok; designwaarden komen uit Gutenberg. */
.las-hotellas-members { width:100%; }
/* De carrouselweergave draait op de gedeelde carrousel in
   mu-plugins/las-hotellas-carousel.css. Hier staat alleen wat bij de deelnemers hoort. */
.las-hotellas-members[data-display-mode="carousel"] { --lh-carousel-gap:var(--las-hotellas-members-card-gap,var(--wp--preset--spacing--30,20px)); }
.las-hotellas-members.is-loading { opacity:.55;pointer-events:none;transition:opacity .15s ease; }
.las-hotellas-members__grid { display:grid;grid-template-columns:repeat(var(--las-hotellas-members-columns-desktop,4),minmax(0,1fr));gap:var(--las-hotellas-members-card-gap,var(--wp--preset--spacing--30,20px));width:100%; }
/* Bestuurscarrousel: staande portretten (4:5), zoals in een magazine. */
.las-hotellas-members__carousel .las-hotellas-member__image { flex:none;aspect-ratio:4/5; }
.las-hotellas-members__carousel .las-hotellas-member__info { flex:1; }
.las-hotellas-members__carousel .las-hotellas-member__role { margin-bottom:0; }
.las-hotellas-member { display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--las-hotellas-member-card-background,#D2E1ED);color:var(--las-hotellas-member-card-text-color,#001722);border-radius:var(--las-hotellas-members-card-radius,6px); }
.las-hotellas-member__image { aspect-ratio:1/1;overflow:hidden;background:var(--wp--preset--color--accent-6,#e8ebed66); }
.las-hotellas-member__image img { display:block;width:100%;height:100%;object-fit:cover; }
.las-hotellas-member__placeholder { width:100%;height:100%;min-height:180px;background:var(--wp--preset--color--accent-6,#e8ebed66); }
.las-hotellas-member__info { display:flex;flex:1;flex-direction:column;padding:var(--las-hotellas-members-card-padding,var(--wp--preset--spacing--30,20px));text-align:var(--las-hotellas-members-text-align,left); }
/* Bestuursfunctie als klein label boven de naam, in de stijl van de overlines. */
/* Inktkleur (palet: Contrast): blauw (accent-1) haalde op de lichtblauwe kaart maar 3,9:1, te weinig voor kleine tekst. */
.las-hotellas-member__board-role { margin:0 0 .35rem;color:var(--wp--preset--color--contrast,#001722);font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1.3; }
/* Naam met het LinkedIn-icoon ernaast, zodat de kaart geen aparte regel voor het icoon nodig heeft. */
.las-hotellas-member__kop { display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;margin:0 0 .3rem; }
.las-hotellas-member__name { margin:0;color:inherit;line-height:1.2;text-wrap:balance; }
.las-hotellas-member__role { margin:0;font-family:inherit;line-height:1.45; }
.las-hotellas-member__organisation { opacity:var(--las-hotellas-members-organisation-opacity,.7); }
/* LinkedIn: blok Sociale iconen, stijl "Alleen logo's", in donkerblauw; bij hover lichter blauw (accent-1). Eigen logo zonder lege rand (lijnt links uit), 20px. */
/* LinkedIn als wit hoekje strak in de rechterbovenhoek van de kaart (op tablet
   en desktop is dat de hoek van de foto), op elk schermformaat. Alleen de hoek
   linksonder is afgerond, in de kaartronding; de kaart rondt de buitenhoek zelf
   af. In de hoek staat zelden een gezicht. Volledig wit (niet doorschijnend) en
   1px over de rand: de kaart knipt dat weg, zodat er op geen enkele breedte een
   haarlijn van de foto langs het hoekje kan doorschemeren. De lettergroottes van naam en
   functie blijven de Gutenberg-instellingen van het blok. */
.las-hotellas-member { position:relative; }
.las-hotellas-member__linkedin { position:absolute;top:-1px;right:-1px;z-index:1;display:flex;margin:0;padding:0; }
.las-hotellas-member__linkedin .wp-social-link {
	display:flex;align-items:center;justify-content:center;
	position:relative;width:2rem;height:2rem;border-radius:0 0 0 var(--las-hotellas-members-card-radius,6px);
	/* Tussen de kaartkleur en de lichte paginakleur in: de kaartkleur van het blok
	   (Gutenberg-instelling) voor de helft gemengd met wit. Een volle kleur, dus de
	   foto schemert er niet doorheen. Het icoon is gedempt blauw: Accent 1 voor 65%
	   gemengd met de kaartkleur, zodat het niet opvalt (2,7:1; bewust iets onder de
	   3:1 voor iconen, op verzoek). */
	background:color-mix(in srgb, var(--las-hotellas-member-card-background,#D2E1ED) 50%, var(--wp--preset--color--base,#fff)) !important;
	color:color-mix(in srgb, var(--wp--preset--color--accent-1,#0074a9) 65%, var(--las-hotellas-member-card-background,#D2E1ED)) !important;
	box-sizing:content-box;padding:1px 1px 0 0;
	transition:color var(--lh-snel,220ms) var(--lh-ease,ease), background-color var(--lh-snel,220ms) var(--lh-ease,ease);
}
.las-hotellas-member .las-hotellas-member__linkedin .wp-social-link a { display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0 !important;line-height:0; }
.las-hotellas-member__linkedin.is-style-logos-only .wp-social-link svg { width:.9375rem;height:.9375rem; }
/* Tikzone van minstens 44px, ook al is het knopje kleiner. */
.las-hotellas-member__linkedin .wp-social-link a::after { content:"";position:absolute;inset:0 0 -.75rem -.75rem; }
/* Op grotere kaarten (tablet, desktop) iets groter, in verhouding met de foto. */
/* Tablet en desktop: een rond knopje dat op de grote foto zweeft, met dezelfde
   achtergrond als het hoekje (dat is voor de mobiele lijst, naast de naam) en
   een donkerblauw icoon. */
@media (min-width:701px) {
	.las-hotellas-member__linkedin { top:.75rem;right:.75rem; }
	.las-hotellas-member__linkedin .wp-social-link { width:2.25rem;height:2.25rem;padding:0;box-sizing:border-box;border-radius:50%;box-shadow:0 1px 6px rgba(0,23,34,.14);color:var(--wp--preset--color--contrast,#001722) !important; }
	.las-hotellas-member__linkedin.is-style-logos-only .wp-social-link svg { width:1.0625rem;height:1.0625rem; }
	.las-hotellas-member__linkedin .wp-social-link a::after { inset:-6px; }
}
/* Highlight alleen bij aanwijzen met een muis of bij toetsenbordfocus, niet na een
   klik: de link opent LinkedIn in een nieuw tabblad en houdt daarna de focus. */
/* Hover en toetsenbordfocus: alleen het icoon kleurt naar fel blauw (Accent 1);
   het vlak blijft gelijk. */
@media (hover:hover) { .las-hotellas-member__linkedin .wp-social-link:hover { color:var(--wp--preset--color--accent-1,#0074a9) !important;transform:none; } }
.las-hotellas-member__linkedin .wp-social-link:has(a:focus-visible) { color:var(--wp--preset--color--accent-1,#0074a9) !important;transform:none; }
.las-hotellas-members[data-text-align="center"] .las-hotellas-member__kop { justify-content:center; }
.las-hotellas-pagination {
	--las-hotellas-pagination-circle-size:3rem;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	gap:var(--wp--preset--spacing--20,.625rem);
	width:100%;
	margin-top:var(--wp--preset--spacing--50,3rem);
}
.las-hotellas-pagination__previous,.las-hotellas-pagination__next { display:contents; }
.las-hotellas-pagination__previous .wp-block-button__link,.las-hotellas-pagination__next .wp-block-button__link {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	box-sizing:border-box;
	gap:.5rem;
	text-decoration:none;
	white-space:nowrap;
}
.las-hotellas-pagination__previous>a:active,.las-hotellas-pagination__next>a:active { transform:none; }
.las-hotellas-pagination__status { margin:0;padding-inline:var(--wp--preset--spacing--20,.625rem);text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums; }
.las-hotellas-pagination a.page-numbers:focus { outline:0;box-shadow:none; }
.las-hotellas-pagination a.page-numbers:focus-visible { outline:1px solid var(--wp--preset--color--contrast,#001722);outline-offset:2px;box-shadow:none; }
.las-hotellas-pagination a.page-numbers:active { outline:0;box-shadow:none;transform:none; }
.las-hotellas-pagination .is-disabled .wp-block-button__link { opacity:.35;pointer-events:none;cursor:default; }
.las-hotellas-pagination__chevron { display:inline-flex;width:1.5rem;height:1.5rem;flex:0 0 1.5rem; }
.las-hotellas-pagination__chevron svg { width:100%;height:100%;fill:currentColor; }
@media (max-width:560px) {
	/* Pijlen zonder tekst; de stand ertussen wordt "2 van 4". */
	.las-hotellas-pagination { gap:var(--wp--preset--spacing--20,.625rem); }
	.las-hotellas-pagination__label { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
	.las-hotellas-pagination__previous .wp-block-button__link,.las-hotellas-pagination__next .wp-block-button__link {
		width:var(--las-hotellas-pagination-circle-size);
		min-width:var(--las-hotellas-pagination-circle-size);
		height:var(--las-hotellas-pagination-circle-size);
		padding:0!important;
		gap:0;
	}
}
.las-hotellas-members__count {
	margin:0 0 var(--wp--preset--spacing--30,1.5rem);
	color:var(--wp--preset--color--accent-3,#626a71);
}
.las-hotellas-members__empty { margin:0; }
.las-hotellas-members-editor-placeholder { padding:1rem 1.25rem;border:1px dashed currentColor;opacity:.7; }
.las-hotellas-members-editor-placeholder .dashicons { margin-right:.5rem; }
.las-hotellas-members-editor-preview { width:100%; }
.editor-styles-wrapper .las-hotellas-members-editor-preview .las-hotellas-members { width:100%;max-width:100%;margin-left:0 !important;margin-right:0 !important; }
@media (max-width:900px) { .las-hotellas-members__grid { grid-template-columns:repeat(var(--las-hotellas-members-columns-tablet,3),minmax(0,1fr)); } }
@media (max-width:700px) {
	.las-hotellas-members__grid { grid-template-columns:repeat(var(--las-hotellas-members-columns-mobile,1),minmax(0,1fr)); }
	.las-hotellas-members__carousel.lh-carousel > .las-hotellas-member {
		flex-basis:var(--las-hotellas-carousel-card-width,calc(42.857% - 1.5rem));
	}
}
@media (min-width:701px) and (max-width:900px) {
	.las-hotellas-members__carousel.lh-carousel > .las-hotellas-member {
		flex-basis:var(--las-hotellas-carousel-card-width,calc(42.857% - 1.5rem));
	}
}
@media (min-width:901px) and (max-width:1100px) {
	.las-hotellas-members__carousel.lh-carousel > .las-hotellas-member {
		flex-basis:var(--las-hotellas-carousel-card-width,calc(30% - .9rem));
	}
}
@media (min-width:1101px) {
	.las-hotellas-members__carousel.lh-carousel > .las-hotellas-member {
		flex-basis:var(--las-hotellas-carousel-card-width,calc(23.077% - 1.125rem));
	}
}

/* Mobiel: compactere kaarten, zoals gangbaar op telefoons (12-16px binnenruimte,
   12px ertussen). Centraal ingesteld in het thema (base.css, :root):
   --lh-kaart-binnen-mobiel en --lh-kaart-tussen-mobiel. Geldt ook voor de
   bestuurscarrousel. */
@media (max-width:700px) {
	.las-hotellas-members .las-hotellas-member__info { padding:var(--lh-kaart-binnen-mobiel,14px); }
	.las-hotellas-members .las-hotellas-members__grid { gap:var(--lh-kaart-tussen-mobiel,12px); }
}

/* Mobiel raster (Het netwerk): een lijst in plaats van twee smalle kolommen. Foto
   links (vierkant, 120px; bij veel tekst nooit breder dan vierkant), tekst rechts met ruim twee keer zoveel breedte, zodat functie en
   organisatie niet over drie regels breken en elke rij even hoog is. Alleen het
   raster: de carrousels (bestuur, aanbevelingen) houden hun staande kaarten. */
@media (max-width:700px) {
	.las-hotellas-members .las-hotellas-members__grid { grid-template-columns:1fr; gap:var(--lh-kaart-tussen-mobiel,12px); }
	.las-hotellas-members__grid > .las-hotellas-member { display:grid;grid-template-columns:7.5rem minmax(0,1fr);align-items:stretch; }
	.las-hotellas-members__grid > .las-hotellas-member .las-hotellas-member__image { aspect-ratio:auto;height:100%;min-height:7.5rem;position:relative; }
	/* De foto vult het vak maar bepaalt de hoogte niet: anders maakte een staande
	   foto de rij onnodig hoog. De hoogte komt uit de tekst, minimaal 120px. */
	.las-hotellas-members__grid > .las-hotellas-member .las-hotellas-member__image img { position:absolute;inset:0;width:100%;height:100%; }
	.las-hotellas-members__grid > .las-hotellas-member .las-hotellas-member__info { justify-content:center;padding:var(--lh-kaart-binnen-mobiel,14px); }
	/* LinkedIn: hetzelfde witte hoekje, rechtsboven in de kaart naast de naam
	   (de foto staat hier links). De naam houdt rechts ruimte vrij. */
	.las-hotellas-members__grid > .las-hotellas-member .las-hotellas-member__kop { padding-right:1.25rem; }
	.las-hotellas-members__grid > .las-hotellas-member .las-hotellas-member__linkedin .wp-social-link { width:1.875rem;height:1.875rem; }
	.las-hotellas-members__grid > .las-hotellas-member .las-hotellas-member__linkedin .wp-social-link a::after { inset:0 0 -.875rem -.875rem; }
}