/*
 * Über uns.
 * Loaded by the chosen template (see Theme\enqueue_page_assets()).
 *
 * Reference: prod /ueber-uns/ at 1920px.
 *
 * Geometry at 1920px:
 *   head 382 · company 537 · portraits 2128 · quote 218
 *   calendar 2043 · partners 667
 *
 * The section heading is the global block (css/global/section-head.css) and
 * the calendar cards are the global event cards.
 */

/* Every section on this page sits on the darker ground. */
.ub-company,
.ub-features,
.ub-quote,
.ub-events {
    padding:          50px 20px;
    background-color: var(--color-bg-alt);
}

.ub-company__inner,
.ub-quote__inner {
    width:     100%;
    max-width: 1200px;
    margin:    0 auto;
}


/* ══════════════════════════════════════════════════════════════════════════
 * Über das Unternehmen
 * Reference: prod `elementor-element-3388279`.
 * ══════════════════════════════════════════════════════════════════════════ */
.ub-company__card {
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    gap:              50px;
    padding:          100px 60px;
    border:           1px solid rgba(192, 156, 77, .3);
    background-color: #16181d;
}

.ub-company__text {
    width:       100%;
    font-family: var(--font-body);
    font-weight: 400;
    font-size:   16px;
    line-height: 1.25;
    color:       rgba(255, 255, 255, .7);
}

.ub-company__text p {
    margin: 0 0 20px;
}

.ub-company__text p:last-child {
    margin-bottom: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
 * Choreography, ensemble, orchestra
 * Reference: prod `elementor-element-36cc6bd`.
 * ══════════════════════════════════════════════════════════════════════════ */
.ub-features__list {
    display:        flex;
    flex-direction: column;
    gap:            60px;
    width:          100%;
    max-width:      1240px;
    margin:         0 auto;
    padding:        0;
    list-style:     none;
}

/* Prod splits the row 40/60 and lets both sides shrink into the gap, so the
   picture keeps its share of the width instead of stranding the text beside a
   fixed block. Each column takes its share of the gap out of its own width —
   that lands on prod's 464 + 696 in the 1240 column exactly, and it keeps
   doing so when the gap narrows further down. */
.ub-features__item {
    --row-gap:   80px;
    display:     flex;
    align-items: center;
    gap:         var(--row-gap);
}

/* The picture changes side every other row. The markup keeps one order — the
   row simply reads the other way — so the text still follows its picture for
   anything that does not see the layout. */
.ub-features__item:nth-child(even) {
    flex-direction: row-reverse;
}

.ub-features__media {
    flex:    0 0 calc(40% - var(--row-gap) * .4);
    margin:  0;
    padding: 10px;
    border:  1px solid rgba(192, 156, 77, .4);
}

.ub-features__image {
    display: block;
    width:   100%;
    height:  auto;
}

.ub-features__body {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            16px;
    flex:           0 0 calc(60% - var(--row-gap) * .6);
}

.ub-features__kicker {
    margin:         0;
    font-family:    var(--font-body);
    font-weight:    400;
    font-size:      16px;
    line-height:    1.25;
    text-transform: uppercase;
    color:          var(--color-primary);
}

/* Gold, not white: on this page the portrait titles are the accent, and the
   section headings with stars are elsewhere. */
.ub-features__title {
    margin:         0;
    font-family:    var(--font-heading);
    font-weight:    400;
    font-size:      40px;
    line-height:    1.2;
    text-transform: uppercase;
    color:          var(--color-primary);
}

.ub-features__rule {
    width:         100px;
    height:        1px;
    margin-bottom: 16px;
    background:    linear-gradient(90deg,
                       rgba(157, 136, 82, 0) 0%,
                       #d0b46d 49.8%,
                       rgba(106, 92, 56, 0) 100%);
}

.ub-features__text {
    margin:      0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size:   16px;
    line-height: 1.25;
    color:       rgba(255, 255, 255, .7);
}


/* ══════════════════════════════════════════════════════════════════════════
 * The line the company stands on
 * Reference: prod `elementor-element-550e7e2`.
 * ══════════════════════════════════════════════════════════════════════════ */
.ub-quote__inner {
    display:        flex;
    flex-direction: column;
    gap:            40px;
}

.ub-quote__line {
    width:      100%;
    height:     1px;
    background: linear-gradient(90deg,
                    rgba(157, 136, 82, 0) 0%,
                    #d0b46d 49.8%,
                    rgba(106, 92, 56, 0) 100%);
}

.ub-quote__text {
    margin:      0;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size:   30px;
    line-height: 1.2;
    text-align:  center;
    color:       var(--color-primary);
}


/* ══════════════════════════════════════════════════════════════════════════
 * Veranstaltungskalender
 * Reference: prod `elementor-element-3539f61`.
 *
 * Five across at 1920, as on prod. The cards are the theme's own, so the rows
 * come out 26px taller than prod's — prod draws a second, tighter card here
 * and one card for the whole site is worth the difference.
 * ══════════════════════════════════════════════════════════════════════════ */
.ub-events__inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            16px;
    width:          100%;
    max-width:      1524px;
    margin:         0 auto;
}

/* Prod holds the grid 48px below the hairline, not the column's own 16. */
.ub-events .section-head__rule {
    margin-bottom: 32px;
}

.ub-events__grid {
    display:               grid;
    grid-template-columns: repeat(5, 1fr);
    gap:                   24px;
    width:                 100%;
    margin:                0;
    padding:               0;
    list-style:            none;
}


/* ══════════════════════════════════════════════════════════════════════════
 * Laptop — the calendar loses a column, as on prod.
 * ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1366px) {

    .ub-features__item {
        --row-gap: 60px;
    }

    .ub-events__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}


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

    /* The sections keep their 50px; prod tightens the card, not the page. */
    .ub-company__card {
        padding: 60px 40px;
    }

    .ub-features__item {
        --row-gap: 40px;
    }

    .ub-features__title {
        font-size: 32px;
    }

    .ub-quote__inner {
        gap: 28px;
    }

    .ub-quote__text {
        font-size: 24px;
    }

    .ub-events__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


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

    .ub-company,
    .ub-features,
    .ub-quote,
    .ub-events {
        padding: 40px 16px;
    }

    .ub-company__card {
        padding: 28px 16px;
    }

    .ub-features__list {
        gap: 28px;
    }

    /* Only here does the picture give up its column. The markup already puts
       it first, so a plain column puts it on top in every row. */
    .ub-features__item,
    .ub-features__item:nth-child(even) {
        --row-gap:      20px;
        flex-direction: column;
        align-items:    stretch;
    }

    /* In a column the basis would size the height, not the width. */
    .ub-features__media,
    .ub-features__body {
        flex: 0 1 auto;
    }

    .ub-features__body {
        gap: 12px;
    }

    .ub-features__title {
        font-size: 24px;
    }

    .ub-quote__inner {
        gap: 16px;
    }

    .ub-quote__text {
        font-size: 20px;
    }

    /* One card across, as on prod: two would leave a poster, a date, a
       title, a venue, a summary, a price and a button in 160px. */
    .ub-events__grid {
        grid-template-columns: 1fr;
        gap:                   16px;
    }
}