.page-blog{display:block;width:100%;max-width:100%;overflow-x:hidden;box-sizing:border-box;color:#FFF3E6;background-color:#0D0E12}
.page-blog *,.page-blog *::before,.page-blog *::after{box-sizing:border-box}
.page-blog img{max-width:100%;height:auto}

/* 1. Hero section */
.page-blog__hero-section{display:flex;flex-direction:column;align-items:center;gap:0;padding:10px 0 0;width:100%}
.page-blog__hero-image{width:100%;max-width:1200px;margin:0 auto;padding:0 16px}
.page-blog__hero-image img{display:block;width:100%;aspect-ratio:17/5;object-fit:cover;border-radius:12px;border:1px solid #A84F0C}
.page-blog__hero-content{width:100%;max-width:1200px;margin:0 auto;padding:20px 16px 24px;text-align:center}
.page-blog__main-title{font-size:clamp(1.4rem, 3vw, 2.2rem);font-weight:800;line-height:1.25;color:#FFF3E6;text-shadow:0 2px 8px rgba(0,0,0,0.3);margin:0 0 12px;letter-spacing:0.5px}
.page-blog__lead-text{font-size:clamp(1rem, 1.5vw, 1.15rem);color:#FFD9A8;line-height:1.6;max-width:750px;margin:0 auto 20px}
.page-blog__hero-cta{display:inline-block;padding:14px 34px;border-radius:999px;background:linear-gradient(180deg, #FFA53A 0%, #D96800 100%);color:#fff;font-weight:700;font-size:1.05rem;text-decoration:none;border:1px solid #A84F0C;transition:transform 0.2s, box-shadow 0.2s;box-shadow:0 4px 15px rgba(255, 165, 58, 0.25)}
.page-blog__hero-cta:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(255, 140, 26, 0.5)}

/* 2. Featured blog grid */
.page-blog__featured-grid{display:grid;grid-template-columns:repeat(12, 1fr);gap:16px;max-width:1200px;margin:8px auto 32px;padding:0 16px}
.page-blog__featured-card{background-color:#17191F;border:1px solid #A84F0C;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;grid-column:span 4;transition:transform 0.25s, box-shadow 0.25s}
.page-blog__featured-card--large{grid-column:span 6;flex-direction:row}
.page-blog__featured-card--large .page-blog__card-body{flex:1;padding:16px;display:flex;flex-direction:column;justify-content:center}
.page-blog__featured-card--large img{width:50%;aspect-ratio:4/3;object-fit:cover}
.page-blog__featured-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-bottom:1px solid #A84F0C}
.page-blog__card-body{padding:14px;display:flex;flex-direction:column;flex:1}
.page-blog__card-tag{align-self:flex-start;background-color:rgba(255, 140, 26, 0.18);color:#FFB04D;font-size:0.78rem;font-weight:700;padding:4px 12px;border-radius:999px;border:1px solid #A84F0C;margin-bottom:10px;text-transform:uppercase;letter-spacing:0.5px}
.page-blog__card-title{font-size:1.15rem;font-weight:800;line-height:1.4;margin:0 0 10px;color:#FFF3E6}
.page-blog__card-title a{color:#FFF3E6;text-decoration:none;transition:color 0.2s}
.page-blog__card-title a:hover{color:#FFB04D}
.page-blog__card-excerpt{font-size:0.92rem;line-height:1.5;color:#D0DDE7;flex:1;margin:0 0 14px}
.page-blog__card-link{display:inline-block;padding:9px 20px;border-radius:999px;background:linear-gradient(180deg, #FFA53A 0%, #D96800 100%);color:#fff;font-weight:700;font-size:0.9rem;text-decoration:none;border:1px solid #A84F0C;text-align:center;transition:box-shadow 0.2s;max-width:100%;white-space:normal;word-wrap:break-word}
.page-blog__card-link:hover{box-shadow:0 0 15px rgba(255, 176, 77, 0.45)}

/* 3. Guide/FAQ section */
.page-blog__guide-section{width:100%;padding:24px 16px 48px;background-color:#0D0E12}
.page-blog__guide-inner{max-width:1000px;margin:0 auto}
.page-blog__guide-title{text-align:center;font-size:clamp(1.5rem, 3vw, 2.2rem);font-weight:800;color:#FFF3E6;margin:0 0 12px}
.page-blog__guide-description{text-align:center;color:#FFD9A8;font-size:1rem;line-height:1.6;max-width:720px;margin:0 auto 24px}
.page-blog__guide-figure{margin:0 0 20px}
.page-blog__guide-figure img{width:100%;max-width:800px;aspect-ratio:2/1;object-fit:cover;border-radius:12px;border:1px solid #A84F0C;margin:0 auto;display:block}
.page-blog__faq-item{border:1px solid #A84F0C;border-radius:10px;background-color:#17191F;margin-bottom:12px;overflow:hidden}
.page-blog__faq-item summary{list-style:none;cursor:pointer;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:1.02rem;color:#FFF3E6;transition:background-color 0.2s;gap:12px}
.page-blog__faq-item summary:hover{background-color:rgba(255, 140, 26, 0.08)}
.page-blog__faq-item summary::-webkit-details-marker{display:none}
.page-blog__faq-toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;background-color:rgba(255,140,26,0.15);border:1px solid #A84F0C;border-radius:50%;color:#FFB04D;font-weight:700;font-size:1.2rem;line-height:1;transition:transform 0.2s}
.page-blog__faq-item[open] .page-blog__faq-toggle{transform:rotate(45deg);color:#FFF3E6}
.page-blog__faq-content{padding:0 20px 16px;margin:0;color:#D0DDE7;font-size:0.95rem;line-height:1.65}

/* 4. 1024px responsive */
@media (max-width: 1024px){
  .page-blog__featured-card{grid-column:span 6}
  .page-blog__featured-card--large{grid-column:span 12;flex-direction:row}
  .page-blog__featured-card--large img{width:50%}
}

/* 5. 768px responsive */
@media (max-width: 768px){
  .page-blog__hero-section{padding-top:8px}
  .page-blog__hero-image img{aspect-ratio:2/1;border-radius:8px}
  .page-blog__featured-grid{grid-template-columns:1fr;gap:14px;padding:0 12px}
  .page-blog__featured-card,.page-blog__featured-card--large{grid-column:span 1;flex-direction:column}
  .page-blog__featured-card--large img,.page-blog__featured-card img{width:100%;aspect-ratio:16/9}
  .page-blog__guide-figure img{aspect-ratio:16/9}
  .page-blog__hero-cta,.page-blog__card-link{max-width:100%;box-sizing:border-box;white-space:normal;word-wrap:break-word;text-align:center}
  .page-blog__hero-content{padding-left:12px;padding-right:12px}
  .page-blog img{max-width:100% !important;height:auto !important;width:auto !important}
  .page-blog{overflow-x:hidden;max-width:100%}
}