/* Card language of the theme: soft, rounded surfaces with one accent each. Loaded after the page files so it
   refines their cards (same layer, later wins). Everything reads the tokens, so dark mode follows. */
@layer pages {
    /* ---------- Destination tiles (airports, meeting points): the photo carries the card ---------- */
    .airport-card { position: relative; display: block; min-height: 270px; overflow: hidden; border: 0; border-radius: var(--radius-xl); background: var(--gradient-brand); box-shadow: var(--shadow); isolation: isolate; }
    .airport-card:hover { border-color: transparent; }
    .airport-card-photo { position: absolute; inset: 0; height: auto; }
    .airport-card-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--color-ink-deep) 90%, transparent) 100%); }
    .airport-card-body { position: absolute; inset: auto 0 0 0; z-index: 1; gap: var(--space-1); padding: var(--space-5); }
    .airport-card-body strong { color: var(--color-on-dark); font-size: var(--text-xl); letter-spacing: -0.01em; }
    .airport-card-body span { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: color-mix(in srgb, var(--color-on-dark) 82%, transparent); }
    .airport-card::after { content: "\2192"; position: absolute; top: var(--space-4); right: var(--space-4); z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid color-mix(in srgb, var(--color-on-dark) 30%, transparent); border-radius: var(--radius-round); background: color-mix(in srgb, var(--color-on-dark) 16%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--color-on-dark); font-size: 1.15rem; transition: transform .3s var(--ease-spring), background .2s, color .2s; }
    .airport-card:hover::after { transform: rotate(-45deg); border-color: transparent; background: var(--gradient-accent); color: var(--color-ink-deep); }

    /* ---------- Vehicles: a framed photo, facts as pills ---------- */
    .vehicle-card { padding: var(--space-2); border-radius: var(--radius-xl); background: linear-gradient(180deg, var(--color-surface) 55%, var(--color-surface-alt)); }
    .vehicle-card-photo { height: 190px; border-radius: calc(var(--radius-xl) - var(--space-2)); }
    .vehicle-card-body { padding: var(--space-4) var(--space-3) var(--space-3); }
    .vehicle-card-facts { gap: var(--space-2); }
    .vehicle-card-facts span { padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text); font-size: var(--text-xs); font-weight: 700; }

    /* ---------- Articles: editorial, an inset photo and a quiet title ---------- */
    .post-card { padding: var(--space-3); border-radius: var(--radius-xl); }
    .post-card-photo { height: 210px; border-radius: var(--radius-lg); }
    .post-card-tag { background: color-mix(in srgb, var(--color-surface) 88%, transparent); color: var(--color-primary); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--shadow-sm); }
    .post-card-body { padding: var(--space-4) var(--space-2) var(--space-2); }
    .post-card-meta { font-size: 0.72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
    .post-card:hover .post-card-body strong { color: var(--color-link); }

    /* ---------- Highlights: the picture glows on a soft blob ---------- */
    @media (min-width: 768px) {
        .highlight { position: relative; overflow: hidden; border-radius: var(--radius-xl); background: linear-gradient(170deg, var(--color-surface) 50%, var(--color-surface-alt)); }
        .highlight::before { content: ""; position: absolute; top: -30%; right: -25%; width: 75%; aspect-ratio: 1; border-radius: var(--radius-round); background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 68%); pointer-events: none; }
        .highlight > * { position: relative; }
        .highlight-image { filter: drop-shadow(0 14px 18px color-mix(in srgb, var(--color-primary) 22%, transparent)); }
    }

    /* ---------- Reviews: a big quote mark and a hairline above the author ---------- */
    .testimonial { position: relative; overflow: hidden; border-radius: var(--radius-xl); background: linear-gradient(160deg, var(--color-surface) 55%, var(--color-surface-alt)); }
    .testimonial::before { content: "\201C"; position: absolute; top: -.05em; right: var(--space-4); background: var(--gradient-accent); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 7rem; font-weight: 800; line-height: 1; pointer-events: none; }
    .testimonial-author { padding-top: var(--space-4); border-top: 1px dashed var(--color-border); }

    /* ---------- Popular routes: an accent strip on the edge ---------- */
    .preset-card { border-radius: var(--radius-xl); }
    .preset-card::before { content: ""; position: absolute; left: 0; top: var(--space-5); bottom: var(--space-5); width: 4px; border-radius: 0 var(--radius-xs) var(--radius-xs) 0; background: var(--gradient-accent); }

    /* ---------- Results: offers with a coloured edge, the price in its own panel ---------- */
    .quote-card { position: relative; overflow: hidden; border-radius: var(--radius-xl); }
    .quote-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--gradient-primary); }
    .quote-header h2 { display: inline-block; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface-alt); color: var(--color-primary); }
    .quote-photo img { border-radius: var(--radius); box-shadow: var(--shadow-sm); }
    .quote-facts .icon { padding: 3px; box-sizing: content-box; border-radius: var(--radius-round); background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
    @media (min-width: 768px) {
        .quote-price { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface-alt); }
    }

    /* ---------- Side and summary cards, checkout blocks ---------- */
    .aside-card, .summary-card, .checkout-block { border-radius: var(--radius-xl); }
    .summary-card, .aside-card:not(.aside-map) { position: relative; overflow: hidden; }
    .summary-card::before, .aside-card:not(.aside-map)::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--gradient-accent); }
    .checkout-block h2::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: var(--space-2); border-radius: var(--radius-round); background: var(--gradient-accent); }
}