/* 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.

   Das BASIS-Layout (Anzeigeart, Richtung, Icon-Position, Raster-Spalten)
   kommt aus den Klassen weiter unten - es greift damit immer, sobald diese
   Datei geladen ist, auch im Seiten-Builder. Der Instanz-<style>-Block
   (siehe class-aktionen-css.php) ergaenzt nur noch die responsiven
   Breakpoints. Layout, Spalten und Icon-Position 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 */
}

/* -----------------------------------------------------------------
   Layout aus den KLASSEN am <ul>
   -----------------------------------------------------------------
   Anzeigeart, Richtung und Icon-Position kommen aus den Klassen -
   damit das Layout auch dann greift, wenn der Instanz-<style>-Block
   einmal nicht ankommt: im Seiten-Builder (z.B. Elementor-Editor),
   bei Caching-/Minify-Plugins, die Inline-CSS auslagern, oder unter AMP.

   Der Instanz-<style>-Block ergaenzt nur noch die responsiven Break-
   points (Tablet/Mobile). Die Desktop-Spaltenzahl des Rasters kommt aus
   der Variable --aktionen-cols, die der Shortcode als style-Attribut an
   das <ul> schreibt. */
.itx-aktionen--layout-vertikal {
	flex-direction: column;
}

.itx-aktionen--layout-horizontal {
	flex-direction: row;
	/* Horizontal bricht bei Platzmangel standardmaessig um. Per Projekt-CSS
	   auf "nowrap" setzbar - z.B. im Kopfbereich, wo alles auf einer Zeile
	   bleiben soll. */
	flex-wrap: wrap;
}

.itx-aktionen--layout-raster {
	display: grid;
	grid-template-columns: repeat(var(--aktionen-cols, 3), minmax(0, 1fr));
}

/* Icon-Position im Link (nicht responsiv -> rein klassenbasiert). */
.itx-aktionen--icon-links  .itx-aktionen__link { flex-direction: row; }
.itx-aktionen--icon-rechts .itx-aktionen__link { flex-direction: row-reverse; }
.itx-aktionen--icon-oben   .itx-aktionen__link { flex-direction: column; }

/* -----------------------------------------------------------------
   Ausrichtung der Boxen (horizontal)
   -----------------------------------------------------------------
   Klassenbasiert (greift auch im Seiten-Builder), gesetzt per
   Shortcode ausrichtung="zentriert|links|rechts". Wirkt je Layout auf
   die passende Achse. Bei "zentriert" schrumpfen einzelne Boxen auf
   ihre Inhaltsbreite und werden mittig gesetzt - auch eine EINZELNE Box.
   Ohne Angabe bleibt das bisherige Verhalten (volle Breite / Projekt-CSS). */

/* Vertikal (Spalte): Querachse = horizontal */
.itx-aktionen--layout-vertikal.itx-aktionen--ausrichtung-zentriert { align-items: center; }
.itx-aktionen--layout-vertikal.itx-aktionen--ausrichtung-links     { align-items: flex-start; }
.itx-aktionen--layout-vertikal.itx-aktionen--ausrichtung-rechts    { align-items: flex-end; }

/* Horizontal (Reihe): Hauptachse = horizontal */
.itx-aktionen--layout-horizontal.itx-aktionen--ausrichtung-zentriert { justify-content: center; }
.itx-aktionen--layout-horizontal.itx-aktionen--ausrichtung-links     { justify-content: flex-start; }
.itx-aktionen--layout-horizontal.itx-aktionen--ausrichtung-rechts    { justify-content: flex-end; }

/* Raster: Boxen innerhalb ihrer Zellen ausrichten */
.itx-aktionen--layout-raster.itx-aktionen--ausrichtung-zentriert { justify-items: center; }
.itx-aktionen--layout-raster.itx-aktionen--ausrichtung-links     { justify-items: start; }
.itx-aktionen--layout-raster.itx-aktionen--ausrichtung-rechts    { justify-items: end; }

/* -----------------------------------------------------------------
   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 die volle Zellflaeche nutzen, damit alle Boxen einer Zeile
   gleich hoch werden. */
.itx-aktionen--layout-raster .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;
}