/* =============================================================================
   AYAL TOURS — VEHICLE PAGES (SINGLE + COMBINED)
   A&K-direct redesign — 1 Sep 2026
   Enqueued only on page-vehicle.php and page-vehicles.php via
   ayal_enqueue_vehicles_styles() in functions.php
   Depends on: ayal-tokens (colours, fonts, .ayal-container/.ayal-section,
   .ayal-eyebrow, .ayal-section-title, .ayal-divider, .ayal-btn system,
   .ayal-reveal / .ayal-reveal-group)
   ============================================================================= */


/* =============================================================================
   1. HERO — shared pattern, used by both templates. Both heroes are now
   centred (rather than bottom-left) to match the approved mockups; the
   background-image + .ayal-hero-zoom mechanism itself is untouched — it's
   the same real infrastructure every other rebuilt page hero already uses.
   ============================================================================= */

.ayal-vehicle-hero,
.ayal-vehicles-hero {
    position: relative;
    min-height: 64vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-color: var(--ayal-green); /* Fallback if no featured image */
    overflow: hidden;
}

/* Full-height hero on desktop only — mobile keeps the shorter 64vh above */
@media (min-width: 1024px) {
    .ayal-vehicle-hero,
    .ayal-vehicles-hero {
        min-height: 92vh;
    }
}

.ayal-vehicle-hero__overlay,
.ayal-vehicles-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(20, 21, 15, 0.18) 0%,
        rgba(20, 21, 15, 0.42) 55%,
        rgba(20, 21, 15, 0.74) 100%
    );
    pointer-events: none;
}

.ayal-vehicle-hero__content,
.ayal-vehicles-hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 0 clamp(56px, 8vw, 92px);
    text-align: center;
}

.ayal-vehicle-hero .ayal-eyebrow--sand,
.ayal-vehicles-hero .ayal-eyebrow--sand {
    margin-bottom: var(--space-16);
}

.ayal-vehicle-hero__title,
.ayal-vehicles-hero__title {
    font-family: var(--font-heading);
    font-size: var(--text-hero);
    font-weight: var(--weight-regular);
    color: var(--ayal-white);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    text-wrap: balance;
    margin-bottom: var(--space-20);
    text-shadow: 0 2px 28px rgba(0, 0, 0, 0.18);
}

.ayal-vehicle-hero__tagline,
.ayal-vehicles-hero__sub {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: var(--leading-relaxed);
    color: rgba(245, 242, 235, 0.86);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.ayal-vehicle-hero__tagline {
    max-width: 560px;
}


/* =============================================================================
   2. BREADCRUMB (single vehicle page) — same pattern already established on
   single-ayal-safari.php, reproduced here since ayal-safari.css is not
   loaded on this template.
   ============================================================================= */

.ayal-breadcrumbs {
    background-color: var(--ayal-ivory);
}

.ayal-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-20) var(--section-pad-x) 0;
    font-family: var(--font-body);
    font-size: var(--text-caption);
    color: var(--ayal-charcoal-3);
}

.ayal-breadcrumbs__list li:not(:last-child)::after {
    content: '/';
    margin-left: 8px;
    color: var(--ayal-charcoal-4);
}

.ayal-breadcrumbs__list a {
    color: var(--ayal-charcoal-2);
    text-decoration: none;
    transition: color var(--duration-base) var(--ease);
}

.ayal-breadcrumbs__list a:hover {
    color: var(--ayal-green);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ayal-breadcrumbs__list li[aria-current="page"] {
    color: var(--ayal-charcoal-3);
}


/* =============================================================================
   3. INTRO (combined page)
   ============================================================================= */

.ayal-vehicles-intro {
    padding-top: clamp(72px, 9vw, 112px);
    padding-bottom: clamp(24px, 3vw, 40px);
}

.ayal-vehicles-intro__body {
    font-family: var(--font-body);
    font-size: 16.5px;
    line-height: var(--leading-loose);
    color: var(--ayal-charcoal-2);
    max-width: 620px;
    margin: 0 auto;
}


/* =============================================================================
   4. OVERVIEW + SPECS (single vehicle page)
   ============================================================================= */

.ayal-vehicle-overview {
    padding-top: clamp(48px, 6vw, 72px);
}

.ayal-vehicle-overview__grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: var(--grid-gap);
    align-items: start;
}

.ayal-vehicle-overview__intro {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: var(--leading-loose);
    color: var(--ayal-charcoal-2);
    margin: 0 0 var(--space-32);
    max-width: 640px;
}

.ayal-vehicle-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    max-width: 560px;
}

.ayal-vehicle-features__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-12);
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    color: var(--ayal-charcoal-2);
}

.ayal-vehicle-features__icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ayal-green-light);
    color: var(--ayal-green);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

/* Specs sidebar */
.ayal-vehicle-specs {
    background: var(--ayal-white);
    border: 1px solid var(--ayal-border);
    border-radius: var(--radius-md);
    padding: var(--space-32);
    position: sticky;
    top: var(--space-96);
}

.ayal-vehicle-specs__head {
    font-family: var(--font-body);
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--ayal-green);
    margin-bottom: var(--space-20);
}

.ayal-vehicle-specs__row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--space-16) 0;
    border-bottom: 1px solid var(--ayal-border-light);
}

.ayal-vehicle-specs__row:first-of-type {
    padding-top: 0;
}

.ayal-vehicle-specs__label {
    font-family: var(--font-body);
    font-size: var(--text-caption);
    color: var(--ayal-charcoal-3);
}

.ayal-vehicle-specs__value {
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    color: var(--ayal-charcoal);
}

.ayal-vehicle-specs__note {
    margin-top: var(--space-24);
    padding-top: var(--space-24);
    border-top: 1px solid var(--ayal-border);
    font-family: var(--font-heading);
    font-style: normal; /* Qaftan ships one weight, no italic master — see ayal-tokens.css */
    font-size: var(--text-body-sm);
    line-height: var(--leading-relaxed);
    color: var(--ayal-charcoal-2);
}

/* Sidebar actions — Plan This Safari + Ask on WhatsApp, so a visitor can
   enquire about this specific vehicle without scrolling to the final CTA */
.ayal-vehicle-specs__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    margin-top: var(--space-24);
}

.ayal-vehicle-specs__actions .ayal-btn {
    width: 100%;
}

.ayal-vehicle-specs__whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    font-family: var(--font-body);
    font-size: var(--text-body-sm);
    color: var(--ayal-charcoal-2);
    padding: 12px 0;
}

.ayal-vehicle-specs__whatsapp:hover {
    color: var(--ayal-charcoal);
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* =============================================================================
   5. GALLERY (single vehicle page)
   ============================================================================= */

.ayal-vehicle-gallery .ayal-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-40);
}

.ayal-vehicle-gallery .ayal-gallery__item {
    position: relative;
    overflow: hidden;
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--ayal-charcoal-2);
}

.ayal-vehicle-gallery .ayal-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease);
    display: block;
}

.ayal-vehicle-gallery .ayal-gallery__item:hover img {
    transform: scale(1.06);
}

.ayal-vehicle-gallery .ayal-gallery__overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 21, 15, 0.40);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease);
}

.ayal-vehicle-gallery .ayal-gallery__item:hover .ayal-gallery__overlay {
    opacity: 1;
}


/* =============================================================================
   6. VEHICLE GRID + CARDS — shared by the combined page and "Other Vehicles"
   ============================================================================= */

.ayal-vehicles-grid-section {
    padding-top: clamp(56px, 7vw, 88px);
    padding-bottom: clamp(72px, 9vw, 108px);
}

.ayal-vehicle-others {
    padding-bottom: clamp(72px, 9vw, 108px);
}

.ayal-vehicle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap);
}

.ayal-vehicle-grid--1 { grid-template-columns: minmax(0, 480px); justify-content: center; }
.ayal-vehicle-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin: 0 auto; }

.ayal-vehicle-card {
    display: flex;
    flex-direction: column;
    background: var(--ayal-white);
    border: 1px solid var(--ayal-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform var(--duration-base) var(--ease),
                box-shadow var(--duration-base) var(--ease);
}

.ayal-vehicle-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.ayal-vehicle-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.ayal-vehicle-card__image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--ayal-ivory-2);
}

.ayal-vehicle-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slower) var(--ease);
    display: block;
}

.ayal-vehicle-card:hover .ayal-vehicle-card__image img {
    transform: scale(1.05);
}

.ayal-vehicle-card__content {
    padding: var(--space-24) var(--space-24) var(--space-24);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ayal-vehicle-card__title {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    font-weight: var(--weight-regular);
    color: var(--ayal-charcoal);
    margin-bottom: var(--space-8);
}

.ayal-vehicle-card__tagline {
    font-family: var(--font-body);
    font-size: var(--text-body-sm);
    line-height: var(--leading-relaxed);
    color: var(--ayal-charcoal-2);
    margin-bottom: var(--space-16);
    flex-grow: 1;
}

.ayal-vehicles-empty {
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--ayal-charcoal-3);
    text-align: center;
    padding: var(--space-48) 0;
}


/* =============================================================================
   7. FINAL CTA — one shared visual language, two grounds:
   .ayal-vehicles-cta  (combined page) → photographic, Ken Burns background
   .ayal-vehicle-cta   (single page)   → solid olive ground
   ============================================================================= */

.ayal-vehicle-cta,
.ayal-vehicles-cta {
    position: relative;
    min-height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
}

.ayal-vehicle-cta {
    background-color: var(--ayal-green-hover);
}

.ayal-vehicles-cta__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--ayal-green-deep);
}

.ayal-vehicles-cta__overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 21, 15, 0.50);
}

.ayal-vehicle-cta__content,
.ayal-vehicles-cta__content {
    position: relative;
    z-index: 2;
    padding: var(--space-24);
    max-width: 620px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ayal-vehicle-cta__title,
.ayal-vehicles-cta__title {
    font-family: var(--font-heading);
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: var(--weight-regular);
    color: var(--ayal-white);
    letter-spacing: var(--tracking-tight);
    line-height: 1.25;
    text-wrap: balance;
    margin: var(--space-16) 0 var(--space-20);
}

.ayal-vehicle-cta__body,
.ayal-vehicles-cta__body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: var(--leading-relaxed);
    color: rgba(245, 242, 235, 0.85);
    margin-bottom: var(--space-32);
    max-width: 480px;
}


/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 1023px) {

    .ayal-vehicle-overview__grid {
        grid-template-columns: 1fr;
        gap: var(--space-40);
    }

    .ayal-vehicle-specs {
        position: static;
    }

}

@media (max-width: 767px) {

    .ayal-vehicle-grid,
    .ayal-vehicle-grid--2,
    .ayal-vehicle-grid--3 {
        grid-template-columns: 1fr;
    }

    .ayal-vehicle-gallery .ayal-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .ayal-vehicles-intro,
    .ayal-vehicles-grid-section,
    .ayal-vehicle-others {
        padding-bottom: 72px;
    }

}


/* =============================================================================
   END OF FILE — ayal-vehicles.css
   ============================================================================= */