/* =========================================
   RED ECHO – EVENTS
   RESPONSIVE / MOBILE FIRST

   Navigation, Titel und Logo
   kommen aus style.css.
========================================= */


/* =========================================
   1. VARIABLEN
========================================= */

/*
   max() wählt die grössere von zwei Formeln:
   Die erste wächst langsam (Smartphone und
   Tablet), die zweite schneller (Desktop).

   So bleibt die Liste auf dem Tablet
   kompakt und wird auf grossen
   Bildschirmen trotzdem deutlich grösser.
*/

.events {
    --fs-event-date: calc(clamp(3.2rem, max(3.1rem + 0.5vw, -0.08rem + 6.25vw), 5.4rem) * var(--scale));
    --fs-event-time: calc(clamp(1.6rem, max(1.6rem + 0.42vw, 0.12rem + 3.05vw), 2.8rem) * var(--scale));
    --fs-event-place: calc(clamp(1.05rem, max(0.8rem + 1.05vw, -0.2rem + 2.84vw), 2.25rem) * var(--scale));

    --event-gap: 1rem;
}


/* =========================================
   2. INTRO
========================================= */

.events__intro p {
    max-width: 50em;

    margin: 0;

    font-size: var(--fs-body);
    font-weight: 400;

    line-height: 1.35;
}


/* =========================================
   3. DATES
========================================= */

.events__dates {
    margin-top: calc(3rem * var(--scale));
}

.events__dates-title {
    margin-bottom: 1.5rem;

    line-height: 1;
}


/* =========================================
   4. EVENT-LISTE – MOBILE
========================================= */

.events__list {
    display: grid;

    row-gap: 1.65rem;
}


/* -----------------------------------------
   Einzelner Event

   MOBILE:
   Datum oben.
   Darunter Uhrzeit + Ort nebeneinander.

   Ein langer Ort bricht innerhalb seiner
   eigenen Spalte um und bleibt deshalb
   immer neben der Uhrzeit stehen.
----------------------------------------- */

.event {
    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr);

    grid-template-areas:
        "date date"
        "time place";

    align-items: baseline;

    column-gap: var(--event-gap);

    margin: 0;
}


/* -----------------------------------------
   Datum – outlined
----------------------------------------- */

.event__date {
    grid-area: date;

    margin: 0;

    color: transparent;

    font-size: var(--fs-event-date);
    font-weight: 500;

    line-height: 0.95;
    letter-spacing: -0.035em;

    white-space: nowrap;

    -webkit-text-stroke: 1.5px var(--color-white);
}


/* -----------------------------------------
   Uhrzeit
----------------------------------------- */

.event__time {
    grid-area: time;

    margin: 0;

    color: var(--color-white);

    font-size: var(--fs-event-time);
    font-weight: 700;

    line-height: 1.1;

    white-space: nowrap;
}


/* -----------------------------------------
   Ort
----------------------------------------- */

.event__place {
    grid-area: place;

    margin: 0;

    color: var(--color-white);

    font-size: var(--fs-event-place);
    font-weight: 400;

    line-height: 1.2;
}


/* =========================================
   TABLET + DESKTOP
   ab 700px

   Drei saubere Spalten:
   Datum | Uhrzeit | Ort

   Die Spalten gehören zur ganzen Liste
   (subgrid). Dadurch sind sie in jeder
   Zeile gleich breit und immer genau so
   breit wie der längste Inhalt.
========================================= */

@media (min-width: 700px) {

    .events {
        --event-gap: clamp(1.75rem, 4vw, 4.5rem);
    }

    .events__list {
        grid-template-columns:
            auto
            auto
            minmax(0, 1fr);

        column-gap: var(--event-gap);
        row-gap: 0.9rem;
    }

    .event {
        grid-column: 1 / -1;

        /*
           Die erste Zeile ist nur ein Ersatz
           für ältere Browser ohne subgrid.
        */
        grid-template-columns:
            calc(var(--fs-event-date) * 3)
            calc(var(--fs-event-time) * 4.4)
            minmax(0, 1fr);

        grid-template-columns: subgrid;

        grid-template-areas:
            "date time place";

        align-items: center;
    }
}