@import "brand-hero-base.css";

/* Featured Travel Offers: clean image-card implementation. */
.deal-grid .deal-card{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  min-height:290px!important;
  padding:24px!important;
  overflow:hidden!important;
  isolation:isolate!important;
  cursor:pointer!important;
  color:#fff!important;
  background:none!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:16px!important;
  box-shadow:0 6px 20px rgba(17,42,38,.10)!important;
  transition:transform .25s ease,box-shadow .25s ease!important;
}

/* One real image layer per card; no inherited background-image tricks. */
.deal-grid .deal-card::before{
  content:"";
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  transform:scale(1)!important;
  transform-origin:center!important;
  transition:transform .45s ease!important;
  pointer-events:none!important;
}
.deal-grid .deal-card:nth-child(1)::before{background-image:url('https://images.unsplash.com/photo-1499092346589-b9b6be3e94b2?auto=format&fit=crop&w=1000&q=85')!important}
.deal-grid .deal-card:nth-child(2)::before{background-image:url('https://images.unsplash.com/photo-1529156069898-49953e39b3ac?auto=format&fit=crop&w=1000&q=85')!important}
.deal-grid .deal-card:nth-child(3)::before{background-image:url('https://images.unsplash.com/photo-1540946485063-a40da27545f8?auto=format&fit=crop&w=1000&q=85')!important}
.deal-grid .deal-card:nth-child(4)::before{background-image:url('https://images.unsplash.com/photo-1659255068757-259124c6d867?auto=format&fit=crop&w=1000&q=85')!important}

/* Readability overlay. */
.deal-grid .deal-card::after{
  content:"";
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.82) 100%)!important;
  pointer-events:none!important;
}
.deal-grid .deal-card>*{position:relative!important;z-index:2!important}

.deal-grid .deal-card .deal-label{
  font-size:.78rem!important;
  letter-spacing:.13em!important;
  font-weight:900!important;
  color:#f6d98f!important;
  text-shadow:0 2px 8px rgba(0,0,0,.95)!important;
}
.deal-grid .deal-card h3{
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:1.45rem!important;
  line-height:1.18!important;
  font-weight:900!important;
  color:#fff!important;
  margin:8px 0 7px!important;
  text-shadow:0 2px 10px rgba(0,0,0,1)!important;
}
.deal-grid .deal-card p{
  font-size:.98rem!important;
  line-height:1.5!important;
  font-weight:700!important;
  color:#fff!important;
  margin:0!important;
  text-shadow:0 2px 9px rgba(0,0,0,1)!important;
}
.deal-grid .deal-card>a{
  position:relative!important;
  z-index:3!important;
  align-self:flex-start!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:42px!important;
  margin-top:18px!important;
  padding:9px 15px!important;
  border-radius:9px!important;
  background:#f3d28b!important;
  color:#084f4c!important;
  font-size:.9rem!important;
  line-height:1.2!important;
  font-weight:900!important;
  text-decoration:none!important;
  box-shadow:0 5px 15px rgba(0,0,0,.24)!important;
  transition:transform .2s ease,background .2s ease!important;
}
.deal-grid .deal-card>a:hover{transform:translateY(-2px)!important;background:#ffe3a5!important}
.deal-grid .deal-card>a:focus-visible{outline:3px solid #fff!important;outline-offset:3px!important}

@media (hover:hover){
  .deal-grid .deal-card:hover{transform:translateY(-5px)!important;box-shadow:0 18px 38px rgba(17,42,38,.22)!important}
  .deal-grid .deal-card:hover::before{transform:scale(1.10)!important}
}
.deal-grid .deal-card:active{transform:translateY(-1px)!important}
.deal-grid .deal-card:active::before{transform:scale(1.06)!important}

@media(max-width:600px){
  .deal-grid .deal-card{min-height:270px!important;padding:22px!important}
  .deal-grid .deal-card h3{font-size:1.38rem!important}
  .deal-grid .deal-card p{font-size:.96rem!important}
}

@media(prefers-reduced-motion:reduce){
  .deal-grid .deal-card,.deal-grid .deal-card::before,.deal-grid .deal-card>a{transition:none!important}
}