/*
 * Studienverlauf-Tabs (CType container-study_tabs / uwh_study_tab)
 *
 * Eigene Struktur (nicht die .tabs-Klassen): Tab-Reihe oben + vollbreites
 * blaues Band unten (Foto/Video links / Text rechts). Tab-Switching per JS
 * ueber [data-element="tabs"] + data-selector/data-container + .--active.
 * Video-Poster-Swap ueber .image-video-swapper + .play-icon (bestehendes JS,
 * wie beim Vision-Element).
 *
 * Full-Bleed ueber margin/padding-Breakout (kein Grid-Subgrid noetig, robust
 * innerhalb der content-breiten Gridbox). body/html haben overflow-x:hidden.
 *
 * TODO Design-Feinschliff gegen Screenshot: exakte Abstaende/Groessen/Zuschnitt.
 */

/* Die Sektion (.ce-container-element) ist bereits ein content-breites Subgrid
   (12 Spalten). .study-tabs ist ein Grid-Item darin und wuerde per
   grid-column:auto in EINE Spalte (~90px) rutschen -> ueber alle Spalten
   spannen, damit der Inhalt die volle Inhaltsbreite bekommt. */
.ce-study-tabs-container .study-tabs {
    grid-column: 1 / -1;
}

.ce-study-tabs-container .study-tabs__intro {
    margin-bottom: clamp(1.75rem, 3vw, 3rem);
}

/* ---- Tab-Reihe ---- */
.ce-study-tabs-container .study-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.ce-study-tabs-container .study-tabs__tab {
    display: inline-flex;
    align-items: center;
    /* gap 20px wie .tabs__headline im Designsystem */
    gap: 1.25rem;
    padding: 0.875rem 1.5rem;
    border: 0;
    background: transparent;
    color: var(--color-text-grey, #767676);
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

/* Aktiver Tab nutzt die im Feld general_header_color gewaehlte Farbe
   (Fallback Primary), Text/Icon weiss fuer Kontrast; extrabold wie im Design. */
.ce-study-tabs-container .study-tabs__tab.--active {
    background: var(--tab-color, var(--color-primary, #004f9f));
    color: #fff;
    font-weight: 800;
}

.ce-study-tabs-container .study-tabs__tab-icon {
    display: inline-flex;
    flex: 0 0 auto;
}

.ce-study-tabs-container .study-tabs__tab-icon svg {
    width: 2rem;
    height: 2rem;
}

/* Inline-SVG einfaerben wie Accordion/Tabs: das Kind-<path> ueberschreiben
   (NICHT das svg-Element -> dessen eigene path-fill wuerde sonst gewinnen). */
.ce-study-tabs-container .study-tabs__tab-icon svg path {
    fill: var(--icon-color, var(--color-primary, #004f9f));
}

.ce-study-tabs-container .study-tabs__tab.--active .study-tabs__tab-icon svg path {
    fill: #fff;
}

/* ---- Panels: aktives Panel = vollbreites Band in der Tab-Farbe ----
   Farbe + Full-Bleed-Breakout liegen am Panel (nicht am band), damit der
   Hintergrund die Farbe des jeweils aktiven Tabs uebernimmt. */
.ce-study-tabs-container .study-tabs__panel {
    display: none;
}

.ce-study-tabs-container .study-tabs__panel.--active {
    display: block;
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
    background: var(--panel-color, var(--color-primary, #004f9f));
    color: #fff;
}

/* Bild/Video links + Text rechts, 12-Spalten wie das Vision-Layout */
.ce-study-tabs-container .study-tabs__layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-col-gap, 25px);
    align-items: center;
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

/* Verschachtelte Inhaltselemente (colPos 51) unter Bild/Video + Text */
.ce-study-tabs-container .study-tabs__extra {
    padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

/* ---- Medien (Foto / Video-Swapper) = Vision-Behandlung ---- */
.ce-study-tabs-container .study-tabs__media {
    grid-column: 2 / span 4;
    position: relative;
}

.ce-study-tabs-container .study-tabs__media figure {
    margin: 0;
    filter: drop-shadow(-30px 34px 64px rgba(0, 0, 0, 0.2));
}

/* Bild und Video unabhaengig von einer festen aspect-ratio:
   - Poster vorhanden -> Box = Poster-Hoehe (position:relative holt es in den
     Fluss) = Backend-Crop-Ratio (1:1, 3:2, portrait ...), voll sichtbar, kein
     Clip, kein Upscaling.
   - Poster ausgeblendet (Video-Zustand) -> Box bekommt 16:9 (nur dann). */
.ce-study-tabs-container .study-tabs__media .image-video-swapper {
    height: auto;
    max-height: none;
}

.ce-study-tabs-container .study-tabs__media .image-video-swapper picture {
    position: relative;
}

.ce-study-tabs-container .study-tabs__media picture img {
    width: 100%;
    height: auto;
    /* Sichtbare Parallelogramm-Neigung (Vision-Richtung, %-basiert) */
    clip-path: polygon(
        calc(100% - 2.5%) 0,
        100% calc(100% - 3%),
        0 100%,
        2.5% 3%
    );
}

.ce-study-tabs-container .study-tabs__media .image-video-swapper.swap-to-video {
    aspect-ratio: 16 / 9;
    /* Hoehen-Flip-Keyframe deaktivieren: dessen height:100% braeuchte eine
       feste Parent-Hoehe, die es hier nicht gibt -> aspect-ratio uebernimmt. */
    animation: none;
}

/* ---- Textseite, vertikal mittig (wie .frame__contact_text) ---- */
.ce-study-tabs-container .study-tabs__body {
    grid-column: 7 / span 6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
}

/* Kein Bild/Video -> Text startet in derselben Spalte wie sonst das Bild
   (Spalte 2), endet aber vor der letzten Spalte (symmetrischer Gutter, nicht
   bis zum Grid-Rand). */
.ce-study-tabs-container .study-tabs__body:only-child {
    grid-column: 2 / -2;
}

.ce-study-tabs-container .study-tabs__headline {
    color: #fff;
    margin: 0 0 0.25rem;
    font-size: clamp(1.75rem, 1rem + 2.5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
}

.ce-study-tabs-container .study-tabs__semester {
    margin: 0 0 1rem;
    font-weight: 700;
}

.ce-study-tabs-container .study-tabs__copy,
.ce-study-tabs-container .study-tabs__copy * {
    color: #fff;
}

/* ---- Mobil: Foto + Text stapeln ---- */
@media (max-width: 47.99em) {
    .ce-study-tabs-container .study-tabs__layout {
        grid-template-columns: minmax(0, 1fr);
        row-gap: clamp(1.25rem, 5vw, 2rem);
    }

    /* Mobil = 1 Spalte -> alles ueber die volle Breite. Auch der :only-child-Fall
       (kein Bild) muss hier auf 1/-1, sonst landet er per "2/-1" in einer
       impliziten Spalte am rechten Rand. */
    .ce-study-tabs-container .study-tabs__media,
    .ce-study-tabs-container .study-tabs__body,
    .ce-study-tabs-container .study-tabs__body:only-child {
        grid-column: 1 / -1;
    }

    .ce-study-tabs-container .study-tabs__media {
        max-width: 20rem;
    }
}