/* ══════════════════════════════════════════════════════════════════════
   Tour Samui by SPN — shared stylesheet
   Modernist design system · blue theme · TH/EN bilingual
   ══════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────────────── */
:root{
  --color-bg:#fbfdfe; --color-surface:#e8f2f8; --color-text:#14232d;
  --color-accent:#12608e; --color-accent-2:#12608e;
  --color-divider:color-mix(in srgb,#14232d 40%,transparent);
  --color-accent-100:#edf4f8; --color-accent-200:#d5e8f1; --color-accent-300:#b0d3e4;
  --color-accent-400:#79b2ce; --color-accent-500:#3d87ad; --color-accent-600:#0f4f75;
  --color-accent-700:#0c3f5e; --color-accent-800:#0a2f47; --color-accent-900:#082234;
  --radius-sm:8px; --radius-md:14px; --radius-lg:22px;
  --font-heading:"Archivo","Anuphan",system-ui,sans-serif;
  --font-body:"Archivo","Anuphan",system-ui,sans-serif;
  --shadow-sm:0 1px 2px color-mix(in srgb,#14232d 14%,transparent);
  --shadow-md:0 3px 10px color-mix(in srgb,#14232d 16%,transparent);
  --shadow-lg:0 12px 32px color-mix(in srgb,#14232d 22%,transparent);
}

/* ── Reset / base ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--color-bg); color:var(--color-text);
  font-family:var(--font-body); font-size:15px; line-height:1.55; font-weight:400;
  text-wrap:pretty; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading); font-weight:800;
  line-height:1.12; letter-spacing:-0.015em; margin:0 0 8px;
}
h6{font-size:13px; letter-spacing:0.08em; text-transform:uppercase;}
p{margin:0 0 12px;}
a{color:var(--color-accent-700); text-underline-offset:3px;}
a:hover{color:var(--color-accent);}
img{display:block; max-width:100%;}
figure{margin:0;}
:focus{outline:none;}
:focus-visible{outline:2px solid var(--color-accent); outline-offset:2px;}
::selection{background:color-mix(in srgb,var(--color-accent) 30%,transparent);}
.grayscale{filter:grayscale(1) contrast(1.08);}

/* ── Rules ─────────────────────────────────────────────────────────── */
.hr{height:2px; border:0; margin:16px 0; background:var(--color-divider);}

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  cursor:pointer; text-decoration:none;
  font-family:var(--font-heading); font-weight:800; font-size:14px; line-height:1.2;
  color:var(--color-text); background:transparent; border:1px solid transparent;
  padding:8px 14.4px; border-radius:var(--radius-md);
}
.btn-primary{background:var(--color-accent); color:var(--color-bg);}
.btn-primary:hover{background:var(--color-accent-600); color:var(--color-bg);}
.btn-primary:active{background:var(--color-accent-700);}
.btn-secondary{border-color:var(--color-divider); color:var(--color-text);}
.btn-secondary:hover{background:color-mix(in srgb,var(--color-text) 7%,transparent);}
.btn-secondary:active{background:color-mix(in srgb,var(--color-text) 14%,transparent);}
.btn-block{width:100%; margin-top:8px; justify-content:flex-start; text-align:left;}
.btn-pill{border-radius:999px; padding:13px 28px; font-size:15px;}
.btn-white{background:#fff; color:var(--color-accent-700); box-shadow:var(--shadow-md);}
.btn-white:hover{background:#fff; color:var(--color-accent-800);}
.btn-outline-white{
  color:#fff; border:1.5px solid rgba(255,255,255,0.75);
  background:rgba(255,255,255,0.12); backdrop-filter:blur(6px);
}
.btn-outline-white:hover{color:#fff; background:rgba(255,255,255,0.22);}

/* ── Forms (contact) ───────────────────────────────────────────────── */
.field>label{
  display:block; font-size:12px; margin-bottom:5px;
  color:color-mix(in srgb,var(--color-text) 70%,transparent);
}
.input{
  width:100%; min-height:36px; padding:6px 10px; font:inherit; font-size:14px;
  color:var(--color-text); caret-color:var(--color-accent);
  background:var(--color-surface);
  border:1px solid var(--color-divider); border-radius:var(--radius-md);
}
.input:hover{border-color:color-mix(in srgb,var(--color-text) 45%,transparent);}
.input:focus-visible{border-color:var(--color-accent); outline-offset:0;}
textarea.input{min-height:90px; resize:vertical;}
select.input{appearance:auto;}

/* ── Navigation ────────────────────────────────────────────────────── */
.nav{
  display:flex; align-items:center; gap:16px; padding:12px 16px;
  padding-inline:max(24px,calc((100% - 1200px) / 2 + 24px));
  background:color-mix(in srgb,#ffffff 80%,transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid color-mix(in srgb,var(--color-text) 10%,transparent);
  position:sticky; top:0; z-index:50;
}
.nav-logo{width:140px; height:58px; overflow:hidden; position:relative; display:block; margin-right:auto;}
.nav-logo img{
  width:140px; max-width:none; position:absolute; left:0; top:50%;
  transform:translateY(-51%); mix-blend-mode:multiply; filter:brightness(1.06) saturate(1.05);
}
.nav-links{display:flex; align-items:center; gap:24px;}
.nav-links a{color:var(--color-text); text-decoration:none; font-size:15px;}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--color-accent);}

/* ── Footer ────────────────────────────────────────────────────────── */
footer{border-top:2px solid var(--color-divider); background:var(--color-bg);}
.foot-wrap{max-width:1200px; margin:0 auto; padding:56px 24px 32px;}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px;}
.foot-brand{display:flex; flex-direction:column; gap:12px; align-items:flex-start;}
.foot-logo{width:210px; height:88px; overflow:hidden; position:relative; margin-left:-10px; display:block;}
.foot-logo img{width:210px; max-width:none; position:absolute; left:0; top:50%; transform:translateY(-51%); mix-blend-mode:multiply; filter:brightness(1.06) saturate(1.05);}
.foot-brand p{margin:0; font-size:14px; color:color-mix(in srgb,var(--color-text) 70%,transparent); max-width:36ch;}
.foot-col{display:flex; flex-direction:column; gap:10px;}
.foot-col h6{margin:0 0 4px;}
.foot-col a{font-size:14px; text-decoration:none;}
.foot-copy{margin:0; font-size:12px; color:color-mix(in srgb,var(--color-text) 55%,transparent);}

/* ── Shared page bits ──────────────────────────────────────────────── */
.page-shell{background:linear-gradient(180deg,#dcedf7 0%,var(--color-bg) 560px); min-height:100vh;}
.wrap{max-width:1200px; margin:0 auto; padding:0 24px 88px;}
.wrap-narrow{max-width:900px; margin:0 auto; padding:0 24px 88px;}
.crumb{padding:32px 0 0;}
.crumb a{font-size:14px; text-decoration:none;}

/* Blue banner header (about/contact/faq/tour pages) */
.hero-head{
  background:linear-gradient(135deg,#16719f 0%,#3c93c4 60%,#7cc4e8 100%);
  border-radius:24px; box-shadow:var(--shadow-md); color:#fff;
  padding:clamp(28px,4vw,48px); margin:20px 0 32px;
  display:flex; flex-direction:column; gap:14px; align-items:flex-start;
}
.hero-head.spaced{margin:32px 0 48px;}
.hero-head h6{color:rgba(255,255,255,0.85); margin:0;}
.hero-kicker{font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.85); font-weight:700;}
.hero-head h1{font-size:clamp(36px,4.5vw,60px); margin:0; color:#fff;}
.hero-head p{margin:0; font-size:17px; line-height:1.7; max-width:58ch; color:rgba(255,255,255,0.92);}

/* Image slot placeholder */
.image-slot{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:24px; color:color-mix(in srgb,var(--color-text) 45%,transparent);
  font-size:14px; letter-spacing:0.02em;
  background:linear-gradient(135deg,var(--color-accent-100),var(--color-accent-200));
  border:1px dashed color-mix(in srgb,var(--color-text) 22%,transparent);
  border-radius:var(--radius-lg);
}
.hero-fig{margin:0 0 56px; aspect-ratio:21 / 9;}

/* ── Tour detail layout ────────────────────────────────────────────── */
.tour-grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(280px,4fr); gap:64px; align-items:start;}
.spec{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
.spec h3,.info h3{font-size:20px; margin:0 0 16px;}
.list-check{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; font-size:14.5px;}
.list-check li{display:flex; gap:10px;}
.mk{font-weight:800; color:var(--color-accent);}
.mk-off{font-weight:800; color:color-mix(in srgb,var(--color-text) 45%,transparent);}
.info ul.bullets{margin:0 0 32px; padding:0 0 0 20px; display:flex; flex-direction:column; gap:8px; font-size:14.5px; line-height:1.65;}
.info ul.bullets.last{margin-bottom:0;}
aside.buy{
  border:1px solid color-mix(in srgb,var(--color-text) 12%,transparent);
  border-radius:20px; box-shadow:var(--shadow-md); padding:28px;
  position:sticky; top:96px; display:flex; flex-direction:column; gap:16px; background:var(--color-bg);
}
.buy .label{font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:color-mix(in srgb,var(--color-text) 60%,transparent);}
.buy .price{font-family:var(--font-heading); font-weight:800; font-size:26px; line-height:1.2;}
.buy a.small{font-size:14px;}

/* Itinerary steps (around-samui) */
.itin{display:flex; flex-direction:column;}
.itin-h{font-size:28px; margin:0 0 24px;}
.itin-row{display:grid; grid-template-columns:56px 1fr; gap:20px; padding:20px 0; border-top:1px solid var(--color-divider);}
.itin-row:first-of-type{border-top:2px solid var(--color-divider);}
.itin-row:last-of-type{border-bottom:2px solid var(--color-divider);}
.itin-num{font-family:var(--font-heading); font-weight:800; font-size:15px;}
.itin-row h3{font-size:19px; margin:0 0 4px;}
.itin-row p{margin:0; font-size:14.5px; color:color-mix(in srgb,var(--color-text) 72%,transparent);}
.spec.mt{margin-top:48px;}

/* ── Home page ─────────────────────────────────────────────────────── */
.home-hero{position:relative; overflow:hidden; background:linear-gradient(180deg,#8ecdea 0%,#3c93c4 55%,#16719f 100%);}
.home-hero-bg{position:absolute; inset:0;}
.home-hero-overlay{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(8,34,52,0.30) 0%,rgba(8,34,52,0.15) 45%,rgba(8,34,52,0.55) 100%);}
.home-hero-inner{position:relative; max-width:1200px; margin:0 auto; padding:96px 24px 48px;
  display:grid; grid-template-columns:minmax(0,7fr) minmax(300px,4fr); gap:48px; align-items:center;}
.home-hero-copy{display:flex; flex-direction:column; align-items:flex-start; gap:24px; color:#fff;}
.home-hero-copy h1{font-size:clamp(42px,5.5vw,68px); line-height:1.08; letter-spacing:-0.02em; margin:0; max-width:18ch; color:#fff; text-shadow:0 2px 24px rgba(8,34,52,0.35);}
.home-hero-copy p{font-size:18px; line-height:1.7; margin:0; max-width:46ch; color:rgba(255,255,255,0.92); text-shadow:0 1px 12px rgba(8,34,52,0.35);}
.home-hero-actions{display:flex; gap:12px; flex-wrap:wrap;}
.glass-card{
  background:rgba(255,255,255,0.16); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.4); border-radius:24px; padding:28px;
  display:flex; flex-direction:column; gap:14px; color:#fff; box-shadow:var(--shadow-lg);
}
.glass-card .kicker{font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.85);}
.glass-card h3{font-size:24px; margin:0; color:#fff;}
.glass-card p{margin:0; font-size:14.5px; line-height:1.6; color:rgba(255,255,255,0.9);}
.glass-card .price{font-family:var(--font-heading); font-weight:800; font-size:20px;}
.stats{position:relative; max-width:1200px; margin:0 auto; padding:0 24px 56px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.stat{
  background:rgba(255,255,255,0.16); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.35); border-radius:18px; padding:18px 22px; color:#fff;
  display:flex; flex-direction:column; gap:4px;
}
.stat b{font-family:var(--font-heading); font-weight:800; font-size:24px;}
.stat span{font-size:13px; color:rgba(255,255,255,0.88);}
.section{max-width:1200px; margin:0 auto; padding:80px 24px;}
.section-head{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; margin-bottom:44px;}
.section-head .kicker{font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--color-accent); font-weight:700;}
.section-head h2{font-size:clamp(30px,3.5vw,42px); margin:0;}
.section-head p{margin:0; font-size:15.5px; color:color-mix(in srgb,var(--color-text) 65%,transparent);}
.tour-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.tour-card{
  background:#fff; border-radius:20px; overflow:hidden; box-shadow:var(--shadow-md);
  text-decoration:none; color:inherit; display:flex; flex-direction:column;
  transition:transform 0.25s ease,box-shadow 0.25s ease;
}
.tour-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); color:inherit;}
.tour-card figure{margin:0; aspect-ratio:4 / 3;}
.tour-card-body{padding:22px; display:flex; flex-direction:column; gap:8px; flex:1;}
.tour-card-kicker{font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--color-accent); font-weight:700;}
.tour-card-body h3{font-size:22px; margin:0;}
.tour-card-body p{margin:0; font-size:14.5px; line-height:1.6; color:color-mix(in srgb,var(--color-text) 68%,transparent); flex:1;}
.tour-card-foot{display:flex; align-items:center; justify-content:space-between; margin-top:8px;}
.price-pill{background:var(--color-accent-100); color:var(--color-accent-700); border-radius:999px; padding:7px 16px; font-size:13px; font-weight:700;}
.arrow{color:var(--color-accent); font-weight:800; font-size:18px;}
.why{background:linear-gradient(135deg,#082234 0%,#0c3f5e 60%,#12608e 100%);}
.why-inner{max-width:1200px; margin:0 auto; padding:72px 24px; display:flex; flex-direction:column; gap:36px;}
.why-head{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;}
.why-head .kicker{font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:#7fc2e8; font-weight:700;}
.why-head h2{font-size:clamp(28px,3vw,38px); margin:0; color:#fff;}
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.why-card{background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14); border-radius:18px; padding:24px; color:#fff; display:flex; flex-direction:column; gap:8px;}
.why-card h3{font-size:18px; margin:0; color:#fff;}
.why-card p{margin:0; font-size:13.5px; line-height:1.6; color:rgba(255,255,255,0.78);}
.cta-section{max-width:1200px; margin:0 auto; padding:72px 24px;}
.cta{background:linear-gradient(120deg,#16719f 0%,#3c93c4 55%,#7cc4e8 100%); border-radius:26px;
  padding:clamp(36px,5vw,64px); display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:20px; color:#fff; box-shadow:var(--shadow-lg);}
.cta h2{font-size:clamp(28px,3.5vw,44px); margin:0; color:#fff;}
.cta p{margin:0; font-size:16px; max-width:46ch; color:rgba(255,255,255,0.92);}
.cta-actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:center;}

/* ── About page ────────────────────────────────────────────────────── */
.about-grid{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:64px; align-items:start;}
.about-copy{display:flex; flex-direction:column; gap:20px; font-size:16px; line-height:1.75;}
.about-copy p{margin:0;}
.about-photo{margin:0; aspect-ratio:4 / 3;}
.feature-3{display:grid; grid-template-columns:repeat(3,1fr); gap:40px;}
.feature{display:flex; flex-direction:column; gap:8px;}
.feature h3{font-size:20px; margin:0;}
.feature p{margin:0; font-size:14.5px; line-height:1.65; color:color-mix(in srgb,var(--color-text) 72%,transparent);}

/* ── Contact page ──────────────────────────────────────────────────── */
.contact-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:64px; align-items:start;}
.contact-list{display:flex; flex-direction:column;}
.contact-row{padding:24px 0; border-top:1px solid var(--color-divider); display:flex; flex-direction:column; gap:6px;}
.contact-row:first-child{border-top:2px solid var(--color-divider);}
.contact-row:last-child{border-bottom:2px solid var(--color-divider);}
.contact-row .lbl{font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:color-mix(in srgb,var(--color-text) 60%,transparent);}
.contact-row a.big{font-family:var(--font-heading); font-weight:800; font-size:22px; text-decoration:none;}
.contact-row .note{font-size:13.5px; color:color-mix(in srgb,var(--color-text) 65%,transparent);}
.enquiry{display:flex; flex-direction:column; gap:18px; border:1px solid color-mix(in srgb,var(--color-text) 12%,transparent);
  border-radius:20px; box-shadow:var(--shadow-md); padding:32px; background:var(--color-bg);}
.enquiry h2{font-size:24px; margin:0;}
.enquiry-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.enquiry .hint{margin:0; font-size:12.5px; color:color-mix(in srgb,var(--color-text) 55%,transparent);}

/* ── FAQ page ──────────────────────────────────────────────────────── */
.faq-list{display:flex; flex-direction:column;}
.faq-item{padding:28px 0; border-top:1px solid var(--color-divider);}
.faq-item:first-child{border-top:2px solid var(--color-divider);}
.faq-item:last-child{border-bottom:2px solid var(--color-divider);}
.faq-item h3{font-size:20px; margin:0 0 10px;}
.faq-item p{margin:0; font-size:15px; line-height:1.7; color:color-mix(in srgb,var(--color-text) 78%,transparent);}
.faq-actions{margin-top:40px; display:flex; gap:12px; flex-wrap:wrap;}

/* ── Language switch (CSS-driven) ──────────────────────────────────── */
html[data-lang="th"] [data-when="en"]{display:none !important;}
html[data-lang="en"] [data-when="th"]{display:none !important;}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width:900px){
  .tour-grid,.about-grid,.contact-grid{grid-template-columns:1fr; gap:40px;}
  aside.buy{position:static;}
  .foot-grid{grid-template-columns:1fr 1fr; gap:32px;}
  .home-hero-inner{grid-template-columns:1fr; gap:32px; padding-top:72px;}
  .stats,.why-grid{grid-template-columns:repeat(2,1fr);}
  .tour-cards,.feature-3{grid-template-columns:1fr;}
  .nav-links{gap:16px;}
}
@media (max-width:560px){
  .spec,.enquiry-row{grid-template-columns:1fr; gap:28px;}
  .foot-grid,.stats,.why-grid{grid-template-columns:1fr;}
  .nav-links{display:none;}
  .hero-fig{aspect-ratio:16 / 10;}
  .section{padding:56px 24px;}
}