/* =========================================================
   FLEET (STACKED CARDS) — NO IMAGES (UPDATED)
   - One card per line
   - Replaces bg images with clean FA icon badges
   - Keeps premium surfaces + minimal borders
   - Fleet hero spacing matches Contact/Book
   - Uses your vars: --bg-color, --surface, --border, --text-color, --muted-text, --accent-color
========================================================= */


/* =========================================================
   FLEET CONTENT
========================================================= */

.fleet-section {
    padding: clamp(40px, 5vw, 76px) 16px;
}

/* Section head */
.section-head {
    display: grid;
    gap: 10px;
    margin: 0 0 18px;
}

.section-head h2 {
    margin: 0;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.section-subtitle {
    margin: 0;
    max-width: 75ch;
    color: var(--muted-text);
    line-height: 1.6;
}

/* Stack */
.fleet-stack {
    display: grid;
    gap: 16px;
}

/* Card base */
.fleet-card {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    border-radius: 22px;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--text-color) 8%, transparent);
}

/* Card content */
.fleet-card__body {
    padding: 18px;
    display: grid;
    gap: 12px;
}

/* Head row: icon + title/tag */
.fleet-card__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Icon badge (replaces images) */
.fleet-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: color-mix(in srgb, var(--surface) 85%, var(--accent-color) 15%);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .10);
}

.fleet-icon i {
    font-size: 18px;
    color: var(--text-color);
    line-height: 1;
}

/* Title + tag stack */
.fleet-card__headtext {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.fleet-card__title {
    margin: 0;
    font-size: clamp(1.15rem, 1.4vw, 1.35rem);
    letter-spacing: -0.01em;
}

.fleet-card__tag {
    margin: 0;
    color: var(--muted-text);
    font-size: .98rem;
    line-height: 1.4;
}

/* Desc */
.fleet-card__desc {
    margin: 0;
    color: var(--muted-text);
    line-height: 1.65;
    max-width: 92ch;
}

/* Highlights */
.fleet-highlights {
    list-style: none;
    padding: 0;
    margin: 2px 0 0;
    display: grid;
    gap: 8px;
    max-width: 92ch;
}

.fleet-highlights li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--muted-text);
    line-height: 1.55;
}

.fleet-highlights i {
    width: 18px;
    text-align: center;
    margin-top: 2px;
    color: var(--accent-color);
}

/* Meta pills */
.fleet-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fleet-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    color: var(--muted-text);
}

.fleet-pill i {
    color: var(--accent-color);
}

/* Actions */
.fleet-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 2px;
}

@media (max-width: 520px) {
    .fleet-card__actions .btn {
        width: 100%;
    }
}

/* Capacity note */
.fleet-note {
    margin-top: 18px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.fleet-note__title {
    margin: 0 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    letter-spacing: -0.01em;
}

.fleet-note__title i {
    color: var(--accent-color);
}

.fleet-note__text {
    margin: 0;
    color: var(--muted-text);
    line-height: 1.65;
    max-width: 95ch;
}

/* Premium hover (subtle) */
@media (hover:hover) {
    .fleet-card {
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .fleet-card:hover {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--border) 95%, transparent);
        box-shadow: 0 16px 34px color-mix(in srgb, var(--text-color) 10%, transparent);
    }
}