/*
Theme Name: VOYD
Theme URI: https://voyd.th
Author: VOYD
Description: ธีมเว็บไซต์ VOYD — สื่อเชิงพื้นที่ที่ถ่ายทอดเรื่องราวผ่านมุมมองของสเปซและผู้คน
Version: 1.0
Text Domain: voyd
*/

/* ============================================================
   สารบัญ
   1. ฟอนต์
   2. รีเซ็ต + ตัวแปรสี
   3. ปกวิดีโอ (หน้าแรก)
   4. แถบโลโก้ + ปุ่ม 3 ขีด + ป๊อปอัพเมนู
   5. เมนูหมวด
   6. การ์ดสื่อ (กริดหน้าแรก / รายการในหมวด)
   7. หน้าหมวด (โลโก้หมวด + PODCAST)
   8. หน้ารายละเอียดสื่อ
   9. หน้าเกี่ยวกับวอยดฺ
   10. หน้าช็อปปิ้ง
   11. หน้าติดต่อประชาสัมพันธ์
   12. FOOTER
   13. มือถือ
   ============================================================ */

/* ---- 1. ฟอนต์ ----
   GoogleSans.ttf เป็น variable font (แกน wght 400-700)
   ประกาศเป็นช่วง "400 700" เพื่อใช้ Medium(500)/Bold(700) ได้ */
@font-face{ font-family:"Google Sans"; src:url("assets/fonts/GoogleSans.ttf") format("truetype"); font-weight:400 700; font-display:swap; }
@font-face{ font-family:"JS Synjai"; src:url("assets/fonts/JSSynjai.otf") format("opentype"); font-weight:400; font-display:swap; }

/* ---- 2. รีเซ็ต + ตัวแปรสี ---- */
html,body{ margin:0; padding:0; }
#voyd * { margin:0; padding:0; box-sizing:border-box; }
#voyd {
  --fg:#fff; --muted:#c2c2c2; --blue:#0C00FF; --yellow:#E5FF00;
  color:var(--fg); background:#000; width:100%;
  /* Google Sans มีอักษรไทยครบ ทั้งไทยและละตินจึงใช้ Google Sans
     (JS Synjai เป็นตัวสำรอง ยกเว้น footer/หน้าติดต่อ ที่กำหนด JS Synjai ไว้เอง) */
  font-family:"Google Sans","JS Synjai",sans-serif;
  font-weight:400; line-height:1.5;
}
#voyd img,#voyd video { display:block; width:100%; height:100%; object-fit:cover; }
#voyd a { color:inherit; text-decoration:none; }

/* พื้นดำ + เงา shadow.png (ยืดเต็มกว้าง ยาวลงชิด footer)
   +6px กันขอบล่างของรูปโดนเฉลี่ยกับพื้นโปร่งจนเห็นเป็นเส้นจางๆ */
#voyd .content { background:#000; }
#voyd .content.has-shadow {
  background-image:url("assets/shadow.png");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:100% calc(100% + 6px);
}

/* ---- 3. ปกวิดีโอ (หน้าแรก) : 1440 x 810 (16:9) ----
   กดโลโก้เพื่อกาง/พับ — 56.25vw = ความสูงจริงของ 16:9 เต็มจอ */
#voyd .cover { overflow:hidden; max-height:56.25vw; transition:max-height .55s ease; }
#voyd.cover-collapsed .cover { max-height:0; }
#voyd .coverinner { position:relative; width:100%; aspect-ratio:1440/810; overflow:hidden; background:#000; }
#voyd .coverinner img,#voyd .coverinner video { position:absolute; inset:0; }

/* ---- 4. แถบโลโก้ + ไอคอน ---- */
#voyd .brand { max-width:1166px; margin:0 auto; position:relative;
  display:flex; align-items:center; justify-content:center; padding:34px 0 30px; }
#voyd .brand .logolink,
#voyd .brand .logobtn { display:block; background:none; border:0; padding:0; line-height:0; cursor:pointer; }
#voyd .brand .logo { width:146px; height:53px; object-fit:contain; display:block; }
/* หน้าแรกโลโก้ใหญ่กว่าหน้าอื่น */
#voyd.is-home .brand { padding:60px 0 34px; }
#voyd.is-home .brand .logo { width:312px; height:112px; }
/* หน้ารายละเอียดสื่อ โลโก้ชิดซ้าย */
#voyd.is-single .brand { justify-content:flex-start; }

#voyd .brand .tools { position:absolute; right:0; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:16px; z-index:50; }
#voyd .brand .tools svg { display:block; cursor:pointer; }

/* ปุ่ม 3 ขีด: hover = น้ำเงิน / เปิดแล้วเหลือขีดกลางขีดเดียว */
#voyd .hambtn { background:none; border:0; padding:0; line-height:0; cursor:pointer; }
#voyd .ham line { stroke:#fff; stroke-width:2.4; stroke-linecap:round;
  transition:stroke .25s ease, opacity .25s ease; }
#voyd .hambtn:hover .ham line { stroke:var(--blue); }
#voyd.menu-open .ham line { stroke:var(--blue); }
#voyd.menu-open .ham .l1,
#voyd.menu-open .ham .l3 { opacity:0; }

/* ฉากหลังเบลอตอนเปิดเมนู (คลิกที่ฉากหลัง = ปิด) */
#voyd .backdrop { position:fixed; inset:0; z-index:40;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  background:rgba(0,0,0,.25);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; }
#voyd.menu-open .backdrop { opacity:1; visibility:visible; }

/* ป๊อปอัพเมนู: น้ำเงิน 0C00FF มุมโค้ง 16 */
#voyd .menupop { position:absolute; top:calc(100% + 14px); right:0; z-index:50;
  width:300px; max-width:calc(100vw - 40px);
  background:var(--blue); border-radius:16px; padding:46px 26px 24px;
  display:flex; flex-direction:column; gap:4px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease; }
#voyd.menu-open .menupop { opacity:1; visibility:visible; transform:translateY(0); }
#voyd .menupop a { color:#fff; font-size:24px; line-height:1.3; }
#voyd .popclose { position:absolute; top:14px; right:18px;
  background:none; border:0; color:#fff; font-size:22px; line-height:1; cursor:pointer; }

/* ---- 5. เมนูหมวด: 28px กระจายเต็มกว้าง 1166 ตัวคั่น | กึ่งกลาง ---- */
#voyd nav.cats { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;
  max-width:1166px; margin:0 auto; padding:2px 0 46px; color:#eaeaea; font-size:28px; }
#voyd nav.cats a { line-height:1.1; }
#voyd nav.cats a:hover,
#voyd nav.cats a:focus,
#voyd nav.cats a:active { color:var(--yellow); }
/* เหลือง = หมวดที่กำลังดูอยู่ */
#voyd nav.cats a.active { color:var(--yellow); }
#voyd nav.cats .sep { color:#8f8f8f; }

/* ---- 6. การ์ดสื่อ ----
   กริดหน้าแรก 2 คอลัมน์ — คอลัมน์แรกใน HTML = ซ้าย, คอลัมน์สอง = ขวา (ตรงไปตรงมา) */
#voyd .grid { display:flex; gap:40px; max-width:1166px;
  margin:0 auto; padding:0 0 56px; align-items:flex-start; }
#voyd .grid > .col { flex:1; display:flex; flex-direction:column; gap:40px; min-width:0; }

#voyd .cardlink { display:block; color:inherit; }
#voyd .card .thumb { position:relative; aspect-ratio:563/317; overflow:hidden; background:#fff; }
#voyd .card.tall .thumb { aspect-ratio:563/703; }
#voyd .card .cat { font-size:18px; color:var(--muted); margin:14px 0 6px; }
/* ชื่อเรื่อง (54) ซ้าย + คำอธิบาย (21) ขวา */
#voyd .card .meta { display:flex; align-items:flex-start; gap:18px; }
#voyd .card .meta h3 { flex:0 0 auto; white-space:nowrap; font-weight:400; font-size:54px; line-height:1.02; }
#voyd .card .meta p  { flex:1; min-width:0; font-size:21px; color:var(--muted); line-height:1.4; }

/* การ์ดชุดถัดไป: ซ่อนไว้ก่อน กด "สำรวจเพิ่มเติม" ค่อยเผยแบบ fade-up */
#voyd .card.more { display:none; }
#voyd.show-more .card.more { display:block; animation:cardIn .55s ease both; }
#voyd.show-more .explore { display:none; }
@keyframes cardIn { from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }

#voyd .explore { text-align:center; padding:4px 0 60px; }
#voyd .explore a { color:var(--yellow); font-size:28px; }

/* ---- 7. หน้าหมวด ---- */
#voyd .catpage { display:flex; gap:40px; max-width:1166px; margin:0 auto;
  padding:0 0 90px; align-items:flex-start; }
#voyd .catpage > .col { flex:1; min-width:0; }
/* คอลัมน์ซ้ายค้างอยู่กับที่ตอนเลื่อน ส่วนคอลัมน์ขวา (สื่อ) เลื่อนผ่านไปปกติ */
#voyd .catpage > .side { position:sticky; top:30px; align-self:flex-start; }
#voyd .catlogo { width:270px; max-width:100%; height:auto; display:block; margin:44px auto 0; object-fit:contain; }
/* หมวดที่โลโก้เป็นแนวนอน (ฟิล ยัวร์วอยดฺ) กว้างกว่าเพื่อให้ดูสมดุล */
#voyd .catlogo.wide { width:450px; }
#voyd .podcast { color:var(--yellow); font-size:54px; font-weight:400; line-height:1.1; margin-top:70px; }
#voyd .podcastdesc { color:var(--yellow); font-size:28px; line-height:1.35; margin-top:26px; }
/* กล่องรูปของหมวด (ถ้าหมวดนั้นตั้งรูปไว้) */
#voyd .catvisual { width:100%; aspect-ratio:4/3; background:#fff; overflow:hidden; }
#voyd .cards { display:flex; flex-direction:column; gap:40px; }
#voyd .emptynote { color:var(--muted); font-size:21px; }

/* ---- 8. หน้ารายละเอียดสื่อ ---- */
#voyd .article { display:flex; gap:40px; max-width:1166px; margin:0 auto;
  padding:0 0 90px; align-items:flex-start; }
#voyd .article > .col { flex:1; min-width:0; }
/* หัวเรื่องซ้าย + วันที่ชิดขวา */
#voyd .arthead { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
#voyd .arttitle { color:var(--yellow); font-size:36px; font-weight:500; line-height:1.25; }
#voyd .artdate { font-size:18px; color:#fff; white-space:nowrap; padding-top:6px; }
/* รูปหลัก — ไม่มีรูปก็เป็นกล่องขาว */
#voyd .artvisual { width:100%; aspect-ratio:563/370; overflow:hidden; margin-top:36px; background:#fff; }
/* ใต้รูป: โลโก้หมวดซ้าย | ข้อมูลแขกชิดขวา */
#voyd .artmeta { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:34px; }
#voyd .catbadge { width:100px; height:auto; display:block; object-fit:contain; }
#voyd .artinfo { text-align:right; }
#voyd .ep { color:var(--yellow); font-size:21px; line-height:1.3; }
#voyd .guest { color:var(--yellow); font-size:36px; font-weight:500; line-height:1.25; margin-top:2px; }
#voyd .guestsub { color:var(--yellow); font-size:21px; line-height:1.3; margin-top:2px; }
/* เครดิต: label ชิดขวา + ค่าชิดซ้าย แล้วดันไปทางขวา */
#voyd .credits { display:flex; justify-content:flex-end; align-items:center;
  gap:40px; margin-top:30px; font-size:14px; }
#voyd .cgrid { display:grid; grid-template-columns:auto auto; column-gap:12px; row-gap:3px; }
#voyd .cgrid .k { text-align:right; white-space:nowrap; color:#fff; }
#voyd .cgrid .v { text-align:left; white-space:nowrap; color:#fff; }
#voyd .links { display:flex; align-items:center; gap:16px; }
#voyd .links a { display:block; line-height:0; }
/* เนื้อหาบทความ */
#voyd .body p { font-size:21px; line-height:1.3; color:#fff; text-indent:2em; }
#voyd .body p + p { margin-top:20px; }

/* ---- 9. หน้าเกี่ยวกับวอยดฺ ---- */
#voyd .about { display:flex; gap:40px; max-width:1166px; margin:0 auto;
  padding:0 0 90px; align-items:flex-start; }
#voyd .about > .col { flex:1; min-width:0; }
#voyd .visual { width:100%; aspect-ratio:4/3; background:#fff; overflow:hidden; }
#voyd .tagline { margin-top:56px; color:var(--yellow); font-size:36px; line-height:1.3; }

/* ---- 10. หน้าช็อปปิ้ง ---- */
#voyd .shop { max-width:1166px; margin:0 auto; padding:0 0 90px; }
#voyd .shoptitle { color:var(--yellow); font-size:54px; font-weight:400; line-height:1.1; margin-bottom:44px; }
/* กริดสินค้า 3 คอลัมน์ ช่องไฟแคบตามดีไซน์ */
#voyd .products { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 6px; }
#voyd .product .visual { aspect-ratio:382/275; }
#voyd .pmeta { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:10px; }
#voyd .pinfo { font-size:21px; line-height:1.3; color:#fff; }
#voyd .pname { color:var(--yellow); font-size:36px; font-weight:500; line-height:1.1;
  text-align:right; white-space:nowrap; }

/* ---- 11. หน้าติดต่อประชาสัมพันธ์ (พื้นเหลืองเต็มหน้า) ---- */
#voyd .contact { background:var(--yellow); color:var(--blue);
  font-family:"JS Synjai","Google Sans",sans-serif;
  min-height:calc(100vh - 121px);
  display:flex; align-items:center; justify-content:center; padding:60px 40px 90px; }
/* สองกลุ่มชิดบนตรงกัน -> e-mail/call อยู่บรรทัดเดียวกับ instagram/tiktok */
#voyd .cwrap { display:flex; align-items:flex-start; gap:200px; flex-wrap:wrap; }
/* line-height 0.95 = ระยะบรรทัด ~28px (ชิดตามดีไซน์) */
#voyd .cgroup { display:grid; grid-template-columns:auto auto;
  column-gap:44px; row-gap:0; font-size:29px; line-height:0.95; }
#voyd .cgroup .head { text-align:right; margin-bottom:96px; white-space:nowrap; }
#voyd .cgroup .k { text-align:right; white-space:nowrap; }
#voyd .cgroup .v { text-align:left; white-space:nowrap; }
#voyd .topbar { background:#000; }

/* ---- 12. FOOTER เหลือง 1440 x 150 (JS Synjai 29 / สี 0C00FF) ---- */
#voyd footer.sitefooter { background:var(--yellow); min-height:150px; display:flex; align-items:center;
  padding:0 40px; font-family:"JS Synjai","Google Sans",sans-serif; color:var(--blue); }
#voyd footer.sitefooter .inner { max-width:1166px; width:100%; margin:0 auto; display:flex; flex-wrap:wrap;
  justify-content:space-between; align-items:flex-start; gap:18px 40px;
  font-size:29px; font-weight:400; line-height:1.28; }
/* label ชิดขวา + ค่าชิดซ้าย เรียงเป็นคอลัมน์ตรงกัน */
#voyd footer.sitefooter .grid2 { display:grid; grid-template-columns:auto auto;
  column-gap:28px; row-gap:0; line-height:0.9; }
#voyd footer.sitefooter .grid2 .k { text-align:right; white-space:nowrap; }
#voyd footer.sitefooter .grid2 .v { text-align:left; white-space:nowrap; }

/* ---- 13. มือถือ ---- */
@media (max-width:820px){
  #voyd .brand { padding:24px 16px 20px; }
  #voyd.is-home .brand { padding:36px 16px 22px; }
  #voyd.is-home .brand .logo { width:210px; height:76px; }
  #voyd .brand .tools { right:16px; }
  #voyd nav.cats { font-size:20px; justify-content:center; gap:6px 12px; padding:2px 16px 30px; }

  #voyd .grid { flex-direction:column; gap:34px; padding:0 20px 40px; }
  #voyd .card.tall .thumb { aspect-ratio:563/317; }
  #voyd .card .meta h3 { font-size:36px; white-space:normal; }
  #voyd .card .meta p { font-size:18px; }

  #voyd .catpage { flex-direction:column; gap:34px; padding:0 20px 50px; }
  #voyd .catpage > .side { position:static; }   /* มือถือเรียงบนล่าง ไม่ต้อง sticky */
  #voyd .catlogo { width:200px; margin-top:10px; }
  #voyd .catlogo.wide { width:260px; }
  #voyd .podcast { font-size:34px; margin-top:34px; }
  #voyd .podcastdesc { font-size:20px; }

  #voyd .article { flex-direction:column; gap:34px; padding:0 20px 50px; }
  #voyd .arthead { flex-direction:column; gap:8px; }
  #voyd .arttitle { font-size:26px; }
  #voyd .artdate { padding-top:0; }
  #voyd .guest { font-size:26px; }
  #voyd .ep, #voyd .guestsub { font-size:18px; }
  #voyd .credits { flex-wrap:wrap; gap:20px; justify-content:flex-start; font-size:16px; }
  #voyd .body p { font-size:18px; }

  #voyd .about { flex-direction:column; gap:34px; padding:0 20px 50px; }
  #voyd .tagline { margin-top:28px; font-size:26px; }

  #voyd .shop { padding:0 20px 50px; }
  #voyd .shoptitle { font-size:34px; margin-bottom:26px; }
  #voyd .products { grid-template-columns:1fr; gap:28px; }
  #voyd .pname { font-size:28px; }
  #voyd .pinfo { font-size:18px; }

  #voyd .contact { padding:50px 20px 60px; align-items:flex-start; }
  #voyd .cwrap { gap:56px; }
  #voyd .cgroup { font-size:20px; column-gap:24px; }
  #voyd .cgroup .head { margin-bottom:40px; }

  #voyd footer.sitefooter { padding:24px 20px; }
  #voyd footer.sitefooter .inner { justify-content:flex-start; gap:14px 28px; font-size:20px; }
}