/* ============================================================================
   events-refresh.css
   Visuelt design-refresh af Begivenheder-siden og tilh\u00f8rende kort.
   Bygger videre p\u00e5 den eksisterende palet - ingen nye farver, blot mere
   konsekvent brug, bedre typografi, bl\u00f8dere skygger og tydeligere hover.
   Revert: fjern <link>-referencen til denne fil i Views/Layout.cshtml.
   ============================================================================ */

:root {
    --lt-primary:        #286a7c;
    --lt-primary-dark:   #1c4955;
    --lt-forest:         #1D322E;
    --lt-accent:         #C76A41;
    --lt-muted:          #6b6b6b;
    --lt-border:         #e7e4df;
    --lt-card:           #ffffff;
    --lt-shadow-sm:      0 2px 10px rgba(29, 50, 46, 0.06);
    --lt-shadow-md:      0 12px 30px rgba(29, 50, 46, 0.14);
    --lt-radius-card:    16px;
}

/* --- M\u00e5nedsoverskrift: diskret accentstreg i orange ------------------------ */
.month {
    border-bottom: 1px solid var(--lt-border);
    margin-bottom: 44px;
    padding-bottom: 14px;
}
.month:last-child {
    border-bottom: none;
}
.month h1 {
    font-family: "Oswald", Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 28px;
    letter-spacing: 0.06em;
    color: var(--lt-forest);
    text-transform: uppercase;
    margin-bottom: 32px;
    padding-bottom: 12px;
    position: relative;
    display: inline-block;
}
.month h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 52px;
    height: 3px;
    background: var(--lt-accent);
    border-radius: 2px;
}

/* --- Event-kort: konsekvent radius, bl\u00f8dere skygge, hover-l\u00f8ft ---------------- */
.event-preview,
.special-preview,
.side-preview {
    border-radius: var(--lt-radius-card);
    box-shadow: var(--lt-shadow-sm);
    border: 1px solid rgba(29, 50, 46, 0.05);
    background: var(--lt-card);
    transition: transform 220ms ease-out, box-shadow 220ms ease-out;
}
.event-preview:hover,
.special-preview:hover,
.side-preview:hover {
    transform: translateY(-4px);
    box-shadow: var(--lt-shadow-md);
}

/* Subtilt zoom p\u00e5 billedet ved hover */
.event-preview .event-preview-img,
.special-preview .event-preview-img,
.side-preview .side-preview-img {
    transition: transform 500ms ease-out;
    will-change: transform;
}
.event-preview:hover .event-preview-img,
.special-preview:hover .event-preview-img,
.side-preview:hover .side-preview-img {
    transform: scale(1.04);
}

/* --- Cirkelknap: samme farve, bedre proportioner, ren transform-animation --- */
.event-preview .event-preview-content .event-preview-button,
.special-preview .event-preview-content .event-preview-button,
.side-preview .side-preview-content .side-preview-button {
    width: 44px;
    height: 44px;
    font-size: 18px;
    right: 24px;
    top: -14px;
    box-shadow: 0 4px 14px rgba(40, 106, 124, 0.35);
    transition: transform 220ms ease-out, background-color 220ms ease-out, box-shadow 220ms ease-out;
}
.event-preview:hover .event-preview-content .event-preview-button,
.special-preview:hover .event-preview-content .event-preview-button,
.side-preview:hover .side-preview-content .side-preview-button {
    top: -14px;
    transform: translateY(-6px);
    background-color: var(--lt-primary-dark);
    box-shadow: 0 10px 22px rgba(28, 73, 85, 0.42);
}

/* --- Kortindhold: bedre typografi-hierarki --------------------------------- */
.event-preview .event-preview-content {
    padding: 26px 28px 28px;
}
.event-preview .event-preview-content h3 {
    font-family: "Oswald", Helvetica, Arial, sans-serif;
    font-size: 20px;
    line-height: 1.25;
    color: var(--lt-forest);
    margin-bottom: 10px;
    padding-right: 48px; /* plads til cirkelknap */
}
.event-preview .event-preview-content p {
    color: var(--lt-muted);
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 16px;
}

/* --- Dato-blok: labels i versaler + orange ikoner for r\u00f8d tr\u00e5d ---------------- */
.event-preview .event-preview-content .event-date {
    color: var(--lt-primary);
    font-size: 13.5px;
    padding-top: 14px;
    margin-top: 6px;
    border-top: 1px dashed rgba(40, 106, 124, 0.22);
}
.event-preview .event-preview-content .event-date div {
    margin: 6px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.event-preview .event-preview-content .event-date div strong {
    font-family: "Oswald", Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lt-forest);
    width: auto;
    min-width: 32px;
}
.event-preview .event-preview-content .event-date div span {
    margin-left: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.event-preview .event-preview-content .event-date div i {
    color: var(--lt-accent);
    margin-right: 0;
}

/* --- Adresse: diskret, ikon i samme accent som datoer ---------------------- */
.event-preview .event-preview-content .address {
    color: var(--lt-muted);
    font-size: 12.5px;
    font-weight: 600;
    margin-top: 16px;
    letter-spacing: 0.02em;
}
.event-preview .event-preview-content .address i {
    color: var(--lt-accent);
    margin-right: 8px;
}

/* --- Filter-knap: lille skygge og hover-l\u00f8ft ------------------------------- */
#openFilterBtn {
    box-shadow: 0 4px 10px rgba(29, 50, 46, 0.12);
    transition: background-color 180ms ease-out, transform 180ms ease-out, box-shadow 180ms ease-out;
}
#openFilterBtn:hover {
    background: #11211E !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(29, 50, 46, 0.18);
}

/* --- Aktiv-filter indikator: lidt mere karakter ---------------------------- */
#activeFilterText {
    background: rgba(199, 106, 65, 0.10);
    color: var(--lt-forest) !important;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 600;
}
#activeFilterText i.fa-calendar-check {
    color: var(--lt-accent);
}

/* --- Hero-slider: bl\u00f8d gradient-overlay + forbedrede pile ------------------- */
.dinSliderContainer .slideshow-container {
    box-shadow: var(--lt-shadow-md);
}
.dinSliderContainer .slide-text {
    background: linear-gradient(180deg,
                                rgba(255, 255, 255, 0)   0%,
                                rgba(255, 255, 255, 0.92) 28%,
                                #ffffff 100%);
    padding-top: 70px;
    padding-bottom: 24px;
    color: var(--lt-forest);
    /* Lad dato-blokken falde ned under titlen, n\u00e5r titlen er lang (typisk p\u00e5 tysk) */
    flex-wrap: wrap;
    gap: 10px 24px;
    /* Ankre dato-blokken til bunden, s\u00e5 datoerne altid st\u00e5r i samme h\u00f8jde p\u00e5 tv\u00e6rs
       af begge slides - uanset om titlen fylder 1 eller 2 linjer. */
    align-items: flex-end;
}
.dinSliderContainer .slide-text > span:first-child {
    flex: 1 1 220px;
    min-width: 0;
    align-self: flex-end;
}
.dinSliderContainer .slide-text .date-range {
    flex: 0 1 auto;
    align-self: flex-end;
}
/* Hold "Fra: 25. april 2026 10:30" p\u00e5 \u00e9n linje, s\u00e5 klokkesl\u00e6ttet ikke brydes af */
.dinSliderContainer .slide-text .date-range > div {
    white-space: nowrap;
}
.dinSliderContainer .slide-text .date-range > div > span {
    display: inline-block;
    white-space: nowrap;
}
.dinSliderContainer .slide-text > span:first-child {
    font-size: 22px;
    letter-spacing: 0.01em;
}
.dinSliderContainer .slide-text .date-range {
    color: var(--lt-primary);
}
.dinSliderContainer .slide-text .date-range strong {
    font-family: "Oswald", Helvetica, Arial, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 12px;
    color: var(--lt-forest);
}
.dinSliderContainer .slide-text .date-range i {
    color: var(--lt-accent);
    margin-right: 4px;
}
.dinSliderContainer .prev,
.dinSliderContainer .next {
    background: rgba(29, 50, 46, 0.78) !important;
    border-radius: 10px;
    transition: background-color 200ms ease-out;
}
.dinSliderContainer .prev:hover,
.dinSliderContainer .next:hover {
    background: var(--lt-forest) !important;
}

/* --- Flag-placering p\u00e5 tysk: skub det danske flag over i h\u00f8jre side ------- */
/* P\u00e5 tysk har menuen f\u00e6rre punkter, s\u00e5 flaget ender t\u00e6t p\u00e5 menutitlen.
   Her giver vi det plads i h\u00f8jre side via margin-left: auto. */
@media (min-width: 1200px) {
    html[lang="de"] #menu .menuWrap > ul {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    html[lang="de"] #menu .menuWrap > ul > li:has(> .flag-link) {
        margin-left: auto;
    }
}

/* --- Ingen events-besked: konsistent typografi ---------------------------- */
.ingen-events {
    padding: 40px 0;
    text-align: center;
    color: var(--lt-muted);
}
.ingen-events h1 {
    color: var(--lt-forest);
    font-family: "Oswald", Helvetica, Arial, sans-serif;
    margin-bottom: 10px;
}