/* Il riquadro di un'attivita' da prenotare (17-activity-cards.js), in chat
   e nella pagina viaggio. Stesso linguaggio dei riquadri dei ristoranti
   (23-meals.css): foto in alto con la data sopra, testo sotto. Colori del
   corpo del riquadro dalle variabili del tema (00-variables.css), che
   valgono anche col tema scuro; sulla foto (data, velo, credito) colori
   fissi, leggibili su qualunque foto; il fondo della foto mancante ha la
   sua regola per il tema scuro, qui sotto. */

.activity-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.activity-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface-card, #ffffff);
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-card, 0 4px 20px rgba(0, 0, 0, 0.06));
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.activity-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover, 0 12px 40px rgba(0, 0, 0, 0.1));
}

.activity-card-hero {
    position: relative;
    height: 150px;
    overflow: hidden;
    background: linear-gradient(135deg, #e0f2fe 0%, #dcfce7 100%);
}

.activity-card-hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.3s ease;
}

.activity-card:hover .activity-card-hero img { transform: scale(1.05); }

.activity-card-hero.no-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #94d9f5;
}

/* Tema scuro: il fondo pastello della foto mancante era un blocco chiaro
   in mezzo alla pagina scura. */
[data-theme="dark"] .activity-card-hero { background: linear-gradient(135deg, #0c2a3d 0%, #0f2e22 100%); }
[data-theme="dark"] .activity-card-hero.no-photo { color: #38bdf8; }

/* Leggibilita' della data su qualsiasi foto. */
.activity-card-hero::after {
    content: '';
    position: absolute;
    inset: 55% 0 0 0;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.55), transparent);
    pointer-events: none;
}

.activity-card-date {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 1;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #0f172a;
    font-size: 0.75rem;
    font-weight: 600;
}

.activity-card .unsplash-credit {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    padding: 2px 5px;
    border-radius: 0 0 0 8px;
    background: rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 0.8);
    font-size: 9px;
    line-height: 1.3;
}

.activity-card .unsplash-credit a { color: inherit; text-decoration: none; }

/* Prenotata: velo grigio con la scritta sulla foto, foto in bianco e nero,
   testo spento, pulsante GetYourGuide nascosto. La spunta sta nel corpo,
   fuori dal velo: resta cliccabile per tornare indietro. */
.activity-card-veil {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(71, 85, 105, 0.55);
}

.activity-card-veil-label {
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.82);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.activity-card.is-booked { background: var(--surface, #f8fafc); }
.activity-card.is-booked .activity-card-veil { display: flex; }
.activity-card.is-booked .activity-card-hero img { filter: grayscale(1); }
.activity-card.is-booked .activity-card-title,
.activity-card.is-booked .activity-card-desc { color: var(--text-muted, #94a3b8); }
.activity-card.is-booked .btn-activity-booking { display: none; }

.activity-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
}

.activity-card-title {
    margin: 0;
    color: var(--text-primary, #1e293b);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.3;
}

.activity-card-desc {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--text-secondary, #475569);
    font-size: 0.84rem;
    line-height: 1.45;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.activity-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
}

.activity-card-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary, #475569);
    font-size: 0.82rem;
    cursor: pointer;
}

.activity-card-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-sky, #00a8e8);
    cursor: pointer;
}

/* La sezione Attivita' della pagina viaggio. */

/* .trip-tab e' una colonna flex con overflow nascosto (21-trip.css): senza
   flex + overflow qui la sezione non scorreva, e con molte attivita' i
   riquadri in fondo non si raggiungevano (stessa trappola di .food-layout,
   23-meals.css). */
.activities-layout {
    flex: 1;
    overflow-y: auto;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .activities-layout { padding: 14px 12px 80px; }
}

.activities-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

.activities-progress {
    color: var(--text-primary, #1e293b);
    font-weight: 700;
}

.activities-intro {
    margin: 0;
    color: var(--text-secondary, #475569);
    font-size: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
    .activity-card,
    .activity-card-hero img { transition: none; }
    .activity-card:hover,
    .activity-card:hover .activity-card-hero img { transform: none; }
}