/* ── เฉพาะหน้า About Us ─────────────────────────────────── */

/* ส่วนเปิดหน้า — ภาพเต็มจอ บล็อกข้อความอยู่ฝั่งขวา ตัวอักษรชิดซ้าย
   ความสูงคุมด้วยเนื้อหา ไม่ตั้ง min-height สูงเกินจำเป็น จะได้ไม่มีที่ว่างเปล่าใต้ข้อความ */
.abouthero{position:relative;overflow:hidden;background:var(--brand-dark);isolation:isolate;
  display:flex;align-items:center;min-height:clamp(400px,62svh,620px);
  padding-block:calc(var(--navh) + var(--s-6)) var(--s-6)}
.abouthero__bg{position:absolute;inset:0;z-index:-1}
/* ภาพกินเต็มจอเสมอ ไม่ตัดเป็นครึ่งซีก แต่ตรึงขอบขวาไว้
   เพื่อให้ตัวแบบฝั่งขวาอยู่ครบทุกขนาดจอ ไม่โดนครอปหายตอนเปิดเต็มจอ */
.abouthero__bg img{width:100%;height:100%;object-fit:cover;object-position:100% 45%}
/* มือถือ: ภาพเป็นพื้นหลังเต็ม ข้อความทับอยู่ จึงต้องมีเงาเข้มสม่ำเสมอ */
.abouthero__veil{position:absolute;inset:0;z-index:-1;background:rgba(26,17,12,.80)}
/* จอ 1024 ขึ้นไป: ภาพยังเต็มจอ แต่ไล่เงาจากซ้ายไปขวา
   ฝั่งซ้ายเข้มพอให้อ่านข้อความออก ฝั่งขวาโปร่งจนเห็นภาพชัดเต็มตา */
@media (min-width:1024px){
  .abouthero__veil{
    background:linear-gradient(90deg,rgba(26,17,12,.92) 0%,rgba(26,17,12,.88) 44%,
               rgba(26,17,12,.68) 56%,rgba(26,17,12,.30) 72%,
               rgba(26,17,12,.07) 88%,rgba(26,17,12,0) 100%)}
}
/* ชิดซ้ายทั้งบล็อกและตัวอักษร และไม่ล้ำเข้าไปในครึ่งภาพ */
.abouthero__copy{display:grid;gap:var(--s-3);margin-inline-end:auto;
  max-width:min(100%,44rem);color:#F4E9DB;text-align:start}
@media (min-width:1024px){ .abouthero__copy{max-width:min(100%,27rem)} }
@media (min-width:1280px){ .abouthero__copy{max-width:min(100%,31rem)} }
@media (min-width:1600px){ .abouthero__copy{max-width:min(100%,32rem)} }
.abouthero__copy h1{margin-bottom:var(--s-1)}
.abouthero__copy p{font-size:var(--fs-body);font-weight:300;line-height:1.62}
@media (min-width:1024px){ .abouthero__copy p{font-size:var(--fs-h3);line-height:1.6} }
.abouthero__copy .th{color:#EADCC9}

/* บทความ — ภาพซ้าย เนื้อหาขวา */
.posts{display:grid;gap:var(--s-8)}
@media (min-width:1024px){ .posts{gap:var(--s-9)} }
.post{display:grid;gap:var(--gap-within)}
@media (min-width:1024px){
  .post{grid-template-columns:5fr 7fr;gap:var(--s-8);align-items:start}
  .post__media{position:sticky;top:calc(var(--navh) + 24px)}
}
.post + .post{border-top:1px solid var(--c-line);padding-top:var(--s-8)}
.post__media{aspect-ratio:4/3;overflow:hidden;border-radius:var(--card-radius);
  background:var(--c-bg-alt);min-width:0}
.post__media img{width:100%;height:100%;object-fit:cover}
.post__body{min-width:0;display:grid;gap:var(--s-3)}
.post__title{font-size:var(--fs-h2);font-weight:500;line-height:1.35;max-width:34ch}
.post__lead{font-size:var(--fs-body);color:var(--c-ink);line-height:1.7;
  max-width:var(--maxw-text)}
.post__more{display:grid;gap:var(--s-3)}
.post__more h3{font-size:var(--fs-h3);font-weight:500;margin-top:var(--s-3)}
.post__more p{font-size:var(--fs-sm);color:var(--c-ink-2);line-height:1.7;
  max-width:var(--maxw-text)}
.post__more ul{display:grid;gap:var(--s-2);max-width:var(--maxw-text)}
.post__more li{position:relative;padding-inline-start:var(--s-5);font-size:var(--fs-sm);
  color:var(--c-ink-2);line-height:1.7}
.post__more li::before{content:"";position:absolute;inset-inline-start:0;top:.66em;
  width:6px;height:6px;border-radius:var(--r-pill);background:var(--c-accent)}
.post__more li b{color:var(--c-ink);font-weight:500}
.post__fig{margin:var(--s-2) 0;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--card-radius);background:var(--c-bg-alt)}
.post__fig img{width:100%;height:100%;object-fit:cover}

/* การ์ดบทความในหน้า About Us — ทั้งใบเป็นลิงก์เดียว กดที่ไหนก็เข้าอ่านได้ */
.plist{display:grid;gap:var(--gap-within)}
@media (min-width:768px){ .plist{grid-template-columns:repeat(2,1fr);gap:var(--s-6)} }
.pcard{display:flex;flex-direction:column;min-width:0;overflow:hidden;
  border:1px solid var(--c-line);border-radius:var(--card-radius);background:var(--c-bg);
  text-decoration:none;color:inherit;
  transition:border-color var(--dur) var(--ease)}
.pcard__media{aspect-ratio:16/10;overflow:hidden;background:var(--c-bg-alt)}
.pcard__media img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-slow) var(--ease)}
.pcard__body{flex:1;display:flex;flex-direction:column;gap:var(--s-2);
  padding:var(--s-5) var(--s-5) var(--s-4)}
.pcard__title{font-size:var(--fs-h3);font-weight:500;line-height:1.4;color:var(--c-ink)}
/* ตัดเกริ่นนำเหลือ 4 บรรทัด ให้การ์ดทั้งสองใบสูงใกล้เคียงกัน */
.pcard__lead{font-size:var(--fs-sm);color:var(--c-ink-2);line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.pcard__more{margin-top:auto;padding-top:var(--s-4);display:inline-flex;align-items:center;
  gap:var(--s-2);min-height:24px;font-size:var(--fs-sm);color:var(--c-accent);
  line-height:var(--lh-ui)}
.pcard__more svg{transition:transform var(--dur) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .pcard:hover{border-color:var(--c-accent)}
  .pcard:hover .pcard__media img{transform:scale(1.03)}
  .pcard:hover .pcard__more svg{transform:translateX(3px)}
}

/* ── หน้าบทความแบบเต็ม (article1.html / article2.html) ── */
.article{max-width:var(--maxw-text);margin-inline-end:auto;display:grid;gap:var(--s-4)}
.article__title{font-size:var(--fs-h2);font-weight:500;line-height:1.35;
  text-transform:none;max-width:30ch}
.article__media{aspect-ratio:16/10;overflow:hidden;border-radius:var(--card-radius);
  background:var(--c-bg-alt);margin-top:var(--s-2)}
.article__media img{width:100%;height:100%;object-fit:cover}
.article__lead{font-size:var(--fs-body);color:var(--c-ink);line-height:1.7}
/* ลิงก์ย้อนกลับ ใช้ทั้งหัวและท้ายบทความ */
.backlink{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;
  font-size:var(--fs-sm);color:var(--c-accent);text-decoration:none;line-height:var(--lh-ui)}
@media (hover:hover) and (pointer:fine){ .backlink:hover{text-decoration:underline;
  text-underline-offset:3px} }
.article__foot{margin-top:var(--gap-between);padding-top:var(--s-5);
  border-top:1px solid var(--c-line)}

/* ป้ายคำค้น */
.tags{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
.tag{display:inline-flex;align-items:center;min-height:32px;padding:0 var(--s-3);
  border:1px solid var(--c-line);border-radius:var(--r-pill);
  font-size:var(--fs-xs);color:var(--c-ink-2);line-height:1.2}