@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";
.blog-page{max-width:1100px;margin:0 auto;padding:80px 20px 100px;font-family:Inter,sans-serif}.blog-header{text-align:center;margin-bottom:50px}.blog-header-eyebrow{color:#ec4899;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;font-size:13px;font-weight:700;display:inline-block}.blog-header h1{color:#1e293b;margin-top:1px;font-family:"M PLUS Rounded 1c",sans-serif;font-size:42px;font-weight:600}.blog-header p{color:#64748b;font-size:17px;font-weight:500}.blog-grid{grid-template-columns:repeat(auto-fit,minmax(300px,360px));justify-content:center;gap:30px;display:grid}.blog-card{color:inherit;background:#fff;border:1px solid #f1f5f9;border-radius:20px;flex-direction:column;text-decoration:none;transition:transform .3s,box-shadow .3s,border-color .3s;animation:.5s both blog-card-in;display:flex;overflow:hidden;box-shadow:0 6px 20px #0000000d}.blog-card:hover{border-color:#fbcfe8;transform:translateY(-6px);box-shadow:0 16px 35px #ec489924}@keyframes blog-card-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.blog-card-image-wrap{background:linear-gradient(135deg,#fdf2f8,#eaf7fc);justify-content:center;align-items:center;width:100%;height:200px;display:flex;overflow:hidden}.blog-card-image{object-fit:contain;width:100%;height:100%;display:block}.blog-card:hover .blog-card-image{transform:scale(1.06)}.blog-card-image-placeholder{color:#f0abd0;background:linear-gradient(135deg,#fdf2f8,#eaf7fc);justify-content:center;align-items:center;width:100%;height:200px;display:flex}.blog-card-image-placeholder svg{width:42px;height:42px}.blog-card-body{flex-direction:column;flex:1;gap:8px;padding:22px;display:flex}.blog-card-category{color:#ec4899;text-transform:uppercase;letter-spacing:.5px;background:#fce7f3;border-radius:20px;align-self:flex-start;align-items:center;margin-bottom:2px;padding:4px 10px;font-size:11.5px;font-weight:700;display:inline-flex}.category-daycare{color:#0369a1;background:#e0f2fe}.category-boarding{color:#7c3aed;background:#ede9fe}.category-grooming{color:#be185d;background:#fce7f3}.category-veterinary{color:#15803d;background:#dcfce7}.category-swimming-pool{color:#0891b2;background:#cffafe}.category-playground{color:#ca8a04;background:#fef9c3}.category-training{color:#c2410c;background:#ffedd5}.category-pick-drop{color:#4338ca;background:#e0e7ff}.blog-card-title{color:#0f172a;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;font-family:"M PLUS Rounded 1c",sans-serif;font-size:20px;font-weight:600;line-height:1.3;display:-webkit-box;overflow:hidden}.blog-card-excerpt{color:#64748b;-webkit-line-clamp:3;-webkit-box-orient:vertical;flex:1;margin:0;font-size:14.5px;line-height:1.6;display:-webkit-box;overflow:hidden}.blog-card-footer{border-top:1px solid #f1f5f9;justify-content:space-between;align-items:center;margin-top:8px;padding-top:12px;display:flex}.blog-card-date{color:#94a3b8;font-size:13px}.blog-card-readmore{color:#ec4899;align-items:center;gap:4px;font-size:13px;font-weight:700;transition:gap .2s;display:inline-flex}.blog-card:hover .blog-card-readmore{gap:8px}.blog-empty-state{text-align:center;color:#94a3b8;padding:80px 20px;font-size:16px}.blog-empty-state svg{color:#f0abd0;width:48px;height:48px;margin-bottom:16px}.blog-card-skeleton{background:#fff;border:1px solid #f1f5f9;border-radius:20px;overflow:hidden;box-shadow:0 6px 20px #0000000a}.blog-skeleton-image{background:linear-gradient(90deg,#f1f5f9 25%,#f8fafc 50%,#f1f5f9 75%) 0 0/200% 100%;height:200px;animation:1.4s infinite blog-shimmer}.blog-skeleton-line{background:linear-gradient(90deg,#f1f5f9 25%,#f8fafc 50%,#f1f5f9 75%) 0 0/200% 100%;border-radius:6px;height:14px;margin:22px 22px 0;animation:1.4s infinite blog-shimmer}.blog-skeleton-line:last-child{width:60%;margin-bottom:22px}@keyframes blog-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.blog-post{max-width:780px;margin:0 auto;padding:70px 20px 100px;font-family:Inter,sans-serif}.blog-post-category{color:#be185d;text-transform:uppercase;letter-spacing:.5px;background:#fce7f3;border-radius:20px;margin-bottom:16px;padding:6px 14px;font-size:12px;font-weight:700;display:inline-block}.blog-post h1{color:#1e293b;margin:0 0 12px;font-family:"M PLUS Rounded 1c",sans-serif;font-size:36px;font-weight:600;line-height:1.25}.blog-post-meta{color:#94a3b8;align-items:center;gap:10px;margin-bottom:30px;font-size:14px;display:flex}.blog-post-meta-dot{background:#cbd5e1;border-radius:50%;width:3px;height:3px}.blog-post-image{object-fit:contain;background:linear-gradient(135deg,#fdf2f8,#eaf7fc);border-radius:20px;width:100%;max-height:440px;margin-bottom:40px;box-shadow:0 10px 30px #00000014}.blog-post-content{color:#334155;font-size:17px;line-height:1.8}.blog-post-content p{margin-bottom:20px}.blog-post-content h2{color:#1e293b;margin:36px 0 16px;font-family:"M PLUS Rounded 1c",sans-serif;font-size:26px}.blog-post-content h3{color:#1e293b;margin:28px 0 12px;font-family:"M PLUS Rounded 1c",sans-serif;font-size:21px}.blog-post-content ul,.blog-post-content ol{margin:0 0 20px 20px}.blog-post-content li{margin-bottom:8px}.blog-post-content img{border-radius:14px;width:100%;margin:24px 0;box-shadow:0 8px 24px #0000000f}.blog-post-content blockquote{color:#831843;background:#fdf2f8;border-left:4px solid #ec4899;border-radius:0 12px 12px 0;margin:24px 0;padding:16px 20px;font-style:italic}.blog-post-content a{color:#ec4899;text-underline-offset:2px;text-decoration:underline}.blog-post-content a:hover{color:#db2777}.blog-back-link{color:#ec4899;align-items:center;gap:6px;width:fit-content;margin-bottom:30px;font-size:14px;font-weight:600;text-decoration:none;transition:gap .2s;display:flex}.blog-back-link:hover{gap:10px;text-decoration:underline}.blog-post-share{border-top:1px solid #f1f5f9;align-items:center;gap:12px;margin-top:50px;padding-top:24px;display:flex}.blog-post-share span{color:#64748b;text-transform:uppercase;letter-spacing:.5px;font-size:13px;font-weight:700}.blog-post-share a{color:#64748b;background:#f8fafc;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:background .2s,color .2s,transform .2s;display:inline-flex}.blog-post-share a:hover{color:#ec4899;background:#fce7f3;transform:translateY(-2px)}@media (max-width:768px){.blog-header h1{font-size:30px}.blog-post h1{font-size:28px}.blog-post-image{max-height:260px}.blog-post-content{font-size:16px}.blog-grid{gap:22px}}
