/* BESTAND: styles/06-about-cables.css
 * About-typografie, kabels, carrousel en transparante dienstenbalk (05D).
 * Overzicht: HANDLEIDING.md → Vormgeving; laadvolgorde: index.html.
 */
/* ==========================================================================
   05. ABOUT EN GEDEELDE KABELVORMEN
   ==========================================================================  */

/* 05A. Gedeeld SVG-kabelsysteem ------------------------------------------------ */

.patch-vector {
    position: absolute;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.patch-vector-cable {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    overflow: visible;
}

.patch-vector-cable-path {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.patch-vector-plug {
    position: absolute;
    left: var(--plug-left, 53%);
    top: var(--plug-top, 31%);
    width: var(--plug-width, 49%);
    height: auto;
    max-width: none;
    transform: translateY(-50%) rotate(var(--plug-rotate, -13deg));
    transform-origin: 0 50%;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Mobiele variant A: één SVG houdt de lijn aan de originele plug verbonden. */
.patch-vector.mobile-patch-strip {
    position: relative;
    flex: 0 0 auto;
    width: min(100%, 420px);
    height: 64px;
    color: inherit;
}

.mobile-patch-strip-drawing {
    display: block;
    width: 100%;
    height: 100%;
}

/* Mobiele hangende vormen: gedeelde lijnstijl; secties bepalen de positie. */
.mobile-hanging-patch {
    display: none;
    position: absolute;
    max-width: none;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.mobile-hanging-patch-path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
}

/* 05B. About-titel en kabels ------------------------------------------------ */

.about-intro-grid {
    overflow: visible;
}

@media (min-width: 1081px) {
    .about-intro-grid {
        /* Volledige restbreedte benutten als ENGINEERING zijn minimum bereikt. */
        grid-template-columns: 52fr 48fr;
    }
}

/* Afmetingen volgen de lettergrootte. De onderstaande regels bepalen ook de
   lege meetankers in beide taalvarianten. about-cable.js houdt de bovenste plug
   bij het Engelse anker en verbindt die met het actieve, vertaalde woord. */

.about-engineering-line {
    position: relative;
    display: block;
    width: fit-content;
    overflow: visible;
    isolation: isolate;
}

.about-engineering-text {
    position: relative;
    z-index: 2;
}

.about-patch {
    position: absolute;
    display: block;
    max-width: none;
    color: #111111;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

.about-patch-bottom {
    left: 54%;
    top: 1.05em;
    width: 1.37em;
    aspect-ratio: 178 / 30;
}

.about-patch-top {
    left: 88%;
    bottom: calc(100% + 0.14em);
    width: 2.38em;
    aspect-ratio: 323 / 190;
    --plug-left: 51%;
    --plug-top: 19%;
    --plug-width: 49%;
    --plug-rotate: -4deg;
}

@media (min-width: 1081px) and (max-width: 1351px) {
    .display-title.compact.about-display-title {
        font-size: clamp(3.5rem, 8vw, 6.8rem);
    }

    .about-patch-top {
        /* Titel en kabel blijven samen binnen de linkerkolom. */
        left: 62%;
        width: 2.14em;
    }
}

@media (max-width: 1080px) {
    .about-patch-top {
        /* Ook in één kolom blijft de volledige plug binnen de schermrand. */
        left: min(88%, calc(100vw - 40px - 2.38em));
    }
}

@media (max-width: 720px) {
    .display-title.compact.about-display-title {
        font-size: clamp(2.45rem, 15vw, 4.6rem);
    }

    .about-patch-bottom {
        left: 53%;
        width: 1.31em;
    }

    .about-patch-top {
        left: min(86%, calc(100vw - 32px - 2.14em));
        width: 2.14em;
    }
}

@media (max-width: 480px) {
    .about-patch-bottom,
    .about-patch-top {
        display: none;
    }
}

/* 05B.1. Hangende About-kabel naast de korte bovenregels, uitsluitend compact.
   De absolute tekening telt niet mee voor de EN/NL-teksthoogte.
   De bestaande desktopkabels en taalankers blijven onaangeraakt. */
@media (max-width: 1080px) {
    .about-title-block { position: relative; }

    .about-title-block .about-patch { display: none; }

    .about-title-block > .mobile-hanging-patch--about {
        display: block;
        top: -48px;
        right: 4px;
        width: min(30vw, 132px);
        height: auto;
        aspect-ratio: 120 / 140;
        color: #111111;
    }
}

@media (orientation: landscape) and (max-width: 1080px) and (max-height: 600px) {
    .about-title-block > .mobile-hanging-patch--about { top: -24px; }
}

/* 05C. Afbeeldingencarrousel ------------------------------------------------ */

.about-inline-image {
    margin-top: 18px;
    border-radius: var(--about-image-radius, 1.4rem);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.about-inline-carousel {
    position: relative;
}

.about-inline-carousel-track {
    display: flex;
    width: 100%;
    transition: transform 0.7s ease;
    will-change: transform;
}

.about-inline-image-media {
    display: block;
    width: 100%;
    min-width: 100%;
    height: min(22vh, 180px);
    object-fit: cover;
    flex: 0 0 100%;
}

/* 05D. Explore services — vaste semitransparante balk over de About-carrousel.
   Alleen de achtergrond is transparant; tekst en pijl blijven volledig dekkend.
   Deze variabelen zijn het onderhoudspunt voor dekking, tint, blur en ronding.
   De balk zit buiten het bewegende fototrack en voegt geen hoogte aan de copy toe. */
.about-intro-grid .sb-services-disclosure {
    --about-services-opacity: 0.65;
    --about-services-hover-opacity: 0.95;
    --about-services-tint: 247 244 239;
    --about-services-blur: 3px;
    --about-image-radius: 1.4rem;
    margin-top: 18px;
}

.about-intro-grid .sb-services-media {
    position: relative;
    isolation: isolate;
    /* Ook zonder foto's blijft de dienstenknop bereikbaar. */
    min-height: 50px;
}

.about-intro-grid .sb-services-media > .about-inline-image {
    margin-top: 0;
}

.about-intro-grid .sb-services-media > .sb-services-trigger {
    position: absolute;
    z-index: 1;
    inset: auto 1px 1px;
    width: calc(100% - 2px);
    min-height: 48px;
    padding: 12px 18px;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0 0 calc(var(--about-image-radius) - 1px) calc(var(--about-image-radius) - 1px);
    background: rgb(var(--about-services-tint) / var(--about-services-opacity));
    color: var(--text);
    -webkit-backdrop-filter: blur(var(--about-services-blur));
    backdrop-filter: blur(var(--about-services-blur));
}

@media (hover: hover) {
    .about-intro-grid .sb-services-media > .sb-services-trigger:hover {
        background: rgb(var(--about-services-tint) / var(--about-services-hover-opacity));
        color: var(--text);
    }
}

.about-intro-grid .sb-services-media > .sb-services-trigger:focus-visible {
    outline-offset: -5px;
}