/* Siamsai - strona zapowiedz. Paleta z Docs/Teksty-Strony.md. Bez JavaScriptu. */

:root{
  --gold-dark:#8a6a3f;
  --gold-light:#dcc194;
  --brown:#3a3129;
  --cream:#faf6f0;
  --muted:#6b5d4d;
  --sub:#b3a691;
  --line:#ece2d4;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:#efe8de;
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
}

.page{
  max-width:1000px;
  margin:28px auto;
  background:var(--cream);
  color:var(--brown);
  box-shadow:0 8px 40px rgba(0,0,0,.15);
  position:relative;
}

.th{font-family:'Leelawadee UI','Noto Sans Thai',Tahoma,sans-serif}

/* --- przelacznik jezyka, bez JavaScriptu --- */
.langpick{position:absolute;width:0;height:0;opacity:0;pointer-events:none}

.langbar{
  position:absolute;top:22px;right:26px;display:flex;
  border:1px solid var(--line);border-radius:999px;overflow:hidden;
  background:#fff;z-index:5;
}
.langbar label{
  cursor:pointer;padding:7px 16px;font-size:13px;color:var(--sub);
  letter-spacing:.04em;transition:.15s;user-select:none;
}
.langbar label:hover{color:var(--gold-dark)}
.langbar label.thai{font-family:'Leelawadee UI',Tahoma,sans-serif}

#lang-th:checked ~ * .l-en{display:none !important}
#lang-en:checked ~ * .l-th{display:none !important}
#lang-th:checked ~ .langbar label[for="lang-th"],
#lang-en:checked ~ .langbar label[for="lang-en"]{background:var(--gold-dark);color:var(--cream)}

/* --- naglowek --- */
header{padding:58px 64px 44px;text-align:center}

.mark{width:108px;max-width:30%;height:auto;display:block;margin:0 auto}

.wordmark{margin-top:14px}
.wordmark .thai{
  font-family:'Leelawadee UI','Noto Sans Thai',Tahoma,sans-serif;
  font-size:44px;letter-spacing:2px;color:var(--gold-dark);line-height:1.25;
}
.wordmark .latin{
  font-family:Georgia,'Times New Roman',serif;font-size:13px;
  letter-spacing:11px;color:var(--sub);margin-top:6px;text-indent:11px;
}

.lede{
  margin:28px auto 0;max-width:640px;font-size:16px;line-height:1.85;
  color:var(--muted);font-weight:400;
}
.lede.th{font-size:17px;line-height:1.95}

/* --- sekcje --- */
section{padding:44px 64px;border-top:1px solid var(--line)}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}

.card{background:#fff;border:1px solid var(--line);padding:28px 32px;position:relative}
.card::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--gold-light),transparent);
}
.card h2{
  font-family:Georgia,serif;font-size:20px;color:var(--gold-dark);margin:0 0 18px;
  font-weight:400;letter-spacing:.04em;display:flex;align-items:center;gap:12px;
}
.card h2.thai{font-family:'Leelawadee UI',Tahoma,sans-serif;font-size:21px;letter-spacing:0}
.card h2::after{content:"";flex:1;height:1px;background:var(--line)}
.card ul{margin:0;padding-left:16px;line-height:2;font-size:15px;color:var(--muted)}
.card ul.thai{font-family:'Leelawadee UI',Tahoma,sans-serif;font-size:16px;line-height:2.1}

.about{font-size:15px;color:var(--muted);line-height:2}
.about b{color:var(--gold-dark);font-weight:600}

/* --- stopka --- */
footer{
  padding:46px 64px 54px;background:var(--brown);color:#d8cbb8;text-align:center;
  font-size:15px;line-height:2.1;border-top:2px solid var(--gold-light);
}
footer a{color:#e8d9bf;text-decoration:none}
footer a:hover{text-decoration:underline}

.contactrow{display:flex;gap:52px;justify-content:center;align-items:center;flex-wrap:wrap}

.mailrow{display:inline-flex;align-items:center;gap:10px}
.ico{
  width:19px;height:19px;flex:none;stroke:var(--gold-light);fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}

.linebtn{
  display:inline-block;margin-top:12px;padding:11px 24px;
  border:1px solid var(--gold-light);border-radius:999px;
  color:#eddcb8;font-size:14px;letter-spacing:.04em;
}
.linebtn:hover{background:#463c32;text-decoration:none}

.qrslot{
  width:132px;height:132px;border:1px dashed #7d6d5c;border-radius:6px;background:#463c32;
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:#9c8b76;font-size:11px;line-height:1.6;padding:10px;
}
.qr{width:132px;height:132px;display:block;border-radius:6px;background:#fff;padding:6px}
.qrcap{margin-top:10px;font-size:12px;color:#a99b85;letter-spacing:.04em}

.legal{margin-top:26px;font-size:12px;color:#8c7f6d;letter-spacing:.03em;line-height:1.9}

@media(max-width:800px){
  /* Na telefonie strona wypelnia ekran od krawedzi do krawedzi.
     Tlo #efe8de i margines wokol karty wygladaja dobrze na duzym ekranie,
     ale na waskim zostaja z nich tylko dwa jasne paski - u gory i u dolu. */
  body{background:var(--cream)}
  .page{margin:0;max-width:100%;box-shadow:none}

  .cols{grid-template-columns:1fr}
  header,section,footer{padding-left:28px;padding-right:28px}
  .langbar{top:14px;right:14px}
  .mark{max-width:38%}
  .wordmark .thai{font-size:34px}
  .wordmark .latin{font-size:11px;letter-spacing:8px;text-indent:8px}
}