/* Zusammengesetzter Selektor statt .uni-kachel--auto-height allein: braucht hoehere
   Spezifitaet als .uni-kachel__content (height: 100%) weiter unten, sonst gewinnt bei
   gleicher Spezifitaet die spaeter im Stylesheet stehende Regel und die Kachel wird
   trotz deaktivierter "Hoehe an Reihe anpassen"-Option auf Reihenhoehe gezogen. */
.uni-kachel__content.uni-kachel--auto-height {
    height: auto;
}

.uni-kachel__content {
    background-color: #fff;
    box-shadow: 1px 1px 6px rgba(127, 127, 127, 0.3);
    height: 100%;
    display: flex;
    flex-direction: column;

    color: inherit !important;
    text-decoration: none !important;
}

.uni-kachel__content:hover,
.uni-kachel__content:focus,
.uni-kachel__content:active {
    color: inherit !important;
    text-decoration: none !important;
}

/*
 * Hintergrund "Dunkel": bewusst nur diese beiden festen Zustaende (kein
 * Colorpicker) -- Nutzer-Entscheidung. Braucht eigenes !important + hoehere
 * Spezifitaet (zwei Klassen), um sowohl das "color: inherit !important" der
 * Basisregel als auch dessen :hover/:focus/:active-Variante zu ueberschreiben
 * (sonst wuerde die Schrift beim Hover wieder auf die Farbe der Umgebung
 * zurueckfallen statt auf schnee-base zu bleiben).
 */
.uni-kachel__content.uni-kachel--dark {
    background-color: #222222;
    color: #f8f8f8 !important;
}

.uni-kachel__content.uni-kachel--dark:hover,
.uni-kachel__content.uni-kachel--dark:focus,
.uni-kachel__content.uni-kachel--dark:active {
    color: #f8f8f8 !important;
}

/*
 * Ueberschriften im Kachel-Inhalt (frei per InnerBlocks zusammengestellt)
 * erben "color: #f8f8f8" von .uni-kachel--dark oben nicht automatisch --
 * viele Themes setzen fuer h1-h6/.wp-block-heading eine eigene, explizite
 * Textfarbe (z. B. theme.json "styles.elements.heading"), die Vererbung vom
 * umgebenden Container aushebelt. Sowohl rohe Tag-Selektoren als auch die
 * WP-Blockklasse abgedeckt, da Themes das unterschiedlich umsetzen -- dieses
 * Plugin laeuft ueber mehrere verschiedene Themes.
 */
.uni-kachel__content.uni-kachel--dark h1,
.uni-kachel__content.uni-kachel--dark h2,
.uni-kachel__content.uni-kachel--dark h3,
.uni-kachel__content.uni-kachel--dark h4,
.uni-kachel__content.uni-kachel--dark h5,
.uni-kachel__content.uni-kachel--dark h6,
.uni-kachel__content.uni-kachel--dark .wp-block-heading {
    color: #f8f8f8 !important;
}

/* Kein Nachfahren-Selektor (Leerzeichen): .uni-kachel--horizontal sitzt auf
   demselben Element wie .uni-kachel__content (kein separater aeusserer Wrapper
   mehr, siehe UniplusKachelRenderer::render()), anders als z. B. bei
   SeminarKachel mit echtem verschachteltem Wrapper. */
.uni-kachel__content.uni-kachel--horizontal {
    flex-direction: row;
    gap: 1rem;
}

.uni-kachel__media {
    position: relative;
    /* margin-bottom: 1rem; */
}

.uni-kachel--horizontal .uni-kachel__media {
    flex: 0 0 auto;
    margin-bottom: 0;
    width: 200px;
}

.uni-kachel__media--image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Vertikal: ohne festes Seitenverhaeltnis wuerde ein hochformatiges Bild (z. B.
   2:3) die Kachel ueberproportional in die Hoehe ziehen, da die Bildhoehe sonst
   allein aus der intrinsischen Breite/Hoehe des Originalbilds folgt. Gleiches
   Muster wie teaser-tile im hwk-blocks-Plugin (`tw:aspect-teaser tw:object-cover`,
   siehe blocks/teaser-tile/render.php): festes Seitenverhaeltnis + Crop statt
   freier Bildhoehe. --aspect-teaser (5/3) stammt aus dem Theme (chatty3blocks/src/
   styles/theme.css); Fallback 5/3 direkt im var(), falls das aktive Theme die
   Variable nicht definiert. */
.uni-kachel__content:not(.uni-kachel--horizontal) .uni-kachel__media--image img {
    aspect-ratio: var(--aspect-teaser, 5 / 3);
    object-fit: cover;
}

.uni-kachel--horizontal .uni-kachel__media--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.uni-kachel__media--icon {
    display: flex;
    align-items: flex-start;
    padding: 15px;
}

.uni-kachel--horizontal .uni-kachel__media--icon {
    align-items: center;
    justify-content: center;
}

/*
 * Icon-Ausrichtung (links = Standard, kein Zusatzklassen-Aufwand noetig).
 * Zusammengesetzter Selektor + Position NACH der horizontal-Regel oben, damit
 * die Ausrichtung explizit auch im horizontalen Layout greift (dessen
 * justify-content: center sonst mit gleicher Spezifitaet zuletzt gewinnen wuerde).
 */
.uni-kachel__media--icon.uni-kachel__media--icon-align-center {
    justify-content: center;
}

.uni-kachel__media--icon.uni-kachel__media--icon-align-right {
    justify-content: flex-end;
}

/* Auf allen Themes automatisch var(--wp--preset--color--primary); auf
   uni-hwk-redesign-blocks per wp_add_inline_style() wieder auf die
   urspruengliche feste Farbe zurueckgesetzt (siehe UniplusKachelBlock.php). */
.uni-kachel__media--icon .bi,
.uni-kachel__media--icon .glyphicon {
    color: var(--wp--preset--color--primary, #448dde);
    display: block !important;
}

.uni-kachel__media--icon .bi {
    font-size: 96px;
    line-height: 63px;
}

/* Das aktive Theme definiert fuer .glyphicon standardmaessig float:left (und eine
   feste Breite/Textausrichtung fuer sein eigenes 32px-Icon-Raster) -- ohne
   Override wuerde das HWK-Icon dadurch immer oben links haengen bleiben, statt
   sich wie das Bootstrap-Icon normal in .uni-kachel__media einzuordnen. Ausserdem
   faellt das HWK-Icon-Glyph selbst optisch groesser aus als ein Bootstrap-Icon
   bei gleicher font-size (mehr Weissraum im Glyph) -- font-size/padding werden
   deshalb fuer .glyphicon eigens reduziert, damit beide Icon-Sets in der Kachel
   optisch gleich gross wirken.
*/
.uni-kachel__media--icon .glyphicon {
    float: none !important;
    width: auto !important;
    text-align: left !important;
    padding: 26px;
    font-size: 44px;
}

.uni-kachel__body {
    flex: 1 1 auto;
    padding: 15px;
}

/* Vertikal + Icon: .uni-kachel__media--icon bringt bereits eigenes Padding
   oben mit (siehe oben) -- ohne diese Korrektur wuerde der Abstand zum Icon
   sich mit dem Top-Padding von .uni-kachel__body verdoppeln. Nur fuer die
   vertikale Anordnung relevant, da :not(.uni-kachel--horizontal) hier
   ausschliesst. */
.uni-kachel__content:not(.uni-kachel--horizontal) .uni-kachel__media--icon + .uni-kachel__body {
    padding: 0 15px 15px 15px;
}