/* ============================================================
   birgit theme — home.css — front page only
   Part of the conditional-partial split of the original single
   stylesheet. Rules moved verbatim; cascade preserved via enqueue order.
   ============================================================ */

/* ============================================================
   HERO CAROUSEL
   6 slides, each: slides in from left (1s) → holds centred (6s)
                  → slides out to right (1s), overlapping the
                  next slide's slide-in so there is no empty gap.
   Total cycle: 6 × 7s = 42s, looping infinitely.
   ============================================================ */

.carousel {
    position: relative;
    width: 100%;
    height: 520px;
    overflow: hidden;
    background: var(--color-cream-50);
}

.carousel__track {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel__slide {
    position: absolute;
    inset: 0;                  /* fill the track */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: translateX(-100%);   /* start off-screen left */
    will-change: transform;
    animation: carousel-cycle 42s infinite;
}

/* Stagger each slide by 7 s so they take turns. */
.carousel__slide:nth-child(1) { animation-delay:   0s; }
.carousel__slide:nth-child(2) { animation-delay:   7s; }
.carousel__slide:nth-child(3) { animation-delay:  14s; }
.carousel__slide:nth-child(4) { animation-delay:  21s; }
.carousel__slide:nth-child(5) { animation-delay:  28s; }
.carousel__slide:nth-child(6) { animation-delay:  35s; }

/*
   Keyframe percentages of the full 42 s loop:
     0 s   →   0.000 %   off-screen left
     1 s   →   2.381 %   centred (finished sliding in)
     7 s   →  16.667 %   still centred (6 s hold complete)
     8 s   →  19.048 %   off-screen right (slide-out complete)
     42 s  → 100.000 %   waits off-screen right until loop restarts
   The slide-out (7 s → 8 s) overlaps the next slide's slide-in
   (its delay is 7 s), so the two images_old cross with no empty gap.
*/
@keyframes carousel-cycle {
    0%      { transform: translateX(-100%); }   /* off-screen left, waiting    */
    2.381%  { transform: translateX(0);     }   /* centred (1s slide-in)       */
    16.667% { transform: translateX(0);     }   /* still centred (held to 7s)  */
    19.048% { transform: translateX(100%);  }   /* off-screen right (ends 8s)  */
    100%    { transform: translateX(100%);  }   /* stay off-right until restart */
}

/* Respect users who prefer reduced motion: hold the first image. */
@media (prefers-reduced-motion: reduce) {
    .carousel__slide {
        animation: none;
        transform: translateX(100%);
    }
    .carousel__slide:nth-child(1) {
        transform: translateX(0);
    }
}

/* ============================================================
   TITLE BLOCK
   ============================================================ */

.title-block {
    background: var(--color-cream-50);
    padding: 5rem 1.5rem 3rem;
    text-align: center;
}

.title-block__heading {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    line-height: 1.15;
    color: var(--color-navy-800);
    margin: 0 auto 1.75rem;
    max-width: 22ch;       /* forces two-line break similar to original */
}

.title-block__subtitle {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-navy-800);
    line-height: 1.6;
    margin: 0 auto;
    max-width: 48ch;
}

/* ============================================================
   ROOM GRID (3 photos in a row)
   ============================================================ */

.room-grid {
    background: var(--color-cream-100);
    padding: 3rem 2.5rem 5rem;
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    max-width: 1400px;
    margin: 0 auto;
}

.room-grid__item {
    margin: 0;
    flex: 1 1 280px;
    max-width: 360px;
}

.room-grid__item img {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 2px;
}

@media (max-width: 720px) {
    .carousel { height: 320px; }
    .title-block { padding: 3rem 1.25rem 2rem; }
    .room-grid { padding: 2rem 1.25rem 3rem; gap: 1rem; }
    .room-grid__item img { height: 200px; }
}

/* ============================================================
   WELCOME BLOCK
   ============================================================ */

.welcome {
    background: var(--color-cream-50);
    padding: 5rem 1.5rem;
    display: flex;
    justify-content: center;
}

.welcome__text {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-stone-800);
    max-width: 52ch;
    margin: 0;
}