/* Families Section — shared component */
.event-families {
    --families-bg: #ebe4ef;
    --families-card-bg: #ffffff;
    --families-accent: #7c5295;
    --families-heading: #5a3d6e;
    --families-label: rgba(124, 82, 149, 0.75);
    --families-name: #4a3058;
    --families-desc: rgba(74, 48, 88, 0.75);
    --families-card-shadow: 0 4px 20px rgba(90, 61, 110, 0.1);
    --families-heading-size: clamp(1.5rem, 5.5vw, 2rem);
    --families-padding-y: 2.5rem;
    --families-padding-x: 1.25rem;
    --families-card-gap: 1rem;
    --families-anim-duration: 0.65s;
    --families-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);

    background: var(--families-bg);
    padding: var(--families-padding-y) var(--families-padding-x);
    text-align: center;
}

.event-families--compact {
    --families-heading-size: 1.15rem;
    --families-padding-y: 1rem;
    --families-padding-x: 0.5rem;
    --families-card-gap: 0.65rem;
    --families-anim-duration: 0.5s;
}

.event-families__heading {
    font-size: var(--families-heading-size);
    font-weight: 700;
    color: var(--families-heading);
    line-height: 1.45;
    margin: 0 0 1.75rem;
}

.event-families--compact .event-families__heading {
    margin-bottom: 1rem;
}

.event-families__cards {
    display: flex;
    flex-direction: column;
    gap: var(--families-card-gap);
    max-width: 380px;
    margin: 0 auto;
}

.event-families__card {
    background: var(--families-card-bg);
    border-radius: 16px;
    padding: 1.35rem 1.25rem 1.2rem;
    box-shadow: var(--families-card-shadow);
    text-align: center;
}

.event-families--compact .event-families__card {
    padding: 0.85rem 0.75rem;
    border-radius: 12px;
}

.event-families__label {
    display: block;
    font-size: clamp(0.72rem, 2.2vw, 0.82rem);
    font-weight: 500;
    color: var(--families-label);
    margin-bottom: 0.55rem;
    letter-spacing: 0.02em;
}

.event-families__name {
    font-size: clamp(1.15rem, 4vw, 1.45rem);
    font-weight: 700;
    color: var(--families-name);
    line-height: 1.35;
    margin: 0 0 0.4rem;
}

.event-families__desc {
    font-size: clamp(0.82rem, 2.5vw, 0.92rem);
    font-weight: 400;
    color: var(--families-desc);
    line-height: 1.55;
    margin: 0;
}

/* ── Entrance animations ── */
@media (prefers-reduced-motion: no-preference) {
    .event-families--animate:not(.is-visible) .event-families__heading,
    .event-families--animate:not(.is-visible) .event-families__card {
        opacity: 0;
        transform: translateY(18px);
    }

    .event-families--animate.is-visible .event-families__heading {
        animation: familiesHeadingIn var(--families-anim-duration) var(--families-anim-ease) forwards;
    }

    .event-families--animate.is-visible .event-families__card {
        animation: familiesCardIn var(--families-anim-duration) var(--families-anim-ease) forwards;
    }

    .event-families--animate.is-visible .event-families__card:nth-child(1) {
        animation-delay: 0.2s;
    }

    .event-families--animate.is-visible .event-families__card:nth-child(2) {
        animation-delay: 0.38s;
    }
}

@keyframes familiesHeadingIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes familiesCardIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .event-families--animate .event-families__heading,
    .event-families--animate .event-families__card {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}