/* ==========================================================================
   SUNYA - Card con animazioni
   ========================================================================== */

/* --------------------------------------------------------------------------
   Card base
   -------------------------------------------------------------------------- */

.sunya-card {
    display: flex;
    flex-direction: column;
    background-color: var(--sunya-color-bg);
    border-radius: var(--sunya-radius-lg);
    overflow: hidden;
    border: 1px solid var(--sunya-color-border);
    transition: transform var(--sunya-transition-smooth),
                box-shadow var(--sunya-transition-smooth),
                border-color var(--sunya-transition-smooth);
}


/* --------------------------------------------------------------------------
   Animazione: hover lift (sollevamento)
   -------------------------------------------------------------------------- */

.sunya-card--hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--sunya-shadow-xl);
    border-color: transparent;
}


/* --------------------------------------------------------------------------
   Animazione: hover glow (bagliore)
   -------------------------------------------------------------------------- */

.sunya-card--hover-glow:hover {
    /* v1.5.1: era rgba(233,69,96,.15) — accent di default cristallizzato,
       glow rosso su qualsiasi brand. Ora deriva dall'accent. */
    box-shadow: 0 0 0 1px var(--sunya-color-accent),
                0 8px 25px color-mix(in oklab, var(--sunya-color-accent) 15%, transparent);
    border-color: var(--sunya-color-accent);
}


/* --------------------------------------------------------------------------
   Animazione: hover scale (scala leggera)
   -------------------------------------------------------------------------- */

.sunya-card--hover-scale:hover {
    transform: scale(1.02);
    box-shadow: var(--sunya-shadow-lg);
}


/* --------------------------------------------------------------------------
   Animazione: zoom immagine al hover
   -------------------------------------------------------------------------- */

.sunya-card--img-zoom .sunya-card__image img {
    transition: transform var(--sunya-transition-slow);
}

.sunya-card--img-zoom:hover .sunya-card__image img {
    transform: scale(1.08);
}


/* --------------------------------------------------------------------------
   Animazione: scroll reveal (IntersectionObserver)
   Le card partono invisibili e appaiono con animazione CSS.
   Il JS aggiunge la classe .sunya-card--visible
   -------------------------------------------------------------------------- */

.sunya-card--reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.sunya-card--reveal.sunya-card--visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger: ritardo progressivo per card in griglia */
.sunya-card--reveal:nth-child(2) { transition-delay: 0.1s; }
.sunya-card--reveal:nth-child(3) { transition-delay: 0.2s; }
.sunya-card--reveal:nth-child(4) { transition-delay: 0.3s; }
.sunya-card--reveal:nth-child(5) { transition-delay: 0.35s; }
.sunya-card--reveal:nth-child(6) { transition-delay: 0.4s; }


/* --------------------------------------------------------------------------
   Parti della card
   -------------------------------------------------------------------------- */

.sunya-card__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2;
}

.sunya-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sunya-card__badge {
    position: absolute;
    top: var(--sunya-spacing-md);
    left: var(--sunya-spacing-md);
    background-color: var(--sunya-color-accent);
    color: #ffffff;
    font-size: var(--sunya-font-size-sm);
    font-weight: var(--sunya-font-weight-medium);
    padding: 0.25em 0.75em;
    border-radius: var(--sunya-radius-full);
    z-index: 1;
}

.sunya-card__body {
    padding: var(--sunya-spacing-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sunya-card__title {
    font-size: var(--sunya-font-size-xl);
    font-weight: var(--sunya-font-weight-bold);
    margin-bottom: var(--sunya-spacing-sm);
    line-height: var(--sunya-line-height-heading);
}

.sunya-card__title a {
    color: inherit;
    text-decoration: none;
}

.sunya-card__title a:hover {
    color: var(--sunya-color-accent);
}

.sunya-card__text {
    color: var(--sunya-color-text-light);
    font-size: var(--sunya-font-size-base);
    margin-bottom: var(--sunya-spacing-md);
    flex: 1;
}

.sunya-card__meta {
    font-size: var(--sunya-font-size-sm);
    color: var(--sunya-color-text-light);
    margin-bottom: var(--sunya-spacing-sm);
}

.sunya-card__footer {
    padding: var(--sunya-spacing-md) var(--sunya-spacing-lg);
    border-top: 1px solid var(--sunya-color-border);
}


/* --------------------------------------------------------------------------
   Varianti layout
   -------------------------------------------------------------------------- */

/* Card orizzontale */
.sunya-card--horizontal {
    flex-direction: row;
}

.sunya-card--horizontal .sunya-card__image {
    width: 40%;
    flex-shrink: 0;
    aspect-ratio: auto;
}

.sunya-card--horizontal .sunya-card__body {
    width: 60%;
}

/* Card compatta (senza immagine) */
.sunya-card--compact {
    padding: var(--sunya-spacing-lg);
}

.sunya-card--compact .sunya-card__body {
    padding: 0;
}

/* Card featured (più grande) */
.sunya-card--featured {
    grid-column: span 2;
}

.sunya-card--featured .sunya-card__image {
    aspect-ratio: 2 / 1;
}


/* --------------------------------------------------------------------------
   Grid di card
   -------------------------------------------------------------------------- */

.sunya-cards-grid {
    display: grid;
    gap: var(--sunya-spacing-xl);
}

.sunya-cards-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sunya-cards-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sunya-cards-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media screen and (max-width: 1024px) {
    .sunya-cards-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .sunya-card--featured { grid-column: span 1; }
    .sunya-card--horizontal { flex-direction: column; }
    .sunya-card--horizontal .sunya-card__image,
    .sunya-card--horizontal .sunya-card__body { width: 100%; }
}

@media screen and (max-width: 768px) {
    .sunya-cards-grid--2,
    .sunya-cards-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 480px) {
    .sunya-cards-grid--2,
    .sunya-cards-grid--3,
    .sunya-cards-grid--4 { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .sunya-card,
    .sunya-card--img-zoom .sunya-card__image img {
        transition: none;
    }

    .sunya-card:hover {
        transform: none;
    }

    .sunya-card--reveal {
        opacity: 1;
        transform: none;
    }
}