/* =============================================================================
   AYAL TOURS AND TRAVEL — HOMEPAGE
   Built by Vanquish Brand Design | vanquish.co.ke
   Enqueued only on page-homepage.php (see ayal_enqueue_homepage_styles()).

   Rebuilt 3 Sep 2026 — structural/visual reskin against African Trails
   Expeditions' real live homepage (client-supplied reference file). Every
   colour and font below is still pulled from the shared tokens in
   ayal-tokens.css (var(--ayal-*), var(--font-*), var(--text-*),
   var(--space-*)) — nothing here is hardcoded, and nothing from ATE's own
   palette (their green #0e8b25, Cinzel, rounded/pill buttons) was carried
   over. See page-homepage.php's own header comment for the full
   section-by-section reasoning.

   What changed from the previous (A&K-direct) pass, structurally:
     - Hero: was left-aligned/non-centred: now bottom-anchored + centred,
       matching both ATE's cinematic hero and every OTHER Ayal template's
       own hero convention (About/Contact/Vehicles/Single Destination all
       centre their hero text) — the old homepage hero was the outlier.
     - Signature Journeys: was a hairline-divided alternating list; is now
       the same card-grid component (.ayal-safari-grid) used by the
       Safaris archive, so the homepage and archive read as one system.
     - Testimonials: was a single centred quote; is now a carousel over
       the full homepage_testimonials repeater (still no star ratings or
       third-party badge).
     - Journeys by Type: was a horizontal scroll-snap track with
       always-visible captions; is now a static responsive grid with
       hover-reveal description/link, echoing ATE's dark "Signature
       Experiences" grid.
     - Destinations: was a full-bleed 2x2 mosaic with text overlaid on the
       image; is now a card grid — image on top, white content panel
       below — echoing ATE's destination cards.
     - The Ayal Way: same 3-card trust row, icon now sits in a circular
       chip (was a bare SVG) to match ATE's icon treatment.
   Corner radius and button shape were deliberately NOT changed to match
   ATE (sharp corners stay sharp) — see the page template's own comment
   for why.

   No shared-chrome overrides — the header/mega menu/footer are already in
   the correct palette globally (ayal-nav.css / ayal-footer.css), so this
   file only ever styles elements that live inside <main id="ayalHomepage">.
   ============================================================================= */


/* =============================================================================
   0. SECTION RHYTHM — homepage-only reduced vertical gap
   4 Sep 2026 (round 7): "reduce the section gaps further, just a little."
   The shared --section-pad-y token (ayal-tokens.css) is used by .ayal-section
   on every template site-wide, so it's left alone; a local custom property
   scoped to #ayalHomepage overrides it just here, at a value a bit smaller
   again than round 6's site-wide default (clamp(72px,10vw,128px) → this).
   ============================================================================= */

#ayalHomepage {
    --ayal-home-pad-y: clamp(48px, 7vw, 88px);
}

#ayalHomepage .ayal-section {
    padding-top: var(--ayal-home-pad-y);
    padding-bottom: var(--ayal-home-pad-y);
}


/* =============================================================================
   1. SHARED SECTION HEADING
   ============================================================================= */

.ayal-home-title {
    font-family: var(--font-heading);
    font-weight: var(--weight-regular);
    /* 3 Sep 2026 (round 3): capped at 28px per Victor, capitalised to match
       the hero. Responsive floor kept at 20px so it stays legible on
       mobile rather than scaling all the way down with the viewport. */
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: var(--leading-snug);
    text-transform: uppercase;
    /* Negative tracking (--tracking-tight) was tuned for mixed-case Qaftan
       and collides letterforms once the type is all-caps — same fix as
       the hero title below. */
    letter-spacing: var(--tracking-normal);
    color: var(--ayal-charcoal);
    text-wrap: balance;
    margin: var(--space-8) 0 var(--space-20);
}

.ayal-home-title--light {
    color: var(--ayal-white);
}

.ayal-section-header--center {
    text-align: center;
    max-width: var(--container-narrow);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: clamp(40px, 6vw, 72px);
}

.ayal-section-header--center .ayal-section-intro {
    margin-left: auto;
    margin-right: auto;
}

.ayal-section-intro--light {
    color: rgba(247, 245, 239, 0.72);
}


/* =============================================================================
   2. HERO — cinematic, bottom-anchored, centred
   ============================================================================= */

.ayal-home-hero {
    position: relative;
    height: 94vh;
    min-height: 600px;
    max-height: 920px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    background-color: var(--ayal-charcoal);
    text-align: center;
}

.ayal-home-hero__img,
.ayal-home-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.045);
    transition: transform 9s var(--ease-out);
}

.ayal-home-hero.is-loaded .ayal-home-hero__img,
.ayal-home-hero.is-loaded .ayal-home-hero__video {
    transform: scale(1);
}

.ayal-home-hero__content {
    position: relative;
    z-index: var(--z-above);
    padding-bottom: var(--space-96);
    color: var(--ayal-white);
    /* 3 Sep 2026: widened from 760px so the (now uppercase, wider-tracked)
       headline settles onto two balanced lines rather than three, matching
       ATE's hero proportions. .ayal-container still supplies the
       responsive side padding, so small viewports are unaffected. */
    max-width: 1040px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ayal-home-hero__eyebrow {
    color: var(--ayal-sand);
    opacity: 0.92;
}

.ayal-home-hero__title {
    color: var(--ayal-white);
    /* 3 Sep 2026 (round 3): capped at 48px per Victor, down from the
       shared --text-hero token's 55px max — deliberately NOT edited on
       the token itself, since --text-hero is also read by the
       Destinations/Vehicles/Single-Destination/Safari-type-archive
       heroes and this request was homepage-only. A local clamp here
       overrides the token for this element only. */
    font-size: clamp(30px, 5.2vw, 48px);
    line-height: var(--leading-tight);
    font-weight: var(--weight-medium);
    /* 3 Sep 2026: capitalised to match ATE's hero treatment. Tracking
       switched from --tracking-tight (negative, meant for mixed-case
       Qaftan) to --tracking-normal — negative tracking on all-caps type
       collides letterforms, so this keeps the uppercase headline legible. */
    text-transform: uppercase;
    letter-spacing: var(--tracking-normal);
    text-wrap: balance;
    text-shadow: 0 2px 28px rgba(0, 0, 0, 0.22);
    margin: var(--space-16) 0 var(--space-24);
}

.ayal-home-hero__tagline {
    max-width: 48ch;
    font-size: var(--text-body-lg);
    line-height: var(--leading-loose);
    color: var(--ayal-white);
    opacity: 0.88;
    margin: 0 0 var(--space-32);
}

.ayal-home-hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-24);
    flex-wrap: wrap;
}

.ayal-home-hero__secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    color: rgba(255, 255, 255, 0.90);
    font-family: var(--font-body);
    font-size: var(--text-body-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding-bottom: 2px;
    transition: color var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease);
}

.ayal-home-hero__secondary:hover {
    color: var(--ayal-white);
    border-color: rgba(255, 255, 255, 0.8);
}

.ayal-home-hero__secondary-icon {
    transform: rotate(90deg);
}

.ayal-home-hero__meta {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-wide);
    color: var(--ayal-white);
    opacity: 0.7;
    margin-top: var(--space-24);
}

.ayal-home-hero__scroll {
    position: absolute;
    left: 50%;
    bottom: var(--space-32);
    transform: translateX(-50%);
    z-index: var(--z-above);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    color: var(--ayal-white);
    opacity: 0.65;
    font-family: var(--font-body);
    font-size: var(--text-micro);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    animation: ayal-home-scroll-bob 2.3s ease-in-out infinite;
}

.ayal-home-hero__scroll-line {
    width: 1px;
    height: 30px;
    background-color: var(--ayal-white);
    display: block;
}

@keyframes ayal-home-scroll-bob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(6px); }
}

@media (max-width: 767px) {
    .ayal-home-hero { height: 86vh; }
    .ayal-home-hero__content { padding-bottom: var(--space-64); }
    .ayal-home-hero__scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ayal-home-hero__img,
    .ayal-home-hero__video { transition: none; }
    .ayal-home-hero__scroll { animation: none; }
}


/* =============================================================================
   3. OUR PHILOSOPHY — brand statement
   ============================================================================= */

/* 4 Sep 2026: widened from the shared --container-narrow (860px) to 960px
   on this section only — .ayal-container--narrow/.ayal-section-header--center
   are both reused site-wide (About, Contact, Vehicles, Destinations, etc.),
   so this is a dedicated class on the Philosophy wrapper rather than an
   edit to the shared token/classes. Wins on cascade order (this file loads
   after ayal-tokens.css, and this rule sits after this file's own
   .ayal-section-header--center override above) — no !important needed.
   .ayal-container's own responsive side padding still applies underneath,
   so mobile is unaffected. */
.ayal-home-philosophy__container {
    max-width: 960px;
}

/* 4 Sep 2026 (round 6): the gap to Signature Journeys below was two full
   --section-pad-y values stacked (this section's bottom padding + the
   next section's top padding, up to 128px each = 256px combined) — too
   much once there's a CTA button, not a long block of text, right above
   it. Tightened just the shared edge between these two sections; the
   token itself (used by every .ayal-section site-wide) is untouched.
   Round 7: trimmed a little further per Victor, and reselected as
   "#ayalHomepage .ayal-home-philosophy" (matching the round-7 gap rule's
   own ID+class specificity above) so this still wins over it — a bare
   ".ayal-home-philosophy" would otherwise lose to the more specific
   "#ayalHomepage .ayal-section" rule and fall back to the general gap. */
#ayalHomepage .ayal-home-philosophy {
    padding-bottom: clamp(32px, 4vw, 52px);
}

.ayal-home-philosophy__heading {
    /* 3 Sep 2026 (round 3): brought in line with .ayal-home-title's new
       28px-cap/uppercase treatment — this section has its own heading
       class (it's a longer single-sentence statement, not a short section
       label) but Victor's "other section headings" request covers it too. */
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: var(--weight-regular);
    line-height: var(--leading-snug);
    text-transform: uppercase;
    letter-spacing: var(--tracking-normal);
    color: var(--ayal-charcoal);
    text-wrap: balance;
    margin: var(--space-8) 0 var(--space-32);
}

.ayal-home-philosophy__body {
    text-align: left;
}

.ayal-home-philosophy__body p {
    font-family: var(--font-body);
    font-weight: var(--weight-light);
    font-size: 15px;
    line-height: var(--leading-relaxed);
    color: var(--ayal-charcoal-2);
    margin: 0;
}

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

.ayal-home-philosophy__cta {
    margin-top: var(--space-40);
}


/* =============================================================================
   4. SIGNATURE JOURNEYS — header only (grid itself is
      css/ayal-safari-cards.css, enqueued site-wide)
   ============================================================================= */

.ayal-home-title#journeys-heading,
.ayal-home-title#destinations-heading {
    margin-top: var(--space-8);
}

/* 4 Sep 2026: other half of the Philosophy→Journeys gap tightening — see
   .ayal-home-philosophy's padding-bottom above, including round 7's note
   on why this needs the "#ayalHomepage" prefix for specificity. */
#ayalHomepage .ayal-home-journeys {
    padding-top: clamp(32px, 4vw, 52px);
}


/* =============================================================================
   5. TESTIMONIALS CAROUSEL
   ============================================================================= */

.ayal-home-testimonials__wrap {
    max-width: var(--container-wide);
    margin: 0 auto;
}

.ayal-home-testimonials__track-outer {
    overflow: hidden;
}

.ayal-home-testimonials__track {
    display: flex;
    gap: var(--space-24);
    transition: transform 520ms var(--ease);
}

.ayal-home-testimonial-card {
    flex: 0 0 calc(33.333% - 16px);
    background: var(--ayal-white);
    border: 1px solid var(--ayal-border);
    padding: var(--space-32) var(--space-32) var(--space-24);
    box-sizing: border-box;
}

.ayal-home-testimonial-card__quote {
    /* 4 Sep 2026: switched from the heading serif/italic treatment to the
       plain body font per Victor, and the left rule dropped — blockquote's
       base site-wide style (ayal-tokens.css) sets a sand-gold border-left +
       padding-left, overridden to none/0 here since this card already has
       its own white-panel border on all four sides. */
    font-family: var(--font-body);
    font-style: normal;
    font-weight: var(--weight-regular);
    font-size: 15px;
    line-height: var(--leading-relaxed);
    color: var(--ayal-charcoal);
    border-left: none;
    padding-left: 0;
    margin: 0 0 var(--space-24);
}

.ayal-home-testimonial-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding-top: var(--space-20);
    border-top: 1px solid var(--ayal-border-light);
}

.ayal-home-testimonial-card__avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: var(--ayal-green-muted);
    border: 1px solid var(--ayal-green-border);
    color: var(--ayal-green-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: var(--text-body);
}

.ayal-home-testimonial-card__author {
    font-family: var(--font-body);
    font-size: var(--text-body-sm);
    font-weight: var(--weight-bold);
    color: var(--ayal-charcoal);
    margin: 0;
}

.ayal-home-testimonial-card__location {
    font-family: var(--font-body);
    font-size: var(--text-caption);
    color: var(--ayal-charcoal-3);
    margin: 2px 0 0;
}

.ayal-home-testimonials__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-16);
    margin-top: var(--space-40);
}

.ayal-home-testimonials__arrow {
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--ayal-green);
    background: transparent;
    color: var(--ayal-green);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--duration-base) var(--ease), color var(--duration-base) var(--ease);
}

.ayal-home-testimonials__arrow-icon--prev {
    transform: rotate(180deg);
}

.ayal-home-testimonials__arrow:hover {
    background: var(--ayal-green);
    color: var(--ayal-white);
}

.ayal-home-testimonials__arrow:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.ayal-home-testimonials__dots {
    display: flex;
    gap: var(--space-8);
}

.ayal-home-testimonials__dots button {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ayal-border-strong);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}

.ayal-home-testimonials__dots button.is-active {
    background: var(--ayal-green);
    transform: scale(1.3);
}

@media (max-width: 1023px) {
    .ayal-home-testimonial-card { flex: 0 0 calc(50% - 12px); }
}

@media (max-width: 640px) {
    .ayal-home-testimonial-card { flex: 0 0 100%; }
}


/* =============================================================================
   6. JOURNEYS BY TYPE — dark hover-reveal grid
   ============================================================================= */

.ayal-home-types {
    /* 4 Sep 2026: swapped the near-black charcoal for the brand green's
       own deep shade per Victor, so this dark section reads as "our
       green, darker" rather than a neutral grey/black. */
    background-color: var(--ayal-green-deep);
    /* Round 7: this section doesn't use the shared .ayal-section class
       (it sets its own padding directly), so the #ayalHomepage .ayal-section
       gap reduction above doesn't reach it automatically — matched here by
       hand so the whole page keeps one consistent rhythm. */
    padding: var(--ayal-home-pad-y) 0;
}

/* 4 Sep 2026: the intro paragraph under this section's heading was the
   shared .ayal-section-intro's 17px lead-paragraph size — reduced to 15px
   (responsive) for this section specifically, since .ayal-section-intro
   is reused by every other section's own header block site-wide. */
.ayal-home-types .ayal-section-intro {
    font-size: clamp(13px, 1.6vw, 15px);
}

.ayal-home-types__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

.ayal-home-type-card {
    position: relative;
    display: block;
    height: 380px;
    overflow: hidden;
    background-color: var(--ayal-ink-2);
}

.ayal-home-type-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slower) var(--ease);
}

.ayal-home-type-card:hover img,
.ayal-home-type-card:focus-within img {
    transform: scale(1.07);
}

.ayal-home-type-card__overlay {
    background: linear-gradient(
        to top,
        rgba(10, 14, 8, 0.88) 0%,
        rgba(10, 14, 8, 0.30) 58%,
        rgba(10, 14, 8, 0.10) 100%
    );
    transition: background var(--duration-base) var(--ease);
}

.ayal-home-type-card:hover .ayal-home-type-card__overlay,
.ayal-home-type-card:focus-within .ayal-home-type-card__overlay {
    background: linear-gradient(
        to top,
        rgba(10, 14, 8, 0.92) 0%,
        rgba(10, 14, 8, 0.46) 58%,
        rgba(10, 14, 8, 0.18) 100%
    );
}

.ayal-home-type-card__text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-above);
    padding: var(--space-24);
    color: var(--ayal-white);
}

.ayal-home-type-card__count {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-micro);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--ayal-white);
    opacity: 0.78;
    margin-bottom: var(--space-8);
}

.ayal-home-type-card__text h3 {
    color: var(--ayal-white);
    font-size: var(--text-h3);
    font-weight: var(--weight-regular);
    margin: 0;
}

.ayal-home-type-card__reveal {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 340ms var(--ease), opacity var(--duration-base) var(--ease);
    margin-top: 0;
}

.ayal-home-type-card__reveal > * {
    overflow: hidden;
}

.ayal-home-type-card:hover .ayal-home-type-card__reveal,
.ayal-home-type-card:focus-within .ayal-home-type-card__reveal {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: var(--space-12);
}

.ayal-home-type-card__reveal p {
    font-size: var(--text-body-sm);
    color: rgba(255, 255, 255, 0.82);
    line-height: var(--leading-relaxed);
    margin: 0 0 var(--space-12);
}

.ayal-home-type-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    font-family: var(--font-body);
    font-size: var(--text-micro);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--ayal-sand);
}

@media (max-width: 900px) {
    .ayal-home-types__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 580px) {
    .ayal-home-types__grid { grid-template-columns: 1fr; }
    .ayal-home-type-card { height: 320px; }
    /* Description is always shown on touch devices — there's no hover to reveal it */
    .ayal-home-type-card__reveal {
        grid-template-rows: 1fr;
        opacity: 1;
        margin-top: var(--space-12);
    }
}


/* =============================================================================
   7. DESTINATIONS — image slider, overlay content
   4 Sep 2026 (round 7): rebuilt from a static 4-up card grid into a
   horizontally-scrolling slider per Victor — tall image cards with the
   copy overlaid directly on the photo (no white content panel below),
   sized so 2 cards sit fully in view with a slice of the 3rd visible at
   the edge (the cue that there's more to scroll to), plus prev/next
   arrows. Built on native scroll + scroll-snap rather than a JS-driven
   translateX track (compare the Testimonials carousel above) because a
   "partial peek" needs the visible width to fall mid-card, which a
   paged/page-at-a-time track can't do — the arrows just scroll the
   native track by one card+gap (see js/ayal-homepage-luxury.js).
   ============================================================================= */

.ayal-home-dest-slider {
    position: relative;
}

.ayal-home-dest-slider__track {
    display: flex;
    gap: var(--space-24);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* Arrows are the primary control — hide the native scrollbar. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ayal-home-dest-slider__track::-webkit-scrollbar {
    display: none;
}

.ayal-home-dest-slide {
    position: relative;
    /* 2 cards fully visible + a slice of the 3rd at desktop widths
       (2 × 44% + 1 gap ≈ 90% of the track, leaving ~10% of the next
       card showing). Percentage-based on the track's own width (inside
       .ayal-container) rather than the viewport, so it holds up
       whatever the container's max-width happens to be. Narrower
       breakpoints below widen this so fewer cards show per screen. */
    flex: 0 0 44%;
    aspect-ratio: 3 / 4;
    max-height: 640px;
    overflow: hidden;
    background-color: var(--ayal-ivory-2);
    scroll-snap-align: start;
}

.ayal-home-dest-slide__link {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.ayal-home-dest-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slower) var(--ease);
}

.ayal-home-dest-slide:hover img {
    transform: scale(1.05);
}

.ayal-home-dest-slide__overlay {
    background: linear-gradient(
        to top,
        rgba(10, 14, 8, 0.90) 0%,
        rgba(10, 14, 8, 0.22) 52%,
        rgba(10, 14, 8, 0.02) 100%
    );
}

.ayal-home-dest-slide__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-above);
    padding: var(--space-32);
    color: var(--ayal-white);
}

.ayal-home-dest-slide__specialist {
    display: block;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--ayal-sand);
    margin-bottom: var(--space-8);
}

.ayal-home-dest-slide__content h3 {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    font-weight: var(--weight-regular);
    color: var(--ayal-white);
    margin: 0 0 var(--space-12);
}

.ayal-home-dest-slide__content p {
    font-size: var(--text-body-sm);
    line-height: var(--leading-relaxed);
    color: rgba(255, 255, 255, 0.85);
    max-width: 42ch;
    margin: 0 0 var(--space-16);
}

.ayal-home-dest-slide__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    font-family: var(--font-body);
    font-size: var(--text-micro);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--ayal-white);
}

.ayal-home-dest-slider__nav {
    display: flex;
    justify-content: center;
    gap: var(--space-16);
    margin-top: var(--space-40);
}

.ayal-home-dest-slider__arrow {
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--ayal-green);
    background: transparent;
    color: var(--ayal-green);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--duration-base) var(--ease), color var(--duration-base) var(--ease);
}

.ayal-home-dest-slider__arrow-icon--prev {
    transform: rotate(180deg);
}

.ayal-home-dest-slider__arrow:hover {
    background: var(--ayal-green);
    color: var(--ayal-white);
}

.ayal-home-dest-slider__arrow:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

@media (max-width: 1023px) {
    .ayal-home-dest-slide { flex-basis: 60%; }
}

@media (max-width: 640px) {
    .ayal-home-dest-slide { flex-basis: 84%; aspect-ratio: 4 / 5; max-height: 520px; }
}


/* =============================================================================
   8. THE AYAL WAY — trust row
   ============================================================================= */

.ayal-home-way__grid {
    display: grid;
    grid-template-columns: repeat(var(--ayal-way-cols, 3), minmax(0, 1fr));
    gap: var(--space-56);
}

.ayal-home-way-item {
    text-align: center;
    padding: 0 var(--space-12);
}

.ayal-home-way-item__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-24);
    border-radius: 50%;
    background: var(--ayal-green-muted);
    border: 1px solid var(--ayal-green-border);
    color: var(--ayal-green);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ayal-home-way-item h3 {
    font-size: var(--text-h4);
    font-weight: var(--weight-regular);
    margin: 0 0 var(--space-12);
}

.ayal-home-way-item p {
    color: var(--ayal-charcoal-2);
    font-size: var(--text-body-sm);
    line-height: var(--leading-loose);
    margin: 0;
}

@media (max-width: 767px) {
    .ayal-home-way__grid { grid-template-columns: 1fr; gap: var(--space-40); }
}


/* =============================================================================
   9. FROM THE FIELD — editorial spread
   ============================================================================= */

.ayal-home-field {
    background-color: var(--ayal-charcoal);
}

.ayal-home-field__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

.ayal-home-field__media {
    min-height: 480px;
}

.ayal-home-field__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ayal-home-field__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-80) var(--section-pad-x);
}

.ayal-home-field__copy .ayal-home-title {
    margin: var(--space-16) 0 var(--space-24);
}

.ayal-home-field__body {
    max-width: 46ch;
    font-size: var(--text-body-lg);
    line-height: var(--leading-loose);
    color: var(--ayal-white);
    opacity: 0.72;
    margin: 0;
}

@media (max-width: 1023px) {
    .ayal-home-field__grid { grid-template-columns: 1fr; }
    .ayal-home-field__media { min-height: 320px; }
    .ayal-home-field__copy { padding: var(--space-56) var(--section-pad-x); }
}


/* =============================================================================
   10. FINAL CTA
   ============================================================================= */

.ayal-home-cta {
    position: relative;
    height: 76vh;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ayal-home-cta > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ayal-home-cta__content {
    position: relative;
    z-index: var(--z-above);
    text-align: center;
    max-width: 680px;
    padding: 0 var(--space-24);
}

.ayal-home-cta__content .ayal-home-title {
    margin: 0 0 var(--space-20);
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1.28;
}

.ayal-home-cta__body {
    font-family: var(--font-heading);
    font-style: normal; /* Qaftan ships one weight, no italic master — see ayal-tokens.css */
    font-weight: var(--weight-light);
    font-size: clamp(15px, 2vw, 18px);
    color: var(--ayal-white);
    opacity: 0.86;
    line-height: var(--leading-relaxed);
    margin: 0 0 var(--space-40);
}


/* =============================================================================
   END OF FILE — ayal-homepage-luxury.css
   ============================================================================= */