/* blog-page.css — Blog listing (dark hero, category pills + search, post grid, pagination, newsletter band) */

/* ---------- dark hero ---------- */
.blog-hero{padding:28px 0 0}
.blog-hero .hero-band{background:radial-gradient(130% 200% at 75% 10%,#7E0C17 0%,#2A0407 55%,#0E0102 100%);border-radius:24px;color:#fff;padding:56px 52px;position:relative;overflow:hidden}
.blog-hero .hero-band::before{content:'';position:absolute;right:-40px;top:-40px;width:340px;height:340px;background:
  radial-gradient(circle at 60% 40%,rgba(255,80,90,.35),transparent 60%)}
.blog-hero .eyebrow{color:#FF8A93}
.blog-hero h1{font-size:clamp(30px,4vw,46px);font-weight:800;letter-spacing:-.02em;margin:6px 0 14px}
.blog-hero p{font-size:15px;color:#E8A9AE;max-width:420px}
.bh-tiles{position:absolute;right:6%;top:50%;transform:translateY(-50%);display:flex;gap:16px}
.bh-tiles span{width:86px;height:86px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:34px;background:linear-gradient(150deg,rgba(224,34,52,.9),rgba(94,6,15,.9));box-shadow:0 20px 40px -14px rgba(0,0,0,.6);backdrop-filter:blur(2px)}
.bh-tiles span:nth-child(2){transform:translateY(-26px) rotate(6deg);background:linear-gradient(150deg,rgba(255,120,130,.35),rgba(211,27,43,.45))}
.bh-tiles span:nth-child(3){transform:translateY(20px) rotate(-5deg);background:linear-gradient(150deg,rgba(255,160,165,.3),rgba(143,14,27,.5))}

/* ---------- toolbar ---------- */
.blog-toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.blog-toolbar .tb-label{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--muted);display:block;margin-bottom:10px}
.blog-toolbar .cat-pills{margin-bottom:0}
.blog-search{position:relative}
.blog-search input{font-size:16px;padding:10px 38px 10px 14px;border:1.5px solid #EBDDDA;border-radius:99px;background:#fff;width:230px;font-family:inherit}
.blog-search input:focus{outline:none;border-color:var(--red)}
.blog-search svg{position:absolute;right:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:#8A8A92;fill:none;stroke-width:2}

/* ---------- post grid ---------- */
.bpost-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.bpost{background:#fff;border:1px solid #F3E5E2;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.bpost:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.bpost.hidden{display:none}
.bp-img{height:150px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;font-size:40px}
.bp-body{padding:16px 18px 16px;display:flex;flex-direction:column;flex:1}
.bp-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.bp-meta .nc-tag{margin-bottom:0}
.bp-meta time{font-size:10.5px;color:var(--muted)}
.bpost h4{font-size:14.5px;font-weight:800;line-height:1.35;margin-bottom:8px}
.bp-excerpt{font-size:11.8px;color:var(--body);line-height:1.55;flex:1}
.bp-read{font-size:12px;font-weight:700;color:var(--red);margin-top:12px;display:inline-flex;gap:6px}
/* thumb tints */
.bp-t1{background-image:linear-gradient(150deg,#8F0E1B,#40060C)}
.bp-t2{background-image:linear-gradient(150deg,#2A2A30,#101013)}
.bp-t3{background-image:linear-gradient(150deg,#C4172A,#6E0A13)}
.bp-t4{background-image:linear-gradient(150deg,#9DB8D2,#5E7FA0)}
.bp-t5{background-image:linear-gradient(150deg,#3E3F49,#191A20)}
.bp-t6{background-image:linear-gradient(150deg,#D89A45,#8F5A14)}
.bp-t7{background-image:linear-gradient(150deg,#F3D9D6,#E9BCB7)}
.bp-t8{background-image:linear-gradient(150deg,#5C7A5C,#2C3B28)}

.bpost a{color:inherit}

/* ---------- post detail (post.html) ---------- */
.post-article{max-width:760px;margin:0 auto}
.post-article .bp-hero{height:220px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:64px;margin-bottom:28px}
.post-article h1{font-size:clamp(26px,3.6vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.2;margin:10px 0 14px}
.post-article .post-meta{display:flex;gap:14px;align-items:center;font-size:12.5px;color:var(--muted);margin-bottom:26px}
.post-content{font-size:15.5px;line-height:1.8;color:#2B2B30}
.post-content p{margin-bottom:16px}
.post-content h2,.post-content h3{font-weight:800;margin:26px 0 10px}
.post-content h2{font-size:22px}
.post-content h3{font-size:18px}
.post-content ul,.post-content ol{margin:0 0 16px 22px}
.post-content ul{list-style:disc}
.post-content ol{list-style:decimal}
.post-content li{margin-bottom:6px}
.post-content img{border-radius:14px;margin:10px 0}
.post-content a{color:var(--red);font-weight:600}
.post-back{display:inline-flex;gap:8px;font-size:13.5px;font-weight:700;color:var(--red);margin-bottom:22px}

/* ---------- pagination ---------- */
.paging{display:flex;justify-content:center;gap:8px;margin-top:36px}
.paging a{min-width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:700;color:#3C3C42;background:#fff;border:1px solid #EFE3E0;padding:0 6px;transition:all .2s}
.paging a.on,.paging a:hover{background:var(--red);border-color:var(--red);color:#fff}
.paging a.gap{border:0;background:none}
.paging a.gap:hover{color:#3C3C42;background:none}

/* ---------- newsletter band ---------- */
.news-band{background:linear-gradient(120deg,#D31B2B,#8F0E1B);border-radius:24px;padding:36px 44px;display:flex;align-items:center;justify-content:space-between;gap:28px;color:#fff;flex-wrap:wrap}
.news-band .nb-left{display:flex;align-items:center;gap:18px}
.news-band .nb-ico{width:54px;height:54px;border-radius:14px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:24px;flex:none}
.news-band small{display:block;font-size:12px;color:#FFC9CD;margin-bottom:3px}
.news-band h3{font-size:clamp(17px,2.2vw,23px);font-weight:800;line-height:1.3}
.nb-form{display:flex;background:#fff;border-radius:99px;padding:5px;min-width:320px}
.nb-form input{flex:1;border:0;font-size:16px;padding:9px 16px;border-radius:99px;font-family:inherit;color:var(--ink)}
.nb-form input:focus{outline:none}
.nb-form button{background:var(--red);color:#fff;border:0;border-radius:99px;font-size:13.5px;font-weight:700;padding:10px 20px;cursor:pointer;font-family:inherit}

/* ---------- responsive ---------- */
@media(max-width:1080px){.bpost-grid{grid-template-columns:1fr 1fr}}
@media(max-width:880px){
  .bh-tiles{display:none}
  .blog-hero .hero-band{padding:40px 28px}
}
@media(max-width:600px){
  .bpost-grid{grid-template-columns:1fr}
  .blog-toolbar{flex-direction:column;align-items:stretch}
  .blog-search input{width:100%}
  .news-band{padding:28px 22px}
  .nb-form{min-width:0;width:100%}
}