/* =============================================================================
   SUNSET RENT ACTIVITIES — Frontend Styles
   Plugin Version: 1.0.0
   ============================================================================= */

/* ── Variables ──────────────────────────────────────────────────────────────── */
:root {
    --sra-accent:        #F47B50;
    --sra-accent-dark:   #d96437;
    --sra-text-white:    #ffffff;
    --sra-radius-card:   16px;
    --sra-radius-btn:    30px;
    --sra-shadow-card:   0 4px 24px rgba(0, 0, 0, .18);
    --sra-transition:    0.25s ease;
    --sra-row-height:    280px;
    --sra-grid-gap:      16px;
}

/* =============================================================================
   MESSAGE VIDE
   ============================================================================= */

.sra-no-activities {
    text-align: center;
    color: #888;
    padding: 40px 20px;
    font-size: 15px;
}

/* =============================================================================
   GRILLE BENTO
   ============================================================================= */

.sra-activities-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: var(--sra-row-height);
    grid-auto-flow: dense;      /* comble automatiquement les trous */
    gap: var(--sra-grid-gap);
    padding: 0;
    margin: 0;
    list-style: none;
}

/* ── Tailles des cards ── */

/* Défaut : 1/3 de largeur, hauteur simple */
.sra-activity-card {
    grid-column: span 2;
    grid-row: span 1;
}

/* Wide : 1/2 de largeur, hauteur simple */
.sra-activity-card.sra-card--wide {
    grid-column: span 3;
    grid-row: span 1;
}

/* Tall : 1/3 de largeur, double hauteur */
.sra-activity-card.sra-card--tall {
    grid-column: span 2;
    grid-row: span 2;
}

/* Large : 1/2 de largeur, double hauteur */
.sra-activity-card.sra-card--large {
    grid-column: span 3;
    grid-row: span 2;
}

/* ── Responsive ── */

/* Tablette : 2 colonnes d'égale largeur, hauteur simple */
@media (max-width: 900px) {
    .sra-activities-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 240px;
    }

    .sra-activity-card,
    .sra-activity-card.sra-card--wide,
    .sra-activity-card.sra-card--tall,
    .sra-activity-card.sra-card--large {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/* Mobile : carousel horizontal */
@media (max-width: 560px) {

    .sra-carousel-wrapper {
        position: relative;
        overflow: hidden;
    }

    /* Transforme la grille bento en piste de d\u00e9filement horizontal */
    .sra-activities-grid {
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding: 0 20px 4px;
        scrollbar-width: none;
        grid-template-columns: unset !important;
        grid-auto-rows: unset !important;
        grid-auto-flow: unset !important;
    }

    .sra-activities-grid::-webkit-scrollbar {
        display: none;
    }

    /* Chaque carte occupe toute la largeur et se cale */
    .sra-activity-card,
    .sra-activity-card.sra-card--wide,
    .sra-activity-card.sra-card--tall,
    .sra-activity-card.sra-card--large {
        scroll-snap-align: start;
        flex: 0 0 calc(100% - 40px);
        width: calc(100% - 40px);
        height: 240px;
        grid-column: unset;
        grid-row: unset;
    }

    /* Dots de pagination */
    .sra-carousel-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 14px 0 4px;
    }

    .sra-carousel-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #d1d5db;
        transition: background 0.25s ease, transform 0.25s ease;
        cursor: pointer;
        border: none;
        padding: 0;
        flex-shrink: 0;
        appearance: none;
    }

    .sra-carousel-dot.sra-dot-active {
        background: var(--sra-accent);
        transform: scale(1.25);
    }
}

@media (min-width: 561px) {
    .sra-carousel-dots {
        display: none;
    }
}

/* =============================================================================
   CARTE INDIVIDUELLE
   ============================================================================= */

.sra-activity-card {
    position: relative;
    overflow: visible;
    border-radius: var(--sra-radius-card);
    background-color: #1a1a2e;   /* fallback si pas d'image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: var(--sra-shadow-card);
    cursor: default;
    transition: transform var(--sra-transition), box-shadow var(--sra-transition);
}

.sra-activity-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
}

/* ── Overlay gradient ── */
.sra-activity-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, .72) 0%,
        rgba(0, 0, 0, .22) 45%,
        rgba(0, 0, 0, .04) 100%
    );
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

/* ── Badge prix (top-right) ── */
.sra-price-badge {
    position: absolute;
    top: 14px;
    right: 0;
    background: var(--sra-accent);
    color: var(--sra-text-white);
    border-radius: 2px;
    padding: 7px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-end;
    z-index: 2;
    box-shadow: 0 3px 10px rgba(244, 123, 80, .40);
    max-width: 55%;
}

.sra-price-badge span {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

/* ── Corps de la carte (bottom overlay) ── */
.sra-card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 20px 22px;
    color: var(--sra-text-white);
    z-index: 1;
}

.sra-card-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 6px;
    line-height: 1.2;
    color: var(--sra-text-white);
}

/* Titre plus grand sur les grandes cards */
.sra-card--tall .sra-card-title,
.sra-card--large .sra-card-title {
    font-size: 24px;
}

.sra-card-description {
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0;
    color: rgba(255, 255, 255, .88);
}

/* =============================================================================
   BOUTON CTA GLOBAL
   ============================================================================= */

.sra-cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.sra-cta-btn {
    display: inline-block;
    background: var(--sra-accent);
    color: var(--sra-text-white);
    text-decoration: none;
    padding: 15px 40px;
    border-radius: var(--sra-radius-btn);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: background var(--sra-transition), transform var(--sra-transition), box-shadow var(--sra-transition);
    box-shadow: 0 4px 18px rgba(244, 123, 80, .35);
    line-height: 1;
}

.sra-cta-btn:hover,
.sra-cta-btn:focus-visible {
    background: var(--sra-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(244, 123, 80, .45);
    color: var(--sra-text-white);
    text-decoration: none;
    outline: none;
}

.sra-cta-btn:focus-visible {
    outline: 3px solid var(--sra-accent);
    outline-offset: 3px;
}