/* ============================================
   BLOG PAGE STYLES - SkadedyrStop
   ============================================ */

/* Blog Hero */
.blog-hero{position:relative;padding:calc(var(--header-height) + var(--header-topbar) + 3rem) var(--container-padding) 3rem;overflow:hidden}
.blog-hero__bg{position:absolute;inset:0;background:linear-gradient(135deg,var(--gray-900) 0%,var(--gray-800) 100%);z-index:-1}
.blog-hero__gradient{position:absolute;top:0;right:0;width:60%;height:100%;background:linear-gradient(135deg,transparent 0%,rgba(13,148,136,0.15) 100%);pointer-events:none}
.blog-hero__pattern{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.03) 1px,transparent 1px);background-size:32px 32px;opacity:0.5}
.blog-hero__container{max-width:var(--container-max);margin:0 auto;position:relative}

.blog-hero__breadcrumb{display:flex;align-items:center;gap:0.5rem;margin-bottom:1.5rem}
.blog-hero__breadcrumb-link{display:flex;align-items:center;gap:0.375rem;color:var(--gray-400);font-size:0.875rem;transition:color var(--transition)}
.blog-hero__breadcrumb-link:hover{color:#fff}
.blog-hero__breadcrumb-link img{filter:brightness(0) invert(1);opacity:0.7}
.blog-hero__breadcrumb-sep{filter:brightness(0) invert(1);opacity:0.4}
.blog-hero__breadcrumb-current{color:var(--primary-light);font-size:0.875rem;font-weight:500}

.blog-hero__content{max-width:700px}
.blog-hero__label{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;background:rgba(13,148,136,0.15);color:var(--primary-light);font-size:0.8125rem;font-weight:600;border-radius:var(--radius-full);margin-bottom:1rem}
.blog-hero__label img{filter:brightness(0) saturate(100%) invert(56%) sepia(52%) saturate(515%) hue-rotate(127deg) brightness(94%) contrast(91%)}
.blog-hero__title{font-size:clamp(2rem,5vw,3rem);font-weight:800;color:#fff;line-height:1.1;margin-bottom:1rem}
.blog-hero__subtitle{font-size:1.0625rem;color:var(--gray-300);line-height:1.7;margin-bottom:2rem}

.blog-hero__stats{display:flex;flex-wrap:wrap;gap:1.5rem}
.blog-hero__stat{display:flex;align-items:center;gap:0.625rem;padding:0.75rem 1rem;background:rgba(255,255,255,0.05);border-radius:var(--radius);border:1px solid rgba(255,255,255,0.08)}
.blog-hero__stat img{filter:brightness(0) invert(1);opacity:0.6}
.blog-hero__stat-num{font-size:1.125rem;font-weight:700;color:#fff}
.blog-hero__stat-label{font-size:0.8125rem;color:var(--gray-400)}

/* Blog Main */
.blog-main{padding:4rem var(--container-padding)}
.blog-main__container{max-width:var(--container-max);margin:0 auto}

/* Blog Grid */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem;margin-bottom:3rem}

/* Blog Card */
.blog-card{background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:all var(--transition)}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.blog-card__link{display:block;color:inherit}
.blog-card__image{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--gray-100)}
.blog-card__image img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}
.blog-card:hover .blog-card__image img{transform:scale(1.05)}
.blog-card__category{position:absolute;top:1rem;left:1rem;display:inline-flex;align-items:center;gap:0.375rem;padding:0.375rem 0.75rem;background:var(--primary);color:#fff;font-size:0.75rem;font-weight:600;border-radius:var(--radius-full)}
.blog-card__category img{filter:brightness(0) invert(1)}
.blog-card__body{padding:1.5rem}
.blog-card__meta{display:flex;align-items:center;gap:1rem;margin-bottom:0.75rem}
.blog-card__date{font-size:0.8125rem;color:var(--gray-500)}
.blog-card__time{display:flex;align-items:center;gap:0.375rem;font-size:0.8125rem;color:var(--gray-500)}
.blog-card__time img{opacity:0.5}
.blog-card__title{font-size:1.125rem;font-weight:700;color:var(--gray-900);line-height:1.4;margin-bottom:0.75rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-card__excerpt{font-size:0.9375rem;color:var(--gray-600);line-height:1.6;margin-bottom:1rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-card__more{display:inline-flex;align-items:center;gap:0.375rem;font-size:0.875rem;font-weight:600;color:var(--primary);transition:gap var(--transition)}
.blog-card:hover .blog-card__more{gap:0.625rem}
.blog-card__more img{filter:brightness(0) saturate(100%) invert(42%) sepia(52%) saturate(1053%) hue-rotate(127deg) brightness(92%) contrast(101%)}

/* Pagination */
.blog-pagination{display:flex;align-items:center;justify-content:center;gap:0.5rem;padding:2rem 0;margin-bottom:3rem}
.blog-pagination__btn{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1.25rem;background:var(--gray-100);color:var(--gray-700);font-weight:500;font-size:0.875rem;border-radius:var(--radius);transition:all var(--transition)}
.blog-pagination__btn:hover{background:var(--gray-200)}
.blog-pagination__btn--prev img{transform:rotate(180deg)}
.blog-pagination__nums{display:flex;align-items:center;gap:0.25rem}
.blog-pagination__num{min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-weight:500;color:var(--gray-600);border-radius:var(--radius);transition:all var(--transition)}
.blog-pagination__num:hover{background:var(--gray-100)}
.blog-pagination__num--active{background:var(--primary);color:#fff}
.blog-pagination__num--active:hover{background:var(--primary-dark)}
.blog-pagination__dots{padding:0 0.5rem;color:var(--gray-400)}

/* Popular Articles */
.blog-popular{padding:3rem 0;border-top:1px solid var(--gray-200);margin-bottom:3rem}
.blog-popular__header{text-align:center;margin-bottom:2.5rem}
.blog-popular__label{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;background:var(--primary-50);color:var(--primary);font-size:0.8125rem;font-weight:600;border-radius:var(--radius-full);margin-bottom:1rem}
.blog-popular__label img{filter:brightness(0) saturate(100%) invert(42%) sepia(52%) saturate(1053%) hue-rotate(127deg) brightness(92%) contrast(101%)}
.blog-popular__title{font-size:1.75rem;font-weight:800;color:var(--gray-900);margin-bottom:0.5rem}
.blog-popular__desc{font-size:1rem;color:var(--gray-600)}

.blog-popular__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.blog-popular__card{position:relative;background:linear-gradient(135deg,var(--gray-900) 0%,var(--gray-800) 100%);border-radius:var(--radius-lg);overflow:hidden;transition:transform var(--transition)}
.blog-popular__card:hover{transform:translateY(-4px)}
.blog-popular__link{display:block;padding:1.5rem;color:#fff;min-height:240px}
.blog-popular__icon{width:48px;height:48px;background:rgba(13,148,136,0.2);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
.blog-popular__icon img{filter:brightness(0) saturate(100%) invert(56%) sepia(52%) saturate(515%) hue-rotate(127deg) brightness(94%) contrast(91%)}
.blog-popular__badge{position:absolute;top:1rem;right:1rem;padding:0.25rem 0.625rem;background:var(--primary);font-size:0.6875rem;font-weight:700;text-transform:uppercase;border-radius:var(--radius-sm)}
.blog-popular__card-title{font-size:1.125rem;font-weight:700;line-height:1.4;margin-bottom:0.75rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-popular__card-excerpt{font-size:0.875rem;color:var(--gray-400);line-height:1.6;margin-bottom:1rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-popular__card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.blog-popular__date{font-size:0.8125rem;color:var(--gray-500)}
.blog-popular__arrow{width:36px;height:36px;background:rgba(255,255,255,0.1);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background var(--transition)}
.blog-popular__card:hover .blog-popular__arrow{background:var(--primary)}
.blog-popular__arrow img{filter:brightness(0) invert(1)}

/* CTA Section */
.blog-cta{position:relative;padding:3rem;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);border-radius:var(--radius-xl);overflow:hidden}
.blog-cta__bg{position:absolute;inset:0;pointer-events:none}
.blog-cta__glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:0.3}
.blog-cta__glow--1{top:-50%;right:-20%;width:400px;height:400px;background:#fff}
.blog-cta__glow--2{bottom:-30%;left:-10%;width:300px;height:300px;background:var(--accent)}
.blog-cta__content{position:relative;display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:768px){.blog-cta__content{grid-template-columns:1.5fr 1fr;align-items:center}}

.blog-cta__text{color:#fff}
.blog-cta__label{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;background:rgba(255,255,255,0.15);font-size:0.8125rem;font-weight:600;border-radius:var(--radius-full);margin-bottom:1rem}
.blog-cta__label img{filter:brightness(0) invert(1)}
.blog-cta__title{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;margin-bottom:0.75rem}
.blog-cta__desc{font-size:1rem;opacity:0.9;line-height:1.7;margin-bottom:1.5rem}
.blog-cta__features{display:flex;flex-wrap:wrap;gap:1rem}
.blog-cta__feature{display:flex;align-items:center;gap:0.5rem;font-size:0.9375rem;font-weight:500}
.blog-cta__feature img{filter:brightness(0) invert(1)}

.blog-cta__action{display:flex;justify-content:center}
.blog-cta__card{padding:2rem;background:#fff;border-radius:var(--radius-lg);text-align:center;width:100%;max-width:280px}
.blog-cta__card-icon{width:64px;height:64px;background:var(--primary-50);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}
.blog-cta__card-icon img{filter:brightness(0) saturate(100%) invert(42%) sepia(52%) saturate(1053%) hue-rotate(127deg) brightness(92%) contrast(101%)}
.blog-cta__card-label{display:block;font-size:0.8125rem;color:var(--gray-500);margin-bottom:0.5rem}
.blog-cta__phone{display:block;font-size:1.5rem;font-weight:800;color:var(--gray-900);margin-bottom:1rem;transition:color var(--transition)}
.blog-cta__phone:hover{color:var(--primary)}
.blog-cta__divider{position:relative;margin-bottom:1rem;color:var(--gray-400);font-size:0.8125rem}
.blog-cta__divider span{position:relative;background:#fff;padding:0 0.75rem}
.blog-cta__divider::before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:var(--gray-200)}
.blog-cta__btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;width:100%;padding:0.875rem 1.5rem;background:var(--primary);color:#fff;font-weight:600;border-radius:var(--radius);transition:all var(--transition)}
.blog-cta__btn:hover{background:var(--primary-dark)}
.blog-cta__btn img{filter:brightness(0) invert(1)}

/* Back to Top */
.page-blog .back-to-top img{transform:rotate(-90deg)}

/* Responsive */
@media(max-width:768px){
    .blog-hero{padding-top:calc(var(--header-height) + 2rem)}
    .blog-hero__stats{gap:1rem}
    .blog-hero__stat{flex:1;min-width:140px;justify-content:center}
    .blog-grid{grid-template-columns:1fr}
    .blog-cta{padding:2rem 1.5rem}
    .blog-cta__features{flex-direction:column;gap:0.75rem}
}

@media(max-width:480px){
    .blog-hero__label{font-size:0.75rem;padding:0.375rem 0.75rem}
    .blog-hero__stats{flex-direction:column}
    .blog-hero__stat{width:100%}
    .blog-pagination__btn span{display:none}
    .blog-pagination__btn{padding:0.75rem}
}