/* GLOBAL */
.excursions{
  background:#f7f7f7;
  font-family: system-ui;
}

/* CONTAINER */
.container{
  width:90%;
  max-width:1200px;
  margin:auto;
}

/* HERO */
.hero{
  background: url('../images/hero.jpg') center/cover;
  height: 320px;
  position: relative;
  display:flex;
  align-items:center;
  color:white;
}

.hero__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.45);
}

.hero__content{
  position:relative;
}

.hero__title{
  font-size:42px;
  font-weight:700;
}

.hero__subtitle{
  opacity:.9;
}

/* FILTERS */
.filters{
  padding:20px 0;
  background:#fff;
  position:sticky;
  top:0;
  z-index:10;
  box-shadow:0 5px 20px rgba(0,0,0,0.05);
}

.filters__inner{
  display:flex;
  gap:10px;
}

.filters input,
.filters select{
  padding:12px;
  border:1px solid #ddd;
  border-radius:10px;
  width:100%;
}

/* GRID */
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  padding:30px 0;
}

/* CARD (AIRBNB STYLE) */
.card{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  transition:.3s;
}

.card:hover{
  transform:translateY(-6px);
}

.card__image img{
  width:100%;
  height:220px;
  object-fit:cover;
}

.card__body{
  padding:15px;
}

.card__title{
  font-size:16px;
  margin-bottom:10px;
}

.card__price{
  font-weight:bold;
  color:#ff5a5f;
  margin-bottom:10px;
}

.card__btn{
  display:inline-block;
  padding:10px 14px;
  background:#000;
  color:#fff;
  border-radius:10px;
  text-decoration:none;
}

.card__image{
    position:relative;
}

.badge{
    position:absolute;
    top:10px;
    left:10px;
    background:rgba(0,0,0,0.75);
    color:#fff;
    padding:5px 10px;
    font-size:12px;
    border-radius:20px;
    z-index:2;
}

.js-grid.loading{
    opacity:0.6;
    pointer-events:none;
}

.js-grid.loading .card{
    animation:pulse 1s infinite;
}

@keyframes pulse{
    0%{opacity:1}
    50%{opacity:0.4}
    100%{opacity:1}
}

.card__image{
    position:relative;
}

.badge{
    position:absolute;
    top:10px;
    left:10px;
    background:rgba(0,0,0,0.75);
    color:#fff;
    padding:5px 10px;
    font-size:12px;
    border-radius:20px;
}

/* MOBILE */
@media(max-width:768px){
  .grid{
    grid-template-columns:1fr;
  }

  .hero__title{
    font-size:28px;
  }
}