/* =========================================================
   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{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
/* Anchor targets (#home, #about, #guidebook) land below the fixed header
   instead of right underneath/behind it */
#home,#about,#guidebook{scroll-margin-top:90px;}
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;
  text-align:center;
  text-decoration:none;
  /* asp:Button renders as <input type="submit">, which iOS Safari otherwise
     gives native system-button chrome — that's what caused two stacked
     buttons to visually fuse into one segmented shape with square inner
     corners. This forces our own styling to actually apply. */
  -webkit-appearance:none;
  appearance:none;
}
.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;}

/* Hamburger toggle — hidden on desktop, shown once the nav links no longer
   fit comfortably next to the logo (see the media query below) */
.nav-toggle{
  display:none;
  grid-column:3;justify-self:end;
  flex-direction:column;justify-content:center;gap:5px;
  width:28px;height:22px;
  background:transparent;border:none;cursor:pointer;padding:0;
}
.nav-toggle span{display:block;width:100%;height:2px;background:#fff;border-radius:2px;}

/* =========================================================
   HERO — banner slideshow, no text baked in by CSS
   (the campaign copy lives inside the banner<N> images themselves)

   Structure: .hero (auto-height wrapper, positioned) >
              .hero-media (the actual photo box) + .hero-thumbs (previews)
   Desktop: hero-media fills the full viewport height, cover (full-bleed,
            edge-to-edge, no letterbox bars); thumbs float bottom-right on it.
   Mobile/tablet (see media query far below): hero-media instead sizes itself
            to the photo's own 16:9 ratio at full width — flush under the
            header, no cropping and no empty gaps — and thumbs move to a
            plain strip right below it instead of floating on top.
   ========================================================= */
.hero{position:relative;width:100%;background-color:var(--navy-deep);}

.hero-media{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
  /* Fallback shows through only when ~/images has no banner1, banner2, ... yet */
  background-color:var(--navy-deep);
  background-image:linear-gradient(180deg,#bcd6ea 0%,#e7cfa8 38%,#8fae7c 55%,#4c6b47 100%);
  background-size:cover;
}
@supports (height:100dvh){
  .hero-media{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;background-repeat:no-repeat;
  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-media::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, on desktop */
.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-lead{
  font-size:1.3rem;font-weight:800;color:var(--ink);
  margin:0 0 22px;line-height:1.4;
}
.about-project p{
  color:var(--grey-text);
  line-height:1.9;
  font-size:.98rem;
  margin:0 0 18px;
}

/* =========================================================
   FEATURE VIDEO — full-width embed, autoplays muted+looping (site.js)
   ========================================================= */
.section-carousel{background:var(--navy-deep);}
.carousel{
  position:relative;
  max-width:1120px;
  margin:0 auto;
  aspect-ratio:16/9;
  overflow:hidden;
  /* Fallback shown only until the <iframe> is injected (or if no valid
     YouTube URL is configured yet) */
  background:linear-gradient(120deg,#1c3b52 0%,#2f5d63 35%,#5c7a4c 60%,#0e2536 100%);
  background-size:cover;
}
.carousel-video-frame{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* =========================================================
   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{
  width:100%;
  min-height:280px;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(160deg,#284a63 0%,#0f2233 60%,#1c3a2c 100%); /* fallback until images/bannerGB.* exists */
  box-shadow:0 25px 45px rgba(0,0,0,.25);
  display:flex;align-items:center;justify-content:center;
}
.guidebook-photo{width:100%;height:auto;display:block;}

/* =========================================================
   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{padding:0 40px 100px;}
.download-cta-inner{
  max-width:980px;margin:0 auto;
  display:flex;flex-wrap:wrap;gap:16px;
  justify-content:center;
}

/* =========================================================
   CLOSING IMAGE
   ========================================================= */
.section-closing{
  min-height:520px;
  background-color:var(--navy-deep);
  background-image:
    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;
  background-repeat:no-repeat;
  background-position:center;
}
/* 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;}
}

/* Collapse the nav links into a hamburger once they'd otherwise get tight
   against the logo/icons (this is the point that starts to crowd on a lot of
   tablets and most phones). The search/account icons fold into the same
   dropdown here too, instead of staying in their own header slot. */
@media (max-width:860px){
  /* Header stops floating over the photo and becomes a normal in-flow bar,
     so the banner (and any text baked into it) starts right after it —
     never hidden behind the header, regardless of where that text sits in
     a given photo. It stays position:relative (not static) so it's still a
     valid anchor for the dropdown's position:absolute below. */
  .site-header{
    position:relative;
    background:var(--navy-deep);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  /* No fixed header to offset for anymore at this width */
  #home,#about,#guidebook{scroll-margin-top:0;}

  .main-nav{
    display:none;
    grid-column:1 / -1; /* full width dropdown, independent of the 3-col grid above */
  }
  .nav-toggle{display:flex;}

  .main-nav.mobile-open{
    display:block;
    position:absolute; /* .site-header is position:relative at this width, so top:100% = right under it */
    top:100%;
    left:0;right:0;
    background:rgba(10,16,32,.96);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    padding:8px 24px 22px;
  }
  .main-nav.mobile-open ul{
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }

  /* Hero: fit the photo's own width, no forced full-screen height — flush
     under the header with zero cropping and zero empty letterbox gaps
     (banners are produced at 16:9, so width-based sizing matches exactly) */
  .hero-media{height:auto;aspect-ratio:16/9;}
  .hero-media::before{display:none;} /* header already has its own solid-ish scrim background */

  /* Previews move to a plain strip below the photo instead of floating on it */
  .hero-thumbs{
    position:static;
    margin:10px auto 0;
    justify-content:center;
    padding:0 16px;
  }

  /* Closing photo: full width, height follows the image's own 16:9 scale
     instead of a fixed pixel height — no empty letterbox bars behind it */
  .section-closing{min-height:0;height:auto;aspect-ratio:16/9;background-size:cover;}
}

@media (max-width:640px){
  .container,.site-header,.section-quote,.section-guidebook,.section-inside,.section-message,.download-cta{padding-left:20px;padding-right:20px;}
  .hero-thumbs .thumb{width:74px;height:50px;}
  .quote-heading{flex-direction:column;gap:8px;}
  .message-box{padding:40px 24px;}
  .download-cta-inner{flex-direction:column;align-items:stretch;gap:14px;}
  .download-cta-inner .btn-dark{width:100%;}
  /* Fallback for older mobile browsers where flexbox "gap" is ignored —
     margin guarantees visible spacing even there, so the two buttons never
     look fused together. */
  .download-cta-inner .btn-dark:not(:last-child){margin-bottom:14px;}
}