/* =====================================================
 * courses.css – konsistent zu md.css
 * - Index: Desktop Bild links/Text rechts, Mobile Bild oben/Text unten
 * - Slot-Detail: Desktop Grid wie Skizze, Mobile stacked
 * - Radius: überall 8px (via --md-radius)
 * ===================================================== */

/* ============================
 * Design Tokens (wie md.css)
 * ============================ */
:root {
    /* Typography */
    --md-font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --md-fw-light: 300;
    --md-fw-regular: 400;
    --md-fw-medium: 500;
    --md-fw-bold: 700;

    --md-fw-main: var(--md-fw-light);

    /* Colors */
    --md-color-text: #2f2f2f;
    --md-color-card: #ffffff;
    --md-color-accent: #1F3C55;
    --md-color-bg-soft: #E3D6C5;

    /* Core UI tokens */
    --md-radius: 8px;
    --md-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    --md-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.12);
    --md-border: 1px solid rgba(0, 0, 0, 0.03);

    /* Status colors */
    --status-free-bg: #2e9e5b;
    --status-full-bg: #9aa0a6;

    /* Index cards sizing (desktop only fixed height) */
    --course-card-img-w: clamp(180px, 22vw, 260px);
    --course-card-h: clamp(160px, 18vh, 220px);
    --course-card-img-h-mobile: clamp(160px, 26vh, 240px);
}

/* ============================
 * Generic Resets (nur innerhalb AZH Komponenten)
 * ============================ */
.azh-courses a,
.azh-course-detail a,
.azh-slot-detail a {
    color: inherit;
}

.azh-course-card-link,
.azh-month-card-link {
    text-decoration: none !important;
    color: inherit;
}

/* Image hairline fix (klassisch: line-height + inline gap + subpixel) */
.azh-course-card-img-wrap,
.azh-course-detail-img-wrap {
    line-height: 0;           /* kill inline image baseline gap */
    background: transparent;
    border: 0;
    padding: 0;
}

.azh-course-card-img,
.azh-course-detail-img {
    display: block;
    border: 0;
    outline: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* prevents “1px seam” on some renderers */
    transform: translateZ(0) scale(1.001);
}

/* ============================
 * Kursübersicht (Index) – Karten
 * ============================ */
.azh-course-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 2.5rem 0 3rem;
}

.azh-course-card {
    background: var(--md-color-card);
    border: var(--md-border);
    border-radius: var(--md-radius);
    box-shadow: var(--md-shadow);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;

    /* Mobile: NICHT fix, sonst verschwindet Text */
    height: auto;
}

.azh-course-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--md-shadow-hover);
}

/* Mobile default: Bild oben, Text unten */
.azh-course-card > a.azh-course-card-link {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: var(--course-card-img-h-mobile) auto;
    height: auto;
}

.azh-course-card-img-wrap {
    height: var(--course-card-img-h-mobile);
    overflow: hidden;

    /* Mobile: oben rund */
    border-top-left-radius: var(--md-radius);
    border-top-right-radius: var(--md-radius);
}

.azh-course-card-body {
    padding: 1.2rem 1.4rem;
    display: flex;
    align-items: center;
    min-width: 0;
    background: var(--md-color-card);
}

/* Titel-Styling wie vorher */
.azh-course-card-title {
    font-weight: var(--md-fw-medium);
    font-size: 1.2em;
    line-height: 1.25;
    margin: 0 0 0.6rem;
    white-space: normal;
}

/* Desktop: Bild links, Text rechts + ca. 3 Karten sichtbar */
@media (min-width: 768px) {
    .azh-course-card {
        height: var(--course-card-h);
    }

    .azh-course-card > a.azh-course-card-link {
        grid-template-columns: var(--course-card-img-w) minmax(0, 1fr);
        grid-template-rows: 1fr;
        height: 100%;
    }

    .azh-course-card-img-wrap {
        height: 100%;

        /* links rund, innen gerade */
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: var(--md-radius);
        border-bottom-left-radius: var(--md-radius);
    }

    .azh-course-card-body {
        height: 100%;
        align-items: center;
    }
}

/* Status pill (used in month cards + course info card) */
.azh-status-pill {
    display: inline-block;
    padding: 0.35rem 0.7rem;
    border-radius: var(--md-radius);
    font-size: 0.8rem;
    font-weight: var(--md-fw-bold);
    color: #fff;
    line-height: 1;
    vertical-align: middle;
}

.azh-status-pill.is-free { background: var(--status-free-bg); }
.azh-status-pill.is-full { background: var(--status-full-bg); }


/* ============================
 * Kurs-Detailseite (Kategorie)
 * ============================ */
.azh-course-detail {
    margin: 3rem 0 4rem;
}

.azh-course-detail-top {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* ============================
 * Slot-Detail – Mobile Reihenfolge
 * Reihenfolge: Kursinfos -> Termine -> Text -> Button
 * ============================ */

.azh-slot-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.azh-slot-left {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Reihenfolge innerhalb LEFT: erst Kursinfos, dann Termine */
.azh-slot-info-card { order: 1; }
.azh-slot-sessions  { order: 2; }

/* Danach der Text (RIGHT) */
.azh-slot-right { order: 3; }

/* Button bleibt zuletzt (steht im HTML eh unterhalb von .azh-slot-layout) */
.azh-slot-booking-wide { order: 4; }


@media (min-width: 900px) {
    .azh-course-detail-top {
        flex-direction: row;
        align-items: flex-start;
    }

    .azh-course-detail-img-wrap {
        flex: 0 0 320px;
        max-width: 320px;
    }
}

/* Bild quadratisch */
.azh-course-detail-img-wrap {
    border-radius: var(--md-radius);
    overflow: hidden;
    box-shadow: var(--md-shadow);
    aspect-ratio: 1 / 1;
}

.azh-course-detail-title {
    margin: 0 0 1rem; /* Abstand zwischen Überschrift und Text */
    font-size: 1.8rem;
    font-weight: var(--md-fw-medium);
}

.azh-course-detail-desc {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.6;
}

/* ============================
 * Monatskarten (Grid) – 1/2/3 Spalten
 * ============================ */
.azh-course-month-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    margin-top: 2rem; /* nicht zu groß, damit es “kaputt” nicht wirkt */
}

@media (min-width: 700px) {
    .azh-course-month-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .azh-course-month-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.azh-month-card {
    background: var(--md-color-card);
    border: var(--md-border);
    border-radius: var(--md-radius);
    box-shadow: var(--md-shadow);
    padding: 1.1rem 1.2rem;
    transition: transform .15s ease, box-shadow .15s ease;
}

.azh-month-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--md-shadow-hover);
}

/* h3 bleibt semantisch – Optik wie #### */
.md-root h3.azh-month-card-title,
.azh-month-card-title {
    font-size: 1.05rem !important;
    font-weight: var(--md-fw-medium) !important;
    line-height: 1.3 !important;
    margin: 0 0 0.6rem !important;
    text-decoration: none !important;
}

/* Mobile: md-link Look + Pfeil */
@media (max-width: 768px) {
    .md-root h3.azh-month-card-title {
        display: inline-block;                 /* underline nur unter Text */
        border-bottom: 1px solid currentColor; /* underline */
        transition: opacity 0.15s ease;
    }

    .md-root h3.azh-month-card-title::after {
        content: "›";          /* oder ">" wenn du das lieber willst */
        margin-left: 0.25em;
        font-size: 0.85em;
        opacity: 0.85;
    }

    /* optional: leichtes "hover" für touch (bei tap sichtbar auf manchen Browsern) */
    .azh-month-card-link:active .azh-month-card-title {
        opacity: 0.85;
    }
}

.azh-month-card-text {
    margin: 0;
    font-size: 0.95rem;
    color: #555;
}

/* Status als “Button” (8px Radius) */
.azh-month-card-status {
    display: inline-block;
    margin-top: 0.8rem;
    padding: 0.35rem 0.7rem;
    border-radius: var(--md-radius);
    font-size: 0.8rem;
    font-weight: var(--md-fw-bold);
    color: #fff;
    line-height: 1;
}

.azh-month-card-status.is-free { background: var(--status-free-bg); }
.azh-month-card-status.is-full { background: var(--status-full-bg); }

/* ============================
 * Slot-Detailseite (Layout + Styling)
 * ============================ */

.azh-slot-detail {
    margin: 3rem 0 4rem;
}

.azh-slot-title {
    margin: 0 0 1.25rem;
    font-size: 1.8rem;
    font-weight: var(--md-fw-medium);
}

/* Überschriften: NICHT riesig (erzwingen gegen md.css h2) */
.md-root .azh-slot-sessions-title,
.md-root .azh-slot-info-title {
    font-weight: var(--md-fw-medium) !important;
    font-size: 1.2em !important;
    line-height: 1.25 !important;
    margin: 0 0 0.6rem !important;
}

/* --- Termine: transparent (kein weißer Kasten) --- */
.azh-slot-sessions {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;

    /* Mobile: volle Breite (wir machen fit-content erst auf Desktop) */
    width: 100%;
    max-width: 100%;
}

/* Liste ohne Bullets */
.azh-slot-session-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Termine als Zeilen mit weißer Trennlinie */
.azh-slot-session-item {
    margin: 0;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.75);
}

.azh-slot-session-item:last-child {
    border-bottom: 0;
}

/* Datum + Uhrzeit (Uhrzeit wieder sichtbar) */
.azh-slot-session-date {
    font-size: 0.98rem;
    font-weight: var(--md-fw-medium);
    color: var(--md-color-text);
}

.azh-slot-session-time {
    display: block;              /* WICHTIG: wieder anzeigen */
    margin-top: 0.15rem;
    font-size: 0.92rem;
    color: rgba(47, 47, 47, 0.85);
}

/* --- Kursinfos: weiße Karte bleibt --- */
.azh-slot-info-card {
    background: var(--md-color-card);
    border: var(--md-border);
    border-radius: var(--md-radius);
    box-shadow: var(--md-shadow);
    padding: 1.1rem 1.2rem;
}

.azh-slot-info-card p {
    margin: 0.35rem 0;
    font-size: 0.95rem;
}

/* --- Anmeldung & Kosten: Text auf Hintergrund --- */
.azh-slot-desc-detail {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;

    font-size: 1rem;
    line-height: 1.6;
    color: var(--md-color-text);
}

/* Booking Button (volle Breite) */
.azh-slot-booking-wide {
    margin-top: 1.5rem;
}

/* Booking Card bleibt normale Card */
.azh-booking-card {
    background: var(--md-color-card);
    border: var(--md-border);
    border-radius: var(--md-radius);
    box-shadow: var(--md-shadow);
}

.azh-booking-card-inner {
    padding: 1.3rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.azh-booking-sub {
    font-size: 0.95rem;
    color: #555;
    margin: 0;
}

/* Button-Look wie dein Signalchat-Button */
.azh-booking-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.9rem 1.2rem;
    border-radius: var(--md-radius);

    background: var(--md-color-accent);
    color: #fff !important;
    text-decoration: none;

    font-weight: var(--md-fw-medium);
    line-height: 1;

    /* wirkt "buttoniger" */
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    transition: transform .15s ease, opacity .15s ease;
}

.azh-booking-btn:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

/* ============================
 * Desktop Grid (Skizze)
 * -> Rechts soll bis zur Terminsäule "ran"
 * ============================ */
@media (min-width: 1024px) {
    .azh-slot-detail {
        display: grid;

        /* WICHTIG: links nur so breit wie Termine (max-content),
         *       rechts nimmt den Rest (minmax(0,1fr)) */
        grid-template-columns: max-content minmax(0, 1fr);

        grid-template-areas:
        "title   title"
        "dates   info"
        "dates   text"
        "button  button";

        column-gap: clamp(1.5rem, 3vw, 3rem);
        row-gap: 1.5rem;
        align-items: start;
    }

    .azh-slot-header { grid-area: title; }

    /* Wrapper neutralisieren */
    .azh-slot-layout,
    .azh-slot-left,
    .azh-slot-right { display: contents; }

    /* Desktop: Termine dürfen fit-content sein */
    .azh-slot-sessions { width: fit-content; }

    .azh-slot-sessions     { grid-area: dates; }
    .azh-slot-info-card    { grid-area: info; }
    .azh-slot-desc-detail  { grid-area: text; }
    .azh-slot-booking-wide { grid-area: button; margin-top: 0; }
}


/* ============================
 * sr-only
 * ============================ */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}