/**
 * Spoon — Events CSS
 *
 * Stili per:
 *  - Griglia eventi [rc_events]
 *  - Widget prenotazione [rc_event_booking]
 *  - Pagina template-events.php
 *  - Schermata di conferma post-WooCommerce
 *
 * Usa le CSS variables definite dal Customizer:
 *   --rc-primary, --rc-primary-dark, --rc-primary-light,
 *   --rc-secondary, --rc-bg
 *
 * @package Spoon
 */

/* ═══════════════════════════════════════════════════════════
   SEZIONE EVENTI — layout pagina
   ═══════════════════════════════════════════════════════════ */

.rc-page-events {
    background: var( --rc-bg, #fafaf8 );
    min-height: 60vh;
}

/* ── Header pagina ── */
.rc-events-page-header {
    background: var( --rc-secondary, #1a1a1a );
    color: #fff;
    padding: 3rem 0 2.5rem;
    margin-bottom: 2.5rem;
}

.rc-events-page-header .rc-breadcrumb {
    display: flex;
    gap: .5rem;
    align-items: center;
    font-size: .85rem;
    opacity: .75;
    margin-bottom: .75rem;
}

.rc-events-page-header .rc-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.rc-events-page-header .rc-breadcrumb a:hover {
    text-decoration: underline;
}

.rc-events-page-header__title {
    font-size: clamp( 1.6rem, 4vw, 2.5rem );
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    margin: 0 0 .5rem;
    line-height: 1.2;
    color: var(--rc-primary)
}

.rc-events-page-header__subtitle {
    opacity: .8;
    font-size: 1rem;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   GRIGLIA EVENTI [rc_events]
   ═══════════════════════════════════════════════════════════ */

.rc-events-section__title {
    text-align: center;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp( 1.4rem, 3vw, 2rem );
    margin-bottom: 2rem;
    color: var( --rc-secondary, #1a1a1a );
}

/* ── Event card ── */
.rc-event-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}

.rc-event-card:hover {
    transform: translateY( -3px );
    box-shadow: 0 12px 32px rgba( 0, 0, 0, .12 );
}

.rc-event-card__image-wrap {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.rc-event-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.rc-event-card:hover .rc-event-card__image {
    transform: scale( 1.04 );
}

.rc-event-card__image-placeholder {
    aspect-ratio: 16 / 9;
    background: linear-gradient( 135deg, var( --rc-primary-light, #e8b96e ), var( --rc-primary, #c8963e ) );
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: .6;
}

.rc-event-card__body {
    flex: 1;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.rc-event-card__date {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    color: var( --rc-primary, #c8963e );
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.rc-event-card__time {
    color: var( --rc-secondary, #1a1a1a );
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.rc-event-card__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.15rem;
    margin: 0;
    line-height: 1.35;
}

.rc-event-card__title a {
    color: var( --rc-secondary, #1a1a1a );
    text-decoration: none;
    transition: color .15s;
}

.rc-event-card__title a:hover {
    color: var( --rc-primary, #c8963e );
}

.rc-event-card__desc {
    font-size: .9rem;
    color: #666;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rc-event-card__location {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .82rem;
    color: #888;
}

.rc-event-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: .75rem;
    border-top: 1px solid #f0ede8;
}

.rc-event-card__price {
    display: flex;
    align-items: baseline;
    gap: .25rem;
}

.rc-event-card__price-from {
    font-size: .78rem;
    color: #888;
}

.rc-event-card__price strong {
    font-size: 1.15rem;
    font-weight: 700;
    color: var( --rc-primary, #c8963e );
}

.rc-event-card__price-per {
    font-size: .78rem;
    color: #888;
}

.rc-event-card__spots {
    position: absolute;
    top: .75rem;
    right: .75rem;
}

/* ── Empty state ── */
.rc-events-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 3rem 1rem;
    text-align: center;
    color: #999;
}

/* ═══════════════════════════════════════════════════════════
   HERO EVENTO (detail page)
   ═══════════════════════════════════════════════════════════ */

.rc-event-hero {
    position: relative;
    min-height: 280px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-radius: .75rem;
    margin-bottom: 2rem;
}

.rc-event-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rc-event-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba( 0,0,0,.75 ) 0%, rgba( 0,0,0,.2 ) 60%, transparent 100% );
}

.rc-event-hero__content {
    position: relative;
    z-index: 1;
    color: #fff;
    padding: 2rem;
    width: 100%;
}

.rc-event-hero__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp( 1.5rem, 4vw, 2.5rem );
    font-weight: 700;
    margin: 0 0 .5rem;
    text-shadow: 0 1px 4px rgba( 0,0,0,.3 );
}

.rc-event-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    opacity: .9;
    font-size: .9rem;
}

.rc-event-hero__meta-item {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.rc-event-hero-placeholder {
    background: linear-gradient( 135deg, var( --rc-secondary, #1a1a1a ), var( --rc-primary, #c8963e ) );
    border-radius: .75rem;
    padding: 3rem 2rem;
    color: #fff;
    margin-bottom: 2rem;
}

.rc-event-hero-placeholder .rc-event-hero__title {
    color: #fff;
}

/* ── Event detail layout ── */
.rc-event-detail-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2rem;
    align-items: start;
}

@media ( max-width: 900px ) {
    .rc-event-detail-layout {
        grid-template-columns: 1fr;
    }
}

.rc-event-detail-description {
    font-size: .97rem;
    line-height: 1.7;
    color: #444;
}

.rc-event-detail-description h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var( --rc-secondary, #1a1a1a );
    margin-top: 1.5rem;
}

.rc-event-back-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .9rem;
    color: var( --rc-primary, #c8963e );
    text-decoration: none;
    margin-bottom: 1.5rem;
    transition: gap .15s;
}

.rc-event-back-link:hover {
    gap: .6rem;
}

/* ═══════════════════════════════════════════════════════════
   WIDGET PRENOTAZIONE [rc_event_booking]
   ═══════════════════════════════════════════════════════════ */

.rc-event-booking-widget {
    position: sticky;
    top: 1.5rem;
}

.rc-event-booking-widget__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var( --rc-secondary, #1a1a1a );
    margin-bottom: 1.5rem;
}

/* ── Step container ── */
.rc-event-step {
    animation: rcFadeIn .2s ease;
}

.rc-event-step__title {
    font-size: .95rem;
    font-weight: 700;
    color: var( --rc-secondary, #1a1a1a );
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.rc-event-no-sessions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 2rem 1rem;
    text-align: center;
    color: #999;
}

/* ── Griglia sessioni ── */
.rc-sessions-grid {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-bottom: 1.25rem;
}

.rc-session-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    padding: .75rem 1rem;
    background: #fff;
    border: 2px solid #e5e1da;
    border-radius: .5rem;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: border-color .15s, background .15s, color .15s;
    font-size: .9rem;
    color: var( --rc-secondary, #1a1a1a );
}

.rc-session-btn:hover {
    border-color: var( --rc-primary, #c8963e );
    background: #fffbf5;
}

.rc-session-btn.rc-active {
    border-color: var( --rc-primary, #c8963e );
    background: var( --rc-primary, #c8963e );
    color: #fff;
}

.rc-session-btn.rc-active .rc-session-btn__spots {
    border-color: rgba( 255,255,255,.5 );
    color: #fff;
}

.rc-session-btn__date {
    font-weight: 700;
    flex: 1 0 auto;
}

.rc-session-btn__time {
    font-size: .82rem;
    opacity: .85;
    display: flex;
    align-items: center;
    gap: .3rem;
}

.rc-session-btn__spots {
    font-size: .75rem;
    margin-left: auto;
}

/* ── Lista biglietti ── */
.rc-tickets-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.rc-ticket-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem;
    background: #fff;
    border: 1px solid #e5e1da;
    border-radius: .5rem;
}

.rc-ticket-row__info {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 1;
    min-width: 0;
}

.rc-ticket-row__name {
    font-size: .9rem;
    font-weight: 700;
    color: var( --rc-secondary, #1a1a1a );
}

.rc-ticket-row__desc {
    font-size: .78rem;
}

.rc-ticket-row__price {
    font-size: .85rem;
    font-weight: 600;
    color: var( --rc-primary, #c8963e );
}

/* ── Controllo quantità ── */
.rc-qty-control {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

.rc-qty-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var( --rc-primary, #c8963e );
    background: #fff;
    color: var( --rc-primary, #c8963e );
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background .15s, color .15s;
}

.rc-qty-btn:hover {
    background: var( --rc-primary, #c8963e );
    color: #fff;
}

.rc-qty-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.rc-qty-display {
    width: 2rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var( --rc-secondary, #1a1a1a );
}

/* ── Totale ── */
.rc-tickets-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    background: #fafaf8;
    border-radius: .5rem;
    font-size: .9rem;
    font-weight: 500;
    border: 1px solid #e5e1da;
    margin-bottom: 1.25rem;
}

.rc-tickets-total-amount {
    font-size: 1.15rem;
    font-weight: 800;
    color: var( --rc-primary, #c8963e );
}

/* ── Riepilogo step 3 ── */
.rc-event-selection-summary {
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    font-size: .88rem;
}

.rc-event-summary-session {
    font-weight: 600;
}

.rc-event-summary-tickets {
    line-height: 1.8;
}

.rc-summary-hr {
    border: none;
    border-top: 1px solid rgba( 0,0,0,.1 );
    margin: .5rem 0;
}

/* ═══════════════════════════════════════════════════════════
   CONFERMA POST-PAGAMENTO
   ═══════════════════════════════════════════════════════════ */

.rc-event-confirm-loader {
    text-align: center;
    padding: 3rem 1rem;
}

.rc-event-confirm-card .rc-success-icon {
    text-align: center;
    margin-bottom: 1rem;
}

.rc-confirm-event-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.4rem;
    text-align: center;
    margin: 0 0 .4rem;
}

.rc-confirm-session {
    text-align: center;
    font-size: .9rem;
    margin-bottom: 1.5rem;
}

.rc-confirm-items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    margin-bottom: 1.25rem;
}

.rc-confirm-items-table th,
.rc-confirm-items-table td {
    padding: .5rem .75rem;
    border-bottom: 1px solid #f0ede8;
    text-align: left;
}

.rc-confirm-items-table thead th {
    font-weight: 700;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #888;
}

.rc-confirm-items-table tfoot td {
    border-top: 2px solid #e5e1da;
    border-bottom: none;
    padding-top: .75rem;
}

.rc-text-right { text-align: right; }
.rc-text-center { text-align: center; }

.rc-confirm-guest {
    background: #fafaf8;
    border-radius: .5rem;
    padding: .75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.rc-confirm-guest p {
    margin: 0;
}

.rc-confirm-badges {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .25rem;
}

/* ═══════════════════════════════════════════════════════════
   ANIMAZIONI
   ═══════════════════════════════════════════════════════════ */

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

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media ( max-width: 600px ) {
    .rc-event-booking-widget {
        position: static;
    }

    .rc-ticket-row {
        flex-wrap: wrap;
    }

    .rc-ticket-row__info {
        width: 100%;
    }

    .rc-qty-control {
        margin-left: auto;
    }

    .rc-session-btn {
        font-size: .85rem;
    }
}