.blog-hero{background-color:var(--bugloos-bg-middle)}.blog-hero__section{position:relative;height:60vh;min-height:500px;overflow:hidden}.blog-hero__image-wrapper{position:absolute;inset:0}.blog-hero__image{width:100%;height:100%;object-fit:cover}.blog-hero__overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.6) 0,rgba(0,0,0,.4) 50%,rgba(0,0,0,.7) 100%)}.blog-hero__back-button{position:absolute;top:var(--spacing-8);left:var(--spacing-8);z-index:20;background-color:rgba(255,255,255,.1);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);color:var(--bugloos-white);padding:var(--spacing-2) var(--spacing-4);border-radius:var(--radius-lg);display:inline-flex;align-items:center;gap:var(--spacing-2);transition:all var(--transition-normal);cursor:pointer;text-decoration:none}.blog-hero__back-button:hover{background-color:rgba(255,255,255,.2)}.blog-hero__content{position:relative;height:100%;display:flex;align-items:flex-end;z-index:10}.blog-hero__inner{max-width:var(--max-width-container);margin:0 auto;padding:0 var(--spacing-4) var(--spacing-16);width:100%}.blog-hero__category-badge{display:inline-flex;align-items:center;gap:var(--spacing-2);background-color:var(--bugloos-primary);color:var(--bugloos-white);padding:var(--spacing-2) var(--spacing-4);border-radius:var(--radius-full);margin-bottom:var(--spacing-4)}.blog-hero__category-badge svg{width:var(--spacing-5)}.blog-hero__title{font-size:var(--text-4xl);font-weight:var(--font-weight-bold);color:var(--bugloos-white);margin-bottom:var(--spacing-6);line-height:var(--leading-tight)}.blog-hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-6);color:rgba(255,255,255,.9)}.blog-hero__meta-item{display:flex;align-items:center;gap:var(--spacing-2)}.blog-hero__meta-item svg{width:var(--spacing-6)}@media (min-width:640px){.blog-hero__inner{padding:0 var(--spacing-6) var(--spacing-16)}}@media (min-width:768px){.blog-hero__title{font-size:var(--text-5xl)}}@media (min-width:1024px){.blog-hero__inner{padding:0 var(--spacing-8) var(--spacing-16)}.blog-hero__title{font-size:var(--text-6xl)}}[dir=rtl] .blog-hero__back-button,html.rtl .blog-hero__back-button{left:auto;right:var(--spacing-8);flex-direction:row-reverse}