/*
 * Bewusst zurückhaltend: Schriften und Farben kommen aus dem Theme,
 * damit sich der Block in die bestehende Seite einfügt.
 */

/*
 * Kachel-Block. Bild oben, Beschriftung darunter.
 * Schrift, Groesse, Farbe, Spalten und Bildbreite kommen als
 * CSS-Variablen aus den Einstellungen bzw. den Shortcode-Attributen.
 */

/*
 * Kachel-Block. Bild oben, Beschriftung darunter.
 * Schrift, Groesse, Farbe, Spalten und Bildbreite kommen als
 * CSS-Variablen aus den Einstellungen bzw. den Shortcode-Attributen.
 *
 * box-sizing wird ausdruecklich gesetzt: sonst rechnen manche Themes
 * das Innenmass zur Breite dazu und die Beschriftung waechst aus ihrer
 * Spalte heraus - genau dann laufen benachbarte Woerter ineinander.
 */

.skv-grid-front *,
.skv-slider * {
	box-sizing: border-box;
}

.skv-grid-front,
.skv-slider {
	--skv-grid-color: currentColor;
	--skv-grid-img: 312px;
	--skv-gap: clamp( 1.5rem, 4vw, 3rem );
}

/* --- Raster ---
 *
 * Die Spaltenzahl kommt fest aus PHP (Anzahl der Karten oder die
 * eingestellte Zahl), nicht aus "wie viele passen gerade rein". Ein
 * flexibles auto-fit-Raster wirkt in einer schmaleren Theme-Spalte
 * unvorhersehbar - eine Karte springt in die naechste Zeile und die
 * Abstaende sehen ungleich aus. Mit fester Spaltenzahl bleiben die
 * Karten immer in einer Reihe und gleichmaessig verteilt; erst die
 * Media Queries unten reduzieren die Spalten gezielt fuer schmale
 * Bildschirme.
 */

.skv-grid-front {
	display: grid;
	grid-template-columns: repeat( var( --skv-grid-cols, 3 ), minmax( 0, 1fr ) );
	justify-items: center;
	align-items: end;
	gap: var( --skv-gap );
	margin: clamp( 2rem, 6vw, 4rem ) 0;
	text-align: center;
}

/* --- Kachel --- */

.skv-tile {
	display: flex;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: clamp( 1.2rem, 3.6vw, 2.7rem );
	text-decoration: none;
	text-align: center;
	color: inherit;
	/*
	 * Containment-Kontext fuer die Schriftgroesse der Beschriftung:
	 * cqi-Einheiten weiter unten beziehen sich auf DIESE Breite, nicht
	 * auf die Fensterbreite. Damit passt die Schrift immer zur
	 * tatsaechlichen Kachelbreite, egal wie schmal die Theme-Spalte ist
	 * oder wie viele Karten nebeneinander stehen.
	 */
	container-type: inline-size;
}

.skv-tile-figure {
	display: block;
	width: 100%;
	max-width: var( --skv-grid-img );
}

.skv-tile-img {
	display: block;
	width: 100%;
	height: auto;
	/* Die Zeichnungen liegen meist auf weissem Grund - der wird hier
	   herausgerechnet, damit sie auf der cremefarbenen Flaeche sitzen. */
	mix-blend-mode: multiply;
	transition: transform .35s ease;
}

.skv-tile:hover .skv-tile-img,
.skv-tile:focus-visible .skv-tile-img {
	transform: translateY( -4px ) scale( 1.02 );
}

/*
 * Doppelte Selektorstufe, damit Theme-Regeln fuer Links im Inhalt
 * Groesse und Ausrichtung nicht ueberschreiben.
 *
 * Schriftgroesse: var(--skv-grid-size) greift nur, wenn im Backend ein
 * fester Wert eingetragen wurde. Ohne festen Wert faellt sie auf den
 * cqi-Wert zurueck - der bezieht sich auf die Kachelbreite von oben
 * (container-type: inline-size) und schrumpft die Schrift automatisch
 * mit der Spalte.
 *
 * overflow-wrap: break-word ist ein bewusstes Sicherheitsnetz, kein
 * Standardverhalten: bei vielen Karten (z. B. 7 in 4 Spalten) kann eine
 * Spalte schmaler sein als ein langes Wort wie "Wochenspecial" selbst
 * bei kleinster Schriftgroesse. Ohne dieses Sicherheitsnetz wuerde der
 * Text ueber den Kartenrand hinaus - und im schlimmsten Fall ueber den
 * Bildschirmrand - hinauslaufen, statt in der Kachel zu bleiben. Der
 * Bruch mitten im Wort greift dadurch nur in diesem Ausnahmefall, nicht
 * schon bei normaler Breite.
 */
.skv-grid-front .skv-tile .skv-tile-title,
.skv-slider .skv-tile .skv-tile-title {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 .2em .18em;
	/*
	 * Fallback bewusst "Dancing Script", cursive statt "inherit": sollte
	 * die Inline-Angabe --skv-grid-font aus irgendeinem Grund nicht beim
	 * Browser ankommen (z. B. ein Caching- oder Sicherheits-Plugin, das
	 * style-Attribute anfasst), landet die Beschriftung trotzdem bei der
	 * mitgelieferten Schrift statt kommentarlos bei der Theme-Schrift.
	 */
	font-family: var( --skv-grid-font, "Dancing Script", cursive );
	font-size: var( --skv-grid-size, clamp( 1.56rem, 18cqi, 3.12rem ) );
	font-weight: 400;
	line-height: 1.3;
	text-align: center;
	color: var( --skv-grid-color );
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

/* Browser ohne Container Queries (praktisch keine mehr im Einsatz,
   aber sauberer Fallback statt einer zu grossen Schrift). */
@supports not ( container-type: inline-size ) {
	.skv-grid-front .skv-tile .skv-tile-title,
	.skv-slider .skv-tile .skv-tile-title {
		font-size: var( --skv-grid-size, clamp( 1.8rem, 4.3vw, 2.88rem ) );
	}
}

.skv-tile-date {
	display: block;
	margin-top: -.5rem;
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .55;
}

/* --- Slider ab mehr als drei Karten --- */

.skv-slider {
	--skv-per: 3;
	position: relative;
	margin: clamp( 2rem, 6vw, 4rem ) 0;
	text-align: center;
}

.skv-track {
	display: flex;
	gap: var( --skv-gap );
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	/* Platz fuer den Fokusrahmen, sonst wird er beschnitten. */
	padding: 4px;
	margin: -4px;
}

.skv-track::-webkit-scrollbar {
	display: none;
}

.skv-track .skv-tile {
	flex: 0 0 calc( ( 100% - ( var( --skv-per ) - 1 ) * var( --skv-gap ) ) / var( --skv-per ) );
	scroll-snap-align: start;
}

/* Pfeile */

.skv-nav {
	position: absolute;
	top: calc( 50% - 2rem );
	transform: translateY( -50% );
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .82 );
	color: inherit;
	font: inherit;
	line-height: 1;
	cursor: pointer;
	opacity: .55;
	transition: opacity .2s ease, background .2s ease;
	z-index: 2;
}

.skv-nav:hover,
.skv-nav:focus-visible {
	opacity: 1;
	background: #fff;
}

.skv-nav[disabled] {
	opacity: 0;
	pointer-events: none;
}

.skv-nav--prev {
	left: -.5rem;
}

.skv-nav--next {
	right: -.5rem;
}

.skv-nav svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
}

/* Punkte */

.skv-dots {
	display: flex;
	justify-content: center;
	gap: .55rem;
	margin-top: 1.5rem;
}

.skv-dot {
	width: .5rem;
	height: .5rem;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	opacity: .4;
	cursor: pointer;
	transition: opacity .2s ease, background .2s ease;
}

.skv-dot.is-active {
	background: currentColor;
	opacity: .85;
}

.skv-slider:not( .is-scrollable ) .skv-nav,
.skv-slider:not( .is-scrollable ) .skv-dots {
	display: none;
}

/* --- Schmale Fenster ---
 *
 * Absichtlich KEIN Zwischenschritt auf 2 Spalten fuer 3 Karten: das
 * waere wieder die "2 + 1 alleine in der naechsten Zeile"-Situation.
 * Drei gleich breite Spalten funktionieren bis knapp vor Handybreite -
 * die Schrift schrumpft ja automatisch mit der Kachel mit. Erst bei
 * echten Handybreiten wird auf eine Spalte gestapelt. Nur bei vier
 * oder mehr Spalten (z. B. viele Karten ohne Slider) wird auf einem
 * Tablet zwischendurch auf drei begrenzt.
 */

@media ( max-width: 900px ) {
	.skv-grid-front {
		grid-template-columns: repeat( min( 3, var( --skv-grid-cols, 3 ) ), minmax( 0, 1fr ) );
	}

	.skv-slider {
		--skv-per: 2;
	}
}

@media ( max-width: 620px ) {
	.skv-grid-front {
		grid-template-columns: 1fr;
	}

	.skv-slider {
		--skv-per: 1;
	}

	.skv-nav {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.skv-track {
		scroll-behavior: auto;
	}
}


.skv-stand {
	font-size: .8em;
	opacity: .65;
	white-space: nowrap;
}

.skv-archive-list {
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
}

.skv-archive-list li {
	padding: .4rem 0;
	border-bottom: 1px solid currentColor;
	border-bottom-color: rgba( 0, 0, 0, .08 );
}

.skv-archive-list a {
	color: inherit;
}

@media ( prefers-reduced-motion: reduce ) {
	.skv-tile-img {
		transition: none;
	}

	.skv-tile:hover .skv-tile-img,
	.skv-tile:focus-visible .skv-tile-img {
		transform: none;
	}
}

/* --- Eingebettete Karte via [speisekarte_viewer] --- */

.skv-embed {
	margin: 2rem 0;
}

.skv-embed-title {
	margin: 0 0 .25rem;
}

.skv-embed-stand {
	margin: 0 0 1rem;
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .6;
}

.skv-embed-frame {
	display: block;
	width: 100%;
	min-height: 60vh;
	border: 1px solid rgba( 0, 0, 0, .12 );
	background: #fff;
}

.skv-embed-img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid rgba( 0, 0, 0, .12 );
}

.skv-embed-actions {
	margin-top: .85rem;
	font-size: .85rem;
}

.skv-embed-empty {
	padding: 1.25rem;
	border-left: 3px solid currentColor;
	opacity: .8;
}

/* --- Urlaub --- */

/*
 * Steht unter dem Kachel-Block, nicht anstelle davon - die Karten
 * bleiben sichtbar, dieser Satz macht nur zusaetzlich auf den Urlaub
 * aufmerksam.
 */
/*
 * Steht unter dem Kachel-Block, nicht anstelle davon - die Karten
 * bleiben sichtbar, dieser Satz macht nur zusaetzlich auf den Urlaub
 * aufmerksam. Der Kachel-Block hat selbst schon einen grosszuegigen
 * unteren Rand; hier wird nur ein Teil davon zurueckgenommen, damit
 * der Hinweis sichtbar zu den Karten gehoert statt weit darunter zu
 * schweben.
 */
.skv-grid-front + .skv-grid-vacation-wrap,
.skv-slider + .skv-grid-vacation-wrap {
	margin-top: clamp( -3rem, -5vw, -1.25rem );
}

.skv-grid-vacation-wrap {
	text-align: center;
}

.skv-grid-vacation {
	margin: 0;
	font-size: clamp( 1.1rem, 2.6vw, 1.5rem );
	font-weight: 700;
	letter-spacing: .01em;
	color: inherit;
}

.skv-grid-vacation-note {
	margin: .4rem 0 0;
	font-size: 1rem;
	color: inherit;
	opacity: .75;
}

.skv-embed--vacation {
	padding: 1.5rem;
	border-left: 3px solid currentColor;
}

.skv-embed-vac-title {
	font-size: 1.4rem;
	margin: 0 0 .5rem;
}

/* --- Eingebettete Karte am Handy --- */

.skv-embed-open {
	margin: 0;
}

.skv-embed-btn {
	display: block;
	width: 100%;
	padding: 1.35rem 1.5rem;
	text-align: center;
	text-decoration: none;
	color: inherit;
	border: 1.5px solid currentColor;
	border-radius: 3px;
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .16em;
}