/* =========================================================================
   Studio Thom Pfister – Team Portraits  (ContentBlock: danidani/teamportraits)
   Standalone. KEINE Tailwind-Klassen, kein Build noetig.
   Wird vom Template selbst per <f:asset.css> geladen.
   Alle Stellschrauben stehen als Custom Properties ganz oben.
   ========================================================================= */

.stp-team {
    /* Layout */
    --stp-cols: 3;                 /* Desktop-Spalten, wird von .stp-team--cols-* ueberschrieben */
    --stp-gap: 0px;                /* Rinne zwischen den Spalten – im Layout randlos (0) */
    --stp-inset: 0.75rem;          /* linker Textabstand, entspricht p-3 der Seite */

    /* Bildformat – Standard ist Querformat.
       Der Haken "Bilder im Hochformat" im Backend setzt .stp-team--portrait. */
    --stp-ratio-landscape: 3 / 2;  /* Querformat, z. B. 720x480 */
    --stp-ratio-portrait: 25 / 32; /* Hochformat 1 : 1.28, aus dem Mockup gemessen */
    --stp-ratio: var(--stp-ratio-landscape);

    /* Bildunterschrift */
    --stp-caption-top: 0.85rem;
    --stp-caption-bottom: 1.15rem;
    --stp-contact-gap: 0;          /* Abstand vor dem E-Mail-Block, z. B. 1.53rem = eine Leerzeile */

    /* Farben */
    --stp-bg: #ffffff;
    --stp-text: #060300;
    --stp-placeholder: #ebebe9;

    background: var(--stp-bg);
    color: var(--stp-text);
    font-size: 1.25rem;            /* = text-lg im Tailwind-Theme der Seite */
    line-height: 1.53rem;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Titel ("Team") ------------------------------------------------ */

.stp-team__title {
    margin: 0;
    padding: 0 var(--stp-inset) 0.75rem;
}

/* ---------- Raster -------------------------------------------------------- */

.stp-team__grid {
    display: grid;
    grid-template-columns: 1fr;    /* Mobile: eine Spalte, randlos */
    gap: 0;
}

.stp-team__item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ---------- Bild ---------------------------------------------------------- */

.stp-team__media {
    position: relative;
    width: 100%;
    aspect-ratio: var(--stp-ratio);
    overflow: hidden;
    background: var(--stp-placeholder);
}

.stp-team__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ---------- Text ---------------------------------------------------------- */

.stp-team__caption {
    padding: var(--stp-caption-top) var(--stp-inset) var(--stp-caption-bottom);
}

/* Zeilen der Bildunterschrift laufen buendig im Zeilenraster – kein
   Absatzabstand. Das globale "p { margin-bottom: 1rem }" aus input.css wird
   hier bewusst mit !important ausgehebelt, damit die Reihenfolge der
   eingebundenen Stylesheets keine Rolle spielt. */
.stp-team .stp-team__caption p,
.stp-team .stp-team__caption br + * {
    margin: 0 !important;
    padding: 0 !important;
    text-indent: 0;
}

/* Optionaler Abstand ueber Mail/Telefon – im Mockup 0, hier als Variable */
.stp-team__contact:first-of-type {
    margin-top: var(--stp-contact-gap, 0) !important;
}

.stp-team__caption a {
    color: inherit;
    text-decoration: none;
}

.stp-team__caption a:hover {
    font-style: italic;
}

/* ---------- Desktop ------------------------------------------------------- */

@media (min-width: 768px) {
    .stp-team__grid {
        grid-template-columns: repeat(var(--stp-cols), minmax(0, 1fr));
        column-gap: var(--stp-gap);
        row-gap: 0;
    }

    /* Auf Desktop steht "Team" bereits in der Footer-Zeile */
    .stp-team--title-mobile .stp-team__title {
        display: none;
    }
}

/* Ausrichtung aus dem Backend */
.stp-team--portrait { --stp-ratio: var(--stp-ratio-portrait); }

/* Spaltenzahl aus dem Backend */
.stp-team--cols-2 { --stp-cols: 2; }
.stp-team--cols-3 { --stp-cols: 3; }
.stp-team--cols-4 { --stp-cols: 4; }

/* Zwischenstufe: 4 Spalten sind auf Tablets zu eng */
@media (min-width: 768px) and (max-width: 1023px) {
    .stp-team--cols-4 { --stp-cols: 2; }
    .stp-team--cols-3 { --stp-cols: 2; }
}

/* ---------- Sicherheitsnetz ---------------------------------------------- */

/* Falls das Element in einem Container mit Innenabstand landet: randlos bleiben */
.stp-team.stp-team--fullbleed {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
}

/* =========================================================================
   Info-Teil desselben Elements: Kontaktblock (nur Mobile), Einleitungstext
   und die rechtlichen Links. Eigenes Grid statt Tailwind-Spalten – die
   noetigen col-span-Klassen existieren im gebauten app.css ohnehin nicht.
   ========================================================================= */

.stp-info {
    --stp-info-text-cols: 6;       /* Breite des Textes ab 1280px */
    padding: 2rem var(--stp-inset, 0.75rem) 0;
    font-size: 1.25rem;
    line-height: 1.53rem;
    color: #060300;
}

/* auch fuer die mobile Liste, die ausserhalb von .stp-info steht */
.stp-info a,
.stp-info__nav a { color: inherit; text-decoration: none; }
.stp-info a:hover,
.stp-info__nav a:hover { font-style: italic; }

/* ---------- Kontaktblock, nur Mobile -------------------------------------- */

.stp-info--mobileonly { display: block; }

@media (min-width: 768px) {
    .stp-info--mobileonly { display: none; }
}

/* ---------- Einleitungstext + Links --------------------------------------- */

.stp-info__grid {
    display: grid;
    grid-template-columns: 1fr;
}

.stp-info__text > :last-child { margin-bottom: 0; }

/* Abstand zu den Portraits darunter – nur solange der Text allein steht */
.stp-info__text { padding-bottom: 2rem; }

@media (min-width: 768px) {
    .stp-info__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .stp-info__text { grid-column: span 7 / span 7; padding-bottom: 0; }

    /* Links rechtsbuendig in den Spalten 10-12, Zeilen darin linksbuendig */
    .stp-info__nav {
        grid-column: 10 / span 3;
        margin-top: 3rem;
        display: flex;
        justify-content: flex-end;
        text-align: left;
    }
}

@media (min-width: 1280px) {
    .stp-info__text {
        grid-column: span var(--stp-info-text-cols) / span var(--stp-info-text-cols);
    }
}

/* ---------- Liste der rechtlichen Seiten ---------------------------------- */

.stp-info__nav ul { list-style: none; margin: 0; padding: 0; }
.stp-info__nav li { margin: 0; }

/* Nach dem zweiten Eintrag eine Leerzeile – trennt Impressum/Datenschutz
   von Nutzungsbedingungen/AGB, wie im Entwurf. */
.stp-info__nav-gap { margin-bottom: 1.25rem !important; }

/* Desktop-Liste unter 768px weg, Mobile-Liste ab 768px weg */
.stp-info__nav:not(.stp-info__nav--mobile) { display: none; }

@media (min-width: 768px) {
    .stp-info__nav:not(.stp-info__nav--mobile) { display: flex; }
    .stp-info__nav--mobile { display: none; }
}

.stp-info__nav--mobile {
    padding: 3rem var(--stp-inset, 0.75rem) 0;
    font-size: 1.25rem;
    line-height: 1.53rem;
    color: #060300;
}