/* =====================================================================
   Hinet Blog — single post components (Phase 3)
   Loaded AFTER knowledge/assets/knowledge.css (shared layout, prose, FAQ, form)
   Prefix: hnp-   ·   generated pages: _blog-tools/build.py
   ===================================================================== */
/* templatemo.css is not loaded here, but keep Plex if a legacy rule leaks in */
.hnp-page p,.hnp-page a,.hnp-page li{font-family:var(--font)}

/* hero cover photo */
.hnp-cover{margin:28px 0 0;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lift);background:var(--cloud);aspect-ratio:16/10;max-height:560px}
.hnp-cover img{width:100%;height:100%;object-fit:cover}
@media (max-width:640px){.hnp-cover{border-radius:var(--r-lg);margin-top:20px}}

/* quick verdict + pros/cons */
.hnp-verdict{border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden;margin:22px 0}
.hnp-verdict-text{padding:18px 22px;background:var(--surface);color:var(--navy);margin:0!important}
.hnp-pc{display:grid;grid-template-columns:1fr 1fr}
.hnp-pc>div{padding:18px 22px}
.hnp-pc h3{margin:0 0 10px!important;font-size:1.02rem;display:flex;align-items:center;gap:8px}
.hnp-pros{border-right:1px solid var(--hairline)}
.hnp-pros h3{color:var(--ok)}.hnp-pros h3 i{color:var(--ok)}
.hnp-cons h3{color:#A1271B}.hnp-cons h3 i{color:#D93025}
.hnp-pc ul{list-style:none;padding:0!important;margin:0}
.hnp-pc li{position:relative;padding-left:22px;font-size:.98rem!important;line-height:1.65!important}
.hnp-pc li+li{margin-top:8px}
.hnp-pros li::before{content:"+";position:absolute;left:2px;top:0;font-weight:700;color:var(--ok)}
.hnp-cons li::before{content:"–";position:absolute;left:2px;top:0;font-weight:700;color:#D93025}
@media (max-width:640px){.hnp-pc{grid-template-columns:1fr}.hnp-pros{border-right:0;border-bottom:1px solid var(--hairline)}}

/* spec + compare tables */
.hnp-spec table,.hnp-compare table{min-width:0}
.hnp-spec tbody th{background:var(--surface);color:var(--navy);width:34%;font-size:.92rem;border-top:1px solid var(--hairline);vertical-align:top}
.hnp-spec caption{caption-side:bottom;text-align:left;padding:10px 14px;font-size:.84rem;color:var(--muted)}
.hnp-compare table{min-width:560px}
.hnp-compare tbody th{background:var(--surface);color:var(--navy);font-size:.92rem;border-top:1px solid var(--hairline)}
.hnp-note{font-size:.86rem!important;color:var(--muted)}

/* gallery + lightbox */
.hnp-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:22px 0}
.hnp-gallery figure{margin:0!important}
.hnp-gallery a{display:block;border-radius:var(--r-md);overflow:hidden;background:var(--cloud);aspect-ratio:3/4}
.hnp-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.hnp-gallery a:hover img{transform:scale(1.04)}
.hnp-gallery figcaption{font-size:.8rem!important;margin-top:6px!important;text-align:left!important;line-height:1.45}
.hnp-lightbox{border:0;padding:0;background:transparent;max-width:min(92vw,720px);max-height:92vh;margin:auto}
.hnp-lightbox::backdrop{background:rgba(6,18,46,.86)}
.hnp-lightbox img{max-height:80vh;width:auto;max-width:100%;border-radius:var(--r-md);margin:0 auto}
.hnp-lightbox p{color:#fff;text-align:center;font-size:.92rem;margin-top:10px}
.hnp-lb-close{position:fixed;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--navy);font-size:1.6rem;cursor:pointer;display:grid;place-items:center}

/* who it's for */
.hnp-fit{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0}
.hnp-fit>div{border-radius:var(--r-lg);padding:18px 20px}
.hnp-fit-yes{background:#E9F6EF;border:1px solid #BFE3CF}
.hnp-fit-no{background:#FDF1EF;border:1px solid #F3CBC5}
.hnp-fit h3{margin:0 0 10px!important;font-size:1.02rem;display:flex;align-items:center;gap:8px}
.hnp-fit-yes h3{color:var(--ok)}.hnp-fit-no h3{color:#A1271B}
.hnp-fit ul{padding-left:20px!important;margin:0}
.hnp-fit li{font-size:.98rem!important;line-height:1.65!important}
@media (max-width:640px){.hnp-fit{grid-template-columns:1fr}}

/* price box */
.hnp-price{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:22px 24px;margin:22px 0}
.hnp-price-label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--growth)}
.hnp-price-range{display:block;font-size:clamp(1.3rem,3vw,1.7rem);font-weight:700;color:#fff!important;margin-top:4px;line-height:1.3}
.hnp-price small{display:block;font-size:.86rem;color:#C9D8F7;margin-top:6px;max-width:420px;line-height:1.55}
.hnp-price-cta{display:flex;flex-wrap:wrap;gap:10px}
.hnp-price .btn-primary{background:#fff;color:var(--navy)}
.hnp-price .btn-primary:hover{background:var(--cloud);color:var(--navy)}

/* Hinet perspective + owner placeholders */
.hnp-hinet{margin-top:22px}
.erk{background:#FFF3D1;color:#5C4200;border:1px dashed #E3B341;border-radius:6px;padding:1px 6px;font-size:.92em}
.hnp-hinet .erk{background:rgba(255,200,87,.18);color:#FFE2A3;border-color:rgba(255,200,87,.6)}

/* hashtags */
.hnp-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px!important}
.hnp-tags span{font-size:.84rem;color:var(--connection);background:var(--cloud);border-radius:var(--r-full);padding:4px 12px}

/* layout tweaks */
@media (min-width:641px){.hnp-gallery{grid-template-columns:repeat(5,1fr)}}
@media (max-width:640px){
  .hnp-gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px;margin-right:-24px;padding-right:24px}
  .hnp-gallery figure{flex:0 0 46%;scroll-snap-align:start}
}
.hnp-page .related{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){.hnp-page .related{grid-template-columns:1fr}}
:lang(th) .hnp-price-label,:lang(th) .help .eyebrow{letter-spacing:.02em}