/* =========================================================
   KRABI LÁTNIVALÓK – isolated premium section
   ========================================================= */
.attractions-section{
  position:relative;
  overflow:hidden;
  padding:72px 34px 90px!important;
  background:linear-gradient(180deg,#fffdfa 0%,#f5f8f6 100%);
}
.attractions-shell{width:min(1510px,100%);margin:0 auto;position:relative;z-index:1}
.attractions-hero{
  position:relative;
  min-height:330px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border-radius:30px;
  background-image:linear-gradient(90deg,rgba(0,45,55,.84) 0%,rgba(0,56,61,.58) 48%,rgba(0,35,35,.15) 100%),url('assets/attractions/railay/railay-4.jpg');
  background-size:cover;
  background-position:center;
  box-shadow:0 24px 58px rgba(21,55,48,.18);
}
.attractions-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.16));pointer-events:none}
.attractions-hero-copy{position:relative;z-index:1;width:min(760px,85%);padding:54px 60px;color:#fff}
.attractions-hero-copy .attractions-eyebrow{margin:0 0 13px;color:#f2d66c;font-size:.9rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.38)}
.attractions-hero-copy h2{margin:0;color:#fff;font-size:clamp(2.8rem,5vw,5rem);line-height:.98;letter-spacing:-.035em;text-shadow:0 4px 20px rgba(0,0,0,.38)}
.attractions-hero-copy h2:after{content:"";display:block;width:170px;height:5px;margin:22px 0 20px;border-radius:999px;background:linear-gradient(90deg,#e0b82f 0%,#f5df7f 56%,transparent 100%)}
.attractions-hero-copy p{max-width:680px;margin:0;color:#fff;font-size:1.08rem;line-height:1.65;font-weight:650;text-shadow:0 2px 12px rgba(0,0,0,.45)}

.attractions-filter-bar{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:13px;
  padding:28px 0 32px;
}
.attractions-filter-btn{
  min-height:48px;
  padding:0 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:1px solid rgba(0,105,92,.16);
  border-radius:999px;
  background:#fff;
  color:#17483f;
  font-size:.95rem;
  font-weight:850;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(15,55,45,.06);
  transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.attractions-filter-btn:hover,.attractions-filter-btn:focus-visible{transform:translateY(-2px);border-color:#00796b;outline:none}
.attractions-filter-btn.active{background:linear-gradient(135deg,#00796b,#005b4f);color:#fff;border-color:transparent;box-shadow:0 12px 26px rgba(0,91,79,.24)}
.attractions-filter-icon{font-size:1.05rem;line-height:1}

.attractions-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
  align-items:start;
}
.attraction-card{
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(0,105,92,.11);
  border-radius:22px;
  background:#fff;
  box-shadow:0 14px 34px rgba(15,55,45,.09);
  cursor:pointer;
  outline:none;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.attraction-card:hover,.attraction-card:focus-visible{transform:translateY(-6px);border-color:rgba(0,105,92,.48);box-shadow:0 24px 48px rgba(15,55,45,.16)}
.attraction-card[hidden]{display:none!important}
.attraction-card-image{position:relative;height:205px;overflow:hidden;background:#dce8e4}
.attraction-card-image img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .45s ease}
.attraction-card:hover .attraction-card-image img{transform:scale(1.045)}
.attraction-category{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:7px 12px;
  border-radius:999px;
  font-size:.75rem;
  font-weight:900;
  line-height:1;
  letter-spacing:.035em;
  text-transform:uppercase;
}
.attraction-card-image .attraction-category{position:absolute;left:14px;bottom:14px;box-shadow:0 7px 18px rgba(0,0,0,.13)}
.attraction-category-beach{background:#dff4ff;color:#075d78}
.attraction-category-city{background:#f3e7ff;color:#6b2d80}
.attraction-category-temple{background:#fff2ce;color:#78540c}
.attraction-category-nature{background:#e5f7e8;color:#245f32}
.attraction-card-body{display:flex;flex-direction:column;min-height:205px;padding:18px 19px 20px}
.attraction-card-body h3{margin:0 0 8px;color:#102d28;font-size:1.22rem;line-height:1.18}
.attraction-card-body p{flex:1;margin:0 0 17px;color:#5c6965;font-size:.93rem;line-height:1.52}
.attraction-details-btn{
  align-self:flex-start;
  min-height:38px;
  padding:0 14px;
  border:1px solid #00796b;
  border-radius:999px;
  background:#fff;
  color:#00695c;
  font-size:.86rem;
  font-weight:900;
  cursor:pointer;
  transition:.18s ease;
}
.attraction-details-btn:hover,.attraction-details-btn:focus-visible{background:#00695c;color:#fff;outline:none;transform:translateY(-1px)}

/* Right-side details drawer */
.attractions-modal{
  position:fixed;
  inset:0;
  z-index:1000000;
  display:none;
  justify-content:flex-end;
  padding:18px;
  background:rgba(4,28,24,.62);
  backdrop-filter:blur(7px);
}
.attractions-modal.open{display:flex}
body.attractions-modal-open{overflow:hidden!important}
.attractions-modal-panel{
  position:relative;
  width:min(760px,96vw);
  height:calc(100vh - 36px);
  overflow:auto;
  border-radius:28px;
  background:#fff;
  box-shadow:0 34px 110px rgba(0,0,0,.4);
  animation:attractionsSlideIn .24s ease-out both;
  scrollbar-color:#88b9ae transparent;
}
@keyframes attractionsSlideIn{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}
.attractions-modal-close{
  position:absolute;
  right:18px;
  top:18px;
  z-index:8;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(0,105,92,.14);
  border-radius:50%;
  background:rgba(255,255,255,.94);
  color:#16362f;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.14);
}
.attractions-modal-close:hover,.attractions-modal-close:focus-visible{background:#00695c;color:#fff;outline:none}
.attractions-modal-head{padding:31px 80px 19px 28px}
.attractions-modal-head-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.attractions-modal-head h2{margin:0;color:#064b3f;font-size:clamp(2rem,4vw,3rem);line-height:1.06}
.attractions-location{margin:0;color:#547068;font-size:.92rem;font-weight:760}
.attractions-gallery{position:relative;height:390px;margin:0 28px;overflow:hidden;border-radius:22px;background:#e8efec}
.attractions-main-image{width:100%;height:100%;display:block;object-fit:cover}
.attractions-gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#00695c;font-size:34px;line-height:1;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.attractions-gallery-arrow.prev{left:14px}.attractions-gallery-arrow.next{right:14px}
.attractions-gallery-arrow:hover{background:#00695c;color:#fff}
.attractions-count{position:absolute;right:16px;bottom:14px;padding:7px 12px;border-radius:999px;background:rgba(0,0,0,.56);color:#fff;font-size:.82rem;font-weight:900}
.attractions-thumbs{display:flex;gap:10px;margin:13px 28px 0;padding-bottom:3px;overflow-x:auto}
.attractions-thumb{flex:0 0 118px;height:74px;padding:0;overflow:hidden;border:3px solid transparent;border-radius:12px;background:#ddd;cursor:pointer}
.attractions-thumb.active{border-color:#00897b}.attractions-thumb img{width:100%;height:100%;object-fit:cover}
.attractions-modal-content{padding:25px 28px 32px}
.attractions-copy p{margin:0 0 15px;color:#40534e;font-size:1rem;line-height:1.73}
.attractions-highlights{margin:22px 0;padding:19px 20px;border:1px solid rgba(0,137,123,.17);border-radius:19px;background:#edf9f5}
.attractions-highlights h3{margin:0 0 12px;color:#075a4c;font-size:1.05rem}
.attractions-highlights ul{list-style:none;padding:0;margin:0}
.attractions-highlights li{margin:0 0 9px;color:#355c53;font-weight:740;line-height:1.4}
.attractions-map-btn{display:flex;align-items:center;justify-content:center;min-height:54px;border-radius:999px;background:linear-gradient(135deg,#00796b,#005b4f);color:#fff!important;text-decoration:none;font-weight:900;box-shadow:0 12px 26px rgba(0,91,79,.24)}
.attractions-map-btn:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(0,91,79,.34)}
.attractions-source{margin:13px 0 0!important;text-align:center;color:#82908c!important;font-size:.8rem!important}

@media(max-width:1220px){
  .attractions-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .attractions-section{padding:58px 22px 75px!important}
  .attractions-hero{min-height:290px}
  .attractions-hero-copy{padding:44px 38px}
  .attractions-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
}
@media(max-width:640px){
  .attractions-section{padding:42px 14px 62px!important}
  .attractions-hero{min-height:300px;border-radius:23px;background-position:58% center}
  .attractions-hero-copy{width:100%;padding:38px 22px}
  .attractions-hero-copy h2{font-size:2.55rem}
  .attractions-hero-copy h2:after{width:120px;margin:17px 0 16px}
  .attractions-hero-copy p{font-size:.98rem;line-height:1.55}
  .attractions-filter-bar{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding:20px 0 25px;scrollbar-width:none}
  .attractions-filter-bar::-webkit-scrollbar{display:none}
  .attractions-filter-btn{flex:0 0 auto;min-height:44px;padding:0 17px}
  .attractions-grid{grid-template-columns:1fr}
  .attraction-card-image{height:220px}
  .attraction-card-body{min-height:0}
  .attractions-modal{align-items:flex-end;padding:0}
  .attractions-modal-panel{width:100%;height:auto;max-height:95vh;border-radius:25px 25px 0 0;animation:attractionsSheetIn .24s ease-out both}
  @keyframes attractionsSheetIn{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
  .attractions-modal-panel:before{content:"";display:block;width:48px;height:5px;margin:9px auto 0;border-radius:999px;background:#d2d9d6}
  .attractions-modal-close{right:12px;top:15px;width:42px;height:42px}
  .attractions-modal-head{padding:20px 62px 14px 18px}
  .attractions-modal-head h2{font-size:2rem}
  .attractions-gallery{height:260px;margin:0 14px;border-radius:18px}
  .attractions-gallery-arrow{width:40px;height:40px;font-size:29px}.attractions-gallery-arrow.prev{left:8px}.attractions-gallery-arrow.next{right:8px}
  .attractions-thumbs{margin:10px 14px 0}.attractions-thumb{flex-basis:88px;height:58px}
  .attractions-modal-content{padding:20px 18px 28px}.attractions-copy p{font-size:.96rem}
}
@media(prefers-reduced-motion:reduce){.attraction-card,.attraction-card-image img,.attraction-details-btn,.attractions-map-btn,.attractions-modal-panel{transition:none!important;animation:none!important}}

#attractions{scroll-margin-top:110px;}


/* =========================================================
   V3 – Attractions use the same one-image gallery structure as programs
   ========================================================= */
#tourModal .attraction-program-modal-content{
  width:min(1180px,96vw)!important;
  max-width:1180px!important;
  max-height:94vh!important;
  margin:3vh auto!important;
  border-radius:28px!important;
  overflow:auto!important;
  background:#fff!important;
  box-shadow:0 32px 110px rgba(0,0,0,.44)!important;
  position:relative!important;
}
#tourModal .attraction-program-detail-wrap{display:block!important;background:#fff!important;}
#tourModal .attraction-program-gallery{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:min(62vh,680px)!important;
  min-height:430px!important;
  overflow:hidden!important;
  border-radius:0!important;
  background:#071312!important;
  isolation:isolate!important;
  touch-action:pan-y!important;
}
#tourModal .attraction-program-gallery #modalImage,
#tourModal .attraction-program-gallery .attraction-modal-image{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  display:block!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:#071312!important;
  opacity:1!important;
  transform:none!important;
}
#tourModal .attraction-program-gallery img:not(#modalImage){display:none!important;}
#tourModal .attraction-program-modal-content .attraction-gallery-arrow{
  z-index:6!important;
  width:54px!important;
  height:54px!important;
  border:1px solid rgba(255,255,255,.28)!important;
  background:rgba(4,20,18,.64)!important;
  color:#fff!important;
  box-shadow:0 10px 28px rgba(0,0,0,.3)!important;
  position:absolute!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  border-radius:999px!important;
  font-size:38px!important;
  line-height:1!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  visibility:visible!important;
  opacity:1!important;
}
#tourModal .attraction-program-modal-content .attraction-gallery-prev{left:22px!important;}
#tourModal .attraction-program-modal-content .attraction-gallery-next{right:22px!important;}
#tourModal .attractions-program-count{
  position:absolute;
  right:22px;
  bottom:18px;
  z-index:7;
  padding:8px 13px;
  border-radius:999px;
  background:rgba(0,0,0,.62);
  color:#fff;
  font-size:.86rem;
  font-weight:900;
}
#tourModal .attraction-program-info{padding:34px 42px 42px!important;}
#tourModal .attraction-program-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 13px;}
#tourModal .attraction-program-location{color:#55736b;font-weight:800;font-size:.92rem;}
#tourModal .attraction-program-info h2{font-size:clamp(2.2rem,4vw,3.5rem)!important;margin-bottom:14px!important;}
#tourModal .attraction-program-copy p{margin:0 0 16px!important;color:#40534e!important;font-size:1.02rem!important;line-height:1.78!important;}
#tourModal .attraction-program-lists{grid-template-columns:1fr!important;margin-top:24px!important;}
#tourModal .attraction-program-lists article{border:1px solid rgba(0,137,123,.17)!important;border-radius:19px!important;background:#edf9f5!important;padding:20px!important;}
#tourModal .attraction-program-lists li{align-items:flex-start!important;}
#tourModal .attraction-program-map{margin-top:24px!important;}
body.attractions-modal-open{overflow:hidden!important;}

@media(max-width:700px){
  #tourModal .attraction-program-modal-content{
    width:100%!important;
    max-width:none!important;
    min-height:100vh!important;
    max-height:none!important;
    margin:0!important;
    border-radius:0!important;
  }
  #tourModal .attraction-program-gallery{height:44vh!important;min-height:300px!important;}
  #tourModal .attraction-program-info{padding:24px 18px 34px!important;}
  #tourModal .attraction-program-info h2{font-size:2.25rem!important;}
  #tourModal .attraction-program-modal-content .attraction-gallery-arrow{width:44px!important;height:44px!important;font-size:32px!important;}
  #tourModal .attraction-program-modal-content .attraction-gallery-prev{left:10px!important;}
  #tourModal .attraction-program-modal-content .attraction-gallery-next{right:10px!important;}
  #tourModal .attractions-program-count{right:12px;bottom:12px;}
}