/**
 * Urzeit Abenteuer – Erdgeschichte-Zeitleiste v4
 * assets/css/ua-zeitleiste.css
 */

:root {
    --ua-zt-bg:        #fffbe830;
    --ua-zt-track-bg:  rgba(255,255,255,.12);
    --ua-zt-h-aeren:   30px;
    --ua-zt-h-periode: 30px;
    --ua-zt-h-track:   5px;
    --ua-zt-marker-s:  13px;
    --ua-zt-radius:    10px;
}

/* ── Wrapper ────────────────────────────────────────────────────────── */
.ua-zeitleiste {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    padding:        10px 12px;
    background:     var(--ua-zt-bg);
    border-radius:  var(--ua-zt-radius);
}

/* ── Kopfzeile ──────────────────────────────────────────────────────── */
.ua-zt-header {
    margin-bottom: 2px;
}
.ua-zt-meta-label {
    display:        flex;
    align-items:    center;
    gap:            5px;
    font-size:      15px;
    color:          var(--wp--preset--color--custom-knochenwei);
}

/* ── Zeilen-Labels ──────────────────────────────────────────────────── */
.ua-zt-row-label {
    margin-top:    5px;
    margin-bottom: 2px;
}
.ua-zt-row-tag {
    font-size:      9px;
    font-weight:    500;
    color:          rgba(255,255,255,.3);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.ua-zt-row-label--perioden .ua-zt-row-tag {
    color: rgba(255,255,255,.5);
}

/* ── Balken ─────────────────────────────────────────────────────────── */
.ua-zt-balken {
    display:       flex;
    gap:           1px;
    border-radius: 4px;
    overflow:      hidden;
}
.ua-zt-balken--aeren {
    height: var(--ua-zt-h-aeren);
    margin-top:var(--wp--preset--spacing--20);
    margin-bottom:var(--wp--preset--spacing--20);
}
.ua-zt-balken--perioden {
    height: var(--ua-zt-h-periode);
}

/* ── Segment ────────────────────────────────────────────────────────── */
.ua-zt-seg {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-width:       2px;
    overflow:        hidden;
}
.ua-zt-seg-label {
    font-size:      15px;
    color:          var(--wp--preset--color--custom-indigo);
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    padding:        0 5px;
    pointer-events: none;
    line-height:    1;
}

/* Ären-Balken: Labels nur wenn genug Platz */
.ua-zt-balken--aeren .ua-zt-seg-label {
    font-size: 15px;
    color:     var(--wp--preset--color--custom-indigo);
    padding:   0 3px;
}

/* Aktives Segment: pinker Rahmen */
.ua-zt-seg--active {
    outline:        2px solid #ff2c45;
    outline-offset: -1px;
    z-index:        1;
}
.ua-zt-seg--active .ua-zt-seg-label {
    color:       var(--wp--preset--color--custom-indigo);
    font-weight: 600;
}

/* ── Positions-Track ────────────────────────────────────────────────── */
.ua-zt-track {
    position:      relative;
    height:        var(--ua-zt-h-track);
    background:    var(--ua-zt-track-bg);
    border-radius: calc(var(--ua-zt-h-track) / 2);
    margin-top: var(--wp--preset--spacing--20);
    margin-bottom: var(--wp--preset--spacing--20);
}
.ua-zt-fill {
    position:      absolute;
    top:           0;
    height:        100%;
    border-radius: calc(var(--ua-zt-h-track) / 2);
    min-width:     3px;
}
.ua-zt-marker {
    position:      absolute;
    top:           50%;
    transform:     translate(-50%, -50%);
    width:         var(--ua-zt-marker-s);
    height:        var(--ua-zt-marker-s);
    border-radius: 50%;
    border:        2px solid var(--ua-zt-bg);
    z-index:       2;
}

/* ── Info-Zeile ─────────────────────────────────────────────────────── */
.ua-zt-info {
    display:     flex;
    align-items: center;
    gap:         5px;
    flex-wrap:   wrap;
    margin-top:  3px;
    justify-content: center;
}
.ua-zt-era-link {
    font-size:       15px;
    font-weight:     600;
    text-decoration: none;
    transition:      opacity .15s;
}
.ua-zt-era-link:hover { opacity: .8; text-decoration: underline; }
.ua-zt-sep   { font-size: 15px; color: #fff; }
.ua-zt-dates { font-size: 15px; color: #fff;  }

/* ── Screenreader ───────────────────────────────────────────────────── */
.ua-zt-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}


/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .ua-zeitleiste { padding: 8px 10px; }
    :root {
        --ua-zt-h-periode: 22px;
        --ua-zt-marker-s:  11px;
    }
    .ua-zt-balken--perioden .ua-zt-seg-label { font-size: 15px; }
}

/* ── Print ──────────────────────────────────────────────────────────── */
@media print {
    .ua-zeitleiste { border: 1px solid #ccc; background: #fff !important; }
    .ua-zt-fill, .ua-zt-marker, .ua-zt-seg {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}