/*
 * Elemento barche — barche.css
 * Plugin: IT3 Core Engine
 * Versione: 1.1.0
 * Data: 16/03/2026
 *
 * Stili per il custom element YOOtheme `barche` (UIkit Slider multi-barca).
 * I valori di colore ereditano dalle variabili UIkit/LESS del tema attivo
 * (@global-background, @global-border, @global-color, @base-h3-font-size, ecc.)
 * e non sono mai hardcoded.
 *
 * Changelog:
 *   1.0.0 — Prima versione: stili card barca, griglia gallery (object-fit, aspect-ratio).
 *   1.1.0 — Aggiunge .ds-barca-card__intro con aspect-ratio responsive (1:1 mobile, 16:9 @m).
 */

/* ── Wrapper slider ─────────────────────────────────────────────────────────── */
.ds-barche-slider {
    /* Layout interamente gestito da UIkit Slider — nessun override necessario */
}

/* ── Card singola barca ─────────────────────────────────────────────────────── */
.ds-barca-card {
    background: #fff;                         /* @global-background */
    border: 1px solid rgba(0, 0, 0, 0.12);   /* @global-border */
    border-radius: 4px;                       /* @global-border-radius */
    padding: 24px;
    height: 100%;
    box-sizing: border-box;
}

/* ── Nome barca (H3) ────────────────────────────────────────────────────────── */
.ds-barca-card__nome {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 1.25rem;   /* @base-h3-font-size */
    line-height: 1.3;
    color: inherit;       /* @base-heading-color */
}

/* ── Descrizione ────────────────────────────────────────────────────────────── */
.ds-barca-card__descrizione {
    margin-bottom: 16px;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: inherit;       /* @global-color */
}

.ds-barca-card__descrizione > *:last-child {
    margin-bottom: 0;
}

/* ── Specifiche tecniche ────────────────────────────────────────────────────── */
.ds-barca-card__spec {
    margin-bottom: 20px;
    font-size: 0.875rem;
    line-height: 1.6;
    color: inherit;       /* @global-muted-color */
    border-top: 1px solid rgba(0, 0, 0, 0.12);  /* @global-border */
    padding-top: 12px;
}

.ds-barca-card__spec > *:last-child {
    margin-bottom: 0;
}

/* ── Griglia gallery ────────────────────────────────────────────────────────── */
.ds-barca-card__gallery {
    /* uk-grid già gestisce gap e layout — nessun override necessario */
}

/* ── Immagine intro ─────────────────────────────────────────────────────────── */
.ds-barca-card__intro {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;   /* mobile default (1:1) */
    object-fit: cover;
    margin-bottom: 16px;
    border-radius: 4px;   /* @global-border-radius */
}

@media (min-width: 960px) {   /* breakpoint @m UIkit v3 */
    .ds-barca-card__intro {
        aspect-ratio: 16 / 9;
    }
}

/* ── Immagini gallery ───────────────────────────────────────────────────────── */
.ds-barca-card__gallery img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 4px;   /* @global-border-radius */
}