/**
 * Shows/Workshops - Page-spezifische Styles
 * Juliana y Fadi Tango Website
 *
 * Video-Section, Bildergalerie, Slider, Workshop-Karten - ausschließlich
 * von tango-shows-workshops.php genutzt.
 */
 
 /* ==========================================
   HERO SECTION
   ========================================== */

/* Struktur (Breite, Höhe, Flex, Position) kommt von der gemeinsamen
   .hero-Klasse in css/components/hero.css - hier nur das Seiten-spezifische
   Hintergrundbild + der zugehörige Verlauf. */
.hero--shows {
    background-image: var(--hero-gradient),
    url('../../images/shows_workshops/show-hero.jpg');
}

/* ==================== VIDEO SECTION ==================== */

.video-section {
    margin: 6rem 0;
}

.video-section h2 {
    font-size: var(--font-size-6xl);
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 3rem;
    letter-spacing: 3px;
}

.video-grid {
    display: grid;
    /* Explizit statt auto-fit - selbst festgelegter Wert, kein vom
       Browser errechneter, den wir nachträglich erraten müssten (siehe
       ausführliche Begründung/Korrektur-Historie in der Konversation:
       auto-fit + berechnete/gepufferte Breakpoints blieben fehleranfällig,
       da zwei unabhängig ermittelte Werte synchron gehalten werden
       mussten). Gleiches Prinzip wie .testimonials-grid.testimonials-
       count-3 auf der Startseite. */
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-top: 3rem;
}

@media (max-width: 1024px) {
    .video-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Bei genau 3 Videos: 3. Karte zentriert unter den beiden anderen.
       min-width UND max-width in derselben Regel wie die Spaltenzahl
       selbst gesetzt wird - kann nicht mehr auseinanderdriften, da es
       dieselbe, einzige Bedingung ist, nicht zwei unabhängige Werte. */
    .video-grid > .video-card:nth-child(3):last-child {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc((100% - 2.5rem) / 2);
    }
}

.video-card {
    background: var(--gradient-dark);
    border: var(--border-width-medium) solid var(--border-color-default);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: var(--shadow-glow-white);
    display: flex;
    flex-direction: column;
}

.video-card:hover {
    transform: var(--transform-lift-md);
    box-shadow: 0px 10px 30px rgba(255, 255, 255, 0.5);
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
}

.video-wrapper iframe,
.video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ==================== VIDEO-FACADE (Klick-zum-Laden) ====================
   Datenschutzfreundliche YouTube-Einbindung: Es wird erst beim Klick eine
   Verbindung zu YouTube aufgebaut, nicht automatisch beim Seitenaufruf. */

.video-facade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-image: var(--bg-image);
    background-position: center;
    cursor: pointer;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-facade__play {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
}

.video-facade:hover .video-facade__play {
    background: rgba(221, 191, 95, 0.9);
    transform: scale(1.08);
}

.video-facade__play svg {
    width: 26px;
    height: 26px;
    fill: #fff;
    margin-left: 4px; /* optische Zentrierung des Play-Dreiecks */
}

.video-facade:hover .video-facade__play svg {
    fill: #111;
}

.video-info {
    padding: 1.5rem;
    display: grid;
    grid-template-rows: 3rem 1fr;
    gap: 1rem;
    height: 100%;
}

.video-info h3 {
    color: var(--color-primary);
    font-size: var(--font-size-2xl-alt);
    margin: 0;
    letter-spacing: 1.65px;
    display: flex;
    align-items: flex-start;
    line-height: 1.3;
}

.video-info p {
    color: #FFFFFF;
    line-height: 1.6;
    font-size: var(--font-size-base);
    letter-spacing: 1.65px;
    margin: 0;
    align-self: start;
}

/* Ehemaliger .gallery-section-/.image-gallery-/.gallery-item-Block
   entfernt: vollständig ausgearbeitetes Hover-Reveal-Galerie-Design, das
   aber nie ins Markup dieser Seite eingebunden wurde (auch nicht in den
   älteren Dateiversionen auffindbar) - daher nie aktiv wirksam. Die
   Seite nutzt stattdessen den aktiven .slider-section-Bereich. */

/* ==================== SLIDER SECTION ==================== */

.slider-section {
    margin: 6rem 0;
}

.slider-section h2 {
    font-size: var(--font-size-6xl);
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 3rem;
    letter-spacing: 3px;
}

.slider-container {
    position: relative;
    width: 100%;
    /* Doppel-Deklaration (siehe base.css für Begründung) - hier weniger
       kritisch als bei nav (min-height: 500px fängt Extremfälle ab),
       aber konsistent mit den anderen vh-Stellen im Projekt behandelt. */
    height: 70vh;
    height: 70dvh;
    min-height: 500px;
    max-height: 700px;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.slider-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.slider-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 1;
}

.slider-slide.active {
    opacity: 1;
    z-index: 2;
}

.slider-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.slider-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: 3rem 2rem 2rem;
    color: white;
    z-index: 3;
}

.slider-overlay h3 {
    font-size: var(--font-size-5xl);
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    letter-spacing: 2px;
}

.slider-overlay p {
    font-size: var(--font-size-lg);
    color: #e0e0e0;
    letter-spacing: 1.5px;
}

/* Balken-Indikatoren */
.slider-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.8rem;
    z-index: 10;
}

.indicator {
    width: 50px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.indicator::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: var(--color-primary);
    transition: width 0.3s;
}

.indicator.active {
    background: rgba(221, 191, 95, 0.5);
}

.indicator.active::before {
    width: 100%;
    animation: fillIndicator 8s linear;
}

/* Pause-Funktionalität - Animation pausieren bei Hover */
.slider-container.paused .indicator.active::before {
    animation-play-state: paused;
}

.slider-container:hover .indicator.active::before {
    animation-play-state: paused;
}

@keyframes fillIndicator {
    from { width: 0%; }
    to { width: 100%; }
}

.indicator:hover {
    background: rgba(221, 191, 95, 0.7);
    transform: scaleY(1.5);
}

/* ==================== WORKSHOP IMAGES ==================== */

.workshop-images {
    margin: 6rem 0;
}

.workshop-images h2 {
    font-size: var(--font-size-6xl);
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 3rem;
    letter-spacing: 3px;
}

.workshop-showcase {
    display: grid;
    /* Explizit statt auto-fit - siehe ausführliche Begründung bei
       .video-grid oben. */
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

@media (max-width: 1024px) {
    .workshop-showcase {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Bei genau 3 Workshop-Karten: 3. Karte zentriert unter den beiden
       anderen - siehe ausführliche Begründung bei .video-grid oben. */
    .workshop-showcase > .workshop-card:nth-child(3):last-child {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc((100% - 2rem) / 2);
    }
}

.workshop-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 400px;
    transition: transform 0.3s, box-shadow 0.3s;
    border: var(--border-width-medium) solid var(--border-color-default);
    box-shadow: var(--shadow-glow-gold);
}

.workshop-card:hover {
    /*transform: translateY(-5px);*/
    box-shadow: var(--shadow-glow-white-strong);/*0px 10px 30px rgba(255, 255, 255, 0.5);*/
}

.workshop-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

/* Hover-Zoom - konsistent zum etablierten Muster der Seite (siehe
   .about-story-image/.about-team-image in ueber-uns.css, .feature-image
   in privatstunden.css). .workshop-card hat bereits overflow:hidden,
   dadurch wird der Zoom sauber an den abgerundeten Kartenrändern
   abgeschnitten - keine weitere Anpassung nötig. */
.workshop-card:hover img {
    transform: scale(1.1);
}

.workshop-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
    /* Fluid statt starrer 2rem/1.5rem/1rem - komplett ohne Mobile-
       Anpassung. Desktop-Maxima unverändert. */
    padding: clamp(var(--spacing-md), 6vw, var(--spacing-lg))
             clamp(var(--spacing-sm), 4vw, var(--spacing-md))
             clamp(var(--spacing-xs), 4vw, var(--spacing-sm));
    color: white;
}

.workshop-card-overlay h3 {
    color: var(--color-primary);
    font-size: var(--font-size-3xl);
    margin-bottom: 0.8rem;
    letter-spacing: 2px;
}

.workshop-card-overlay p {
    color: #e0e0e0;
    font-size: var(--font-size-base);
    letter-spacing: 1.65px;
    line-height: 1.6;
}

/* ==================== TERMINE SECTION ====================
   Nur text-align nötig: Farbe/Schriftart/Größe kommen bereits korrekt
   von der globalen h1-h6-Regel (base.css). Zentrierung fehlte dort
   bewusst (wird pro Section einzeln gesetzt, siehe .video-section h2 /
   .slider-section h2 / .workshop-images h2 oben) - hier bislang schlicht
   vergessen. */
.termine-section h2 {
    text-align: center;
}

/* Leer-Zustand ("keine Shows/Workshops geplant"), falls $termine leer ist.
   Bewusst konsistent zu .termine-intro direkt darüber gestaltet (gleiche
   Lesebreite/Zentrierung), damit der Fallback-Text wie ein bewusst
   gestalteter Teil der Section wirkt statt wie ein übersehener Rand-Fall.
   Nur auf dieser Seite verwendet (siehe tango-shows-workshops.php) - daher
   hier und nicht als globale Komponente. */
.no-termine {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    color: var(--color-text-secondary);
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 768px) {
    .video-grid,
    .workshop-showcase {
        grid-template-columns: 1fr;
    }

    /* Reset der 3.-Element-Zentrierung aus dem @media(max-width:1024px)-
       Block oben: der deckt auch den Bereich <=768px mit ab (beide Media
       Queries überlappen), wo das Grid inzwischen bereits einspaltig ist.
       Ohne diesen Reset bliebe das 3. Element auf die halbe (nicht mehr
       existierende) 2-Spalten-Breite verengt - identische Falle wie bei
       den Testimonials weiter oben in diesem Projekt. */
    .video-grid > .video-card:nth-child(3):last-child,
    .workshop-showcase > .workshop-card:nth-child(3):last-child {
        width: auto;
        justify-self: stretch;
    }
    
    .slider-container {
        height: 60vh;
        height: 60dvh;
        min-height: 400px;
    }
    
    .slider-overlay {
        padding: 2rem 1rem 1rem;
    }
}