/* ============================================================
   Blog & Resources Styles -- GSMCRE
   Uses CSS variables from global.css
   ============================================================ */

/* --- Blog Page Header --- */
.blog-header{background:linear-gradient(135deg,var(--m4),var(--m5));color:#fff;padding:5rem 1.25rem 3rem;text-align:center;margin-top:62px;}
.blog-header h1{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,5vw,2.5rem);font-weight:900;margin-bottom:0.8rem;line-height:1.2;}
.blog-header p{font-size:1rem;opacity:0.9;max-width:500px;margin:0 auto;}

/* --- Blog Layout: Main Content + Sidebar --- */
.blog-layout{max-width:1200px;margin:0 auto;padding:3rem 1.25rem;display:grid;grid-template-columns:1fr 320px;gap:2.5rem;align-items:start;}
@media(max-width:1024px){
  .blog-layout{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .blog-layout{padding:2rem 1rem;gap:2rem;}
}

/* --- Featured Post --- */
.featured-post{background:var(--card);border-radius:10px;overflow:hidden;box-shadow:var(--sh);border:1px solid rgba(107,174,214,0.2);margin-bottom:2.5rem;display:grid;grid-template-columns:1fr 1fr;}
.featured-post .fp-image{background:linear-gradient(135deg,var(--sky-dark),var(--m4));display:flex;align-items:center;justify-content:center;min-height:280px;position:relative;overflow:hidden;}
.featured-post .fp-image .fp-icon{font-size:5rem;opacity:0.5;color:#fff;}
.featured-post .fp-image .fp-badge{position:absolute;top:1rem;left:1rem;background:var(--accent);color:var(--td);font-size:0.62rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:0.3rem 0.7rem;border-radius:3px;}
.featured-post .fp-body{padding:2rem;display:flex;flex-direction:column;justify-content:center;}
.featured-post .fp-body .fp-category{display:inline-block;font-size:0.65rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--sky-dark);margin-bottom:0.6rem;}
.featured-post .fp-body h2{font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:700;color:var(--td);line-height:1.25;margin-bottom:0.7rem;}
.featured-post .fp-body h2 a{color:var(--td);text-decoration:none;transition:color 0.2s;}
.featured-post .fp-body h2 a:hover{color:var(--sky-dark);}
.featured-post .fp-body .fp-excerpt{font-size:0.9rem;color:var(--tm);line-height:1.65;margin-bottom:1rem;}
.featured-post .fp-body .fp-meta{display:flex;gap:1rem;flex-wrap:wrap;font-size:0.72rem;color:var(--tl);font-weight:500;margin-bottom:1.2rem;}
.featured-post .fp-body .fp-read{display:inline-block;font-size:0.75rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--sky-dark);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px;transition:color 0.2s,border-color 0.2s;align-self:flex-start;}
.featured-post .fp-body .fp-read:hover{color:var(--accent);border-color:var(--sky-dark);}
@media(max-width:640px){
  .featured-post{grid-template-columns:1fr;}
  .featured-post .fp-image{min-height:200px;}
  .featured-post .fp-body{padding:1.5rem;}
  .featured-post .fp-body h2{font-size:1.25rem;}
}

/* --- Article Grid --- */
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
@media(max-width:1024px){
  .article-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .article-grid{grid-template-columns:1fr;}
}

/* --- Article Card --- */
.article-card{background:var(--card);border-radius:8px;overflow:hidden;box-shadow:var(--ss);border:1px solid rgba(107,174,214,0.18);transition:transform 0.2s,box-shadow 0.2s;display:flex;flex-direction:column;}
.article-card:hover{transform:translateY(-3px);box-shadow:var(--sh);}
.article-card .ac-image{height:160px;background:linear-gradient(135deg,var(--sky),var(--sky-deep));display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.article-card .ac-image .ac-icon{font-size:2.5rem;opacity:0.45;color:#fff;}
.article-card .ac-image .ac-badge{position:absolute;top:0.7rem;left:0.7rem;background:var(--accent);color:var(--td);font-size:0.58rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:0.22rem 0.55rem;border-radius:2px;}
.article-card .ac-body{padding:1.2rem;flex:1;display:flex;flex-direction:column;}
.article-card .ac-body .ac-category{font-size:0.62rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--sky-dark);margin-bottom:0.4rem;}
.article-card .ac-body h3{font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:700;color:var(--td);line-height:1.3;margin-bottom:0.5rem;}
.article-card .ac-body h3 a{color:var(--td);text-decoration:none;transition:color 0.2s;}
.article-card .ac-body h3 a:hover{color:var(--sky-dark);}
.article-card .ac-body .ac-excerpt{font-size:0.82rem;color:var(--tm);line-height:1.6;margin-bottom:0.8rem;flex:1;}
.article-card .ac-body .ac-meta{display:flex;gap:0.8rem;flex-wrap:wrap;font-size:0.68rem;color:var(--tl);font-weight:500;margin-bottom:0.8rem;}
.article-card .ac-body .ac-read{font-size:0.7rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--sky-dark);text-decoration:none;border-bottom:1.5px solid var(--accent);padding-bottom:1px;transition:color 0.2s,border-color 0.2s;align-self:flex-start;}
.article-card .ac-body .ac-read:hover{color:var(--accent);border-color:var(--sky-dark);}

/* --- Sidebar --- */
.blog-sidebar{display:flex;flex-direction:column;gap:1.8rem;}
@media(max-width:1024px){
  .blog-sidebar{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;}
}
@media(max-width:640px){
  .blog-sidebar{grid-template-columns:1fr;}
}

.sidebar-box{background:var(--card);border-radius:8px;padding:1.5rem;box-shadow:var(--ss);border:1px solid rgba(107,174,214,0.18);}
.sidebar-box h4{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700;color:var(--td);margin-bottom:1rem;}

/* Newsletter Signup */
.newsletter-form{display:flex;flex-direction:column;gap:0.6rem;}
.newsletter-form input[type="email"]{width:100%;padding:0.7rem 0.9rem;border-radius:4px;border:1.5px solid rgba(107,174,214,0.35);font-family:'Raleway',sans-serif;font-size:0.85rem;color:var(--td);outline:none;transition:border-color 0.2s;}
.newsletter-form input[type="email"]:focus{border-color:var(--sky-deep);}
.newsletter-form button{width:100%;background:var(--sky-dark);color:#fff;font-family:'Raleway',sans-serif;font-weight:700;font-size:0.78rem;letter-spacing:0.1em;text-transform:uppercase;padding:0.7rem;border:none;border-radius:4px;cursor:pointer;transition:background 0.2s;}
.newsletter-form button:hover{background:var(--m5);}
.newsletter-form .nl-note{font-size:0.65rem;color:var(--tl);text-align:center;margin-top:0.2rem;}

/* Tag Cloud */
.tag-cloud{display:flex;flex-wrap:wrap;gap:0.4rem;}
.tag-cloud a{display:inline-block;font-size:0.7rem;font-weight:600;color:var(--sky-dark);text-decoration:none;background:rgba(107,174,214,0.1);padding:0.35rem 0.7rem;border-radius:20px;border:1px solid rgba(107,174,214,0.2);transition:all 0.2s;}
.tag-cloud a:hover{background:var(--sky-dark);color:#fff;border-color:var(--sky-dark);}

/* Recent Posts */
.recent-posts{list-style:none;padding:0;margin:0;}
.recent-posts li{margin-bottom:0.8rem;padding-bottom:0.8rem;border-bottom:1px solid rgba(107,174,214,0.12);}
.recent-posts li:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none;}
.recent-posts li a{font-size:0.85rem;font-weight:600;color:var(--td);text-decoration:none;line-height:1.4;transition:color 0.2s;display:block;}
.recent-posts li a:hover{color:var(--sky-dark);}
.recent-posts li .rp-date{font-size:0.68rem;color:var(--tl);margin-top:0.2rem;}

/* --- Article Page (article.html) --- */
.article-hero{background:linear-gradient(135deg,var(--m4),var(--m5));color:#fff;padding:5rem 1.25rem 2.5rem;text-align:center;margin-top:62px;}
.article-hero .ah-category{display:inline-block;font-size:0.65rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-light);background:rgba(255,255,255,0.1);padding:0.3rem 0.8rem;border-radius:3px;margin-bottom:1rem;}
.article-hero h1{font-family:'Playfair Display',serif;font-size:clamp(1.6rem,5vw,2.4rem);font-weight:900;line-height:1.2;margin-bottom:0.8rem;max-width:700px;margin-left:auto;margin-right:auto;}
.article-hero .ah-meta{display:flex;gap:1.2rem;flex-wrap:wrap;justify-content:center;font-size:0.8rem;color:rgba(245,248,250,0.75);font-weight:500;}
.article-hero .ah-meta span{display:inline-flex;align-items:center;gap:0.3rem;}

.article-content-wrap{max-width:780px;margin:0 auto;padding:3rem 1.25rem;}
@media(max-width:640px){
  .article-content-wrap{padding:2rem 1rem;}
}

/* Back to Blog link */
.back-link{display:inline-flex;align-items:center;gap:0.4rem;font-size:0.78rem;font-weight:600;color:var(--sky-dark);text-decoration:none;margin-bottom:2rem;transition:color 0.2s;}
.back-link:hover{color:var(--accent);}

/* Article Body Typography */
.article-body{font-size:1rem;line-height:1.8;color:var(--td);}
.article-body p{margin-bottom:1.4rem;color:var(--tm);}
.article-body p:first-child{font-size:1.08rem;color:var(--td);}
.article-body h2{font-family:'Playfair Display',serif;font-size:1.4rem;font-weight:700;color:var(--td);margin:2rem 0 0.8rem;}
.article-body h3{font-family:'Playfair Display',serif;font-size:1.15rem;font-weight:700;color:var(--td);margin:1.5rem 0 0.6rem;}
.article-body ul,.article-body ol{margin:0 0 1.4rem 1.5rem;color:var(--tm);}
.article-body li{margin-bottom:0.5rem;}
.article-body strong{color:var(--td);}
.article-body blockquote{border-left:3px solid var(--accent);padding:0.8rem 1.2rem;margin:1.5rem 0;background:rgba(200,169,110,0.06);color:var(--tm);font-style:italic;}

/* Article Tags */
.article-tags{display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(107,174,214,0.2);}
.article-tags span{font-size:0.7rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--tl);margin-right:0.3rem;}
.article-tags a{font-size:0.7rem;color:var(--sky-dark);text-decoration:none;background:rgba(107,174,214,0.08);padding:0.25rem 0.6rem;border-radius:3px;transition:all 0.2s;}
.article-tags a:hover{background:var(--sky-dark);color:#fff;}

/* Article CTA Section */
.article-cta{background:linear-gradient(135deg,var(--m4),var(--m5));color:#fff;padding:2.5rem 1.5rem;border-radius:8px;text-align:center;margin-top:3rem;}
.article-cta h3{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:700;margin-bottom:0.6rem;}
.article-cta p{font-size:0.9rem;opacity:0.85;margin-bottom:1.5rem;max-width:400px;margin-left:auto;margin-right:auto;}
.article-cta .btn-p{background:var(--accent);color:var(--td);font-family:'Raleway',sans-serif;font-weight:700;font-size:0.82rem;letter-spacing:0.14em;text-transform:uppercase;padding:0.85rem 1.9rem;border-radius:3px;border:none;cursor:pointer;text-decoration:none;display:inline-block;transition:background 0.2s,transform 0.15s;}
.article-cta .btn-p:hover{background:var(--accent-light);transform:translateY(-1px);}

/* Related Articles */
.related-section{margin-top:3rem;}
.related-section h3{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:700;color:var(--td);margin-bottom:1.2rem;}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;}
@media(max-width:640px){
  .related-grid{grid-template-columns:1fr;}
}
.related-card{background:var(--card);border-radius:8px;overflow:hidden;box-shadow:var(--ss);border:1px solid rgba(107,174,214,0.18);transition:transform 0.2s;}
.related-card:hover{transform:translateY(-2px);}
.related-card .rc-image{height:120px;background:linear-gradient(135deg,var(--sky),var(--sky-deep));display:flex;align-items:center;justify-content:center;}
.related-card .rc-image .rc-icon{font-size:2rem;opacity:0.4;color:#fff;}
.related-card .rc-body{padding:1rem;}
.related-card .rc-body .rc-category{font-size:0.6rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--sky-dark);margin-bottom:0.3rem;}
.related-card .rc-body h4{font-family:'Playfair Display',serif;font-size:0.9rem;font-weight:700;color:var(--td);line-height:1.3;margin-bottom:0.3rem;}
.related-card .rc-body h4 a{color:var(--td);text-decoration:none;transition:color 0.2s;}
.related-card .rc-body h4 a:hover{color:var(--sky-dark);}
.related-card .rc-body .rc-date{font-size:0.68rem;color:var(--tl);}

/* Loading / Error states for article page */
.article-loading{text-align:center;padding:4rem 1rem;color:var(--tl);}
.article-loading p{font-size:0.9rem;}
.article-error{text-align:center;padding:4rem 1rem;}
.article-error h2{font-family:'Playfair Display',serif;font-size:1.5rem;color:var(--td);margin-bottom:0.5rem;}
.article-error p{color:var(--tm);margin-bottom:1.5rem;}