/* =========================
   PLACES HERO (IMAGE)
========================= */
.places-hero{
  padding-top: calc(var(--header-h) + 80px); /* ✅ navbar gap */
  padding-bottom: 60px;
  position: relative;
  overflow: hidden;

  background: url("images/bestplaces.png") no-repeat center / cover;
}

/* ✅ overlay so text readable (no blur) */
.places-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.78) 0%,
    rgba(255,255,255,.55) 55%,
    rgba(255,255,255,.28) 100%
  );
  z-index:0;
}

.places-hero .container{
  position: relative;
  z-index: 1;
  width: min(1100px, 92%);
  margin: 0 auto;
}

/* Title animation (left -> right) */
.places-hero h1{
  margin: 0 0 14px;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #111;
  max-width: 980px;

  opacity: 0;
  transform: translateX(-28px);
  animation: placesTitleIn .8s ease forwards;
}

/* Paragraph animation (fade + move) */
.places-hero p{
  margin: 0;
  max-width: 980px;
  font-size: 16px;
  line-height: 1.65;
  color: #333;

  opacity: 0;
  transform: translateY(12px);
  animation: placesTextIn .8s ease forwards;
  animation-delay: .14s;

  /* ✅ readability without box */
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
}

.places-hero p b{
  color:#111;
  font-weight: 700;
}

/* Keyframes */
@keyframes placesTitleIn{
  to{ opacity:1; transform: translateX(0); }
}
@keyframes placesTextIn{
  to{ opacity:1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 768px){
  .places-hero{
    padding-top: calc(var(--header-h) + 60px);
    padding-bottom: 42px;
  }
  .places-hero p{
    font-size: 15px;
  }
}
/* =========================
   BARCELONA PLACES (STANDALONE)
   Use with: <section id="barcelonaPlaces"> ... </section>
========================= */

/* Base */
#barcelonaPlaces{
  padding: 80px 0;
  background: #fff;
  color: #111;
  font-family: Arial, Helvetica, sans-serif;
}

#barcelonaPlaces .bp-container{
  width: min(1100px, 92%);
  margin: 0 auto;
}

/* Section Heading */
#barcelonaPlaces .bp-head{
  max-width: 860px;
  margin: 0 auto 60px;
  text-align: center;
}

#barcelonaPlaces .bp-head h2{
  margin: 0 0 12px;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.15;
  color: #111;
  letter-spacing: -0.02em;
}

#barcelonaPlaces .bp-head p{
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: #444;
}

#barcelonaPlaces .bp-head p b{
  color: #111;
  font-weight: 700;
}

/* Item Row (2 equal divs) */
#barcelonaPlaces .bp-item{
  display: grid;
  grid-template-columns: 1fr 1fr; /* ✅ equal */
  gap: 50px;
  align-items: center;
  margin-bottom: 55px;
}

/* last item gap */
#barcelonaPlaces .bp-item:last-child{
  margin-bottom: 0;
}

/* Alternate (image left, text right) */
#barcelonaPlaces .bp-item.bp-reverse{
  direction: rtl;
}
#barcelonaPlaces .bp-item.bp-reverse > *{
  direction: ltr;
}

/* Text */
#barcelonaPlaces .bp-text h3{
  margin: 0 0 14px;
  font-size: clamp(22px, 2.7vw, 32px);
  line-height: 1.2;
  color: #111;
}

#barcelonaPlaces .bp-text p{
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.7;
  color: #444;
}

#barcelonaPlaces .bp-text ul{
  margin: 0;
  padding-left: 18px;
}

#barcelonaPlaces .bp-text li{
  margin-bottom: 6px;
  color: #333;
  line-height: 1.6;
  font-size: 15.5px;
}

#barcelonaPlaces .bp-text b{
  color: #111;
  font-weight: 700;
}

/* Image */
#barcelonaPlaces .bp-media img{
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px){
  #barcelonaPlaces{
    padding: 60px 0;
  }

  #barcelonaPlaces .bp-head{
    margin-bottom: 40px;
  }

  #barcelonaPlaces .bp-item{
    grid-template-columns: 1fr;  /* stack */
    gap: 24px;
    margin-bottom: 38px;
  }

  #barcelonaPlaces .bp-item.bp-reverse{
    direction: ltr;
  }

  #barcelonaPlaces .bp-media img{
    height: 260px;
  }
}

@media (max-width: 768px){
  #barcelonaPlaces .bp-head p{
    font-size: 15px;
  }

  #barcelonaPlaces .bp-text p{
    font-size: 15px;
  }

  #barcelonaPlaces .bp-text li{
    font-size: 15px;
  }
}
/*cards */
/* ===============================
   DOSRIUS SECTION
================================ */
.dosrius-cards{
  padding: 90px 0;
  background:#f7f9fc;
}

.dosrius-head{
  max-width: 760px;
  margin: 0 auto 60px;
  text-align: center;
}

.dosrius-head h2{
  font-size: 2.2rem;
  margin-bottom: 12px;
  color:#111;
}

.dosrius-head p{
  font-size: 1rem;
  line-height: 1.6;
  color:#555;
}

/* ===============================
   DESKTOP/TABLET: FLEX (LAST ROW CENTER FIX)
================================ */
.dosrius-grid{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;  /* ✅ neechay wali row center */
  gap: 30px;
}

/* ✅ fixed card width so rows look perfect */
.d-card{
  width: 340px;             /* ✅ controls columns */
  max-width: 100%;
  background:#fff;
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  transition: transform .3s ease, box-shadow .3s ease;
}

.d-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(0,0,0,.12);
}

.d-card__media img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}

.d-card__body{
  padding:22px;
}

.d-card__body h3{
  font-size:1.1rem;
  margin-bottom:10px;
  color:#222;
}

.d-card__body p{
  font-size:.95rem;
  line-height:1.6;
  color:#555;
}

.d-list{
  padding-left:18px;
}

.d-list li{
  font-size:.9rem;
  margin-bottom:6px;
  color:#444;
}

/* ===============================
   MOBILE SLIDER MODE
================================ */
@media (max-width: 768px){
  .dosrius-grid{
    display: grid;                 /* ✅ switch to grid for slider */
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    justify-content: start;
    gap: 18px;
    padding-bottom: 10px;
  }

  .d-card{
    width: auto;                   /* ✅ important in slider mode */
    scroll-snap-align: center;
  }

  .dosrius-controls{
    display:flex;
    justify-content:center;
    gap:14px;
    margin-top:20px;
  }
}

/* ===============================
   DESKTOP: HIDE CONTROLS
================================ */
@media (min-width: 769px){
  .dosrius-controls{
    display:none;
  }
}

/* ===============================
   NAV BUTTONS
================================ */
.d-nav{
  width:42px;
  height:42px;
  border-radius:50%;
  border:none;
  background:#2f74b9;
  color:#fff;
  font-size:22px;
  cursor:pointer;
}
/*last */
/* =========================
   TRAVEL TIPS / CONCLUSION
========================= */
.travel-tips{
  padding: 70px 0;
  background: #fff;
}

.travel-tips .container{
  max-width: 900px;     /* screenshot jesa clean width */
}

.tt-title{
  font-size: clamp(1.7rem, 2.2vw, 2.2rem);
  line-height: 1.15;
  font-weight: 800;
  color: #111;
  margin: 0 0 14px;
}

.tt-gap{
  margin-top: 34px;     /* Conclusion ke upar gap */
}

.tt-text{
  font-size: 1.02rem;
  line-height: 1.75;
  color: #222;
  margin: 0 0 14px;
}

.tt-text b{
  font-weight: 800;
}

.tt-list{
  margin: 10px 0 0;
  padding-left: 22px;
}

.tt-list li{
  font-size: 1.02rem;
  line-height: 1.7;
  color: #222;
  margin: 8px 0;
}

/* nicer bullets */
.tt-list li::marker{
  font-size: 1.05em;
}

/* Mobile spacing */
@media (max-width: 600px){
  .travel-tips{ padding: 55px 0; }
  .tt-list{ padding-left: 18px; }
}