/* Site-wide overrides on top of the RD theme. */

/* The contact row caps each cell's content at 290px. In Roboto Mono the
   phone and e-mail lines are wider than that, so they overflowed their cell
   to the right and read as off-centre. Let them use the cell's full width
   and wrap if they still don't fit. */
.layout-bordered-item-inner {
    max-width: 100%;
    overflow-wrap: break-word;
}

/* The theme sets white-space: nowrap on tel: links, which keeps the phone
   number from wrapping in the narrow tablet column. Let it break on spaces. */
.layout-bordered-item-inner a[href^="tel:"] {
    white-space: normal;
}

/* Team profiles: variant with the portrait on the right (desktop only — on
   mobile the figure stays above the text, as in the default layout). */
@media (min-width: 768px) {
    .profile-modern--figure-right .profile-modern-figure {
        order: 2;
    }
}

/* Team profiles: mirror the portrait horizontally. */
.profile-modern-image--flip {
    transform: scaleX(-1);
}

/* Space between stacked team profiles. */
.profile-modern + .profile-modern {
    margin-top: 60px;
}

/* ---------------------------------------------------------------------------
   Legal pages (Impressum, Datenschutz, AGB)
   Long-form boilerplate: a narrower measure, more air between paragraphs and a
   horizontal rule above each main section so the page reads as blocks rather
   than one wall of text.
   ------------------------------------------------------------------------ */
.legal-text {
    max-width: 54rem;
}

.legal-text p {
    line-height: 1.8;
}

.legal-text p + p {
    margin-top: 1.1em;
}

/* Main sections — rule across the column. */
.legal-text h4 {
    margin-top: 3.5rem;
    padding-top: 2.25rem;
    border-top: 1px solid rgba(53, 72, 121, .18);
    color: #354879;
}

.legal-text h4:first-child {
    margin-top: 2rem;
    padding-top: 0;
    border-top: 0;
}

/* Sub-sections — short accent rule instead of a full divider. */
.legal-text h5 {
    position: relative;
    margin-top: 2.25rem;
    padding-left: 40px;
    color: #28334f;
}

.legal-text h5::before {
    content: '';
    position: absolute;
    left: 0;
    top: .7em;
    width: 28px;
    border-bottom: 1px solid rgba(53, 72, 121, .45);
}

.legal-text h4 + p,
.legal-text h5 + p {
    margin-top: 1rem;
}

/* Long URLs in the boilerplate must not push the column sideways. */
.legal-text a {
    overflow-wrap: anywhere;
}

/* Lead-in paragraph above the first section. */
.legal-text .legal-intro {
    font-size: 1.05em;
    color: #74757f;
}

@media (max-width: 575.98px) {
    .legal-text h5 {
        padding-left: 0;
    }

    .legal-text h5::before {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Referenzlisten (Planung, Ausführung)
   Same idiom as the legal pages: a rule above each main section so the page
   reads as blocks. Planung is a dated project list grouped by decade,
   Ausführung a set of client lists that flow into balanced columns.
   ------------------------------------------------------------------------ */
.reference-text {
    max-width: 62rem;
}

.reference-text > p {
    line-height: 1.8;
}

/* Main sections — rule across the column, as on the legal pages. */
.reference-text .reference-section {
    margin-top: 3.5rem;
    padding-top: 2.25rem;
    border-top: 1px solid rgba(53, 72, 121, .18);
    color: #354879;
}

/* Decade groups — quieter than a section, with a short accent rule. */
.reference-text .reference-decade {
    position: relative;
    margin-top: 2.75rem;
    padding-left: 40px;
    color: #28334f;
    font-weight: 500;
    letter-spacing: .04em;
}

.reference-text .reference-decade::before {
    content: '';
    position: absolute;
    left: 0;
    top: .7em;
    width: 28px;
    border-bottom: 1px solid rgba(53, 72, 121, .45);
}

.reference-text .reference-decade + .list-terms {
    margin-top: 1.25rem;
}

/* Project entries. The year sits with the title but reads as a label. */
.reference-text .list-terms dt {
    color: #28334f;
}

.reference-text .list-terms dd {
    line-height: 1.7;
}

.reference-year {
    margin-left: .35em;
    color: #8f9099;
    font-weight: 400;
    white-space: nowrap;
}

/* Client lists: let the browser balance the columns instead of the hand-split
   col-sm-6 pairs the theme came with — they reflow at any width and stay
   correct when entries are added. */
.reference-columns {
    columns: 20rem 2;
    column-gap: 2.5rem;
}

.reference-columns > li {
    break-inside: avoid;
}

@media (max-width: 575.98px) {
    .reference-text .reference-decade {
        padding-left: 0;
    }

    .reference-text .reference-decade::before {
        display: none;
    }
}

/* Portrait-ish figures in the two-column rows (Zertifikat, Ramersdorf).
   .figure-card letterboxes into a 16:9 box with object-fit: contain, which is
   fine while the box is half the page. Once the row stacks below 992px the box
   is full width but only 56% of that tall, so a 960x762 image ends up about
   70% of the column — visibly narrower than the project thumbnails above it.
   Below the breakpoint, let these two run at their own ratio, full width. */
@media (max-width: 991.98px) {
    .figure-card--natural {
        display: block;
    }

    .figure-card--natural .figure-card-sizer {
        display: none;
    }

    .figure-card--natural img {
        position: static;
        width: 100%;
        height: auto;
        min-width: 0;
        min-height: 0;
        max-width: 100%;
        transform: none;
        object-fit: fill;
    }
}

/* Footer credit — PTYXO mark on the last row. */
.footer-credit {
    margin-top: 28px;
}

.footer-credit-link {
    display: inline-block;
    opacity: .55;
    transition: opacity .25s ease-in-out;
}

.footer-credit-link:hover,
.footer-credit-link:focus {
    opacity: 1;
}

.footer-credit-link img {
    width: 40px;
    height: auto;
    display: block;
}

/* Timelapse loop in the figure-card slot on the start page — same framing
   rules as the still it replaced. */
.figure-card .figure-card-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* Start page: the "Alle Projekte" call to action carries the section, so it
   gets a little more weight and a lift on hover than a plain theme button. */
.button-cta {
    font-weight: 700;
    letter-spacing: .04em;
    box-shadow: 0 8px 22px rgba(53, 72, 121, .28);
    transition: box-shadow .25s ease, transform .25s ease;
}
.button-cta:hover,
.button-cta:focus {
    box-shadow: 0 12px 28px rgba(53, 72, 121, .38);
    transform: translateY(-2px);
}

/* More air between that button and the video card below it.
   The theme sets this gap with `html * + .offset-top-3`, which outranks a
   single class — hence the doubled class here. */
.row.video-row {
    margin-top: 70px;
}

@media (min-width: 768px) {
    .row.video-row {
        margin-top: 130px;
    }
}

/* Kontakt: the contact row is two balanced columns (phone + e-mail | the two
   addresses), so each cell may hold two labelled entries. */
@media (min-width: 768px) {
    .layout-bordered-item {
        flex-basis: 50%;
    }
}

/* Kontakt: two labelled entries per cell. */
.contact-addresses > li + li {
    margin-top: 18px;
}

.contact-address-label {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #74757f;
}

/* Kontakt: the second entry in a cell brings its own icon, so it needs the
   same breathing room above it as the cell's leading icon. */
.contact-addresses > li + li .icon {
    display: block;
    margin-bottom: 8px;
}