/**
 * @package     Joomsite.Component.Academy
 * @subpackage  com_academy
 *
 * Public profile listing + detail styling.
 *
 * Image sizing is enforced here so uploads of any dimension render
 * uniformly: a fixed 4:5 portrait ratio with object-fit: cover. This is
 * the single source of truth for the "einheitliche Bildgröße".
 *
 * Farben/Typografie folgen dem Astropraxis-Template (Helix Ultimate).
 * Diese Variablen sind die zentrale Quelle; das Template kann sie
 * überschreiben, da dort dieselben --ap-*-Variablen definiert sind.
 */

/*
 * Einheitliche Rundungen.
 *
 * Bewusst in JEDER Stylesheet-Datei wiederholt, nicht nur in einer.
 *
 * Die Ansichten laden unterschiedliche Dateien: portal.css im
 * Tutorenportal, profiles.css bei den Profilen, requests.css bei den
 * Anfragen. Standen die Variablen nur in forms.css, waren sie auf den
 * übrigen Seiten unbekannt — und eine unbekannte Variable ohne Ersatzwert
 * ergibt GAR KEINE Rundung. Genau deshalb waren die Knöpfe plötzlich
 * eckig.
 *
 * Zusätzlich trägt jede Verwendung einen Ersatzwert, falls diese Zeilen
 * einmal überschrieben werden.
 *
 *   btn / field  999px  -> der Browser begrenzt auf die halbe Höhe,
 *                          das ergibt immer eine runde Seite.
 *   box            8px  -> Karten und Kästen.
 *   textarea      16px  -> mehrzeilige Felder; voll rund sähe dort
 *                          aus wie eine Kapsel.
 */
:root {
    --academy-radius-btn: 999px;
    --academy-radius-field: 999px;
    --academy-radius-box: 8px;
    --academy-radius-textarea: 16px;
}

:root {
    --academy-primary: var(--ap-primary, #432333);
    --academy-accent: var(--ap-accent, #ef4339);
    --academy-btn: var(--ap-topbar-btn, #0e48b5);
    --academy-muted: var(--ap-muted, #93838b);
    --academy-border: var(--ap-border, #e5e5ea);
    --academy-radius: var(--ap-radius, 4px);
    --academy-font: var(--ap-font, 'Open Sans', system-ui, sans-serif);
}

/* ---- Grid of profile cards -------------------------------------- */
.academy-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 2rem 1.75rem;
    margin: 1.5rem 0;
}

/*
 * Feste Spaltenzahl aus dem Menüpunkt.
 *
 * Erst ab 700px, damit die Vorgabe eine Obergrenze bleibt: Auf schmalen
 * Bildschirmen gilt weiterhin der automatische Umbruch, sonst stünden dort
 * fünf Karten nebeneinander.
 */
@media (min-width: 700px) {
    .academy-profile-grid[style*="--academy-grid-columns"] {
        grid-template-columns: repeat(var(--academy-grid-columns), 1fr);
    }
}

.academy-profile-card {
    text-align: left;
}

.academy-profile-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Uniform image box: 4:5 portrait, cover-cropped, centred. */
.academy-profile-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #f0f0f0;
}

.academy-profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.academy-profile-photo-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e8e8e8, #d5d5d5);
}

/* ---- Availability badge ("Frei") -------------------------------- */
.academy-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 4px 14px;
    font-size: .85rem;
    font-weight: 600;
    border-radius: var(--academy-radius-btn, 999px);
    color: #fff;
    line-height: 1.4;
    z-index: 2;
}

.academy-badge-free {
    background: var(--academy-btn);
}

.academy-badge-future {
    background: #6c7a89;
    font-weight: 500;
}

/* ---- Card caption: weißer Kasten, der über das Bild ragt -------- */
.academy-profile-caption {
    position: relative;
    margin: -3.5rem 1.25rem 0;
    background: #fff;
    padding: 1rem 1.25rem 1.1rem;
    box-shadow: 0 4px 18px rgba(67, 35, 51, .1);
    z-index: 1;
    text-align: left;
}

.academy-profile-name {
    display: block;
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.2;
    color: var(--academy-primary);
    /* Abstand nach dem Namen, bevor Untertitel und Ort folgen. */
    margin-block-end: .5rem;
}

/* Vor- und Nachname je eine Zeile.
   Als Blockelemente statt <br>: So bleibt der Umbruch auch dann an der
   richtigen Stelle, wenn ein Name lang ist. */
.academy-profile-firstname,
.academy-profile-lastname {
    display: block;
}

/* PLZ und Ort unter dem Untertitel — zurückhaltend, es ist eine
   Nebenangabe. */
.academy-profile-location {
    display: block;
    margin-block-start: .15rem;
    font-size: .9375rem;
    color: #666;
}

.academy-profile-subtitle {
    display: block;
    font-size: 1rem;
    color: #444;
    margin-top: .15rem;
}

.academy-profile-position {
    display: block;
    font-size: .95rem;
    color: var(--academy-muted);
    margin-top: .5rem;
}

/* ---- Detail page ------------------------------------------------- */
.academy-profile-detail {
    max-width: 960px;
    margin: 0 auto;
}

.academy-profile-back {
    margin-bottom: 1.5rem;
}

/* Zurück-Knopf wie auf der bisherigen Seite: größer, in der Hausfarbe,
   mit vorangestelltem Pfeil. Der Pfeil entsteht aus CSS — der
   Zeichensatz mit Symbolen wird im Frontend nicht geladen. */
.academy-profile-back a {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1.6rem;
    border: 1px solid var(--academy-primary, #432333);
    border-radius: var(--academy-radius-btn, 999px);
    text-decoration: none;
    color: var(--academy-primary, #432333);
    font-size: 1rem;
    font-weight: 600;
}

.academy-profile-back a::before {
    content: "";
    inline-size: 1.1rem;
    block-size: 1.1rem;
    flex: 0 0 auto;
    background: currentColor;
    /* Pfeil nach links als Maske — skaliert mit der Schriftgröße. */
    -webkit-mask: no-repeat center / contain
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11H7.8l5.6-5.6L12 4l-8 8 8 8 1.4-1.4L7.8 13H20z"/></svg>');
    mask: no-repeat center / contain
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11H7.8l5.6-5.6L12 4l-8 8 8 8 1.4-1.4L7.8 13H20z"/></svg>');
}

.academy-profile-back a:hover {
    background: var(--academy-primary, #432333);
    color: #fff;
}

/* Zweispalten-Layout: Text links, Bild + Zitat rechts. */
.academy-profile-detail-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2.5rem;
    align-items: start;
}

.academy-profile-detail-main {
    min-width: 0;
}

/* Position steht ÜBER dem Namen und trägt die Akzentfarbe — sie ordnet
   die Person ein, bevor man den Namen liest. */
.academy-profile-detail-position {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #7a4f8c;
}

.academy-profile-detail-subtitle {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
    font-weight: 500;
    color: #555;
}

.academy-profile-detail-name {
    margin: 0 0 1.5rem;
    color: var(--academy-primary, #432333);
    font-size: 2.2rem;
    line-height: 1.2;
}

/* Fließtext etwas größer und luftiger — auf der bisherigen Seite war er
   deutlich besser lesbar als in der ersten Fassung hier. */
.academy-profile-detail-desc {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #3a3a3a;
}

.academy-profile-detail-desc p {
    margin: 0 0 1.25rem;
}

.academy-profile-detail-desc p:last-child {
    margin-bottom: 0;
}

/* Rechte Spalte: Bild + Zitat. */
.academy-profile-detail-aside {
    position: relative;
}

.academy-profile-detail-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--academy-radius-box, 8px);
    background: #f0f0f0;
}

.academy-profile-detail-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.academy-profile-detail-motto {
    margin: 1rem 0 0;
    padding: 1rem 1.25rem;
    background: #f6f2ee;
    border-radius: var(--academy-radius-box, 8px);
    font-size: .92rem;
    font-style: italic;
    color: #6a5a50;
    line-height: 1.5;
}

/* Kontaktdaten unter dem Bild.
   Auf der bisherigen Seite in derselben Schriftgröße wie der Fließtext,
   die Angaben unterstrichen — beides hier übernommen. */
.academy-profile-detail-contact {
    margin-top: 1.25rem;
    font-size: 1rem;
    line-height: 1.7;
    color: #3a3a3a;
}

.academy-profile-detail-contact .academy-contact-row {
    margin-bottom: .1rem;
}

/* "E-Mail:" und "Telefon:" sind Beschriftungen, keine Angaben — sie
   bleiben unauffällig und ohne Unterstreichung. */
.academy-profile-detail-contact .academy-contact-label {
    color: #3a3a3a;
    margin-right: .35rem;
}

.academy-profile-detail-contact a {
    color: #3a3a3a;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
}

.academy-profile-detail-contact a:hover {
    color: var(--academy-primary, #432333);
}

/* Aktions-Buttons nach Template-Vorgabe (Akzentfarbe, 2px Rahmen,
   Radius 4px). Zweizeilig = untereinander gestapelt. */
.academy-profile-detail-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
    margin-top: 2rem;
}

.academy-profile-detail-actions .btn {
    display: block;
    width: 100%;
    padding: .625rem 1.5rem;
    border: 2px solid var(--academy-accent);
    border-radius: var(--academy-radius-btn, 999px);
    background: var(--academy-accent);
    color: #fff;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    transition: background .2s, color .2s;
}

.academy-profile-detail-actions .btn:hover,
.academy-profile-detail-actions .btn-primary:hover,
.academy-profile-detail-actions .btn-secondary:hover,
.academy-profile-detail-actions .btn-outline-secondary:hover {
    background: #fff;
    color: var(--academy-accent);
}

.academy-profile-detail-actions .btn-primary,
.academy-profile-detail-actions .btn-secondary,
.academy-profile-detail-actions .btn-outline-secondary {
    background: var(--academy-accent);
    color: #fff;
}

/* ---- Responsive -------------------------------------------------- */
/* Tablet: etwas kleinere Kacheln, weiter mehrspaltig. */
@media (max-width: 782px) {
    .academy-profile-grid {
        grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
        gap: 1.25rem;
    }
}

/* Handy: 2 Kacheln pro Reihe, Detail einspaltig. */
@media (max-width: 575px) {
    .academy-profile-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .academy-profile-caption {
        margin-right: .4rem;
        padding: .7rem .85rem .8rem;
    }

    .academy-profile-name {
        font-size: 1.05rem;
    }

    .academy-profile-detail-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Bild zuerst, dann Text (wie im mobilen Fluss üblich). */
    .academy-profile-detail-aside {
        order: -1;
        max-width: 320px;
        margin: 0 auto;
    }
}

/* ---- Gruppierung nach (Unter-)Kategorie ------------------------- */
.academy-category-group {
    margin-bottom: 3rem;
}

.academy-category-group-title {
    font-size: 1.5rem;
    color: var(--academy-primary, #432333);
    margin: 0 0 .5rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid #eee;
}

.academy-category-group-desc {
    color: #555;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* Beschreibung der Kategorie (1.9.2) — oberhalb der Karten, mit Abstand,
   damit sie nicht an ihnen klebt. Breite begrenzt: Lange Zeilen über die
   volle Rasterbreite sind schwer zu lesen. */
.academy-category-desc {
    max-inline-size: 46rem;
    margin-block-end: 2rem;
    line-height: 1.6;
}

.academy-category-desc > :first-child { margin-block-start: 0; }
.academy-category-desc > :last-child  { margin-block-end: 0; }

/* ---- Breite des Inhaltsbereichs (1.17.0) ----
   Im Zwölfer-Raster gerechnet, damit die Angabe im Menüpunkt der
   gewohnten Bootstrap-Logik entspricht. 12 = volle Breite. */
.academy-category.academy-grid-12 { max-inline-size: 100%; }
.academy-category.academy-grid-9  { max-inline-size: 75%; }
.academy-category.academy-grid-8  { max-inline-size: 66.6667%; }
.academy-category.academy-grid-6  { max-inline-size: 50%; }

/* Auf schmalen Geräten immer volle Breite — 50% auf dem Telefon wäre
   unlesbar. */
@media (max-width: 900px) {
    .academy-category[class*="academy-grid-"] {
        max-inline-size: 100%;
    }
}

.academy-category-modules {
    margin-block-end: 1.5rem;
}

/* ---- Modulbereich unter der Auflistung (1.17.2) ----
   Eigene Breite, mittig. "margin-inline: auto" zentriert den Block —
   die Ausrichtung des Textes darin bestimmt das Modul selbst. */
.academy-category-modules {
    margin-block-start: 2.5rem;
    margin-inline: auto;
}

.academy-category-modules.academy-modgrid-12 { max-inline-size: 100%; }
.academy-category-modules.academy-modgrid-9  { max-inline-size: 75%; }
.academy-category-modules.academy-modgrid-8  { max-inline-size: 66.6667%; }
.academy-category-modules.academy-modgrid-6  { max-inline-size: 50%; }

@media (max-width: 900px) {
    .academy-category-modules[class*="academy-modgrid-"] {
        max-inline-size: 100%;
    }
}