/* ==========================================================================
   Homepage-hero — de casestapel rechts

   De hero toont niet langer twee zwevende schermen, maar dezelfde stapel
   browservensters als de casesectie (.dc-cases__deck en .dc-card uit
   dc-home.css), gevuld met alle cases van de pagina. Dit bestand regelt
   alleen wat met déze plek te maken heeft: de maat van de kolom, een
   rustiger naamregel en fijnere streepjes. Alles hangt onder .dc-hero__cases,
   zodat de casesectie zelf er niets van merkt.
   ========================================================================== */

.dc-hero__cases {
    position: relative;
    min-width: 0;
    width: 100%;
    max-width: 620px;
    justify-self: end;
}

/* Het zwevende label hangt half onder het voorste venster; die ruimte geven
   we het, anders valt het over de naamregel. */
.dc-hero__cases .dc-deck { margin-bottom: 20px; }

.dc-hero__cases .dc-cases__deck::before { inset: -14% -14% -18% -12%; }

/* --- De naamregel onder de stapel ---------------------------------------- */

.dc-hero__caseline { margin-top: clamp(18px, 2vw, 28px); }

.dc-hero__cases .dc-cases__panels { margin-top: 0; }

.dc-hero__cases .dc-panel { gap: 8px; }

.dc-hero__cases .dc-panel__client {
    font-size: clamp(1.125rem, 1.5vw, 1.375rem);
    line-height: 1.2;
}

.dcx .dc-hero__cases .dc-panel__client a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--dc-ink);
    text-decoration: none;
    transition: color var(--dc-fast) var(--dc-ease);
}

.dcx .dc-hero__cases .dc-panel__client a:hover { color: var(--dc-blue); }

.dc-hero__cases .dc-panel__client svg {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--dc-blue);
    transition: transform var(--dc-mid) var(--dc-ease);
}

.dc-hero__cases .dc-panel__client a:hover svg { transform: translateX(3px); }

.dc-hero__cases .dc-panel__client a:focus-visible {
    outline: 2px solid var(--dc-blue);
    outline-offset: 4px;
    border-radius: 4px;
}

/* --- De bediening --------------------------------------------------------- */

.dc-hero__cases .dc-cases__bar {
    margin-top: 16px;
    padding-top: 14px;
    gap: 12px;
}

.dcx .dc-hero__cases .dc-cases__tick { width: 14px; }
.dcx .dc-hero__cases .dc-cases__tick.is-active { width: 30px; }

.dcx .dc-hero__cases .dc-cases__btn { width: 34px; height: 34px; }
.dc-hero__cases .dc-cases__btn svg { width: 15px; height: 15px; }

/* --- Smaller: de stapel onder de tekst ------------------------------------ */

@media (max-width: 1100px) {
    .dc-hero__cases { justify-self: start; }
}

@media (max-width: 620px) {
    .dc-hero__cases .dc-cases__bar { flex-wrap: nowrap; }
    .dc-hero__cases .dc-cases__ticks { order: 0; flex-basis: auto; }
}