/* =========================================================
   Amazing Location Thailand — site.css
   Matches the supplied template layout section-by-section.
   ========================================================= */

:root{
  --navy-deep:#0c1324;
  --navy:#12192d;
  --ink:#12141a;
  --paper:#ffffff;
  --stone:#f2f0ea;
  --stone-border:#1c1c1c;
  --grey-text:#4d4d4d;
  --grey-line:#c9c9c2;
  --accent-sun:#e08a3e;

  --font-display:'Archivo Black', 'Arial Black', sans-serif;
  --font-mono:'Space Mono', 'Courier New', monospace;
  --font-body:'Inter', -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
.container{max-width:1240px;margin:0 auto;padding:0 40px;}
.visually-hidden{position:absolute;left:-9999px;}

/* ---------- Buttons ---------- */
.btn-dark{
  display:inline-block;
  background:var(--ink);
  color:#fff;
  font-weight:700;
  font-size:1.05rem;
  padding:16px 46px;
  border:none;
  border-radius:6px;
  cursor:pointer;
  letter-spacing:.2px;
}
.btn-dark:hover{background:#000;}

/* =========================================================
   SITE HEADER — fixed to the top of the viewport at all times
   3 zones: logo (left) · nav links (center) · icons (right)
   ========================================================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:18px 40px;
  color:#fff;
  background:rgba(10,16,32,.42);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.header-left{
  grid-column:1;justify-self:start;
  display:flex;align-items:center;gap:16px;
}
.header-left .back-arrow{font-size:1.4rem;opacity:.9;}
.brand{display:flex;align-items:center;gap:10px;}
.brand-logo{max-height:44px;width:auto;}
.brand-text{font-weight:800;letter-spacing:.5px;line-height:1.05;}
.brand-text .brand-name{font-size:.95rem;}
.brand-text .brand-sub{font-size:.6rem;font-weight:500;opacity:.85;}

.main-nav{grid-column:2;justify-self:center;}
.main-nav ul{display:flex;gap:44px;align-items:center;font-size:.95rem;font-weight:600;}

.header-icons{
  grid-column:3;justify-self:end;
  display:flex;gap:20px;align-items:center;
}
.header-icons a{display:inline-flex;color:#fff;}

/* =========================================================
   HERO — 1920×1080 (16:9) banner slideshow, no text baked in by CSS
   (the campaign copy lives inside the banner<N> images themselves)
   ========================================================= */
.hero{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
  /* Fallback only shows through when ~/images has no banner1, banner2, ... files yet */
  background:
    linear-gradient(180deg,#bcd6ea 0%,#e7cfa8 38%,#8fae7c 55%,#4c6b47 100%);
  background-size:cover;
}
@supports (height:100dvh){
  .hero{height:100dvh;} /* accounts for mobile browser chrome so it's truly full-screen */
}

/* Full-bleed slideshow — one <div> per images/banner<N>.* file found on the server.
   Crossfades via the .active class; site.js drives which one is active. */
.hero-slides{position:absolute;inset:0;z-index:0;}
.hero-slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.1s ease;
}
.hero-slide.active{opacity:1;}

/* Just enough top darkening so the fixed header stays legible over any photo */
.hero::before{
  content:"";position:absolute;top:0;left:0;right:0;height:160px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(10,20,40,.45) 0%, rgba(10,20,40,0) 100%);
}

/* Other banner previews — bottom-right corner of the banner, over the photo */
.hero-thumbs{
  position:absolute;right:24px;bottom:24px;z-index:2;
  display:flex;gap:6px;
  max-width:calc(100% - 48px);overflow-x:auto;flex-wrap:nowrap;
  scrollbar-width:thin;
}
.hero-thumbs .thumb{
  flex:0 0 auto;
  width:118px;height:78px;border-radius:4px;overflow:hidden;
  background-size:cover;background-position:center;
  background-color:rgba(255,255,255,.12); /* visible placeholder tile until a banner<N> file is added */
  border:2px solid transparent;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  transition:border-color .2s ease;
}
.hero-thumbs .thumb.active,
.hero-thumbs .thumb:hover{border-color:#fff;}

/* =========================================================
   QUOTE / ABOUT PROJECT
   ========================================================= */
.section-quote{padding:80px 40px 60px;text-align:center;}
.quote-heading{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:clamp(1.4rem,3vw,2.1rem);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin:0;
}
.quote-heading .mark{font-size:2.6rem;line-height:1;font-family:var(--font-body);}
.quote-sub{color:var(--grey-text);margin:18px 0 0;font-size:1.05rem;}
.divider{width:170px;height:1px;background:var(--grey-line);margin:34px auto;}

.about-project{max-width:760px;margin:0 auto;padding:0 20px;}
.about-project p{
  color:var(--grey-text);
  line-height:1.9;
  font-size:.98rem;
  margin:0 0 18px;
}

/* =========================================================
   FEATURE / VIDEO CAROUSEL (dark)
   ========================================================= */
.section-carousel{background:var(--navy-deep);padding:0 0 0;}
.carousel{
  position:relative;
  max-width:1120px;
  margin:0 auto;
  min-height:520px;
  background:
    linear-gradient(0deg, rgba(6,10,20,.85) 0%, rgba(6,10,20,.05) 45%),
    linear-gradient(120deg,#1c3b52 0%,#2f5d63 35%,#5c7a4c 60%,#0e2536 100%);
  background-size:cover;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:44px;
}
/* Replace with the campaign video still, e.g.:
   background-image:url('../images/feature-railay-bay.jpg'); */

.carousel-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  background:transparent;border:none;color:#fff;font-size:2.4rem;
  cursor:pointer;padding:6px 14px;line-height:1;
}
.carousel-arrow.prev{left:8px;}
.carousel-arrow.next{right:8px;}

.play-video{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;background:transparent;border:none;color:#fff;
  cursor:pointer;margin-bottom:16px;font-size:1rem;padding:0;
}
.play-video .play-circle{
  width:34px;height:34px;border-radius:50%;
  border:2px solid #fff;display:flex;align-items:center;justify-content:center;
  font-size:.8rem;
}
.carousel h3{font-size:1.9rem;margin:0 0 12px;}
.carousel p{max-width:560px;font-size:.85rem;line-height:1.6;opacity:.85;margin:0 0 44px;}

/* ---------- YouTube lightbox opened by "Play video.." ---------- */
.video-modal{
  position:fixed;inset:0;z-index:200;
  display:none;
  align-items:center;justify-content:center;
  padding:24px;
}
.video-modal.open{display:flex;}
.video-modal-backdrop{
  position:absolute;inset:0;background:rgba(4,6,12,.88);
}
.video-modal-dialog{
  position:relative;z-index:1;
  width:100%;max-width:960px;
}
.video-modal-frame{
  position:relative;width:100%;
  aspect-ratio:16/9;
  background:#000;
  border-radius:8px;overflow:hidden;
}
.video-modal-frame iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}
.video-modal-close{
  position:absolute;top:-44px;right:0;
  background:transparent;border:none;color:#fff;
  font-size:1.4rem;cursor:pointer;line-height:1;padding:8px;
}

/* =========================================================
   GUIDEBOOK
   ========================================================= */
.section-guidebook{padding:100px 40px 70px;}
.guidebook-grid{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:16px;
  font-size:.8rem;font-weight:700;letter-spacing:1px;color:var(--grey-text);
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--grey-line);width:160px;}
.guidebook-title{
  font-size:clamp(2rem,3.6vw,2.8rem);
  line-height:1.15;
  margin:20px 0 10px;
  font-weight:800;
}
.guidebook-strap{font-weight:700;color:var(--ink);margin:0 0 22px;font-size:1.05rem;}
.guidebook-copy p{color:var(--grey-text);line-height:1.85;font-size:.95rem;margin:0 0 18px;}

.guidebook-mockup{position:relative;min-height:420px;display:flex;align-items:flex-end;justify-content:center;}
.book-cover,.tablet-mockup{
  position:absolute;border-radius:8px;overflow:hidden;color:#fff;
  background:linear-gradient(160deg,#284a63 0%,#0f2233 60%,#1c3a2c 100%);
  padding:22px;display:flex;flex-direction:column;justify-content:flex-start;
}
.book-cover{width:260px;height:360px;left:10px;bottom:20px;box-shadow:0 20px 40px rgba(0,0,0,.25);}
.tablet-mockup{width:230px;height:320px;right:0;bottom:0;border:8px solid #111;border-radius:22px;box-shadow:0 25px 45px rgba(0,0,0,.3);}
.mockup-brand{font-size:.6rem;font-weight:800;letter-spacing:.5px;opacity:.8;margin-bottom:auto;}
.mockup-title{font-size:1.05rem;font-weight:800;line-height:1.3;margin-top:110px;}

/* =========================================================
   INSIDE THE GUIDE
   ========================================================= */
.section-inside{padding:20px 40px 90px;text-align:center;}
.section-inside h2{
  font-size:1.6rem;font-weight:800;margin:0 0 46px;
  display:flex;align-items:center;justify-content:center;gap:22px;
}
.section-inside h2::before,.section-inside h2::after{content:"";flex:1;max-width:150px;height:1px;background:var(--grey-line);}

.card-row{
  max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:repeat(3,1fr);gap:26px;text-align:left;
}
.info-card{
  border:1.5px solid var(--stone-border);
  border-radius:8px;
  padding:30px 26px;
  display:flex;gap:18px;align-items:flex-start;
}
.info-card .icon{font-size:1.7rem;flex:0 0 auto;margin-top:2px;}
.info-card h3{margin:0 0 8px;font-size:1.02rem;font-weight:800;line-height:1.3;}
.info-card p{margin:0;color:var(--grey-text);font-size:.85rem;line-height:1.6;}

/* =========================================================
   TAT MESSAGE QUOTE
   ========================================================= */
.section-message{padding:10px 40px 90px;text-align:center;}
.section-message h2{
  font-size:1.5rem;font-weight:800;margin:0 0 40px;
  display:flex;align-items:center;justify-content:center;gap:22px;
}
.section-message h2::before,.section-message h2::after{content:"";flex:1;max-width:150px;height:1px;background:var(--grey-line);}

.message-box{
  max-width:980px;margin:0 auto;background:var(--stone);
  border-radius:16px;padding:56px 70px;position:relative;
}
.message-box .quote-mark{position:absolute;font-size:2.4rem;font-weight:800;opacity:.85;}
.message-box .quote-mark.open{top:26px;left:34px;}
.message-box .quote-mark.close{bottom:20px;right:34px;}
.message-box p{
  font-style:italic;font-size:1.05rem;line-height:1.9;color:#222;margin:0;
}
.message-box strong{font-style:normal;}

.download-cta{text-align:center;padding:0 40px 100px;}

/* =========================================================
   CLOSING IMAGE
   ========================================================= */
.section-closing{
  min-height:520px;
  background:
    linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.15)),
    linear-gradient(120deg,#0d0f10 0%,#25262a 45%,#3a3d3f 70%,#6b6e6c 100%);
  background-size:cover;
}
/* Set automatically from images/bannerfooter.* by Default.aspx.cs (BindSinglePhotoBanners).
   This gradient is only the fallback shown until that file exists. */

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:var(--ink);color:#fff;padding:50px 40px;font-size:.8rem;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;
}
.site-footer a{opacity:.75;}
.site-footer a:hover{opacity:1;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .guidebook-grid{grid-template-columns:1fr;}
  .guidebook-mockup{min-height:340px;margin-top:40px;}
  .card-row{grid-template-columns:1fr;}
  .main-nav ul{gap:22px;font-size:.85rem;}
}
@media (max-width:640px){
  .container,.site-header,.section-quote,.section-guidebook,.section-inside,.section-message,.download-cta{padding-left:20px;padding-right:20px;}
  .main-nav ul{gap:18px;font-size:.8rem;}
  .hero-thumbs{right:12px;bottom:12px;}
  .hero-thumbs .thumb{width:74px;height:50px;}
  .quote-heading{flex-direction:column;gap:8px;}
  .message-box{padding:40px 24px;}
}