/*
 * ====================================================================
 * CHOREOFEED PAGE STYLES (choreofeed_bs5.twig)
 * ====================================================================
 */

:root {
    /* zentrale Farb-Variable für reines Weiß */
    /* Obsolete - use --fm-white from custom-bootstrap.css */
}

/*
 * ====================================================================
 * CHOREO MODAL STYLES
 * ====================================================================
 */

/*
 * Modal Navigation Buttons
 * --------------------------------------------------------------------
 * Uses unified navigation components from custom-bootstrap.css
 * Apply .fm-nav-btn, .fm-nav-prev, .fm-nav-next classes in templates
 */

/*
 * Modal Image Container
 * --------------------------------------------------------------------
 * Stellt sicher, dass das Bild richtig angezeigt wird
 */
.choreo-modal-image-container {
    background-color: var(--fm-black);
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.choreo-modal-image-container img {
    max-height: 70vh;
    width: auto;
    object-fit: contain;
}

/*
 * Modal Info Section
 * --------------------------------------------------------------------
 * Styling für die Informationen im Modal-Footer
 */
.choreo-modal-info h5 {
    font-family: var(--fm-font-display);
    font-weight: 700;
    color: var(--fm-white);
    margin-bottom: 0.5rem;
}

.choreo-modal-info p {
    color: var(--fm-text-light);
    line-height: 1.4;
}

.choreo-modal-info .small {
    color: var(--fm-text-muted);
}

/*
 * Image Counter
 * --------------------------------------------------------------------
 * Styling für den Bilderzähler
 */
.choreo-image-counter {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--fm-white);
}

/* Responsive styles moved to consolidated media queries in custom-bootstrap.css */

/* Note: .fm-card--hover-strong is handled by central system in custom-bootstrap.css */

/*
 * ====================================================================
 * CHOREO CARD STYLES
 * ====================================================================
 */

/* Fix Bootstrap card hover issues */
.card {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: none !important;
    border: none !important;
    background: none !important;
}

/* Ensure the card container has no background */
.fm-card--hover-strong {
    background: none !important;
    border: none !important;
}

/* Remove Bootstrap shadow classes */
.shadow-sm {
    box-shadow: none !important;
}

/* Override any Bootstrap card styles on this page */
.choreofeed_bs5 .card,
.col-12 .card {
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}

/*
 * Card positioning context for overlay
 * --------------------------------------------------------------------
 * Ensures the overlay is positioned relative to the correct container
 */
.choreo-gallery-trigger {
    position: relative !important;
    display: block;
    overflow: hidden;
    border-radius: var(--fm-card-border-radius);
}

/*
 * Card Image
 * --------------------------------------------------------------------
 * Stellt sicher, dass alle Choreo-Bilder eine konsistente Höhe
 * und Passform haben.
 */
.choreo-card-img {
    height: 300px;
    object-fit: cover;
    border: 0;
    display: block;
    width: 100%;
}

/* The main container for the overlay */
.choreo-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.75);
    color: var(--fm-white);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9);
    line-height: 1.3;
    border-radius: 0 0 var(--fm-card-border-radius) var(--fm-card-border-radius);
    border-top: 2px solid var(--fm-border-white);
}

/* Erste Zeile: Quelle und Saison nebeneinander */
.choreo-card-first-line {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
    gap: 8px;
}

/* Force each text element to a new line */
.choreo-card-title-text {
    display: block;
    text-align: left;
}

/* First line - Source und Season inline nebeneinander */
.choreo-card-first-line {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
    font-size: 0.75em !important;
    line-height: 1.3 !important;
    color: var(--fm-white) !important;
}

.choreo-card-source {
    font-size: inherit !important;
    line-height: inherit !important;
    margin: 0 !important;
    padding: 2px 6px !important;
    display: inline !important;
    background-color: rgba(255, 255, 255, 0.75) !important;
    color: var(--fm-black) !important;
    border-radius: 4px !important;
    font-weight: normal !important;
    text-shadow: none !important;
}

.choreo-card-season {
    font-size: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline !important;
}


/* Team Logos on Card
 * --------------------------------------------------------------------
 * Positions the team logos at the top-right corner of the card.
 */
.choreo-card-logos {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
}

.choreo-card-logos img {
    height: 32px;
    margin-left: 5px;
}

/*
 * Choreo Card Hover Effect
 * --------------------------------------------------------------------
 * Fügt einen Hover-Effekt für die Saison-Information auf den
 * Choreo-Kacheln hinzu.
 */
.card a .card-title small {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    background-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.choreo-card-season {
    font-size: 0.75em !important;
    font-weight: bold !important;
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    display: block !important;
    color: var(--fm-white) !important;
    border: none !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.choreo-card-title-text {
    font-size: 1em !important;
    font-weight: 600 !important;
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin-top: 2px !important;
    display: block !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    color: var(--fm-white) !important;
    border: none !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.9) !important;
    line-height: 1.3 !important;
}