/* =====================================================================
   WE PRACHAR — BLOG LISTING STYLES
   featured post · search + categories · grid · subscribe band
   ===================================================================== */
/* ---------- Featured post ---------- */
.fpost { display: grid; grid-template-columns: 1.45fr 1fr; align-items: stretch; border-radius: var(--r-xl); overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.fpost__media { position: relative; aspect-ratio: 16 / 9; min-height: 0; overflow: hidden; background: var(--bg-2); }
.fpost__media .bart__ic { width: 90px; height: 90px; border-radius: 26px; }
.fpost__media .bart__ic .ic { width: 38px; height: 38px; }
.fpost:hover .bart { transform: scale(1.04); }
.fpost__badge { position: absolute; left: 18px; top: 18px; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 800; }
.fpost__badge .ic { width: 14px; height: 14px; }
.fpost__body { padding: clamp(26px, 4vw, 50px); display: grid; gap: 16px; align-content: center; justify-items: start; }
.fpost__title { font-size: clamp(1.6rem, 2.8vw, 2.4rem); }
.fpost__title a:hover { color: var(--accent-2); }
.fpost__ex { color: var(--muted); }

/* ---------- Search + categories ---------- */
.blog__head { display: flex; align-items: end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.blog__head .sec-head { margin-bottom: 24px; }
.blog__search { position: relative; display: flex; align-items: center; margin-bottom: 28px; width: min(100%, 340px); }
.blog__search .ic { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--dim); pointer-events: none; }
.blog__search input { width: 100%; height: 50px; padding: 0 18px 0 46px; border-radius: 99px; background: var(--card); border: 1.5px solid var(--line); color: var(--ink); font: inherit; transition: border-color .25s, box-shadow .25s; }
.blog__search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255, 105, 0, .12); }
.blog__cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.pff { height: 40px; padding: 0 18px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); font-weight: 700; font-size: 14px; color: var(--muted); transition: color .3s, background .3s, border-color .3s; }
.pff:hover { color: var(--ink); border-color: var(--line-2); }
.pff.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.blog__grid .bcard[hidden] { display: none; }
.blog__empty { color: var(--muted); padding: 24px 0; }

/* ---------- Subscribe band ---------- */
.subs__card { border-radius: var(--r-xl); background: var(--ink); color: var(--bg); display: grid; place-items: center; text-align: center; }
.subs__in { display: grid; gap: 18px; justify-items: center; padding: clamp(36px, 6vw, 70px) 22px; max-width: 720px; }
.subs__in .tag { background: rgba(255, 255, 255, .1); color: #FFE5CC; }
.subs__in p { color: #cfc8bc; }
.subs__in .btn--primary { background: var(--accent); color: #fff; }
.subs__in .btn--primary:hover { background: #fff; color: var(--ink); }

@media (max-width: 1100px) { .blog__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .fpost { grid-template-columns: 1fr; } .fpost__media { min-height: 230px; } }
@media (max-width: 640px) { .blog__grid { grid-template-columns: 1fr; } .blog__search { width: 100%; } }

.fpost__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.fpost:hover .fpost__media img { transform: scale(1.04); }
.bcard__media img { transition: transform .8s var(--ease); }
.bcard:hover .bcard__media img { transform: scale(1.05); }
.blog__grid { gap: clamp(18px, 2.4vw, 30px); }
@media (max-width: 860px) { .fpost__media { min-height: 0; } }
.fpost > * { min-width: 0; }
.fpost__media { width: 100%; }
@media (max-width: 860px) { .fpost__media { align-self: auto; } }