/* ITX-Seitenaktionen - Struktur-Stylesheet
   ================================================================
   BEWUSST OHNE GESTALTUNG.

   Diese Datei enthaelt ausschliesslich Mechanik: Listen-Reset,
   Flex-/Grid-Grundgeruest, Icon-Groessenrechnung und den
   Icon-Platzhalter. Sie setzt KEINE Farben, KEINE Abstaende am
   Link, KEINE Schriftgroessen, KEINE Rahmen oder Radien.

   Alles Gestalterische gehoert ins projektspezifische CSS
   (Code-Snippet-Plugin). Eine fertige Vorlage fuer alle drei
   ueblichen Ausgabe-Typen liegt bei:

       examples/projekt-aktionen.css

   Diese Beispieldatei wird vom Modul NICHT geladen.

   Layout, Spalten und Icon-Groesse kommen pro Shortcode-Instanz aus
   einem eigenen <style>-Block (siehe class-aktionen-css.php) - dort
   greifen die konfigurierten Breakpoints. Diese Werte deshalb ueber
   Shortcode-Parameter setzen, nicht per CSS ueberschreiben: das
   Instanz-CSS adressiert die Element-ID und gewinnt gegen
   Klassenselektoren.

   Der ABSTAND zwischen den Aktionen dagegen ist reine CSS-Sache:
   hier als --aktionen-gap vorbelegt, im Projekt-CSS frei aenderbar
   (per gap-Eigenschaft oder eigener Variable).
   ================================================================ */

body {
	/* Nur Mechanik-Variablen - Gestaltung setzt das Projekt. */
	--aktionen-gap:         8px;   /* Abstand zwischen den Eintraegen */
	--aktionen-icon-size:   20px;  /* Basisgroesse des Icons          */
	--aktionen-icon-scale:  1;     /* Faktor je Box (Feld "Icon-Groesse %") */
	--aktionen-icon-gap:    8px;   /* Abstand Icon <-> Text           */
}

/* -----------------------------------------------------------------
   Liste
   ----------------------------------------------------------------- */
.itx-aktionen {
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--aktionen-gap);

	/* Fallback, falls das Instanz-CSS einmal nicht ankommt */
	display: flex;
	flex-direction: column;
}

/* -----------------------------------------------------------------
   Eintrag
   ----------------------------------------------------------------- */
.itx-aktionen__item {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;  /* verhindert Ueberlauf in Flex/Grid */
}

/* Horizontal bricht bei Platzmangel standardmaessig um. Bewusst als
   Klassenregel (nicht im Instanz-CSS), damit das Projekt-CSS es bei
   Bedarf auf "nowrap" setzen kann - z.B. im Kopfbereich, wo alles auf
   einer Zeile bleiben soll. */
.itx-aktionen--layout-horizontal {
	flex-wrap: wrap;
}

/* -----------------------------------------------------------------
   Link

   Nur Reset und Ausrichtungs-Mechanik. Padding, Hintergrund,
   Radius, Schrift und Farben kommen aus dem Projekt-CSS.
   ----------------------------------------------------------------- */
.itx-aktionen__link {
	display: inline-flex;
	align-items: center;
	gap: var(--aktionen-icon-gap);
	box-sizing: border-box;
	text-decoration: none;
	color: inherit;
}

/* Im Raster und bei ausrichtung="block" die volle Zellflaeche nutzen,
   damit alle Boxen einer Zeile gleich hoch werden. */
.itx-aktionen--layout-raster .itx-aktionen__link,
.itx-aktionen--ausrichtung-block .itx-aktionen__link {
	display: flex;
	width: 100%;
	height: 100%;
}

/* Sichtbarer Tastaturfokus - Barrierefreiheits-Untergrenze,
   im Projekt-CSS jederzeit ersetzbar. */
.itx-aktionen__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* -----------------------------------------------------------------
   Icon

   Die Huelle traegt die Groesse (Basiswert x Faktor der Box), das
   Medium fuellt sie aus. Farbe und Abstaende setzt das Projekt.
   ----------------------------------------------------------------- */
.itx-aktionen__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: calc(var(--aktionen-icon-size) * var(--aktionen-icon-scale, 1));
	height: calc(var(--aktionen-icon-size) * var(--aktionen-icon-scale, 1));
	font-size: 0;  /* kein Zeilenabstand unter Inline-Medien */
}

.itx-aktionen__icon-bild,
.itx-aktionen__icon-svg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Eingebettetes SVG uebernimmt die Textfarbe des Icon-Elements,
   sofern es keine eigene mitbringt. */
.itx-aktionen__icon-svg {
	fill: currentColor;
}

/* Platzhalter, damit Titel in einer Liste buendig bleiben,
   auch wenn einzelne Boxen kein Icon haben. */
.itx-aktionen__icon--leer {
	visibility: hidden;
}

/* Icon oberhalb des Titels: Textausrichtung mitziehen. */
.itx-aktionen--icon-oben .itx-aktionen__link {
	text-align: center;
}

/* -----------------------------------------------------------------
   Text
   ----------------------------------------------------------------- */
.itx-aktionen__text {
	display: inline-flex;
	flex-direction: column;
	min-width: 0;
}

.itx-aktionen__titel {
	display: block;
	min-width: 0;
}