/*
 * Privatkonzerte.
 * Loaded by slug (see Theme\enqueue_page_assets()).
 *
 * Reference: prod /privatkonzerte/ at 1920px.
 *
 * Geometry at 1920px:
 *   head 312 · claim 728 · offer 708 · gallery 873
 *   mission 373 · advantages 676 · FAQ 625 · partners 667
 *
 * Columns: 1360 for the two card sections, 1240 for the gallery, 920 for the
 * claim, 768 for the mission and the FAQ. Each block carries its own width
 * because prod's page uses five of them.
 */

/* ── Shared ────────────────────────────────────────────────────────────── */
.pk-intro__inner,
.pk-services__inner,
.pk-gallery__inner,
.pk-mission__inner,
.pk-advantages__inner {
    width:  100%;
    margin: 0 auto;
}

.pk-services__inner,
.pk-advantages__inner { max-width: 1360px; }
.pk-gallery__inner    { max-width: 1240px; }
.pk-intro__inner      { max-width:  920px; }
.pk-mission__inner    { max-width:  768px; }

/* The hairline that closes a section off at each end. */
.pk-line {
    display:    block;
    width:      100%;
    height:     1px;
    background: linear-gradient(90deg,
                    rgba(157, 136, 82, 0) 0%,
                    #d0b46d 49.8%,
                    rgba(106, 92, 56, 0) 100%);
}

/* ── Card ──────────────────────────────────────────────────────────────── */
/* The offer and the advantages share one card; only the alignment differs. */
.pk-card {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            16px;
    padding:        24px;
    border:         1px solid rgba(192, 156, 77, .2);
}

.pk-card--centred {
    align-items: center;
    text-align:  center;
}

/* prod draws the small icons inside a 40px box, which is what sets the card's
   rhythm — the glyph itself is 28. */
.pk-card__icon {
    flex-shrink: 0;
}

.pk-card--centred .pk-card__icon {
    height: 40px;
}

/* The hairline under a card's name. The section heading's own rule is the
   global one (css/global/section-head.css); this one lives with the card. */
.pk-card__rule {
    width:      100px;
    height:     1px;
    background: linear-gradient(90deg,
                    rgba(157, 136, 82, 0) 0%,
                    #d0b46d 49.8%,
                    rgba(106, 92, 56, 0) 100%);
}

.pk-card__title {
    margin:      0;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size:   24px;
    line-height: 1.167;
    color:       var(--color-text);
}

.pk-card__text {
    margin:      0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size:   14px;
    line-height: 1.143;
    color:       var(--color-muted);
}

.pk-card__items {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    margin:         0;
    padding:        0;
    list-style:     none;
}

.pk-card__item {
    display:     flex;
    align-items: center;
    gap:         4px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size:   16px;
    line-height: 1.25;
    color:       rgba(255, 255, 255, .7);
}

.pk-card__bullet {
    flex-shrink: 0;
    width:       10px;
    color:       var(--color-primary);
}


/* ══════════════════════════════════════════════════════════════════════════
 * Claim and numbers
 * Reference: prod `elementor-element-45525a4`.
 * ══════════════════════════════════════════════════════════════════════════ */
.pk-intro {
    padding:          50px 20px 100px;
    background-color: var(--color-bg-alt);
}

.pk-intro__inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            50px;
}

.pk-intro__card {
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    gap:              24px;
    width:            768px;
    max-width:        100%;
    padding:          60px;
    border:           1px solid rgba(192, 156, 77, .3);
    background-color: #16181d;
    text-align:       center;
}

.pk-intro__deco {
    flex-shrink: 0;
    height:      16px;
}

.pk-intro__text,
.pk-intro__accent {
    margin:         0;
    max-width:      646px;
    font-family:    var(--font-body);
    font-weight:    400;
    font-size:      18px;
    line-height:    1.333;
    text-transform: uppercase;
}

.pk-intro__text {
    color: rgba(255, 255, 255, .8);
}

/* The gold line glows a little, as on prod. */
.pk-intro__accent {
    color:       var(--color-primary);
    text-shadow: 0 0 4px rgba(255, 200, 19, .6);
}

/* ── Numbers ───────────────────────────────────────────────────────────── */
.pk-intro__stats {
    display:          flex;
    justify-content:  space-between;
    gap:              16px;
    width:            100%;
    margin:           0;
    padding:          16px;
    border:           1px solid rgba(192, 156, 77, .3);
    background-color: var(--color-bg-alt);
    list-style:       none;
}

.pk-intro__stat {
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    justify-content:  center;
    gap:              8px;
    flex:             1 1 0;
    padding:          24px;
    border:           1px solid rgba(192, 156, 77, .3);
    background-color: #16181d;
    text-align:       center;
}

.pk-intro__stat-value {
    margin:      0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size:   36px;
    line-height: 1.167;
    color:       var(--color-primary);
    text-shadow: 0 0 10px rgba(255, 200, 19, .6);
}

.pk-intro__stat-title {
    margin:         0;
    font-family:    var(--font-body);
    font-weight:    400;
    font-size:      16px;
    line-height:    1.25;
    text-transform: uppercase;
    color:          rgba(255, 255, 255, .8);
}


/* ══════════════════════════════════════════════════════════════════════════
 * Unser Angebot
 * Reference: prod `elementor-element-1fd25bd`.
 * ══════════════════════════════════════════════════════════════════════════ */
.pk-services {
    padding:          0 20px;
    background-color: #16181d;
}

.pk-services__inner,
.pk-advantages__inner {
    display:        flex;
    flex-direction: column;
    gap:            100px;
}

.pk-services__body,
.pk-advantages__body {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             50px;
}

.pk-services__list {
    display:    flex;
    align-items: stretch;
    gap:        24px;
    width:      100%;
    margin:     0;
    padding:    0;
    list-style: none;
}

.pk-services__item {
    flex: 1 1 0;
}


/* ══════════════════════════════════════════════════════════════════════════
 * Fotos von Veranstaltungen
 * Reference: prod `elementor-element-448ac0e`.
 * ══════════════════════════════════════════════════════════════════════════ */
.pk-gallery {
    padding: 100px 20px;
}

.pk-gallery__inner {
    display:        flex;
    flex-direction: column;
    gap:            50px;
}

/* The vertical padding is prod's: its grid spaces the cells with padding, so
   the outer edge gets the same 20px the rows have between them. */
.pk-gallery__grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   40px;
    margin:                0;
    padding:               20px 0;
    list-style:            none;
}

/* Everything past the limit stays in the markup for the lightbox and for
   visitors without JS. */
.pk-gallery__item--overflow {
    display: none;
}

.pk-gallery__tile {
    position:     relative;
    display:      block;
    overflow:     hidden;
    aspect-ratio: 570 / 450;
}

.pk-gallery__image {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform var(--transition);
}

.pk-gallery__tile:hover .pk-gallery__image,
.pk-gallery__tile:focus-visible .pk-gallery__image {
    transform: scale(1.04);
}

.pk-gallery__more {
    position:         absolute;
    inset:            0;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    padding:          0 12px;
    background-color: rgba(0, 0, 0, .5);
    font-family:      var(--font-body);
    font-weight:      500;
    font-size:        16px;
    line-height:      1.4;
    text-align:       center;
    text-transform:   uppercase;
    color:            var(--color-text);
}


/* ══════════════════════════════════════════════════════════════════════════
 * Mission
 * Reference: prod `elementor-element-5e4b63a`.
 * ══════════════════════════════════════════════════════════════════════════ */
.pk-mission {
    padding:          50px 20px 100px;
    background-color: var(--color-bg-alt);
}

.pk-mission__card {
    position: relative;
    padding:  75px 20px 50px 40px;
    border:   1px solid var(--color-primary);
}

/* The ornament straddles the top border and carries the section's own
   background, so the line breaks around it instead of running behind. */
.pk-mission__label {
    position:         absolute;
    top:              -50px;
    left:             50%;
    display:          block;
    width:            100%;
    max-width:        346px;
    height:           auto;
    background-color: var(--color-bg-alt);
    transform:        translateX(-50%);
}

.pk-mission__text {
    margin:         0 auto;
    max-width:      706px;
    font-family:    var(--font-body);
    font-weight:    400;
    font-size:      18px;
    line-height:    1.333;
    text-align:     center;
    text-transform: uppercase;
    color:          var(--color-primary);
    text-shadow:    0 0 8px rgba(255, 200, 19, .6);
}


/* ══════════════════════════════════════════════════════════════════════════
 * Vorteile
 * Reference: prod `elementor-element-6c7eafb`.
 * ══════════════════════════════════════════════════════════════════════════ */
.pk-advantages {
    padding:          0 20px;
    background-color: #16181d;
}

.pk-advantages__list {
    display:     flex;
    align-items: stretch;
    gap:         16px;
    width:       100%;
    margin:      0;
    padding:     0;
    list-style:  none;
}

.pk-advantages__item {
    flex:             1 1 0;
    background-color: var(--color-bg-alt);
}


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

    .pk-intro {
        padding: 40px 20px 60px;
    }

    .pk-intro__card {
        padding: 40px;
    }

    .pk-intro__inner,
    .pk-services__body,
    .pk-advantages__body,
    .pk-gallery__inner {
        gap: 36px;
    }

    .pk-services__inner,
    .pk-advantages__inner {
        gap: 60px;
    }

    .pk-gallery {
        padding: 60px 20px;
    }

    .pk-mission {
        padding: 40px 20px 60px;
    }

    .pk-intro__text,
    .pk-intro__accent,
    .pk-mission__text {
        font-size: 16px;
    }

    /* Three abreast is the most the offer fits; the numbers and the
       advantages wrap instead of shrinking past readability. */
    .pk-intro__stats,
    .pk-advantages__list {
        flex-wrap: wrap;
    }

    .pk-intro__stat {
        flex: 1 1 200px;
    }

    .pk-advantages__item {
        flex: 1 1 200px;
    }

    .pk-gallery__grid {
        grid-template-columns: repeat(3, 1fr);
        gap:                   20px;
    }
}


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

    .pk-intro {
        padding: 40px 16px;
    }

    .pk-intro__card {
        padding: 24px;
    }

    .pk-intro__inner,
    .pk-services__body,
    .pk-advantages__body,
    .pk-gallery__inner {
        gap: 28px;
    }

    .pk-services,
    .pk-advantages {
        padding: 0 16px;
    }

    .pk-services__inner,
    .pk-advantages__inner {
        gap: 28px;
    }

    .pk-gallery {
        padding: 28px 16px;
    }

    .pk-mission {
        padding: 40px 16px;
    }

    .pk-mission__card {
        padding: 60px 16px 40px;
    }

    .pk-mission__label {
        top: -28px;
    }

    /* Every row of cards becomes a column. */
    .pk-services__list,
    .pk-advantages__list,
    .pk-intro__stats {
        flex-direction: column;
    }

    .pk-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
        gap:                   12px;
    }

    .pk-gallery__more {
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .pk-gallery__image {
        transition: none;
    }
}