/* BESTAND: styles/11-practice.css
 * Practice-tekst, beeld, dienstenknopruimte en responsieve kabel.
 * Overzicht: HANDLEIDING.md → Vormgeving; laadvolgorde: index.html.
 */
/* ==========================================================================
   10. THE PRACTICE
   ==========================================================================  */

/* 10A. Practice-paneel, carrousel en kabel ------------------------------------------------ */

.practice-panel {
    position: relative;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.practice-cable-slot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    min-width: 0;
    height: 104px;
    pointer-events: none;
}

.practice-title-cable {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    max-width: none;
    overflow: visible;
    visibility: hidden;
    color: #111111;
    pointer-events: none;
    user-select: none;
}

.practice-title-cable-path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
}

.practice-cable-slot > .mobile-patch-strip {
    display: none;
}

.practice-panel[data-practice-cable="strip"] .practice-cable-slot > .mobile-patch-strip {
    display: block;
}

/* Hetzelfde ritme in beide talen, inclusief ruimte voor het trema in IDEEËN. */
.practice-panel .display-title { line-height: 1; }

.practice-panel .practice-grid {
    position: relative;
    z-index: 2;
    align-items: stretch;
}

.practice-panel .practice-right {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 28px;
}

.practice-panel .practice-right > .about-inline-image {
    flex: 1 1 0;
    width: 100%;
    min-height: 220px;
    margin: 0;
}

.practice-panel .about-inline-carousel-track {
    position: absolute;
    inset: 0;
    height: 100%;
}

.practice-panel .about-inline-image-media {
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.practice-panel .practice-right > .copy {
    flex: 0 0 auto;
    margin: 0;
}

.practice-section {
    position: relative;
    padding-top: 44px;
    padding-bottom: 12px;
}

@media (min-width: 1081px) {
    .practice-panel .practice-grid {
        /* Whole fractions use all available space when the title hits its minimum width. */
        grid-template-columns: 52fr 48fr;
    }
}

@media (max-width: 1351px) {
    /* Preserve the existing image spacing; cable placement follows the title. */
    .practice-cable-slot {
        height: 64px;
    }
}

@media (max-width: 1080px) {
    .practice-title-cable {
        display: none;
    }

    .practice-panel .practice-cable-slot > .mobile-patch-strip {
        display: none;
    }

    /* De kabel komt achter de bovenrand van de foto vandaan. Dezelfde
       variabele regelt de kolomafstand en de aansluiting: geen losse offsets. */
    .practice-cable-slot {
        position: relative;
    }

    .practice-cable-slot > .mobile-hanging-patch--practice {
        display: block;
        left: 0;
        bottom: calc(-1 * var(--practice-compact-gap));
        width: min(100%, 360px);
        height: auto;
        aspect-ratio: 360 / 92;
        color: #111111;
    }

    .practice-panel .practice-grid {
        gap: 24px;
    }

    .practice-panel .practice-right {
        --practice-compact-gap: 24px;
        gap: var(--practice-compact-gap);
    }

    .practice-panel .practice-right > .about-inline-image {
        flex: 0 0 auto;
        min-height: 0;
        height: clamp(220px, 60vw, 420px);
    }
}

@media (max-width: 720px) {
    .practice-panel .display-title.compact {
        font-size: clamp(2rem, 12.5vw, 4.6rem);
    }
}

@media (min-width: 1081px) and (max-height: 980px) {
    .practice-section {
        padding-top: 38px;
        padding-bottom: 6px;
    }
}

@media (min-width: 1081px) and (max-height: 820px) {
    .practice-section {
        padding-top: 34px;
        padding-bottom: 2px;
    }
}