/*
 * home.css — the Home page. Shared pieces (intro card, destination columns, "why choose
 * us" tiles, buttons) are in pages.css, which loads first.
 */

/* ---------- Hero slideshow ---------- */

.home-hero{position:relative;min-height:52vh}
.home-hero__slideshow{position:absolute;inset:0;z-index:0}
.home-hero__image{
  width:100%;height:100%;background-size:cover;background-position:center center;
  /* Ken Burns: the active slide zooms in over 20s; when it hands over, it eases back out
     over 10s (the transition reverses from wherever it got to). */
  transition-property:transform;transition-duration:10s;transition-timing-function:linear;
}
.home-hero__image.is-zooming{transform:scale(1.3);transition-duration:20s}
@media (max-width:767px){.home-hero{min-height:40vh}}

/* ---------- Introduction card ---------- */

.page-intro--home .page-intro__body{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;min-width:0}
.page-intro--home .page-intro__actions{display:flex;justify-content:center;align-items:center;gap:20px;width:65%;min-width:0}
.page-intro--home .page-intro__text{width:auto}
.page-intro__button{position:relative;z-index:1}
@media (max-width:767px){
  .page-intro--home .page-intro__eyebrow,
  .page-intro--home .page-intro__title,
  .page-intro--home .page-intro__text{text-align:center}
  .page-intro--home .page-intro__actions{width:100%;flex-wrap:wrap}
}

/* ---------- Destination columns ---------- */

.destinations--home{margin:50px 0}
.destinations--home .destinations__inner{max-width:min(100%,1500px)}
@media (min-width:768px) and (max-width:1366px){
  .destinations--home{padding:20px}
  .destinations--home .destinations__title{font-size:16px}
}
@media (max-width:767px){
  .destinations--home{padding:20px 10px}
  .destinations--home .destinations__inner{max-width:min(100%,var(--page-boxed))}
}

/* ---------- Featured hotels ---------- */

.featured-hotels{margin:50px 0 100px}
.featured-hotels__panel{
  max-width:1600px;margin:0 auto;background-color:var(--color-grey-background);
  border-bottom:3px solid var(--color-primary);
}
.featured-hotels__inner{
  display:flex;flex-direction:column;gap:20px;
  max-width:min(100%,1200px);margin:0 auto;padding:100px 0;
}
.featured-hotels__label{align-self:center}
.featured-hotels__title{
  margin:0 0 30px;font-family:var(--font-brand);font-size:32px;font-weight:600;line-height:30px;
  letter-spacing:6.8px;text-transform:uppercase;color:var(--color-primary-dark);text-align:center;
}
.hotel-carousel{position:relative;min-width:0}
/* The old carousel's container was a grid, so its strip of slides is as wide as all of
   them together; the off-screen slide check below depends on that width. */
.hotel-carousel__swiper{display:grid;padding-bottom:40px}
.hotel-carousel__slide{height:auto}
.hotel-carousel__slide > *{height:100%}
.hotel-carousel__swiper:not(.swiper-initialized) > .swiper-wrapper{gap:15px;overflow:hidden}
.hotel-carousel__swiper:not(.swiper-initialized) .hotel-carousel__slide{max-width:calc((100% - 30px) / 3)}
.hotel-carousel{
  --swiper-pagination-bullet-size:10px;--swiper-pagination-bullet-horizontal-gap:6px;
  --swiper-pagination-bullet-inactive-color:var(--color-primary);--swiper-pagination-color:var(--color-primary);
}
.hotel-carousel .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal{
  top:100%;bottom:5px;left:50%;z-index:3;
  width:max-content;height:max-content;transform:translate(-50%,-100%);
  font-size:10px;line-height:10px;
}
.hotel-carousel .swiper-pagination-bullet{vertical-align:top}
.hotel-carousel .swiper-pagination-bullet:hover{background:#000;opacity:1}
@media (max-width:1366px){
  .featured-hotels__inner{padding:60px 0}
  .featured-hotels__panel{padding:0 20px}
}
@media (max-width:1024px){
  .hotel-carousel__swiper:not(.swiper-initialized) .hotel-carousel__slide{max-width:calc((100% - 15px) / 2)}
}
@media (max-width:767px){
  .featured-hotels{margin:25px 0;padding:0 10px}
  .featured-hotels__panel{padding:0 10px}
  .featured-hotels__inner{max-width:min(100%,var(--page-boxed));padding:40px 0}
  .featured-hotels__title{margin-bottom:10px;font-size:24px}
  .hotel-carousel__swiper:not(.swiper-initialized) .hotel-carousel__slide{max-width:100%}
}

/* ---------- Why choose us ---------- */

.why-us--home{display:flex;justify-content:center;margin:100px 0;padding:0 10px}
.why-us__box{width:100%;background-color:#fff}
.why-us__inner{
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;
  max-width:min(100%,1200px);margin:0 auto;
}
.why-us__head{display:flex;align-items:center;gap:20px;width:100%;margin-bottom:30px}
.why-us__intro{display:flex;flex-direction:column;gap:20px;width:100%;min-width:0}
.why-us__title{
  margin:0;font-family:var(--font-brand);font-size:32px;font-weight:600;line-height:30px;
  letter-spacing:6.8px;text-transform:uppercase;color:var(--color-primary-dark);text-align:left;
}
.why-us__actions{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:20px;width:62%;min-width:0}
.why-us__button{position:relative;z-index:1}
@media (max-width:1366px){
  .why-us--home{padding:0 20px}
}
@media (max-width:767px){
  .why-us--home{margin:0;padding:0}
  .why-us__box{padding:0 10px}
  .why-us__inner{max-width:min(100%,var(--page-boxed));padding:10px 0}
  .why-us__head{flex-wrap:wrap}
  .why-us__title{align-self:flex-start;font-size:24px;text-align:center}
  .why-us__actions{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;width:100%}
}