/* ══════════════════════════════════════════════════════════════
   DC Treatment facts — "Kaartenwaaier" (deck) layout
   Fanned card deck: hover / focus / tap lifts a card to the front.
   Card offsets (--tx, --ty, --rot) are set by js/dc-treatment-deck.js;
   below 768px the deck becomes a horizontal snap-scroll row.
   ══════════════════════════════════════════════════════════════ */

.dc-tp-deck {
    --dc-deck-card-w: 250px;
    --dc-deck-feature-w: 268px;
    --dc-deck-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --dc-deck-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dc-deck-shadow: 0 18px 40px -22px rgba(26, 26, 46, 0.28);
    --dc-deck-shadow-lg: 0 34px 70px -30px rgba(26, 26, 46, 0.42);
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, var(--dc-tp-soft) 100%);
}

.dc-tp-deck__inner { position: relative; z-index: 1; text-align: center; }
.dc-tp-deck .dc-tp__header { margin-bottom: 0; }

.dc-tp-deck__divider {
    display: inline-block;
    width: 64px; height: 2px; border-radius: 2px;
    margin: 22px auto clamp(28px, 4vw, 44px);
    background: linear-gradient(90deg, transparent, var(--dc-tp-accent), transparent);
}

/* ── Fan ── */
.dc-tp-deck__fan {
    position: relative;
    list-style: none; margin: 0 auto; padding: 0;
    height: clamp(380px, 40vw, 430px);
    perspective: 1400px;
}

.dc-tp-deck__card {
    --tx: 0px; --ty: 0px; --rot: 0deg; --px: 0px;
    position: absolute; top: 0; left: 50%;
    width: var(--dc-deck-card-w);
    margin: 0 0 0 calc(var(--dc-deck-card-w) / -2);
    display: flex; flex-direction: column; gap: 12px;
    padding: 16px 16px 18px;
    background: var(--dc-tp-card);
    border: 1px solid rgba(167, 130, 120, 0.18);
    border-radius: var(--dc-tp-radius);
    box-shadow: var(--dc-deck-shadow);
    text-align: left;
    cursor: pointer; outline: none;
    transform: translateX(calc(var(--tx) + var(--px))) translateY(var(--ty)) rotate(var(--rot));
    transform-origin: bottom center;
    transition: transform 0.5s var(--dc-deck-spring), box-shadow 0.4s var(--dc-deck-ease), border-color 0.3s;
}
.dc-tp-deck__card:hover,
.dc-tp-deck__card:focus-visible,
.dc-tp-deck__card.is-active {
    transform: translateX(var(--tx)) translateY(-26px) rotate(0deg) scale(1.07);
    z-index: 60 !important;
    box-shadow: var(--dc-deck-shadow-lg);
    border-color: rgba(167, 130, 120, 0.5);
}
.dc-tp-deck__card:focus-visible { outline: 2px solid var(--dc-tp-dark); outline-offset: 4px; }

/* Head */
.dc-tp-deck__card-head { display: flex; align-items: center; gap: 10px; }
.dc-tp-deck__avatar {
    flex: none; width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--dc-tp-accent); color: #fff;
}
.dc-tp-deck__avatar svg { width: 19px; height: 19px; }
.dc-tp-deck__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.25; }
.dc-tp-deck__meta strong { font-size: 11.5px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: var(--dc-tp-dark); }
.dc-tp-deck__meta span {
    font-family: 'Trajan Pro', 'Cinzel', serif;
    font-size: 10.5px; letter-spacing: 1.5px; color: var(--dc-tp-accent-text);
}
.dc-tp-deck__dots { margin-left: auto; display: flex; gap: 3px; }
.dc-tp-deck__dots i { width: 4px; height: 4px; border-radius: 50%; background: rgba(167, 130, 120, 0.35); }

/* Media panel carries the key value */
.dc-tp-deck__media {
    position: relative; overflow: hidden;
    aspect-ratio: 16 / 10;
    display: flex; align-items: center; justify-content: center;
    padding: 14px;
    border: 1px solid rgba(167, 130, 120, 0.16);
    border-radius: calc(var(--dc-tp-radius) - 7px);
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(167, 130, 120, 0.2), transparent 60%),
        var(--dc-tp-soft);
}
.dc-tp-deck__media-icon {
    position: absolute; right: -10px; bottom: -14px;
    width: 92px; height: 92px;
    color: var(--dc-tp-accent); opacity: 0.16;
}
.dc-tp-deck__media-icon svg { width: 100%; height: 100%; }
.dc-tp-deck .dc-tp-deck__value {
    position: relative; text-align: center;
    font-size: 25px; font-weight: 300; line-height: 1.2; letter-spacing: -0.01em;
    color: var(--dc-tp-dark);
}

.dc-tp-deck .dc-tp-deck__text { flex: 1; margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--dc-tp-text); }
.dc-tp-deck .dc-tp-facts__scale { margin-top: 0; }

/* Featured appointment card */
.dc-tp-deck__card--feature {
    width: var(--dc-deck-feature-w);
    margin-left: calc(var(--dc-deck-feature-w) / -2);
    border-color: rgba(167, 130, 120, 0.45);
    box-shadow: 0 40px 90px -36px rgba(139, 107, 98, 0.6);
}
.dc-tp-deck__card--feature .dc-tp-deck__avatar { background: var(--dc-tp-dark); }
.dc-tp-deck__card--feature .dc-tp-deck__media {
    border-color: transparent;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(167, 130, 120, 0.45), transparent 60%),
        var(--dc-tp-dark);
}
.dc-tp-deck__card--feature .dc-tp-deck__media-icon {
    position: static; width: 48px; height: 48px;
    color: #fff; opacity: 1;
}
.dc-tp-deck__btn {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 999px;
    font-size: 13px; font-weight: 600; letter-spacing: 0.3px;
    color: #fff; text-decoration: none;
    background: var(--dc-tp-accent-text);
    transition: background 0.25s, transform 0.25s var(--dc-deck-spring);
}
.dc-tp-deck__btn span { display: inline-flex; }
.dc-tp-deck__btn svg { width: 15px; height: 15px; }
.dc-tp-deck__btn:hover,
.dc-tp-deck__btn:focus-visible { color: #fff; background: var(--dc-tp-dark); transform: translateY(-2px); }

/* Hint + footnote */
.dc-tp-deck__hint {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
    margin: 30px 0 0; text-align: center;
    font-size: 13px; font-weight: 500; color: var(--dc-tp-muted);
}
.dc-tp-deck__hint span { display: inline-flex; color: var(--dc-tp-accent-text); }
.dc-tp-deck__hint svg { width: 17px; height: 17px; }
.dc-tp-deck .dc-tp-deck__footnote { text-align: center; }

/* ── Tablet / mobile: snap-scroll row ── */
@media (max-width: 767px) {
    .dc-tp-deck__fan {
        height: auto; perspective: none;
        display: flex; gap: 14px;
        overflow-x: auto; scroll-snap-type: x mandatory;
        margin: 0 -16px; padding: 8px 16px 22px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .dc-tp-deck__fan::-webkit-scrollbar { display: none; }
    .dc-tp-deck__card,
    .dc-tp-deck__card--feature {
        position: relative; top: auto; left: auto; margin: 0;
        flex: 0 0 auto; width: 78vw; max-width: 300px;
        transform: none !important;
        scroll-snap-align: center;
    }
    .dc-tp-deck__card:hover,
    .dc-tp-deck__card.is-active { transform: none !important; }
    .dc-tp-deck .dc-tp-deck__value { font-size: 23px; }
    .dc-tp-deck__hint { margin-top: 14px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-tp-deck__card:hover,
    .dc-tp-deck__card:focus-visible,
    .dc-tp-deck__card.is-active { transform: translateX(var(--tx)) translateY(var(--ty)) rotate(0deg); }
}