/*
 * Page head — the banner every inner page opens with: breadcrumbs, title,
 * a line of lead text and an ornament, over a photo.
 * Loaded on every page (see functions.php enqueue()).
 *
 * Geometry at 1920px (prod /events/): 324 tall, rows 16px apart.
 */

/* ── Page head ─────────────────────────────────────────────────────────── */
.page-head {
    position: relative;
    padding:  100px 20px;
    overflow: hidden;
}

.page-head__bg {
    position: absolute;
    inset:    0;
    z-index:  0;
}

.page-head__bg-image {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.page-head__inner {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            16px;
    text-align:     center;
}

.page-head__title {
    margin:         0;
    font-family:    var(--font-heading);
    font-weight:    400;
    font-size:      40px;
    line-height:    48px;
    text-transform: uppercase;
    color:          var(--color-primary);
}

.page-head__text {
    margin:      0;
    font-family: var(--font-body);
    font-weight: 500;
    font-size:   18px;
    line-height: 1.333;
    color:       var(--color-text);
}

.page-head__deco {
    flex-shrink: 0;
    height:      20px;
}

.page-head__ornament {
    display:     block;
    flex-shrink: 0;
    width:       204px;
    height:      22px;
}

/* ── Modifiers ─────────────────────────────────────────────────────────── */
/* A head that carries a button sits tighter than one that only names the
   page — prod gives it 65px instead of 100. */
.page-head--compact {
    padding: 65px 20px;
}

/* Some heads fade their photo into the section below instead of showing it
   flat; `--shaded` is the softer 80% version prod uses on Vermietungen. */
.page-head--gradient .page-head__bg::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(180deg, rgba(15, 17, 20, 0) 0%, var(--color-bg-alt) 100%);
    opacity:    var(--page-head-shade, 1);
}

.page-head--shaded {
    --page-head-shade: .8;
}

/* The quieter height: 80px instead of 100. Prod gives it to the heads that
   only name the page. */
.page-head--slim {
    padding: 80px 20px;
}

/* The lightest of the three veils — the photo stays legible through it. */
.page-head--faint {
    --page-head-shade: .3;
}

/* A head that opens a list rather than naming a page: a narrow column and a
   lighter lead line. Pair it with --slim for prod's 80px. */
.page-head--narrow .page-head__inner {
    max-width: 600px;
}

.page-head--narrow .page-head__text {
    font-weight: 400;
    font-size:   16px;
    line-height: 1.25;
}


/* ── Breadcrumbs ───────────────────────────────────────────────────────── */
.breadcrumbs__list {
    display:    flex;
    flex-wrap:  wrap;
    align-items: center;
    justify-content: center;
    gap:        8px;
    margin:     0;
    padding:    0;
    list-style: none;
    font-family: var(--font-body);
    font-size:  14px;
    line-height: 1.4;
    color:      var(--color-muted);
}

/* The separator belongs to the crumb that follows it, so it never trails the
   last one. */
.breadcrumbs__item + .breadcrumbs__item::before {
    content:      '/';
    margin-right: 8px;
    color:        rgba(255, 255, 255, .35);
}

.breadcrumbs__link {
    color:           inherit;
    text-decoration: none;
    transition:      color var(--transition);
}

.breadcrumbs__link:hover,
.breadcrumbs__link:focus-visible {
    color: var(--color-primary);
}

.breadcrumbs__current {
    color: var(--color-primary);
}

/* ── Laptop ────────────────────────────────────────────────────────────── */
/* The title rides prod's "secondary" type scale — 40/48 · 36/42 · 28/32 ·
   24/28 — which every page head on the site shares. */
@media (max-width: 1366px) {

    .page-head__title {
        font-size:   36px;
        line-height: 42px;
    }
}

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

    .page-head {
        padding: 60px 20px;
    }

    .page-head__title {
        font-size:   28px;
        line-height: 32px;
    }

    .page-head__text {
        font-size: 16px;
    }
}

/* ── Phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    .page-head {
        padding: 40px 16px;
    }

    .page-head__title {
        font-size:   24px;
        line-height: 28px;
    }

    .page-head__text {
        font-size: 14px;
    }

    .breadcrumbs__list {
        font-size: 12px;
    }
}