/* assets/showcase.css — หน้าสาธารณะแบบ showcase (ไม่มี sidebar)
   ใช้คู่กับ includes/public-header.php · ตัวแปรสีมาจาก assets/app.css */

/* ── โครงหน้า ── */
.pub-wrap{max-width:1440px;margin:0 auto;padding:0 24px}
.pub-main{padding:28px 0 56px}
@media(max-width:640px){.pub-wrap{padding:0 16px}.pub-main{padding:18px 0 40px}}

/* ── แถบบนสุด ── */
.pub-nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--border)}
.pub-nav-inner{display:flex;align-items:center;gap:14px;height:66px}
.pub-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.pub-logo-mark{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;box-shadow:0 6px 18px var(--glow)}
.pub-logo-text{font-family:'Google Sans',sans-serif;font-weight:700;font-size:18px;color:var(--text);letter-spacing:-.01em;line-height:1.15}
.pub-logo-sub{display:block;font-size:12px;font-weight:500;color:var(--hint);letter-spacing:.02em}
.pub-links{display:flex;align-items:center;gap:2px;margin-left:10px;overflow-x:auto;scrollbar-width:none}
.pub-links::-webkit-scrollbar{display:none}
.pub-link{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:9px;font-size:15px;font-weight:600;color:var(--muted);text-decoration:none;transition:all .18s;white-space:nowrap}
.pub-link .material-symbols-outlined{font-size:19px;flex-shrink:0;opacity:.85}
.pub-link:hover .material-symbols-outlined,.pub-link.active .material-symbols-outlined{opacity:1}
.pub-link:hover{background:var(--pri-light);color:var(--pri)}
.pub-link.active{background:var(--pri-light);color:var(--pri)}
.pub-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
@media(max-width:1023px){
    .pub-nav-inner{height:60px;gap:10px}
    .pub-logo-sub{display:none}
    .pub-links{position:absolute;left:0;right:0;top:60px;margin:0;padding:8px 16px;background:var(--card);border-bottom:1px solid var(--border);gap:6px}
    .pub-nav{padding-bottom:0}
    .pub-nav-inner{position:relative}
    .pub-main{padding-top:74px}
}
@media(max-width:420px){.pub-logo-text{font-size:16px}}

/* ── หัวข้อของแต่ละส่วน ── */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 18px}
.sec-title{font-family:'Google Sans',sans-serif;font-weight:700;font-size:24px;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.sec-sub{font-size:15px;color:var(--muted);margin-top:3px}
.sec-more{font-size:15px;font-weight:600;color:var(--pri);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.sec-more:hover{text-decoration:underline}
@media(max-width:640px){.sec-title{font-size:20px}}

/* ── สไลด์หัวหน้า ── */
.hero{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 24px 50px -28px rgba(30,27,75,.75);margin-bottom:44px;
    background:radial-gradient(120% 140% at 85% 15%,rgba(124,58,237,.85),transparent 60%),linear-gradient(135deg,#1e1b4b,#312e81 55%,#4338ca)}
.hero-stage::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
    background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1px);background-size:22px 22px}
.hero-stage{position:relative;aspect-ratio:24/9}
@media(max-width:1023px){.hero-stage{aspect-ratio:16/9}}
@media(max-width:640px){.hero{border-radius:16px;margin-bottom:32px}.hero-stage{aspect-ratio:4/3}}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.hero-slide.on{opacity:1}
.hero-slide img{width:100%;height:100%;object-fit:cover}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,9,32,.88) 0%,rgba(9,9,32,.55) 45%,rgba(9,9,32,.15) 100%)}
.hero-copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:0 8% 0 7%;max-width:660px;color:#fff}
.hero-copy h2{font-family:'Google Sans',sans-serif;font-weight:700;font-size:clamp(22px,3vw,40px);line-height:1.25;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero-copy p{font-size:clamp(14px,1.3vw,18px);color:rgba(255,255,255,.86);line-height:1.6}
@media(max-width:640px){.hero-copy{padding:0 20px;gap:8px}.hero-shade{background:linear-gradient(0deg,rgba(9,9,32,.92) 10%,rgba(9,9,32,.35) 75%)}}
.hero-dots{position:absolute;left:7%;bottom:22px;display:flex;gap:7px;z-index:2}
@media(max-width:640px){.hero-dots{left:20px;bottom:14px}}
.hero-dots button{width:9px;height:9px;border-radius:99px;background:rgba(255,255,255,.45);border:none;padding:0;cursor:pointer;transition:all .3s}
.hero-dots button.on{background:#fff;width:28px}

/* ══ เอกสารปักหมุด — แผ่นการ์ดหนา นูนขึ้นมาจากหน้ากระดาษ ══
   ไม่มีการหมุนหรือพลิกใด ๆ ทั้งสิ้น มองตรง ๆ ตลอดเวลา
   ความ "นูน" มาจากเส้นแสงในขอบบน + เส้นทองบาง 2px ใต้ขอบ (ไม่ทำสันหนาเหมือนสันหนังสือ)
   ความ "นูน" มาจากเงาใต้สันบวกเงาทอดพื้น และยกสูงขึ้นอีกตอนชี้เมาส์
   ข้อดีคือไม่ต้องพึ่งแอนิเมชัน เครื่องที่ปิดแอนิเมชันไว้ก็เห็นเป็น 3 มิติเหมือนกัน */

@property --pin-a{syntax:'<angle>';inherits:false;initial-value:0deg}

.pin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,340px));justify-content:center;align-items:stretch;
    gap:34px;margin:0 auto 52px;padding:10px 0 40px;max-width:1120px}
@media(max-width:1023px){.pin-grid{grid-template-columns:repeat(2,minmax(0,340px));gap:28px}}
@media(max-width:640px){.pin-grid{grid-template-columns:minmax(0,340px);gap:30px;margin-bottom:38px}}

.pin-card{position:relative;display:flex;text-decoration:none;color:inherit;
    animation:pinFloat 9s ease-in-out infinite}
/* ลอยขึ้นลงเบา ๆ พร้อมกันทุกใบ — เป็นการ "ลอย" ไม่ใช่การ "พลิก" */
@keyframes pinFloat{
    0%,100%{transform:translateY(0)}
    50%    {transform:translateY(-7px)}
}

/* ออร่าทองเรือง ๆ หลังการ์ด หายใจช้า ๆ ให้รู้สึกเป็นของมีค่า */
.pin-card::before{content:'';position:absolute;inset:6px;border-radius:0;pointer-events:none;z-index:-1;
    background:radial-gradient(58% 52% at 50% 45%,rgba(212,175,55,.3),rgba(191,149,63,.12) 55%,transparent 70%);
    filter:blur(26px);animation:pinAura 9s ease-in-out infinite}
@keyframes pinAura{
    0%,100%{opacity:.3;transform:scale(.96)}
    50%    {opacity:.62;transform:scale(1.04)}
}

/* เงาทอดพื้นใต้การ์ด — บานและจางลงตอนการ์ดลอยสูง */
.pin-card::after{content:'';position:absolute;left:14%;right:14%;bottom:-18px;height:18px;border-radius:50%;
    background:radial-gradient(ellipse at center,rgba(15,23,42,.4),rgba(15,23,42,.15) 55%,transparent 72%);
    filter:blur(7px);pointer-events:none;
    animation:pinCast 9s ease-in-out infinite}
@keyframes pinCast{
    0%,100%{transform:scale(1);opacity:.6}
    50%    {transform:scale(1.12);opacity:.34}
}

/* ── ตัวการ์ด: แผ่นหนา ──
   ชั้นทึบ 5 ชั้นแรกคือ "สันการ์ด" หนารวม 12px · ไล่จากทองสว่างลงไปทองเข้ม
   เหมือนมองสันหนังสือปกแข็งจากด้านหน้า แล้วต่อด้วยเงาสองชั้นให้ดูลอยพ้นพื้น */
.pin-inner{position:relative;flex:1;display:flex;flex-direction:column;border-radius:0;background:var(--card);
    transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s ease;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),      /* เส้นแสงในขอบบน — ตัวที่ทำให้หน้าการ์ดดูนูน */
        0 6px 12px -6px rgba(15,23,42,.22),      /* เงาใกล้ ยึดการ์ดไว้กับพื้น */
        0 20px 32px -18px rgba(15,23,42,.38)}    /* เงาไกล ทำให้ลอย
        เจตนาไม่มีเส้นทึบใต้ขอบแล้ว — ของเดิมไปเหลื่อมกับขอบทองจนเห็นเป็นเส้นคู่ */

/* ชี้เมาส์แล้วนูนสูงขึ้นอีก สันหนาขึ้น เงาลึกขึ้น — ไม่มีการเอียงหรือพลิก */
.pin-card:hover .pin-inner{
    transform:translateY(-6px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 10px 18px -8px rgba(120,90,10,.32),
        0 30px 44px -22px rgba(15,23,42,.42)}
.pin-card:focus-visible .pin-inner{outline:3px solid var(--pri);outline-offset:4px}

/* ── ขอบทอง ชั้นที่ 1: เนื้อโลหะไหลไปมา ── */
.pin-inner::before{content:'';position:absolute;inset:0;border-radius:0;padding:2.5px;pointer-events:none;z-index:2;
    background:linear-gradient(115deg,#8a6d1a 0%,#bf953f 10%,#fcf6ba 22%,#fff8d6 30%,#d4af37 42%,
        #bf953f 55%,#fff8d6 68%,#fcf6ba 78%,#bf953f 88%,#8a6d1a 100%);
    background-size:260% 100%;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    animation:pinRing 6.5s ease-in-out infinite alternate}
@keyframes pinRing{from{background-position:0% 0}to{background-position:100% 0}}

/* ── ขอบทอง ชั้นที่ 2: ประกายแคบ ๆ วิ่งวนรอบขอบ ── */
.pin-inner::after{content:'';position:absolute;inset:0;border-radius:0;padding:2.5px;pointer-events:none;z-index:2;opacity:.95;
    background:conic-gradient(from var(--pin-a),
        transparent 0deg,transparent 12deg,rgba(255,255,255,.95) 26deg,rgba(255,248,214,.55) 34deg,
        transparent 52deg,transparent 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    animation:pinSpark 6.5s linear infinite}
@keyframes pinSpark{to{--pin-a:360deg}}

.pin-cover{position:relative;flex:0 0 auto;border-radius:0;overflow:hidden;aspect-ratio:3/4;
    background:linear-gradient(135deg,#eef2ff,#e0e7ff);display:flex;align-items:center;justify-content:center}
.pin-cover img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .6s ease}
.pin-card:hover .pin-cover img{transform:scale(1.04)}

/* แสงกวาดหน้าปกเป็นจังหวะ ไม่ใช่เฉพาะตอนชี้เมาส์ */
.pin-glare{position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.16) 46%,rgba(255,255,255,.55) 50%,
        rgba(255,255,255,.16) 54%,transparent 60%);
    background-size:260% 100%;background-repeat:no-repeat;background-position:170% 0;
    animation:pinSheen 9s ease-in-out infinite}
@keyframes pinSheen{
    0%  {background-position:170% 0}
    26% {background-position:-70% 0}
    100%{background-position:-70% 0}
}
.pin-card:hover .pin-glare{animation-play-state:paused}

.pin-badge{position:absolute;top:14px;left:14px;z-index:3;display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:0;
    font-size:13px;font-weight:700;color:#4a3608;background:linear-gradient(135deg,#fff8d6,#fcf6ba 40%,#d4af37);
    box-shadow:0 8px 16px -6px rgba(120,90,10,.7),inset 0 1px 0 rgba(255,255,255,.75)}
.pin-rank{position:absolute;top:14px;right:14px;z-index:3;width:30px;height:30px;border-radius:0;display:flex;align-items:center;justify-content:center;
    font-family:'Google Sans',sans-serif;font-weight:700;font-size:14px;color:#fff;background:rgba(15,23,42,.62);
    backdrop-filter:blur(6px);box-shadow:0 8px 16px -8px rgba(0,0,0,.6)}

.pin-body{flex:1;display:flex;flex-direction:column;padding:18px 20px 20px}
.pin-title{font-family:'Google Sans',sans-serif;font-weight:700;font-size:18px;line-height:1.4;min-height:2.8em;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s}
.pin-card:hover .pin-title{color:var(--pri)}
.pin-desc{margin-top:7px;font-size:14px;color:var(--muted);line-height:1.55;min-height:3.1em;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pin-meta{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:14px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.pin-meta .material-symbols-outlined{font-size:17px}
/* ป้ายหมวดในแถวล่างของการ์ด ก็ต้องเหลี่ยมให้เข้าชุดกับตัวการ์ด */
.pin-meta .pill{border-radius:0}

/* เครื่องที่ตั้งค่า "ลดการเคลื่อนไหว" — หยุดเฉพาะการเคลื่อนไหว
   ความหนาและความนูนเป็นเงาล้วน ไม่ใช่การเคลื่อนไหว จึงยังอยู่ครบเหมือนเดิม */
@media(prefers-reduced-motion:reduce){
    html:not([data-motion="on"]) .pin-card,
    html:not([data-motion="on"]) .pin-card::before,
    html:not([data-motion="on"]) .pin-card::after,
    html:not([data-motion="on"]) .pin-inner::before,
    html:not([data-motion="on"]) .pin-inner::after,
    html:not([data-motion="on"]) .pin-glare{animation:none}
    html:not([data-motion="on"]) .pin-card{transform:none}
    html:not([data-motion="on"]) .pin-card::before{opacity:.6;transform:none}
    html:not([data-motion="on"]) .pin-card::after{opacity:.5}
    /* ซ่อนแสงกวาดไปเลย — ถ้าแช่ไว้กลางทางจะเห็นเป็นแถบแสงพาดปกค้างอยู่ตลอด
       เหมือนมีแผ่นอะไรซ้อนทับปก ซึ่งไม่ใช่สิ่งที่ตั้งใจ */
    html:not([data-motion="on"]) .pin-glare{opacity:0}
    html:not([data-motion="on"]) .pin-card:hover .pin-cover img{transform:none}
}

/* ปุ่มเปิด/ปิดแอนิเมชัน — โผล่เฉพาะเครื่องที่ตั้งค่าลดการเคลื่อนไหวไว้ (JS เป็นคนเปิดให้เห็น) */
.motion-toggle{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:99px;
    font-size:14px;font-weight:600;color:#8a6d1a;background:linear-gradient(135deg,#fff8d6,#fcf6ba);
    border:1.5px solid #e6d391;cursor:pointer;transition:all .2s;white-space:nowrap;flex-shrink:0}
.motion-toggle:hover{border-color:#d4af37;box-shadow:0 6px 16px -8px rgba(120,90,10,.6)}
.motion-toggle[hidden]{display:none}

/* ══ ชั้นวางเอกสาร — 5 คอลัมน์ สัดส่วนปก 3:4 ══ */
.shelf{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
@media(max-width:1279px){.shelf{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}
@media(max-width:1023px){.shelf{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
@media(max-width:767px){.shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media(max-width:359px){.shelf{grid-template-columns:1fr}}

.doc-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;border-radius:0;background:var(--card);
    border:1px solid var(--border);overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.doc-card:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 18px 34px -20px rgba(15,23,42,.5)}
.doc-card:focus-visible{outline:3px solid var(--pri);outline-offset:3px}
.doc-cover{position:relative;aspect-ratio:3/4;background:linear-gradient(135deg,#eef2ff,#e0e7ff);display:flex;align-items:center;justify-content:center;overflow:hidden}
.doc-cover img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .45s ease}
.doc-card:hover .doc-cover img{transform:scale(1.06)}
.doc-cover .material-symbols-outlined{font-size:46px;color:var(--pri);opacity:.55}
.doc-cat{position:absolute;left:9px;top:9px;font-size:12px;font-weight:600;padding:4px 9px;border-radius:0;
    background:rgba(255,255,255,.9);color:var(--pri);backdrop-filter:blur(4px)}
.doc-pages{position:absolute;right:9px;bottom:9px;font-size:12px;font-weight:600;padding:3px 8px;border-radius:0;
    background:rgba(15,23,42,.62);color:#fff;backdrop-filter:blur(4px)}
.doc-body{padding:12px 13px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.doc-title{font-family:'Google Sans',sans-serif;font-weight:700;font-size:15px;line-height:1.42;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.doc-card:hover .doc-title{color:var(--pri)}
.doc-meta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--hint);font-variant-numeric:tabular-nums}
.doc-meta .material-symbols-outlined{font-size:15px}
.doc-stats{display:flex;align-items:center;gap:10px}

/* ── แถบหมวดหมู่ ── */
.cat-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:48px}
@media(max-width:1023px){.cat-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media(max-width:480px){.cat-strip{grid-template-columns:1fr}}
.cat-card{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:15px;background:var(--card);
    border:1px solid var(--border);text-decoration:none;color:inherit;transition:all .2s}
.cat-card:hover{border-color:var(--pri);transform:translateY(-2px);box-shadow:0 14px 28px -20px rgba(15,23,42,.5)}
.cat-ico{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cat-name{font-family:'Google Sans',sans-serif;font-weight:700;font-size:16px}
.cat-count{font-size:13px;color:var(--muted);margin-top:2px}

/* ── แถบตัวเลขรวม ──
   ตั้งใจให้เป็นพี่น้องกับ .cat-strip ด้านล่าง: พื้นขาว ขอบ 1px มุมโค้ง 15px
   ไอคอนอยู่ในกล่องสี่เหลี่ยมมุมมน 46px พื้นสีอ่อน 10% ตัวไอคอนสีเข้ม
   ค่าทุกตัวลอกมาจาก .cat-card ตรง ๆ เพื่อให้สองแถบนี้อ่านเป็นชุดเดียวกัน
   ต่างกันแค่ไม่มี :hover เพราะช่องพวกนี้กดไม่ได้ ใส่ไปผู้ใช้จะพยายามกด */
.stat-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:48px}
@media(max-width:1023px){.stat-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media(max-width:480px){.stat-strip{grid-template-columns:1fr}}
.stat-box{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:15px;
    background:var(--card);border:1px solid var(--border)}
.stat-ico{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stat-num{font-family:'Google Sans',sans-serif;font-weight:700;font-size:20px;line-height:1.2;
    font-variant-numeric:tabular-nums}
.stat-lbl{font-size:13px;color:var(--muted);margin-top:2px}

/* ── หัวหน้าหมวด ── */
.cat-hero{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:26px}
.crumb{display:flex;align-items:center;gap:5px;font-size:14px;color:var(--muted);margin-bottom:10px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--pri)}

/* ── ท้ายหน้า ── */
.pub-foot{border-top:1px solid var(--border);background:var(--card);padding:26px 0;margin-top:20px}
.pub-foot-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;font-size:14px;color:var(--hint)}
.pub-foot a{color:var(--muted);text-decoration:none}
.pub-foot a:hover{color:var(--pri)}

/* ── ว่างเปล่า ── */
.empty-box{background:var(--card);border:1px dashed var(--border);border-radius:18px;padding:56px 24px;text-align:center}