/* ==========================================================================
   certana/practice-slider
   Bootstrap-Carousel: Bild mit Pfeilen, darunter Punkte, Titel und Text.
   Mobil: Bild 4:3, Punkte unter dem Text (zentriert).
   Ab 768px: Panorama 24:7, Punkte zwischen Bild und Text (linksbündig).
   ========================================================================== */

.practice {
    padding-block: clamp(3rem, 6vw, 5rem);
    background: var(--c-bg);
}

.practice__eyebrow { margin-bottom: 0.75rem; }

.practice__heading {
    margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
    font-family: var(--font-serif);
    font-size: clamp(1.875rem, 1.1rem + 2.6vw, 3.5rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--c-ink);
    text-wrap: balance;
}

.practice__carousel {
    --practice-ratio: 4 / 3;
    position: relative;
    container-type: inline-size;
}

/* Bild ------------------------------------------------------------------- */
.practice__media {
    aspect-ratio: var(--practice-ratio);
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: #dfe5ec;
}
.practice__media picture,
.practice__image {
    display: block;
    width: 100%;
    height: 100%;
}
.practice__image { object-fit: cover; }

/* Text unter dem Bild ---------------------------------------------------- */
.practice__caption { padding: 1.1rem 0.25rem 0; }

.practice__title {
    margin: 0 0 0.35rem;
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 550;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--c-ink);
}
.practice__text {
    margin: 0;
    font-size: 0.975rem;
    line-height: 1.55;
    color: var(--c-muted);
}

.practice__link { color: inherit; text-decoration: none; }
.practice__link:hover {
    color: var(--c-accent-strong);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Pfeile: liegen genau über dem Bild, vertikal mittig -------------------- */
.practice__controls {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    aspect-ratio: var(--practice-ratio);
    padding-inline: 0.75rem;
    pointer-events: none;
}

.practice__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--c-ink);
    box-shadow: 0 8px 24px -8px rgba(11, 18, 32, 0.35);
    pointer-events: auto;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), color 0.2s var(--ease);
}
.practice__arrow:hover {
    transform: scale(1.06);
    color: var(--c-accent-strong);
    box-shadow: 0 12px 28px -8px rgba(11, 18, 32, 0.45);
}
.practice__arrow .icon { width: 20px; height: 20px; }
.practice__arrow--prev .icon { transform: rotate(180deg); }

/* Punkte (überschreibt Bootstrap-Standard) ------------------------------- */
.practice__indicators {
    position: static;
    justify-content: center;
    gap: 0.15rem;
    margin: 1.1rem 0 0;
    padding: 0;
}
.practice__indicators [data-bs-target] {
    box-sizing: content-box;
    flex: none;
    width: 11px;
    height: 11px;
    margin: 0;
    padding: 0;
    border: 6px solid transparent;
    border-radius: 50%;
    background-color: #d3dae4;
    background-clip: padding-box;
    opacity: 1;
    text-indent: -999px;
    transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.practice__indicators [data-bs-target]:hover { background-color: #b6c0ce; }
.practice__indicators .active,
.practice__indicators .active:hover { background-color: var(--c-accent); }

/* Ab Tablet: Panorama, Punkte zwischen Bild und Text --------------------- */
@media (min-width: 768px) {
    .practice__carousel { --practice-ratio: 24 / 7; }

    .practice__media { border-radius: 14px; }

    .practice__caption { padding: 3.4rem clamp(1.25rem, 2.6vw, 2.4rem) 0; }

    .practice__indicators {
        position: absolute;
        top: calc(100cqi * 7 / 24 + 0.7rem);
        left: calc(clamp(1.25rem, 2.6vw, 2.4rem) - 6px);
        right: auto;
        bottom: auto;
        justify-content: flex-start;
        margin: 0;
    }

    .practice__controls { padding-inline: clamp(1rem, 1.6vw, 1.5rem); }
    .practice__arrow { width: 56px; height: 56px; }
    .practice__arrow .icon { width: 24px; height: 24px; }

    .practice__title { font-size: clamp(1.375rem, 1rem + 0.9vw, 1.75rem); margin-bottom: 0.5rem; }
    .practice__text { font-size: clamp(1rem, 0.9rem + 0.25vw, 1.1875rem); }
}