/* static/landing_2/css/homepage-carousel.css
   The landing page's deal carousel, paired with js/homepage-carousel.js. Loaded by landing_2.html
   alone, so the deal pages don't carry it.

   Note "free deals" elsewhere in this codebase means the deals a free Basic account unlocks; the
   slides here are the narrower set that needs no account at all, hence the name.

   Deliberately separate from the deal tiles' carousel (deal-tile.css): that one rotates photos
   inside a tile whose facts sit in a strip underneath, while this lays a whole deal over a
   full-bleed photo with no strip at all. They look alike in places but answer different questions,
   so neither is bent to cover both. The shared palette tokens keep them the same product -
   --theme-yellow with var(--theme-yellow-ink) for the CTA, #ff8c8c for a struck price. */

.homepage-carousel{ margin:0 0 16px; }
/* Matches .section__title in landing.css: on desktop this heads the left column and sits level with
   the Deals and Search heads opposite, so it has to be the same size as them. Phones step it down
   (see the breakpoint block at the foot of this file). */
.homepage-carousel__title{ margin:0 0 12px; font-size:24px; letter-spacing:.2px; }

/* Fixed height: a curated crop, and it stops the page reflowing as the slides change */
.homepage-carousel__frame{
  position:relative; height:254px;
  border-radius:var(--radius); overflow:hidden;
  background:#000; border:1px solid var(--border); box-shadow:var(--shadow);
}

/* One slide shown at a time, stacked rather than tracked - the same "show one, swap it" shape the
   deal tiles' photo carousel uses */
.homepage-carousel__slide{ position:absolute; inset:0; display:none; color:#fff; }
.homepage-carousel__slide.is-active{ display:block; }
.homepage-carousel__slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* Photos are unpredictable, so the text carries its own contrast rather than trusting the image */
.homepage-carousel__scrim-top,
.homepage-carousel__scrim-bottom{ position:absolute; left:0; right:0; pointer-events:none; }
/* Same strength as the tiles' gradients; taller than theirs because this slide carries two rows of
   content at the top and a price and CTA at the bottom */
.homepage-carousel__scrim-top{ top:0; height:34%; background:linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,0)); }
.homepage-carousel__scrim-bottom{ bottom:0; height:56%; background:linear-gradient(0deg,rgba(0,0,0,.65),rgba(0,0,0,0)); }

/* Route then tags, each on its own row - side by side they collided on narrow screens */
.homepage-carousel__top{
  position:absolute; left:16px; right:16px; top:16px; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
}
/* The tiles' destination chip, at the inset this bigger frame wants */
.homepage-carousel__route{
  display:inline-flex; align-items:center; gap:8px; max-width:100%;
  padding:6px 12px; border-radius:12px;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.25);
  font-weight:900; font-size:16px; text-shadow:0 1px 2px rgba(0,0,0,.6);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.homepage-carousel__arrow{ color:var(--theme-yellow); }

.homepage-carousel__tags{ display:flex; flex-wrap:wrap; gap:6px; }
.homepage-carousel__tag{
  padding:5px 10px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap;
  background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.28);
}
.homepage-carousel__tag--deal{ background:var(--theme-yellow); border-color:transparent; color:var(--theme-yellow-ink); }

.homepage-carousel__foot{
  position:absolute; left:16px; right:16px; bottom:16px; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.homepage-carousel__price{
  display:inline-flex; align-items:baseline; gap:8px;
  padding:6px 12px; border-radius:12px;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.25);
  font-weight:1000; font-size:20px; white-space:nowrap; font-variant-numeric:tabular-nums;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}
.homepage-carousel__price s{ font-size:12px; font-weight:700; color:#ff8c8c; text-decoration-color:#ff8c8c; }

/* Gold in both themes, like the deal tiles' CTA - it sits on a photo, not on the page */
.homepage-carousel__cta{
  flex:0 0 auto; padding:9px 16px; border-radius:999px;
  font-weight:900; font-size:14px; white-space:nowrap;
  background:var(--theme-yellow); color:var(--theme-yellow-ink);
  /* No transition: the hover lift must react instantly - any easing reads as lag on small buttons */
}
.homepage-carousel__slide:hover .homepage-carousel__cta{
  transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.35);
}

/* Arrows at the edges, unlike the tiles' pair grouped in one corner - there is room for them here */
.homepage-carousel__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.45);
  color:#fff; font-size:20px; line-height:1; cursor:pointer;
  display:grid; place-items:center;
}
.homepage-carousel__nav:hover{ background:rgba(0,0,0,.68); }
.homepage-carousel__nav:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.homepage-carousel__nav--prev{ left:10px; }
.homepage-carousel__nav--next{ right:10px; }

.homepage-carousel__dots{
  position:absolute; left:0; right:0; bottom:8px; z-index:3;
  display:flex; justify-content:center; gap:7px;
}
/* The tiles' dot, larger because this frame is full-width rather than a 28vw tile */
.homepage-carousel__dot{
  width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.45);
}
.homepage-carousel__dot.is-active{ background:#fff; }

/* Both blocks below live here rather than in landing.css because this stylesheet is linked after it,
   so an equally specific rule over there would lose on source order. */

/* Phone type scale, matching the intro's step down in landing.css. */
@media (max-width: 900px){
  .homepage-carousel__title{ font-size:17px; }
}

/* Desktop baseline; landing.css lets the homepage match its deal-tile stack while campaign pages
   retain this fixed height. The grid-specific margin reset wins over this file's base 16px margin. */
@media (min-width: 901px){
  .grid--home .homepage-carousel{ margin-bottom:0; }
  .homepage-carousel__frame{ height:300px; }
}