/* =============================================================================
   Blok: tekst + beeld.

   Maten uit Figma (NVT61IBlNbt4LyTpo3CVlI), canvas 1920, container 1320 (x 300…1620):

     Over ons A       tekst 595 (x=299) · gat 77 · afbeelding 650×494 (x=971)
     Over ons B       afbeelding 650×416 (x=299) · gat 75 · tekst 596 (x=1024)
                      in een roze band van 1920×546 → 65px lucht boven en onder
     Openingstijden   tekst 764 (x=299) + foto 589×394 (x=1032, node 2219:7380)
                      met de locatiemarker 2219:7381 erop

   Verticaal staan tekst en beeld op hun gezamenlijke middellijn (in A 568,5 en 569).
   Kop → tekst is 18px (A) / 17px (B); tekst → knop is 27px.
   ========================================================================== */

.hinke-tm {
	/* Beeldkolom: 650 voor afbeelding en video, 589 voor de kaartfoto. */
	--hinke-tm-beeld: 650px;
	--hinke-tm-gat: 72px;
}

.hinke-tm--kaartfoto {
	--hinke-tm-beeld: 589px;
}

.hinke-tm__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--hinke-tm-beeld);
	column-gap: var(--hinke-tm-gat);
	align-items: center;
}

.hinke-tm--links .hinke-tm__grid {
	grid-template-columns: var(--hinke-tm-beeld) minmax(0, 1fr);
}

/* De tekst blijft vóór het beeld in de DOM staan (leesvolgorde); alleen de
   plaatsing op het scherm wisselt. */
.hinke-tm--links .hinke-tm__beeld {
	order: -1;
}

.hinke-tm--alleen-tekst .hinke-tm__grid {
	grid-template-columns: minmax(0, 1fr);
}

/* Kop staat in het ontwerp 18px boven de tekst in plaats van de standaard 24px. */
.hinke-tm__kop {
	margin-bottom: 18px;
}

/* De bodytekst van dít blok is in het ontwerp Outfit 16/26 (node 2217:7122) en
   dus iets groter dan de gedeelde .hinke-rte (14/24). Alleen binnen dit blok
   bijgesteld; de gedeelde stijl in pages/page.css blijft ongemoeid. */
.hinke-tm .hinke-rte {
	font-size: 16px;
	line-height: 26px;
}

/* Alinea-afstand = één lege regel, dus precies één regelhoogte (26px) en niet de
   24px van de gedeelde .hinke-rte. In het ontwerp (Openingstijden, node 2201:9396)
   is de tekst 7 regels hoog binnen 764px: 5 tekstregels + 2 lege regels × 26 = 182.
   Een lege regel in het ontwerp is dus een aparte alinea, geen <br>. */
.hinke-tm .hinke-rte p {
	margin-bottom: 26px;
}

.hinke-tm .hinke-rte p:last-child {
	margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
   Beeld — de verhouding van het bestand wordt gerespecteerd (494 óf 416 hoog bij
   650 breed), dus geen vaste hoogte.
   -------------------------------------------------------------------------- */

.hinke-tm__afbeelding {
	display: block;
	width: 100%;
	height: auto;
}

/* -----------------------------------------------------------------------------
   Video — een <video> heeft vóór het laden geen intrinsieke maat, dus moet de
   verhouding hier vandaan komen. Het template zet --hinke-tm-ratio op de échte
   maat van de poster (650:494 of 650:416 uit het ontwerp); 650:494 is de terugval.
   Dezelfde regel geldt voor de <img> die verschijnt zolang er nog geen
   videobestand is aangeleverd — anders zou het vak van hoogte verspringen.
   -------------------------------------------------------------------------- */

.hinke-tm__video {
	display: block;
	width: 100%;
	aspect-ratio: var(--hinke-tm-ratio, 650 / 494);
	object-fit: cover;
	background: var(--hinke-band);
}

/* -----------------------------------------------------------------------------
   Foto met locatiemarker — 589×394 uit het ontwerp (node 2219:7380).

   Maten van de marker (node 2219:7381), fotorelatief:
     stip        12×12 wit, midden op 98/98 → 16,6% en 24,9% (Ellipse 9 + 10)
     tooltip     86×23, radius 5, #d3bb6c, tekst DM Serif Display 11 in #f5f5f5
                 (padding 4/14 → 4+15+4 = 23 hoog), midden boven de stip
     staartje    16×15 omlaag; 9px daarvan is zichtbaar onder de tooltip, en dat
                 is exact het gat tussen tooltip (tot y=435) en stip (vanaf 444)

   In het ontwerp staat de tooltip altijd open. De gebruiker wil hem bij hover,
   dus staat hij hier standaard verborgen en komt hij op :hover én
   :focus-visible — die laatste voor wie met het toetsenbord navigeert.
   -------------------------------------------------------------------------- */

.hinke-tm__kaart {
	position: relative;
}

.hinke-tm__kaartfoto {
	display: block;
	width: 100%;
	aspect-ratio: 589 / 394;
	object-fit: cover;
	background: var(--hinke-band);
}

/* De marker is een onzichtbaar aanraakvlak van 44×44 met het bolletje van 12×12
   in het midden; --hinke-mrk-x/y wijzen de plek van de winkel aan, niet de
   linkerbovenhoek. Twee dingen zijn hier bewust zo gedaan:

   1. Het vak is 44×44 en niet het bolletje van 12×12 met een ::before van 28×28.
      Op een touchscreen is 28px te klein om te raken; 44×44 is de ondergrens die
      WCAG 2.5.5 stelt en die de opdracht als eis noemt. Gemeten met
      elementFromPoint: het oude vlak reikte tot ±14px van het midden, nu ±22px.
   2. Het centreren gebeurt met een negatieve marge en NIET met
      transform: translate(-50%, -50%). In motion.css staat
      `.hinke-tm__marker:hover { transform: scale(1.12); }` en dat vervángt de hele
      transform — met translate sprong de marker bij hover 5,3px naar rechtsonder
      en wees hij de winkel niet meer aan (gemeten: rect x 603,7 → 609,0 en
      y 365,4 → 370,7). Met een marge kan geen enkele transform van buiten de
      plaatsing nog stukmaken. */
.hinke-tm__marker {
	position: absolute;
	left: var(--hinke-mrk-x, 16.6%);
	top: var(--hinke-mrk-y, 24.9%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
}

.hinke-tm__stip {
	display: block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--hinke-white);
	/* De halo uit het ontwerp; houdt de stip ook op een lichte lucht zichtbaar. */
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.45);
}

.hinke-tm__tip {
	position: absolute;
	/* Onderkant 9px boven de stip — de hoogte van het zichtbare staartje. Het
	   ouderelement is nu het aanraakvlak van 44×44 en niet meer de stip zelf, dus
	   rekenen vanaf het midden: 50% (= 22px) + 6px halve stip + 9px staartje. */
	bottom: calc(50% + 15px);
	left: 50%;
	/* --hinke-tip-schuif wordt door de JS gezet als de tooltip buiten de foto valt. */
	transform: translateX(calc(-50% + var(--hinke-tip-schuif, 0px)));
	padding: 4px 14px;
	border-radius: 5px;
	background: var(--hinke-gold);
	color: var(--hinke-band);
	font-family: var(--hinke-font-heading);
	font-weight: 400;
	font-size: 11px;
	line-height: 15px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 160ms ease, visibility 160ms ease;
}

/* Het staartje: 16 breed en 9 hoog, altijd boven de stip — dus niet meeschuiven
   met de tooltip zelf, anders wijst het niet meer naar het bolletje. */
.hinke-tm__tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: calc(50% - var(--hinke-tip-schuif, 0px));
	width: 0;
	height: 0;
	transform: translateX(-50%);
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 9px solid var(--hinke-gold);
}

.hinke-tm__marker:hover .hinke-tm__tip,
.hinke-tm__marker:focus-visible .hinke-tm__tip,
.hinke-tm__marker--stil .hinke-tm__tip {
	opacity: 1;
	visibility: visible;
}

/* Zichtbare focusring op de stip zelf — de link is maar 12px, dus een ring om het
   vak heen is het enige wat je ziet. */
.hinke-tm__marker:focus-visible {
	outline: none;
}

.hinke-tm__marker:focus-visible .hinke-tm__stip {
	box-shadow: 0 0 0 3px var(--hinke-gold), 0 0 6px rgba(0, 0, 0, 0.45);
}

/* Zonder hover (touch) is er geen manier om de tooltip te laten zien; daar staat
   hij dus altijd open — precies zoals het ontwerp hem laat zien.

   Daar hoort pointer-events: auto bij. Het gouden labeltje is met 86×23 het enige
   dat je op een telefoon ziet en dus waar iedereen naar tikt, maar met
   pointer-events: none ging die tik dwars door het label heen naar de foto
   eronder (gemeten met elementFromPoint op het midden van de tooltip:
   img.hinke-tm__kaartfoto, en een echte tap kwam als klik op de <img> aan in
   plaats van op de link). Nu hoort het label bij het aanraakgebied van de link
   naar Google Maps. Op een muisapparaat blijft pointer-events: none staan, want
   daar zou de tooltip de hover op de stip juist kunnen onderbreken. */
@media (hover: none) {
	.hinke-tm__tip {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hinke-tm__tip {
		transition: none;
	}
}

/* -----------------------------------------------------------------------------
   Knoppen — 276×44 goud, label Outfit Bold 16 wit uppercase.

   De knop zelf (.hinke-blkbtn) staat in assets/css/layout.css — dat bestand laadt
   altijd, dus hoeft de basisknop niet in elk blok-CSS-bestand herhaald te worden.
   Hier staat alleen de plaatsing van de knoppenrij binnen dit blok.
   -------------------------------------------------------------------------- */

.hinke-tm__acties {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 27px;
}

/* Openingstijden zet de knoppen verder van de tekst dan Over ons: de tekst loopt
   daar tot y=582 (node 2201:9396: y=400 + 7 regels × 26) en de knoppen beginnen
   op y=626 (node 2201:9397) → 44px. Over ons houdt zijn 27px. */
.hinke-tm--kaartfoto .hinke-tm__acties {
	margin-top: 44px;
}

/* -----------------------------------------------------------------------------
   Roze band — full-bleed 1920×546 met 65px lucht boven en onder. De regel met
   `.hinke-block + .hinke-block` in pages/page.css zet padding-top op 56px, dus
   die overschrijven we met dezelfde-of-hogere specificiteit.
   -------------------------------------------------------------------------- */

.hinke-tm.hinke-block--roze {
	padding-top: 65px;
	padding-bottom: 65px;
	background: var(--hinke-pink);
}

.hinke-block + .hinke-tm.hinke-block--roze {
	margin-top: 56px;
	padding-top: 65px;
}

/* Op de roze band zijn kop én tekst wit in het ontwerp (nodes 2199:8756 en
   2199:8757) — roze op roze zou onleesbaar zijn. */
.hinke-tm.hinke-block--roze .hinke-tm__kop,
.hinke-tm.hinke-block--roze .hinke-rte {
	color: var(--hinke-white);
}

/* Op de roze band is de bodytekst in het ontwerp 14px en niet de 16px van de
   andere tekst_media-blokken (node 2199:8757 tegenover 2217:7122). De
   regelhoogte blijft 26, dus het regelritme van de band verandert niet. */
.hinke-tm.hinke-block--roze .hinke-rte {
	font-size: 14px;
}

.hinke-tm.hinke-block--roze .hinke-rte a {
	color: var(--hinke-white);
}

/* =============================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1200px) {
	.hinke-tm {
		--hinke-tm-beeld: minmax(0, 1fr);
		--hinke-tm-gat: 40px;
	}
	.hinke-tm--kaartfoto {
		--hinke-tm-beeld: minmax(0, 1fr);
	}
}

@media (max-width: 900px) {
	.hinke-tm__grid,
	.hinke-tm--links .hinke-tm__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 28px;
	}
	.hinke-tm--links .hinke-tm__beeld {
		order: 0;
	}
}