/* ═══════════════════════════════════════════
   destinations.css — Popular Destinations section
   Change this file to update: destination cards
   (Santorini, Kyoto, Bali), prices, card hover
   effects, and "Browse All" button style.
   To change the section background image →
   update the url() below
═══════════════════════════════════════════ */

/* ── Section background image ── */
#destinations .sec-bg{
  background-image:url('../images/option1.jpg');
}

/* ── Destination card grid ── */
.dest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.d-card{
  border-radius:20px;overflow:hidden;position:relative;
  aspect-ratio:4/3;cursor:pointer;
  box-shadow:0 16px 48px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06);
  transition:transform .32s cubic-bezier(.34,1.56,.64,1),box-shadow .32s;
}
.d-card:hover{transform:translateY(-10px) scale(1.015);box-shadow:0 28px 70px rgba(0,0,0,.7)}
.d-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.25,.46,.45,.94)}
.d-card:hover img{transform:scale(1.08)}

.d-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.0) 0%,rgba(0,0,0,.15) 40%,rgba(0,0,0,.82) 100%);
  padding:22px;display:flex;flex-direction:column;justify-content:flex-end;
}
.d-name{font-size:26px;font-weight:800;line-height:1.1;margin-bottom:4px;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.d-country{
  font-size:12.5px;font-weight:600;color:rgba(255,255,255,.75);
  letter-spacing:.4px;margin-bottom:10px;
}
.d-price{
  font-size:16px;font-weight:800;color:var(--gold2);
  display:flex;align-items:center;gap:6px;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.d-price span{font-size:12px;font-weight:400;color:rgba(255,255,255,.55)}

/* ── Browse All button ── */
.browse-wrap{text-align:center;margin-top:44px}
.btn-browse{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(139,92,246,.15);
  border:1.5px solid rgba(139,92,246,.45);
  color:white;padding:14px 32px;border-radius:50px;
  font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
  text-decoration:none;transition:all .25s;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 4px 24px rgba(139,92,246,.2);
}
.btn-browse:hover{
  background:linear-gradient(135deg,var(--accent),#c084fc);
  border-color:var(--accent);
  box-shadow:0 8px 32px rgba(139,92,246,.45);
  transform:translateY(-2px);
}
.btn-browse svg{transition:transform .22s}
.btn-browse:hover svg{transform:translateX(5px)}