/* =========================================================
   EXPLOREPALGHAR
   UNIVERSAL PLACE DETAILS PAGE
   =========================================================

   Used for:
   Saphale
   Palghar
   kelwa
   Vasai
   Virar
   Dahanu
   Bordi
   Jawhar
   etc.

   main.css handles:
   header
   footer
   buttons
   typography
   containers
   global variables
   ========================================================= */


/* =========================================================
   PAGE
   ========================================================= */

.place-page{
  background:var(--off-white);
  overflow-x:hidden;
}

.place-page [hidden]{
  display:none !important;
}

.place-page button,
.place-page a{
  -webkit-tap-highlight-color:transparent;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.place-page button:focus-visible,
.place-page a:focus-visible{
  outline:3px solid rgba(201,164,92,.55);
  outline-offset:3px;
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.place-breadcrumb-wrap{
  background:var(--cream);
  border-bottom:1px solid rgba(32,37,34,.07);
}

.place-breadcrumb{
  min-height:48px;

  display:flex;
  align-items:center;

  gap:9px;

  overflow:hidden;
  white-space:nowrap;

  color:var(--gray);

  font-size:.76rem;
}

.place-breadcrumb a{
  color:var(--gray);
}

.place-breadcrumb a:hover{
  color:var(--green);
}

.place-breadcrumb span:last-child{
  min-width:0;

  overflow:hidden;
  text-overflow:ellipsis;
}


/* =========================================================
   HERO
   ========================================================= */

.place-hero{
  position:relative;

  min-height:clamp(580px,78vh,770px);

  display:flex;
  align-items:flex-end;

  isolation:isolate;

  overflow:hidden;

  background:var(--green-dark);

  color:var(--off-white);
}

.place-hero-media{
  position:absolute;
  inset:0;

  z-index:-3;
}

.place-hero-media img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;
}

.place-hero-overlay{
  position:absolute;
  inset:0;

  z-index:-2;

  background:
    linear-gradient(
      90deg,
      rgba(7,23,18,.94) 0%,
      rgba(7,23,18,.78) 32%,
      rgba(7,23,18,.45) 62%,
      rgba(7,23,18,.18) 100%
    ),
    linear-gradient(
      0deg,
      rgba(7,23,18,.68) 0%,
      rgba(7,23,18,.08) 62%
    );
}

.place-hero-inner{
  width:100%;

  padding-top:var(--space-2xl);
  padding-bottom:clamp(60px,9vw,105px);
}

.place-hero-content{
  max-width:880px;
}

.place-hero .eyebrow{
  color:var(--gold);
}

.place-hero .eyebrow::before{
  background:var(--gold);
}

.place-hero h1{
  color:var(--off-white);

  max-width:900px;

  margin:0 0 22px;

  font-size:clamp(2.65rem,6vw,5.25rem);
  line-height:1.02;

  text-wrap:balance;
}

.place-hero-lede{
  max-width:660px;

  margin:0;

  color:rgba(255,253,249,.86);

  font-size:1.08rem;
  line-height:1.8;
}

.place-hero-actions{
  display:flex;
  flex-wrap:wrap;

  gap:12px;

  margin-top:30px;
}

.place-hero-meta{
  display:flex;
  flex-wrap:wrap;

  gap:8px;

  margin-top:25px;
}

.place-hero-meta span{
  padding:7px 10px;

  border:1px solid rgba(255,255,255,.15);

  border-radius:50px;

  background:rgba(255,255,255,.07);

  color:rgba(255,255,255,.72);

  font-size:.68rem;
  font-weight:600;

  letter-spacing:.04em;

  backdrop-filter:blur(5px);
}


/* =========================================================
   GENERAL SECTION HEAD
   ========================================================= */

.place-section-head{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(280px,.7fr);

  align-items:end;

  gap:var(--space-xl);

  margin-bottom:var(--space-xl);
}

.place-section-head > div{
  min-width:0;
}

.place-section-head h2{
  margin-top:8px;

  font-size:clamp(2rem,3.7vw,3.1rem);
  line-height:1.08;
}

.place-section-head > p{
  max-width:55ch;

  color:var(--gray);

  line-height:1.75;
}

.place-section-head--center{
  display:block;

  max-width:780px;

  margin:0 auto var(--space-xl);

  text-align:center;
}

.place-section-head--center .eyebrow{
  justify-content:center;
}

.place-section-head--center > p{
  margin:15px auto 0;

  max-width:65ch;
}


/* =========================================================
   ABOUT
   ========================================================= */

.place-about{
  padding:var(--space-2xl) 0;

  background:var(--off-white);
}


/* =========================================================
   ABOUT PREMIUM TABS
   ========================================================= */

.place-info-tabs{
  display:flex;

  width:max-content;
  max-width:100%;

  margin:0 auto 28px;

  padding:5px;

  gap:4px;

  overflow-x:auto;

  background:var(--cream);

  border:1px solid rgba(32,37,34,.07);

  border-radius:50px;

  box-shadow:var(--shadow-sm);

  scrollbar-width:none;
}

.place-info-tabs::-webkit-scrollbar{
  display:none;
}

.place-info-tab{
  flex:0 0 auto;

  border:0;

  padding:11px 20px;

  border-radius:50px;

  background:transparent;

  color:var(--gray);

  font:inherit;

  font-size:.78rem;
  font-weight:700;

  white-space:nowrap;

  cursor:pointer;

  transition:
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}

.place-info-tab:hover{
  color:var(--green);
}

.place-info-tab.is-active{
  background:var(--green-dark);

  color:var(--off-white);

  box-shadow:0 5px 16px rgba(18,50,38,.16);
}


/* =========================================================
   ABOUT PANELS
   ========================================================= */

.place-info-panels{
  border:1px solid rgba(32,37,34,.07);

  border-radius:var(--radius-lg);

  background:var(--cream);

  overflow:hidden;

  box-shadow:var(--shadow-sm);
}

.place-info-panel{
  padding:clamp(28px,5vw,55px);
}

.place-about-layout{
  display:grid;

  grid-template-columns:
    minmax(0,1.35fr)
    minmax(280px,.65fr);

  gap:clamp(35px,6vw,75px);

  align-items:start;
}

.place-about-copy h3{
  margin-bottom:18px;

  font-size:clamp(1.5rem,2.5vw,2rem);
}

.place-about-copy p{
  max-width:68ch;

  margin-bottom:17px;

  color:var(--gray);

  line-height:1.85;
}

.place-about-copy p:last-child{
  margin-bottom:0;
}


/* =========================================================
   QUICK INFORMATION
   ========================================================= */

.place-quick-card{
  padding:25px;

  border:1px solid rgba(32,37,34,.08);

  border-radius:var(--radius-md);

  background:var(--off-white);
}

.place-quick-label{
  margin-bottom:10px;

  color:var(--terracotta);

  font-size:.68rem;
  font-weight:800;

  letter-spacing:.1em;
  text-transform:uppercase;
}

.place-quick-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;

  gap:20px;

  padding:14px 0;

  border-bottom:1px solid rgba(32,37,34,.08);
}

.place-quick-row:last-child{
  border-bottom:0;
}

.place-quick-row span{
  color:var(--gray);

  font-size:.78rem;
}

.place-quick-row strong{
  max-width:55%;

  color:var(--green-dark);

  font-size:.8rem;

  text-align:right;
}


/* =========================================================
   ABOUT FEATURE CARDS
   ========================================================= */

.place-info-feature-grid,
.place-season-grid,
.place-planning-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:14px;
}

.place-info-feature,
.place-season-grid article,
.place-planning-grid article{
  min-width:0;

  padding:25px;

  border:1px solid rgba(32,37,34,.07);

  border-radius:var(--radius-md);

  background:var(--off-white);
}

.place-info-feature span,
.place-season-grid span,
.place-planning-grid small{
  display:block;

  margin-bottom:10px;

  color:var(--terracotta);

  font-size:.66rem;
  font-weight:800;

  letter-spacing:.09em;
  text-transform:uppercase;
}

.place-info-feature h3,
.place-season-grid h3,
.place-planning-grid h3{
  margin-bottom:9px;

  font-size:1.2rem;
}

.place-info-feature p,
.place-season-grid p,
.place-planning-grid p{
  color:var(--gray);

  font-size:.83rem;
  line-height:1.7;
}


/* =========================================================
   STAYS
   ========================================================= */

.place-stays{
  padding:var(--space-2xl) 0;

  background:var(--cream);
}

.place-stays-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:16px;
}

.place-stay-card{
  min-width:0;

  overflow:hidden;

  border:1px solid rgba(32,37,34,.08);

  border-radius:var(--radius-lg);

  background:var(--off-white);

  box-shadow:var(--shadow-sm);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.place-stay-card:hover{
  transform:translateY(-5px);

  box-shadow:var(--shadow-md);
}

.place-stay-image{
  display:block;

  position:relative;

  aspect-ratio:4 / 3;

  overflow:hidden;

  background:var(--sand);
}

.place-stay-image img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  transition:transform .45s ease;
}

.place-stay-card:hover
.place-stay-image img{
  transform:scale(1.035);
}

.place-stay-body{
  padding:21px 19px 22px;
}

.place-stay-type{
  display:block;

  margin-bottom:7px;

  color:var(--terracotta);

  font-size:.64rem;
  font-weight:800;

  letter-spacing:.08em;
  text-transform:uppercase;
}

.place-stay-body h3{
  margin-bottom:9px;

  font-size:1.2rem;
}

.place-stay-body p{
  margin-bottom:18px;

  color:var(--gray);

  font-size:.8rem;
  line-height:1.65;
}

.place-card-link{
  display:inline-flex;

  align-items:center;

  gap:6px;

  color:var(--green);

  font-size:.78rem;
  font-weight:700;

  text-decoration:none;
}

.place-card-link span{
  transition:transform .2s ease;
}

.place-card-link:hover{
  color:var(--terracotta);
}

.place-card-link:hover span{
  transform:translateX(4px);
}

.place-stays-more{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:20px;

  margin-top:30px;

  padding-top:25px;

  border-top:1px solid rgba(32,37,34,.1);
}

.place-stays-more p{
  color:var(--gray);

  font-size:.88rem;
}


/* =========================================================
   THINGS TO DO
   ========================================================= */

.place-things{
  padding:var(--space-2xl) 0;

  background:var(--off-white);
}

.place-things-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:15px;
}

.place-thing-card{
  min-width:0;

  padding:27px 23px;

  border:1px solid rgba(32,37,34,.08);

  border-radius:var(--radius-lg);

  background:var(--cream);

  transition:
    transform .25s ease,
    background .25s ease;
}

.place-thing-card:hover{
  transform:translateY(-4px);

  background:var(--sand);
}

.place-thing-number{
  display:flex;

  align-items:center;
  justify-content:center;

  width:39px;
  height:39px;

  margin-bottom:18px;

  border-radius:50%;

  background:var(--green-dark);

  color:var(--off-white);

  font-size:.63rem;
  font-weight:700;
}

.place-thing-card h3{
  margin-bottom:9px;

  font-size:1.18rem;
}

.place-thing-card p{
  color:var(--gray);

  font-size:.81rem;
  line-height:1.68;
}


/* =========================================================
   SIGHTSEEING
   ========================================================= */

.place-sights{
  padding:var(--space-2xl) 0;

  background:var(--cream);
}

.place-sights-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:15px;
}

.place-sight-card{
  display:flex;
  flex-direction:column;

  min-width:0;
  min-height:260px;

  padding:26px 23px;

  border:1px solid rgba(32,37,34,.08);

  border-radius:var(--radius-lg);

  background:var(--off-white);

  box-shadow:var(--shadow-sm);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.place-sight-card:hover{
  transform:translateY(-4px);

  box-shadow:var(--shadow-md);
}

.place-sight-category{
  display:block;

  margin-bottom:9px;

  color:var(--terracotta);

  font-size:.63rem;
  font-weight:800;

  letter-spacing:.09em;
  text-transform:uppercase;
}

.place-sight-card h3{
  margin-bottom:10px;

  font-size:1.3rem;
}

.place-sight-card p{
  margin-bottom:20px;

  color:var(--gray);

  font-size:.82rem;
  line-height:1.68;
}

.place-sight-card .place-card-link{
  margin-top:auto;
}


/* =========================================================
   ITINERARIES
   ========================================================= */

.place-itineraries{
  padding:var(--space-2xl) 0;

  background:var(--off-white);
}

.place-itinerary-tabs{
  display:flex;

  width:max-content;
  max-width:100%;

  gap:5px;

  margin-bottom:22px;

  padding:5px;

  overflow-x:auto;

  border-radius:50px;

  background:var(--sand);

  scrollbar-width:none;
}

.place-itinerary-tabs::-webkit-scrollbar{
  display:none;
}

.place-itinerary-tab{
  flex:0 0 auto;

  border:0;

  padding:10px 18px;

  border-radius:50px;

  background:transparent;

  color:var(--gray);

  font:inherit;
  font-size:.75rem;
  font-weight:700;

  white-space:nowrap;

  cursor:pointer;
}

.place-itinerary-tab:hover{
  color:var(--green);
}

.place-itinerary-tab.is-active{
  background:var(--green-dark);

  color:var(--off-white);
}

.place-itinerary-panel{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:1px;

  overflow:hidden;

  border:1px solid rgba(32,37,34,.09);

  border-radius:var(--radius-lg);

  background:rgba(32,37,34,.09);
}

.place-itinerary-panel article{
  padding:29px 27px;

  background:var(--cream);
}

.place-itinerary-panel article span{
  display:block;

  margin-bottom:9px;

  color:var(--terracotta);

  font-size:.66rem;
  font-weight:800;

  letter-spacing:.09em;
  text-transform:uppercase;
}

.place-itinerary-panel article h3{
  margin-bottom:9px;

  font-size:1.22rem;
}

.place-itinerary-panel article p{
  color:var(--gray);

  font-size:.82rem;
  line-height:1.7;
}


/* Two-column itinerary automatically expands nicely */

.place-itinerary-panel article:first-child:nth-last-child(2),
.place-itinerary-panel article:first-child:nth-last-child(2) ~ article{
  min-height:190px;
}


/* =========================================================
   HOW TO REACH
   ========================================================= */

.place-reach{
  padding:var(--space-2xl) 0;

  background:var(--cream);
}

.place-reach-layout{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(360px,.85fr);

  gap:var(--space-xl);

  align-items:start;
}

.place-reach-tabs{
  display:flex;

  width:100%;

  overflow-x:auto;

  border-bottom:1px solid rgba(32,37,34,.1);

  scrollbar-width:none;
}

.place-reach-tabs::-webkit-scrollbar{
  display:none;
}

.place-reach-tab{
  flex:0 0 auto;

  border:0;
  border-bottom:2px solid transparent;

  padding:14px 18px;

  background:transparent;

  color:var(--gray);

  font:inherit;
  font-size:.78rem;
  font-weight:700;

  cursor:pointer;

  white-space:nowrap;
}

.place-reach-tab:hover{
  color:var(--green);
}

.place-reach-tab.is-active{
  color:var(--green-dark);

  border-bottom-color:var(--terracotta);
}

.place-reach-panel{
  padding:31px 0 10px;
}

.place-reach-panel h3{
  margin-bottom:11px;

  font-size:1.55rem;
}

.place-reach-panel > p{
  max-width:620px;

  color:var(--gray);

  line-height:1.8;
}

.place-travel-note{
  margin-top:20px;

  padding:15px 17px;

  border-left:3px solid var(--gold);

  background:var(--off-white);

  color:var(--gray);

  font-size:.76rem;
  line-height:1.6;
}


/* =========================================================
   MAP
   ========================================================= */

.place-map-card{
  overflow:hidden;

  border:1px solid rgba(32,37,34,.08);

  border-radius:var(--radius-lg);

  background:var(--off-white);

  box-shadow:var(--shadow-sm);
}

.place-map-frame{
  height:300px;

  background:var(--sand);
}

.place-map-frame iframe{
  display:block;

  width:100%;
  height:100%;

  border:0;
}

.place-map-content{
  padding:24px;
}

.place-map-content h3{
  margin:5px 0 8px;

  font-size:1.35rem;
}

.place-map-content > p:not(.eyebrow){
  margin-bottom:18px;

  color:var(--gray);

  font-size:.81rem;
  line-height:1.68;
}


/* =========================================================
   FAQ
   ========================================================= */

.place-faq{
  padding:var(--space-2xl) 0;

  background:var(--off-white);
}

.place-faq-layout{
  display:grid;

  grid-template-columns:
    minmax(260px,.7fr)
    minmax(0,1.3fr);

  gap:var(--space-2xl);

  align-items:start;
}

.place-faq-intro{
  position:sticky;

  top:110px;
}

.place-faq-intro h2{
  margin:8px 0 13px;

  font-size:clamp(2rem,3.5vw,2.9rem);
}

.place-faq-intro > p:last-child{
  max-width:38ch;

  color:var(--gray);

  line-height:1.75;
}

.place-faq-list{
  border-top:1px solid rgba(32,37,34,.1);
}

.place-faq-list details{
  border-bottom:1px solid rgba(32,37,34,.1);
}

.place-faq-list summary{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:21px 0;

  list-style:none;

  color:var(--green-dark);

  font-family:var(--font-display);

  font-size:1.05rem;

  cursor:pointer;
}

.place-faq-list summary::-webkit-details-marker{
  display:none;
}

.place-faq-list summary span{
  flex:0 0 auto;

  display:flex;

  align-items:center;
  justify-content:center;

  width:29px;
  height:29px;

  border-radius:50%;

  background:var(--cream);

  color:var(--terracotta);

  font-family:var(--font-body);
  font-size:1.15rem;

  transition:
    transform .25s ease,
    background .25s ease;
}

.place-faq-list details[open]
summary span{
  transform:rotate(45deg);

  background:var(--green-dark);

  color:var(--off-white);
}

.place-faq-answer{
  padding:0 48px 22px 0;
}

.place-faq-answer p{
  color:var(--gray);

  font-size:.85rem;
  line-height:1.8;
}

.place-faq-answer .place-card-link{
  margin-top:13px;
}


/* =========================================================
   RESPONSIVE — LARGE TABLET
   ========================================================= */

@media(max-width:1100px){

  .place-stays-grid,
  .place-things-grid,
  .place-sights-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .place-section-head{
    grid-template-columns:1fr;

    gap:12px;
  }

  .place-section-head > p{
    max-width:680px;
  }

}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media(max-width:850px){

  .place-hero{
    min-height:650px;
  }

  .place-hero-overlay{
    background:
      linear-gradient(
        90deg,
        rgba(7,23,18,.91),
        rgba(7,23,18,.48)
      ),
      linear-gradient(
        0deg,
        rgba(7,23,18,.73),
        rgba(7,23,18,.07)
      );
  }

  .place-about-layout,
  .place-reach-layout,
  .place-faq-layout{
    grid-template-columns:1fr;
  }

  .place-faq-intro{
    position:static;
  }

  .place-info-feature-grid,
  .place-season-grid,
  .place-planning-grid{
    grid-template-columns:1fr;
  }

}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media(max-width:600px){

  .place-breadcrumb{
    min-height:43px;

    font-size:.69rem;
  }


  /* Hero */

  .place-hero{
    min-height:620px;
  }

  .place-hero-inner{
    padding-top:75px;
    padding-bottom:55px;
  }

  .place-hero h1{
    font-size:clamp(2.3rem,11vw,3.4rem);
  }

  .place-hero-lede{
    font-size:.92rem;

    line-height:1.7;
  }

  .place-hero-actions{
    display:grid;

    grid-template-columns:1fr;

    gap:9px;
  }

  .place-hero-actions .btn{
    width:100%;

    justify-content:center;
  }

  .place-hero-meta{
    gap:6px;
  }

  .place-hero-meta span{
    font-size:.61rem;
  }


  /* Sections */

  .place-about,
  .place-stays,
  .place-things,
  .place-sights,
  .place-itineraries,
  .place-reach,
  .place-faq{
    padding:60px 0;
  }


  /* Headings */

  .place-section-head{
    margin-bottom:30px;
  }

  .place-section-head h2{
    font-size:2rem;
  }

  .place-section-head--center{
    text-align:left;
  }

  .place-section-head--center
  .eyebrow{
    justify-content:flex-start;
  }

  .place-section-head--center > p{
    margin-left:0;
  }


  /* About tabs */

  .place-info-tabs{
    width:100%;

    margin-left:0;

    border-radius:var(--radius-md);
  }

  .place-info-tab{
    padding:10px 14px;

    font-size:.7rem;
  }

  .place-info-panel{
    padding:25px 18px;
  }

  .place-quick-card{
    padding:19px;
  }


  /* Stays */

  .place-stays-grid{
    grid-template-columns:1fr;

    gap:13px;
  }

  .place-stay-card{
    border-radius:var(--radius-md);
  }

  .place-stay-image{
    aspect-ratio:16 / 10;
  }

  .place-stays-more{
    align-items:stretch;

    flex-direction:column;
  }

  .place-stays-more .btn{
    width:100%;

    justify-content:center;
  }


  /* Things */

  .place-things-grid{
    grid-template-columns:1fr;

    gap:10px;
  }

  .place-thing-card{
    padding:21px 18px;

    border-radius:var(--radius-md);
  }


  /* Sightseeing */

  .place-sights-grid{
    grid-template-columns:1fr;

    gap:10px;
  }

  .place-sight-card{
    min-height:0;

    padding:21px 18px;

    border-radius:var(--radius-md);
  }


  /* Itinerary */

  .place-itinerary-tabs{
    width:100%;

    border-radius:var(--radius-md);
  }

  .place-itinerary-tab{
    padding:10px 14px;

    font-size:.7rem;
  }

  .place-itinerary-panel{
    grid-template-columns:1fr;
  }

  .place-itinerary-panel article{
    padding:22px 19px;
  }


  /* Reach */

  .place-reach-tabs{
    width:100%;
  }

  .place-reach-tab{
    padding:13px 14px;

    font-size:.71rem;
  }

  .place-reach-panel{
    padding-top:25px;
  }

  .place-map-frame{
    height:280px;
  }

  .place-map-content{
    padding:20px;
  }


  /* FAQ */

  .place-faq-layout{
    gap:34px;
  }

  .place-faq-list summary{
    padding:18px 0;

    font-size:.94rem;
  }

  .place-faq-answer{
    padding-right:10px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media(max-width:380px){

  .place-hero h1{
    font-size:2.15rem;
  }

  .place-quick-row{
    gap:10px;
  }

  .place-quick-row strong{
    max-width:60%;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  .place-page *,
  .place-page *::before,
  .place-page *::after{
    scroll-behavior:auto !important;

    transition-duration:.01ms !important;
  }

}