/* =============================================
   Veranstaltungen – Kartenansicht
   ============================================= */

/* Filter-Leiste */

body.veranstaltungen {
    /* Внешний контейнер — 2-колоночный грид */
    #position {
        display: grid;
        /* minmax(0, 1fr): 1fr allein waechst mit dem breitesten Inhalt mit -
           ein langer Titel machte alle Karten breiter als den Bildschirm */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        align-items: start;

        /* Фильтры и якорь растягиваются на всю ширину */
        #filter-element,
        .filter_display {
            grid-column: 1 / -1;
        }

        @media (max-width: 992px) {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    .filter_display {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 24px;
        width: 100%;
        padding-top: 10px;

        .button_filter_wrapper_2 {
            display: inline-flex;
        }

        a.button_filter {
            display: inline-block;
            padding: 6px 16px;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 500;
            text-decoration: none;
            transition: background 0.2s, color 0.2s;
            cursor: pointer;

            &.o-filter {
                background: var(--clr-primary-grey);
                color: var(--clr-primary-dark);

                &:hover {
                    /* background: #cacaca; */
                }
            }

            &.a-filter {
                background: var(--primary-accent);
                color: var(--clr-primary-white);
            }
        }
    }

    /* Каждый .collection_list — одна ячейка грида */
    .collection_list.col-kalender {
        display: block;
        width: 100%;
        padding: 0;
    }

    /* Einzelne Karte.
       Die zweite Klasse am Container ist der Gruppenname aus dem mysyde
       (Veranstaltung, Kirche, Sport, Feuerwehr ...). Danach darf nicht
       selektiert werden: sonst bekommt nur die Kategorie "Veranstaltung" die
       Kartenansicht, alle anderen fallen auf die ungestylte Rohform zurueck -
       der Container bleibt display:block und das Kategoriebild laeuft in
       seiner natuerlichen Groesse ueber die halbe Seite.
       Das Icon je Kategorie setzt bc.min.js, das Label kommt aus
       attr(data-category) - beides haengt nicht am Gruppennamen. */
    .collection_list.col-kalender > .collection_container,
    .collection_full.col-kalender > .collection_container {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        width: 100%;
        box-sizing: border-box;
        background: var(--clr-primary-white);
        /* border: 1px solid #e8edf5; */
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
        position: relative;
        overflow: visible;

        

        /* Icon-Kreis (linke Spalte) */
        .col-kalender_one {
            flex-shrink: 0;

            .col-kalender_icon {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                background: var(--clr-primary-grey);
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;

                img {
                    width: 50px !important;
                    height: 50px !important;
                    object-fit: contain;
                    
                    &.custom-image {
                        width: 100% !important;
                        height: 100% !important;
                        object-fit: cover;
                    }
                }
            }
        }

        /* Inhaltsbereich (rechte Spalte) */
        .col-kalender_two {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 4px;

            /* Kategorie-Label */
            .col-kalender_titlee {
                font-size: 0;
                font-weight: 600;
                color: var(--primary-accent);
                text-transform: uppercase;
                letter-spacing: 0.4px;

                &::before {
                    content: attr(data-category);
                    font-size: 12px;
                }
            }

            /* Titel */
            .col-kalender_stadt {
                font-size: 15px;
                font-weight: 700;
                color: var(--clr-primary-dark);
                line-height: 1.3;
                /* lange Titel ("FC Bayern Freunde Bindlach, Fanclubfahrt ...")
                   umbrechen statt abschneiden */
                white-space: normal;
                overflow-wrap: break-word;
                -webkit-hyphens: auto;
                hyphens: auto;
            }

            /* Ort/Adresse */
            .col-kalender_text {
                font-size: 13px;
                color: #888;
                line-height: 1.4;

                a {
                    color: inherit;
                    text-decoration: none;

                    &:hover {
                        color: var(--primary-accent);
                    }
                }

                .textcontent {
                    /* Beschreibungstext im Listing ausblenden */
                    display: none;
                }
            }

            /* Datum + Zeit + Kalender-Button */
            .col-kalender_two_datum {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 15px;
                margin-top: 0px;

                .col-kalender_datum,
                .col-kalender_datum_end {
                    display: inline-block;
                    background: var(--clr-primary-white);
                    color: var(--clr-primary-dark);
                    font-size: 12px;
                    font-weight: 500;
                    padding: 4px 10px;
                    border-radius: 6px;
                    border: 1px solid var(--primary-accent);
                }

                .col-kalender_zeit,
                .col-kalender_zeit_end {
                    display: inline-block;
                    background: var(--clr-primary-white);
                    color: var(--clr-primary-dark);
                    font-size: 12px;
                    font-weight: 500;
                    padding: 4px 10px;
                    border-radius: 6px;
                    border: 1px solid var(--primary-accent);


                    &:empty {
                        display: none;
                    }
                }

                .col-kalender_datum_end:empty {
                    display: none;
                }

                /* Beginn und Ende (bc.min.js setzt den Strich dazwischen);
                   auf schmalen Karten darf die Zeile umbrechen */
                .col-kalender_date_time_inline {
                    flex-wrap: wrap;
                    row-gap: 6px !important;
                }

                .col-kalender_bis {
                    margin: 0 -4px;
                    font-size: 12px;
                    color: var(--clr-primary-dark);
                }

                /* Zu Kalender hinzufügen */
                .col-kalender_outlook {
                    display: inline-flex;
                    align-items: center;
                    border-radius: 20px;
                    padding: 0px;
                    cursor: pointer;
                    text-decoration: none;

                    
                    .textcontent:hover{
                        transform: scale(1.01);
                    }
                    .textcontent:focus-visible {
                        border: 1px solid var(--primary-accent);
                    }
                    .textcontent {
                        display: inline-flex;
                        align-items: center;
                        gap: 7px;
                        font-size: 13px;
                        font-weight: 400;
                        color: var(--clr-primary-dark);
                        white-space: nowrap;
                        transition: transform 0.3s;
                                

                        &::before {
                            content: "";
                            display: inline-block;
                            width: 18px;
                            height: 18px;
                            flex-shrink: 0;
                            background-image: url(/userdata/02_Kollektionen/kalendarhinzu.svg);
                            background-size: contain;
                            background-repeat: no-repeat;
                            background-position: center;
                        }
                    }
                }
            }

            /* Telefon – meist leer */
            .code_phone:empty {
                display: none;
            }
        }

        /* Veranstalter – meist leer */
        .col-kalender_organizer:empty {
            display: none;
        }

        /* Bild (rechte Seite) – im Listing ausblenden */
        .col-kalender_three {
            display: none;
        }

        /* "Mehr lesen"-Button – im Listing ausblenden */
        .collection_link {
            display: none;
        }

        /* Адаптив для экранов до 420px */
        @media (max-width: 420px) {
            flex-wrap: wrap;
            gap: 10px;
            padding: 12px;

            .col-kalender_one {
                flex-shrink: 0;

                .col-kalender_icon {
                    width: 60px;
                    height: 60px;

                    img {
                        width: 30px !important;
                        height: 30px !important;
                        
                        &.custom-image {
                            width: 100% !important;
                            height: 100% !important;
                        }
                    }
                }
            }

            .col-kalender_two {
                flex: 1;
                min-width: 0;
                
                .col-kalender_titlee::before {
                    font-size: var(--fs-600);
                }

                .col-kalender_stadt {
                    font-size: 13px;
                }

                .col-kalender_text {
                    font-size: 11px;
                }

                .col-kalender_two_datum {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    gap: 8px;

                    .col-kalender_datum,
                    .col-kalender_zeit,
                    .col-kalender_datum_end,
                    .col-kalender_zeit_end {
                        font-size: 10px;
                        padding: 3px 8px;
                    }

                    .col-kalender_outlook {
                        width: 100%;
                        padding: 0px;
                        justify-content: center;

                        .textcontent {
                            font-size: 11px;
                            gap: 5px;
                            width: 100%;

                            &::before {
                                width: 14px;
                                height: 14px;
                            }
                        }
                    }
                }
            }
        }

        /* Адаптив для экранов до 360px */
        @media (max-width: 360px) {
            gap: 10px;
            padding: 10px;

            .col-kalender_one {
                .col-kalender_icon {
                    width: 60px;
                    height: 60px;

                    img {
                        width: 30px !important;
                        height: 30px !important;
                    }
                }
            }

            .col-kalender_two {
                .col-kalender_two_datum {
                    gap: 6px;

                    .col-kalender_outlook .textcontent {
                        font-size: 10px;
                        gap: 4px;
                    }
                }
            }
        }
    }
}
/* =============================================
   DATEILINK UEBER DEM KALENDERKNOPF
   Der Link "Mehr Informationen" (Beschriftung aus
   module/filegallery/show_filegallery.inc.php) klebte absolut in der oberen
   rechten Ecke der Karte - .col-kalender .col-kalender_files in
   bc-style.min.css. Er gehoert direkt ueber den Kalenderknopf.

   Den gemeinsamen Block .col-kalender_kalenderblock baut bc.min.js und setzt
   ihn in col-kalender_two_datum an die Stelle des Knopfes. Termine ohne
   Datei bekommen keinen Block und bleiben unveraendert. bc-style.min.css
   bleibt unberuehrt, diese Datei wird danach eingebunden.
   ============================================= */

body.veranstaltungen {

    .collection_list.col-kalender .col-kalender_kalenderblock {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;

        /* Schiebt den Block ans rechte Ende der Datumszeile, die Chips
           bleiben links. */
        margin-left: auto;

        /* Bezugspunkt fuer den Dateilink, siehe unten. */
        position: relative;
    }

    /* Der Knopf soll auf einer Hoehe mit Datum und Uhrzeit stehen. Zaehlte der
       Dateilink zur Hoehe des Blocks, waere die Zeile zwei Zeilen hoch, der
       Knopf rutschte nach unten und links unter den Chips blieb Platz offen.

       Deshalb haengt der Link ueber dem Knopf, statt ueber ihm zu stehen: er
       nimmt den Platz neben der Ortszeile ein, der ohnehin frei ist. Fuer die
       Hoehe der Zeile zaehlt damit nur der Knopf. Die absolute Ecke aus
       bc-style.min.css ist damit auch erledigt. */
    .col-kalender .col-kalender_kalenderblock .col-kalender_files {
        position: absolute;
        top: auto;
        right: 0;
        bottom: 100%;

        margin-bottom: 6px;
    }

    /* Schmale Schirme: hier steht der Block unter den Chips statt daneben,
       haengender Link laege auf ihnen. Also wieder im Fluss. */
    @media (max-width: 570px) {

        /* Datum und Knopf passen nebeneinander nicht mehr in die Karte. Die
           Zeile ist ein Raster mit zwei Spalten ("1fr auto"), und die
           Beschriftung des Knopfes bricht nicht um (white-space: nowrap) -
           gemessen bei 390px: 121px Chips + 8px + 176px Knopf gegen 246px
           Platz. Der Knopf stand deshalb zur Haelfte ausserhalb der Karte.
           Eine Spalte, alles linksbuendig, dann passt es.

           Das Raster setzt bc.min.js als Inline-Stil an das Element (zusammen
           mit dem Wrapper .col-kalender_date_time_inline). Dagegen kommt nur
           !important an. */
        .collection_list.col-kalender .col-kalender_two_datum {
            grid-template-columns: minmax(0, 1fr) !important;
            justify-items: start;
            row-gap: 8px;
        }

        .collection_list.col-kalender .col-kalender_kalenderblock {
            align-items: flex-start;
            margin-left: 0;
        }

        .col-kalender .col-kalender_kalenderblock .col-kalender_files {
            position: static;
            bottom: auto;
            right: auto;
            margin-bottom: 0;
        }
    }
}