/* --------------------------------------------------------------
   FWG Termine – Archiv-Layout & Styling
   Datei: termine.css (bereinigt & aktualisiert)
   -------------------------------------------------------------- */


/* --------------------------------------------------------------
   TITEL
   -------------------------------------------------------------- */
.post-type-archive-termine .fwg-archiv-titel.entry-title {
    font-size: 60px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 35px;
    color: #0b3169;
}

.post-type-archive-termine .fwg-termine-grid {
    margin-top: 10px;
}


/* --------------------------------------------------------------
   GRUNDLAYOUT
   -------------------------------------------------------------- */
.fwg-termine-archiv {
    width: 100%;
    max-width: 1400px;
    margin-right: auto;
}

.fwg-termine-grid {
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 100%;
}


/* --------------------------------------------------------------
   EINZELNER TERMIN
   -------------------------------------------------------------- */
.fwg-termin {
    display: flex;
    flex-direction: row;
    min-height: 220px;
    height: auto;
    padding: 0 !important;
}


/* --------------------------------------------------------------
   BILDSPALTE
   -------------------------------------------------------------- */
.fwg-termin-image-wrapper {
    width: 180px;
    height: auto;
    overflow: hidden;
    display: flex;
}

.fwg-termin-symbol {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}


/* --------------------------------------------------------------
   ORT-LINK (Icon + Text)
   -------------------------------------------------------------- */
.fwg-ortlink,
.fwg-ortlink:visited,
.fwg-ortlink:active {
    color: #ffffff !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Feather-Icon immer weiß */
.fwg-ortlink [data-feather],
.fwg-ortlink svg.feather,
.fwg-ortlink svg.feather-map-pin {
    stroke: #ffffff !important;
}

/* Hover-Effekt für Text "Ort finden" */
.fwg-ortlink:hover span{
    font-weight: 600;
    color: #aad3ff !important;
}

.fwg-ortlink:hover [data-feather],
.fwg-ortlink:hover svg.feather,
.fwg-ortlink:hover svg.feather-map-pin {
    stroke: #aad3ff !important;
}


/* --------------------------------------------------------------
   TEXTSPALTE
   -------------------------------------------------------------- */
.fwg-termin-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    background-color: #FEF9F4;
}


/* --------------------------------------------------------------
   DATUM + ZEIT + ORT
   -------------------------------------------------------------- */
.fwg-termin-datum {
    display: flex;
    align-items: center;
    background-color: #0b3169;
    color: #ffffff;
    font-size: 1.7em;
    font-weight: 500;
    padding: 15px 30px;
}

/* Zeile 1: Datum */
.fwg-datum-box {
    /* Desktop: keine speziellen Regeln */
}

/* Zeile 2: Clock + Zeit + Ort */
.fwg-zeitort-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    white-space: nowrap !important;
}

/* Abstand links vom Clock-Icon */
.fwg-zeitort-box svg.feather-clock {
    margin-left: 60px;
}
/* Abstand links vom Map-Marker-Icon */
.fwg-zeitort-box svg.feather-map-pin {
    margin-left: 20px;
}

/* Zeittext */
.fwg-zeit-text {
    font-size: 0.5em;
    font-weight: 300;
    color: #ffffff;
}

/* Text: "Ort finden" */
.fwg-ortlink span {
    font-size: 0.5em;
    font-weight: 300;
    line-height: 1;
}


/* --------------------------------------------------------------
   TITEL, ORTSNAME, BESCHREIBUNG
   -------------------------------------------------------------- */
.fwg-termin-titel {
    padding: 15px 30px 0 30px;
    font-size: 1.7em;
    font-weight: 500;
    line-height: 1.3;
    text-transform: uppercase;
    margin: 0;
    color: #0b3169;
}

.fwg-termin-ort-name {
    padding: 0 30px 5px 30px;
    font-size: 1.1em;
    font-weight: 500;
    color: #6C81A1;
    text-transform: uppercase;
    margin-top: -5px;
    margin-bottom: 2px;
}

.fwg-termin-beschreibung {
    padding: 0 30px 15px 30px;
    line-height: 1.5;
    color: #0b3169;
    margin: 0;
}


/* --------------------------------------------------------------
   RESPONSIVE – Tablet
   -------------------------------------------------------------- */
@media (max-width: 1024px) {

    .fwg-termin {
        flex-direction: column;
    }

    .fwg-termin-image-wrapper {
        width: 100%;
        height: 240px;
    }
}


/* --------------------------------------------------------------
   RESPONSIVE – Mobile (max 600px)
   -------------------------------------------------------------- */
@media (max-width: 600px) {

    /* Container für Datum + Zeit/Ort auf Mobile zweizeilig machen */
    .fwg-termin-datum {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 6px 30px !important;
    }

    /* Zeile 1: Datum (blaue Box) */
    .fwg-datum-box {
        padding: 4px 0 !important;
        width: 100%;
        box-sizing: border-box;
    }

    .fwg-datum-text {
        color: white !important;
        font-size: 0.9em !important;
        display: block !important;
        white-space: nowrap !important;
        margin: 0;
        padding: 0;
    }

    /* Zeile 2: Zeit + Ort */
    .fwg-zeitort-box {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 4px 0 !important;
        width: 100%;
        box-sizing: border-box;
        white-space: normal !important;   /* erlaubt Zweizeiligkeit */
    }

    /* Clock-Icon links bündig wie Datum */
    .fwg-zeitort-box svg.feather-clock {
        margin-left: 1px !important;
    }


    /* Zeit */
    .fwg-zeit-text {
        font-size: 0.5em !important;      /* wieder klein */
        white-space: nowrap !important;   /* kein Umbruch innerhalb der Zeit */
    }

    /* Ort finden */
    .fwg-ortlink {
        display: inline-flex !important;
        align-items: center !important;
        font-size: 0.9em !important;
        white-space: nowrap !important;   /* kein Umbruch innerhalb des Links */
    }
}