/* blog page body (Figma FINAL: Versionw 159:3636 / iPhone 159:4781) */
.blog{padding:64px 0 132px} /* header 80 → 144; list end 1214 → promo 1346 */

.blog__categories{display:flex;justify-content:center;align-items:center;gap:32px}
.blog__category{display:flex;align-items:center;gap:8px;min-width:328px;padding:12px 24px;border-radius:32px;background:linear-gradient(169deg,#FFE0E2 -12%,#FDF0FD 112%)}
.blog__category.is-active{border:1px solid transparent;background:linear-gradient(169deg,#FFE0E2 -12%,#FDF0FD 112%) padding-box,linear-gradient(115deg,#FF3838 -8%,#F2B5B5 170%) border-box}
.blog__category img{width:96px;height:96px;object-fit:cover;flex-shrink:0}
.blog__category-text{display:flex;flex-direction:column;gap:4px}
.blog__category-title{font-weight:600;font-size:24px;line-height:29px;letter-spacing:-.48px;color:#000}
.blog__category-sub{font-size:16px;line-height:19.4px;letter-spacing:-.32px;color:#626367}

.blog__feed{display:flex;flex-direction:column;align-items:center;gap:48px;margin-top:64px}
.blog__chips{display:flex;justify-content:center;gap:12px}
.blog__chip{flex-shrink:0;height:56px;padding:16px 24px;border-radius:32px;background:#F2F2F7;color:#000;font-weight:600;font-size:16px;line-height:22px;white-space:nowrap}
.blog__chip.is-active{background:#F43F5E;color:#fff;box-shadow:0 0 0 1px #FFE4E6}

.blog__list{display:flex;flex-direction:column;gap:24px;width:100%}
.blog__row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.blog__card{display:flex;flex-direction:column;min-height:331px;border-radius:24px;background:#fff;box-shadow:0 4px 24px rgba(90,90,90,.14);overflow:hidden}
.blog__card-img{width:100%;height:195px;object-fit:cover;border-radius:12px}
.blog__card-body{display:flex;flex-direction:column;gap:8px;padding:16px}
.blog__card-title{font-weight:600;font-size:24px;line-height:30px;color:#0E0F10}
.blog__card-text{font-size:16px;line-height:22px;color:#48494D}

.blog__more{padding:11px 23px;border:1px solid #FECDD3;border-radius:32px;background:#FF738B;color:#fff;font-weight:600;font-size:16px;line-height:22px}

@media (max-width:1024px){
    .blog{padding:32px 0 56px} /* header ends 88 → 120; list end 3216 → promo 3272 */
    .blog__categories{flex-direction:column;align-items:stretch;gap:8px}
    .blog__category{width:auto;padding:12px 16px;border-radius:24px;background:linear-gradient(162deg,#FFE0E2 -12%,#FDF0FD 112%)}
    .blog__category.is-active{background:linear-gradient(162deg,#FFE0E2 -12%,#FDF0FD 112%) padding-box,linear-gradient(115deg,#FF3838 -8%,#F2B5B5 170%) border-box}
    .blog__category img{width:48px;height:48px}
    .blog__category-title{font-size:16px;line-height:19.4px;letter-spacing:-.32px}
    .blog__category-sub{font-size:14px;line-height:16.9px;letter-spacing:-.28px}

    .blog__feed{gap:24px;margin-top:24px}
    /* chips row overflows the 390 frame → swipeable, bleeds to the screen edges */
    .blog__chips{align-self:stretch;justify-content:flex-start;height:56px;align-items:center;margin:0 -16px;padding:0 16px;overflow-x:auto;scrollbar-width:none}
    .blog__chips::-webkit-scrollbar{display:none}
    .blog__chip{height:46px;padding:12px 24px}

    .blog__row{grid-template-columns:1fr}
    .blog__card-img{height:195px}
}

/* gap promo → CTA (Figma: 1892→2010 desktop, 4232→4375 mobile) */
.cta{margin-top:118px}
@media (max-width:1024px){.cta{margin-top:143px}}

/* ===== Motion ===== */
.blog__card,.blog__category{transition:translate .25s ease}
.blog__card:hover,.blog__category:hover{translate:0 -4px}
.blog__chip{transition:background .2s,color .2s,border-color .2s}

/* ===== Mobile typography (deliberate deviation from the 390 Figma frame, agreed with the client):
   section titles 28/34 so they outrank card titles, card titles 18/24, roomier hero subtitle ===== */
@media (max-width:1024px){
  .blog__card-title{font-size:18px;line-height:24px}
  .blog__card-text{font-size:14px;line-height:20px}
}