/* Shared stylesheet for the per-province service-area pages.
   Design tokens match index.html (v1 dark industrial). Kept separate from the
   home page so these pages stay light — no gallery, lightbox or accordion CSS. */
:root{
  --background:#141210;
  --card:#201d1a;
  --foreground:#f3efe8;
  --muted:#a39d92;
  --border:#3a352f;
  --primary:#e84c1e;
  --font-heading:'Kanit','Sarabun',sans-serif;
  --font-body:'Sarabun','Sukhumvit Set',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--background);color:var(--foreground);
  font-family:var(--font-body);line-height:1.85;font-size:16px;
  word-break:break-word;overflow-wrap:break-word;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
h1,h2,h3{font-family:var(--font-heading);font-weight:800;line-height:1.5;text-transform:uppercase;padding-top:.15em;}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 1.25rem;}

/* header */
.top{border-bottom:1px solid var(--border);background:rgba(20,18,16,.96);position:sticky;top:0;z-index:20;}
.top__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0;}
.logo{font-family:var(--font-heading);font-weight:800;font-size:1.1rem;text-transform:uppercase;
  line-height:1.15;display:flex;flex-direction:row;align-items:center;gap:.55rem;
  text-decoration:none;min-height:44px;}
.logo__mark{width:38px;height:38px;flex-shrink:0;}
.logo__text{display:flex;flex-direction:column;}
/* scoped: a bare `.logo span` would tint the whole text block orange */
.logo__text > span{color:var(--primary);}
.top__cta{font-family:var(--font-heading);font-weight:700;text-transform:uppercase;font-size:.85rem;
  background:var(--primary);color:var(--background);padding:.7em 1.2em;border-radius:3px;
  text-decoration:none;min-height:44px;display:inline-flex;align-items:center;}

/* breadcrumb */
.crumb{font-size:.85rem;color:var(--muted);padding:1.1rem 0 0;}
.crumb a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;
  display:inline-flex;align-items:center;min-height:44px;}
.crumb a:hover{color:var(--primary);border-bottom-color:var(--primary);}

/* hero */
.hero{position:relative;margin-top:1.2rem;border-radius:6px;overflow:hidden;}
.hero img{width:100%;height:300px;object-fit:cover;filter:grayscale(.15) contrast(1.1) brightness(.55);}
.hero__text{position:absolute;inset:auto 0 0 0;padding:1.6rem 1.4rem;
  background:linear-gradient(180deg,transparent,rgba(20,18,16,.92));}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-heading);
  font-weight:700;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);}
.eyebrow::before{content:'';width:20px;height:3px;background:var(--primary);display:inline-block;}
h1{font-size:clamp(1.5rem,5vw,2.4rem);margin-top:.4rem;}
.lead{color:var(--muted);margin-top:1.4rem;max-width:70ch;}

/* sections */
section{padding:2.6rem 0;}
h2{font-size:clamp(1.2rem,3.5vw,1.7rem);margin-bottom:1.2rem;}
h3{font-size:1rem;color:var(--primary);margin-bottom:.4rem;text-transform:none;}
.cards{display:grid;grid-template-columns:1fr;gap:1rem;}
@media (min-width:700px){.cards{grid-template-columns:repeat(2,1fr);}}
.card{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:1.2rem 1.3rem;}
.card p{color:var(--muted);font-size:.95rem;}
.card ul{margin:.5rem 0 0 1.1rem;color:var(--muted);font-size:.95rem;}

/* served areas */
.amphoe{border-top:1px solid var(--border);padding:1.2rem 0;}
.amphoe h3{font-family:var(--font-heading);font-weight:700;font-size:1rem;color:var(--foreground);
  text-transform:uppercase;margin-bottom:.6rem;}
.tambon{display:flex;flex-wrap:wrap;gap:.4rem .6rem;list-style:none;}
.tambon li{color:var(--muted);font-size:.9rem;background:var(--card);border:1px solid var(--border);
  border-radius:3px;padding:.25em .7em;}

/* photo strip */
.strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.7rem;}
.strip img{height:120px;object-fit:cover;border-radius:4px;filter:grayscale(.2);}

/* contact */
.contact{background:var(--primary);color:var(--background);border-radius:6px;padding:2rem 1.5rem;}
.contact h2,.contact p{color:var(--background);}
.contact .phone{font-family:var(--font-heading);font-weight:900;
  font-size:clamp(1.6rem,6vw,2.6rem);text-decoration:none;display:inline-block;margin-top:.6rem;}
.contact .sub{font-family:var(--font-heading);font-weight:700;font-size:.8rem;
  letter-spacing:.12em;text-transform:uppercase;opacity:.75;}
.btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem;}
.btn{font-family:var(--font-heading);font-weight:700;text-transform:uppercase;font-size:.9rem;
  padding:.9em 1.5em;border-radius:3px;border:2px solid var(--background);min-height:44px;
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;}
.btn--solid{background:var(--background);color:var(--foreground);}
.btn--ghost{background:transparent;color:var(--background);}
.btn--ghost:hover{background:rgba(20,18,16,.14);}

/* other areas */
.links{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;}
.links a{font-family:var(--font-heading);font-weight:700;font-size:.9rem;
  background:var(--card);border:1px solid var(--border);border-radius:3px;
  padding:.6em 1em;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;}
.links a:hover{border-color:var(--primary);color:var(--primary);}

/* footer */
footer{border-top:1px solid var(--border);padding:2rem 0;color:var(--muted);font-size:.9rem;}
footer a{color:var(--muted);}
footer a:hover{color:var(--primary);}
.foot-row{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-bottom:1rem;}
.foot-row a{min-height:44px;display:inline-flex;align-items:center;}