/*
 * skiCHECK-Widgets.
 *
 * Drei Ebenen:
 *   1. Struktur - gilt immer, definiert nur Raster und Fluss.
 *   2. Skin ".skicheck-skin--skicheck" - bildet die Gestaltung der bisherigen
 *      Website nach (Werte aus den Computed Styles von skicheck.at uebernommen).
 *   3. Skin ".skicheck-skin--neu" - abgestimmt auf die neue Website
 *      skicheck.sunrise-web.net (Werte aus deren Elementor-Kit).
 *
 * Die Elementor-Style-Controls erzeugen Regeln mit hoeherer Spezifitaet und
 * ueberschreiben deshalb beide Ebenen punktuell.
 */

/* ============================================================
   1. Struktur
   ============================================================ */

.skicheck-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 24px;
	/* Ueber das Elementor-Control "Zeilenabstand" steuerbar. */
	row-gap: var(--skicheck-row-gap, 24px);
}

@media (max-width: 1024px) {
	.skicheck-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.skicheck-cards {
		grid-template-columns: 1fr;
	}
}

.skicheck-card {
	display: flex;
	flex-direction: column;
	padding: 24px;
	text-align: center;
	/* Elementor-Control "Hintergrund" setzt nur die Variable, siehe Skin "neu". */
	background-color: var(--skicheck-card-bg, transparent);
}

/* Kursbild ueber dem Kartenkopf. Festes Seitenverhaeltnis (Elementor-Control
   "Seitenverhaeltnis"), das Bild wird darin zugeschnitten - so bleiben die
   Karten gleich hoch, auch wenn die Odoo-Bilder leicht verschiedene Formate haben. */
.skicheck-card__media {
	aspect-ratio: var(--skicheck-image-ratio, 4 / 3);
	overflow: hidden;
}

/* Zwei Klassen: schlaegt ".elementor img { height: auto }". */
.skicheck-card .skicheck-card__image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.skicheck-card__head,
.skicheck-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Body fuellt die Resthoehe, damit Karten unterschiedlicher Laenge
   buendig abschliessen und die Buttons auf einer Linie sitzen. */
.skicheck-card__body {
	flex: 1;
}

.skicheck-card__head > *,
.skicheck-card__body > * {
	margin: 0;
}

.skicheck-card__duration {
	font-weight: 700;
	line-height: 1.1;
}

.skicheck-card__title {
	line-height: 1.2;
}

.skicheck-card__price {
	font-weight: 700;
}

.skicheck-card__notice,
.skicheck-matrix__notice {
	font-size: 0.85em;
	opacity: 0.75;
}

.skicheck-card__label {
	font-weight: 600;
}

/* Angabe mit vorangestelltem Icon: die Zeile als Gruppe zentriert,
   der Text darin linksbuendig - wie in der Checkliste der Website. */
.skicheck-card__meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7em;
	text-align: left;
}

.skicheck-card__icon {
	flex: 0 0 auto;
	width: 1.5em;
	height: 1.5em;
}

.skicheck-card__button {
	margin-top: auto;
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 24px;
	text-decoration: none;
}

/* Der Doppelpfeil gehoert zum Design "neue Website" und bleibt sonst verborgen. */
.skicheck-card__button-icon {
	display: none;
	flex: 0 0 auto;
	width: 16px;
	height: 13px;
}

/* Die Preistabelle scrollt in ihrem eigenen Container - der Seitenkoerper nie. */
.skicheck-matrix__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.skicheck-matrix {
	width: 100%;
	border-collapse: collapse;
}

.skicheck-matrix th,
.skicheck-matrix td {
	padding: 10px 14px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	text-align: center;
	white-space: nowrap;
}

.skicheck-matrix tbody th[scope="row"] {
	text-align: left;
	font-weight: 600;
	white-space: normal;
	min-width: 220px;
}

.skicheck-matrix--days tbody th[scope="row"] {
	min-width: 0;
}

/* Nur im Elementor-Editor sichtbar. */
.skicheck-notice {
	padding: 12px 16px;
	margin-bottom: 16px;
	border-left: 4px solid currentColor;
	font-size: 14px;
	line-height: 1.5;
}

.skicheck-notice--warning {
	color: #8a6100;
	background: #fff8e5;
}

.skicheck-notice--error {
	color: #a4262c;
	background: #fdf3f4;
}

/* Diagnosezeile: zeigt im Editor, woher die Daten stammen. */
.skicheck-notice--info {
	color: #2b4f6e;
	background: #eef4f9;
	font-size: 13px;
}

/* ============================================================
   2. Skin "Design skiCHECK"
   ============================================================ */

.skicheck-skin--skicheck {
	--sc-blue:    #006895;
	--sc-red:     #ee473c;
	--sc-red-alt: #d63a2f;
	--sc-card:    #f0f0f0;
	--sc-text:    #444444;
	--sc-head:    #9cb0b7;
	--sc-line:    #efefef;
	--sc-frame:   #cccccc;
	--sc-font:    "Fira Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Karten ---- */

.skicheck-skin--skicheck .skicheck-card {
	font-family: var(--sc-font);
	background: var(--skicheck-card-bg, var(--sc-card));
	color: var(--sc-text);
	padding: 9px;
	text-align: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.13);
}

/* Kopfband in skiCHECK-Blau, Dauer fett, Kursname mager - beides weiss. */
.skicheck-skin--skicheck .skicheck-card__head {
	background: var(--sc-blue);
	padding: 15px;
	gap: 0;
}

.skicheck-skin--skicheck .skicheck-card__duration,
.skicheck-skin--skicheck .skicheck-card__title {
	font-size: 19px;
	line-height: 27px;
	color: #ffffff;
}

.skicheck-skin--skicheck .skicheck-card__duration {
	font-weight: 700;
}

.skicheck-skin--skicheck .skicheck-card__title {
	font-weight: 400;
}

.skicheck-skin--skicheck .skicheck-card__body {
	padding: 0 15px 15px;
	gap: 10px;
}

.skicheck-skin--skicheck .skicheck-card__price {
	font-size: 36px;
	line-height: 46px;
	font-weight: 700;
	color: var(--sc-blue);
}

.skicheck-skin--skicheck .skicheck-card__meta {
	font-size: 15px;
	line-height: 22px;
	color: var(--sc-text);
}

.skicheck-skin--skicheck .skicheck-card__icon {
	color: var(--sc-blue);
}

.skicheck-skin--skicheck .skicheck-card__label {
	font-weight: 400;
}

.skicheck-skin--skicheck .skicheck-card__button {
	background: var(--sc-red);
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	line-height: 16px;
	text-transform: uppercase;
	padding: 11px 23px;
	border-radius: 2px;
	transition: background-color 0.15s ease;
}

.skicheck-skin--skicheck .skicheck-card__button:hover,
.skicheck-skin--skicheck .skicheck-card__button:focus-visible {
	background: var(--sc-red-alt);
	color: #ffffff;
}

/* ---- Tabellen ---- */

.skicheck-skin--skicheck .skicheck-matrix {
	font-family: var(--sc-font);
	font-size: 15px;
	line-height: 22px;
	color: var(--sc-text);
	border: 1px solid var(--sc-frame);
}

.skicheck-skin--skicheck .skicheck-matrix thead th {
	background: var(--sc-head);
	color: #ffffff;
	font-weight: 400;
	border: 1px solid var(--sc-line);
	padding: 5px 10px;
}

.skicheck-skin--skicheck .skicheck-matrix tbody th,
.skicheck-skin--skicheck .skicheck-matrix tbody td {
	background: #ffffff;
	color: var(--sc-text);
	font-weight: 400;
	border: 1px solid var(--sc-line);
	padding: 5px 10px;
}

/* Die Tagesstaffel der Gruppenkurse hat keine Kopfzeile - dort uebernimmt
   die Zeilenbeschriftung die Rolle des Kopfes. */
.skicheck-skin--skicheck .skicheck-matrix--days tbody th[scope="row"] {
	background: var(--sc-head);
	color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
	.skicheck-skin--skicheck .skicheck-card__button {
		transition: none;
	}
}

/* ============================================================
   3. Skin "Design skiCHECK – neue Website"
   Abgeleitet aus dem Elementor-Kit von skicheck.sunrise-web.net:
   Jost, Rot #BF1515, Navy #212850, um -6 Grad gedrehte Etiketten,
   schwere kursive Versalien, Doppelpfeil in Buttons, keine Rundungen.
   ============================================================ */

.skicheck-skin--neu {
	--sn-red:       var(--sdd-primary-color, #bf1515);
	--sn-red-dark:  #9e1010;
	--sn-navy:      var(--sdd-secondary-color, #212850);
	--sn-navy-soft: rgba(33, 40, 80, 0.06);
	--sn-line:      rgba(33, 40, 80, 0.14);
	--sn-white:     #ffffff;
	--sn-font:      "Jost", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Karten ---- */

/*
 * Einheitliche Reihen per Subgrid.
 *
 * Jede Karte belegt acht Zeilen des aeusseren Rasters und uebernimmt dessen
 * Zeilenhoehen. Dadurch stehen Bild, Titel, Preis, Startzeiten und Button in
 * allen Karten einer Reihe auf derselben Linie - auch wenn ein Titel dreizeilig
 * ist. Fehlt ein Element (z. B. Teilnehmerzahl), bleibt seine Zeile leer.
 *
 *   1 Bild  2 Etikett  3 Titel  4 Preis  5 Preishinweis  6 Personen  7 Startzeiten  8 Button
 *
 * head und body werden dafuer mit display: contents aufgeloest, damit ihre
 * Kinder direkt im Kartenraster liegen.
 */
/*
 * Reihenabstand: Ein row-gap des aeusseren Rasters wuerde zwischen alle sieben
 * Innenzeilen jeder Karte fallen. Deshalb row-gap 0 und der Abstand als
 * margin-top jeder Karte. Das oberste Etikett bekommt ueber den negativen
 * Rand des Rasters immer genau 22px Luft, unabhaengig vom gewaehlten Abstand.
 * Standard 56px: genug fuer das schraege Etikett der naechsten Reihe.
 */
.skicheck-skin--neu.skicheck-cards {
	row-gap: 0;
	margin-top: calc(22px - var(--skicheck-row-gap, 56px));
}

.skicheck-skin--neu .skicheck-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: subgrid;
	grid-row: span 9;
	row-gap: 0;
	margin-top: var(--skicheck-row-gap, 56px);
	font-family: var(--sn-font);
	/* Die navy Flaeche liegt auf ::before und beginnt erst unter dem Bild. Karten
	   ohne Kursbild bleiben dort frei, statt eine leere Flaeche zu zeigen. */
	background: none;
	isolation: isolate;
	color: var(--sn-white);
	padding: 0 28px;
	text-align: left;
}

.skicheck-skin--neu .skicheck-card::before {
	content: "";
	grid-row: 2 / -1;
	grid-column: 1;
	z-index: -1;
	margin: 0 -28px;
	background: var(--skicheck-card-bg, var(--sn-navy));
}

.skicheck-skin--neu .skicheck-card__head,
.skicheck-skin--neu .skicheck-card__body {
	display: contents;
}

/* Alle Teile fest in die eine Spalte: Ohne Angabe wichen sie der Flaeche
   (::before belegt die Zeilen 2 bis 8) in eine zweite Spalte aus. */
.skicheck-skin--neu .skicheck-card__media,
.skicheck-skin--neu .skicheck-card__head > *,
.skicheck-skin--neu .skicheck-card__body > * {
	grid-column: 1;
}

/* Kursbild ueber die volle Kartenbreite, das Etikett ragt von unten hinein. */
.skicheck-skin--neu .skicheck-card__media {
	grid-row: 1;
	margin: 0 -28px;
}

/* Karten ohne Button (Gruppenkurse ohne Buchungslink) brauchen Luft unten. */
.skicheck-skin--neu .skicheck-card:not(:has(.skicheck-card__button)) {
	padding-bottom: 28px;
}

.skicheck-skin--neu .skicheck-card:not(:has(.skicheck-card__button))::before {
	margin-bottom: -28px;
}

/* Markenzeichen der neuen Website: das schraege Etikett. Es sitzt wie bisher
   an der Oberkante der navy Flaeche und ueberlappt damit Bild und Flaeche. */
.skicheck-skin--neu .skicheck-card__duration {
	grid-row: 2;
	justify-self: start;
	align-self: start;
	display: inline-block;
	margin: -18px 0 0 -10px;
	padding: 10px 22px;
	background: var(--sn-red);
	color: var(--sn-white);
	font-size: 20px;
	line-height: 20px;
	font-weight: 900;
	font-style: italic;
	text-transform: uppercase;
	transform: rotate(-6deg);
	transform-origin: left center;
}

.skicheck-skin--neu .skicheck-card__title {
	grid-row: 3;
	align-self: start;
	margin-top: 18px;
	color: var(--sn-white);
	font-size: 22px;
	line-height: 26px;
	font-weight: 900;
	font-style: italic;
	text-transform: uppercase;
}

.skicheck-skin--neu .skicheck-card__price {
	grid-row: 4;
	margin-top: 16px;
	color: var(--sn-white);
	font-size: 44px;
	line-height: 48px;
	font-weight: 900;
	font-style: italic;
	font-variant-numeric: tabular-nums;
}

.skicheck-skin--neu .skicheck-card__notice {
	grid-row: 5;
	margin-top: 4px;
	color: var(--sn-white);
	font-style: italic;
}

.skicheck-skin--neu .skicheck-card__meta {
	grid-row: 6;
	align-self: start;
	margin-top: 10px;
	justify-content: flex-start;
	color: rgba(255, 255, 255, 0.88);
	font-size: 16px;
	line-height: 26px;
	font-weight: 300;
	font-style: italic;
}

/* Zweite Zusatzzeile: Startzeiten auf den Kurskarten, Dauer auf den Bloecken. */
.skicheck-skin--neu .skicheck-card__meta--times,
.skicheck-skin--neu .skicheck-card__meta--duration {
	grid-row: 7;
}

/* Dritte Zusatzzeile, nur bei den Gruppenkurs-Bloecken belegt. Auf den
   Kurskarten bleibt diese Rasterzeile leer und damit ohne Hoehe. */
.skicheck-skin--neu .skicheck-card__meta--participants {
	grid-row: 8;
}

.skicheck-skin--neu .skicheck-card__label {
	font-weight: 500;
}

.skicheck-skin--neu .skicheck-card__icon {
	color: var(--sn-white);
	opacity: 0.6;
	width: 1.35em;
	height: 1.35em;
}

/* Buchungsbutton als roter Balken ueber die volle Kartenbreite, immer in
   der letzten Rasterzeile und damit buendig am unteren Kartenrand. */
.skicheck-skin--neu .skicheck-card__button {
	grid-row: 9;
	align-self: end;
	justify-content: space-between;
	margin: 22px -28px 0;
	padding: 16px 28px;
	background: var(--sn-red);
	color: var(--sn-white);
	font-size: 18px;
	line-height: 20px;
	font-weight: 900;
	font-style: italic;
	text-transform: uppercase;
	border-radius: 0;
	transition: background-color 0.2s ease;
}

.skicheck-skin--neu .skicheck-card__button-icon {
	display: block;
	transition: transform 0.2s ease;
}

.skicheck-skin--neu .skicheck-card__button:hover,
.skicheck-skin--neu .skicheck-card__button:focus-visible {
	background: var(--sn-red-dark);
	color: var(--sn-white);
}

.skicheck-skin--neu .skicheck-card__button:hover .skicheck-card__button-icon,
.skicheck-skin--neu .skicheck-card__button:focus-visible .skicheck-card__button-icon {
	transform: translateX(5px);
}

.skicheck-skin--neu .skicheck-card__button:focus-visible {
	outline: 3px solid var(--sn-white);
	outline-offset: -6px;
}

/* ---- Tabellen ---- */

.skicheck-skin--neu .skicheck-matrix {
	font-family: var(--sn-font);
	font-size: 16px;
	line-height: 24px;
	color: var(--sn-navy);
	border: 0;
}

.skicheck-skin--neu .skicheck-matrix thead th {
	background: var(--sn-navy);
	color: var(--sn-white);
	font-size: 16px;
	font-weight: 900;
	font-style: italic;
	text-transform: uppercase;
	padding: 14px 16px;
	border: 0;
}

/* Die Spalte "jeder verspaetete Tag" hebt sich rot ab. */
.skicheck-skin--neu .skicheck-matrix thead th.skicheck-matrix__extra {
	background: var(--sn-red);
	white-space: normal;
	min-width: 120px;
}

.skicheck-skin--neu .skicheck-matrix tbody tr {
	background: var(--sn-white);
}

.skicheck-skin--neu .skicheck-matrix tbody tr:nth-child(even) {
	background: var(--sn-navy-soft);
}

.skicheck-skin--neu .skicheck-matrix tbody th,
.skicheck-skin--neu .skicheck-matrix tbody td {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--sn-line);
	padding: 12px 16px;
}

.skicheck-skin--neu .skicheck-matrix tbody th[scope="row"] {
	font-weight: 600;
	font-style: italic;
}

.skicheck-skin--neu .skicheck-matrix tbody td {
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

.skicheck-skin--neu .skicheck-matrix tbody td.skicheck-matrix__extra {
	color: var(--sn-red);
	font-weight: 600;
}

/* Tagesstaffel der Gruppenkurse: Zeilenbeschriftung als navy Kopf. */
.skicheck-skin--neu .skicheck-matrix--days tbody th[scope="row"] {
	background: var(--sn-navy);
	color: var(--sn-white);
	font-weight: 900;
	text-transform: uppercase;
}

.skicheck-skin--neu .skicheck-matrix--days tbody td {
	font-size: 20px;
	font-weight: 900;
	font-style: italic;
}

.skicheck-skin--neu .skicheck-matrix__notice {
	font-family: var(--sn-font);
	font-style: italic;
	color: var(--sn-navy);
	opacity: 0.7;
	margin-top: 10px;
}

/* ---- Mobil: kleinere Etiketten wie auf der Website ---- */

@media (max-width: 767px) {
	.skicheck-skin--neu .skicheck-card__duration {
		padding: 6px 14px;
		font-size: 16px;
		line-height: 16px;
		/* Kein Ueberstand nach links: einspaltig sitzt die Karte am Bildschirmrand. */
		margin: -14px 0 0 0;
	}

	.skicheck-skin--neu .skicheck-card__price {
		font-size: 36px;
		line-height: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.skicheck-skin--neu .skicheck-card__button,
	.skicheck-skin--neu .skicheck-card__button-icon {
		transition: none;
	}
}