/* ETS Tech — page-specific styles for "Blog" */

.blog-clamp { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.blog-nav-links { display:flex; align-items:center; gap:24px; }
.blog-hero { padding:120px 48px 32px; text-align:center; }
.blog-hero-inner { max-width:820px; margin:0 auto; }
.hero-badge-blog { display:inline-flex; align-items:center; gap:9px; padding:9px 18px; border-radius:999px; background:rgba(255,255,255,.6); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.55); box-shadow:0 6px 22px rgba(15,84,112,.08); color:#0f5470; font-size:13px; font-weight:600; letter-spacing:.4px; margin-bottom:26px; text-transform:uppercase; }
.blog-hero-title { font-size:60px; line-height:1.06; font-weight:700; letter-spacing:-1.5px; margin-bottom:20px; }
.blog-hero-subtitle { font-size:18.5px; line-height:1.68; color:#4a5568; max-width:640px; margin:0 auto; }
.filter-section { padding:8px 48px 24px; }
.filter-row { max-width:1200px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.topic-btn { padding:11px 22px; border-radius:999px; border:1px solid rgba(15,84,112,.16); cursor:pointer; font-family:'Inter',sans-serif; font-size:14px; font-weight:600; color:#0f5470; background:rgba(255,255,255,.7); transition:all .22s ease; }
.topic-btn--active { border-color:transparent; color:#fff; background:linear-gradient(135deg,#0f5470,#2eb8eb); box-shadow:0 8px 20px rgba(46,184,235,.28); }
.blog-list-section { padding:16px 48px 60px; }
.container { max-width:1200px; margin:0 auto; width:100%; }
.blog-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:28px; }
.blog-grid > .blog-card { flex:0 0 calc((100% - 56px) / 3); width:calc((100% - 56px) / 3); max-width:calc((100% - 56px) / 3); }
.blog-grid .empty-note { flex:0 0 100%; width:100%; max-width:100%; }
.blog-pagination { width:100%; }
.blog-card { display:flex; flex-direction:column; min-width:0; border-radius:24px; overflow:hidden; border:1px solid rgba(255,255,255,.6); box-shadow:0 14px 44px rgba(15,84,112,.1); background:rgba(255,255,255,.62); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); transition:transform .3s ease, box-shadow .3s ease, opacity .6s ease; opacity:0; transform:translateY(24px); }
.blog-card-media { aspect-ratio:16/10; background:repeating-linear-gradient(45deg,rgba(15,84,112,.08),rgba(15,84,112,.08) 12px,rgba(46,184,235,.1) 12px,rgba(46,184,235,.1) 24px); display:flex; align-items:center; justify-content:center; }
.blog-card-media-caption { font-family:'Space Grotesk',monospace; font-size:12px; color:#6c93ab; }
.blog-card-body { padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.blog-card-meta { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.blog-card-tag { font-family:'Space Grotesk',sans-serif; font-size:11px; letter-spacing:1px; font-weight:600; color:#2eb8eb; padding:5px 11px; border-radius:8px; background:rgba(46,184,235,.1); }
.blog-card-date { font-size:12.5px; color:#8496a4; }
.blog-card-title { font-size:19px; line-height:1.34; letter-spacing:-.2px; margin-bottom:10px; overflow-wrap:anywhere; }
.blog-card-desc { font-size:14.5px; line-height:1.6; margin:0; }
.load-more-wrap { text-align:center; margin-top:52px; }
.load-more-btn { padding:15px 40px; border-radius:999px; border:1px solid rgba(15,84,112,.2); cursor:pointer; font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:600; color:#0f5470; background:rgba(255,255,255,.7); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 10px 28px rgba(15,84,112,.08); transition:transform .25s ease, box-shadow .25s ease; }

@media (max-width:1024px) {
  .blog-hero,
  .filter-section,
  .blog-list-section { padding-left:60px; padding-right:60px; }
  .blog-hero { padding-top:112px; padding-bottom:32px; }
  .blog-hero-title { font-size:52px; }
  .blog-grid > .blog-card { flex-basis:calc((100% - 28px) / 2); width:calc((100% - 28px) / 2); max-width:calc((100% - 28px) / 2); }
}
@media (max-width:767px) {
  .blog-hero,
  .filter-section,
  .blog-list-section { padding-left:20px; padding-right:20px; padding-top:44px; padding-bottom:44px; }
  .blog-hero { padding-top:96px; padding-bottom:20px; }
  .blog-hero-title { font-size:38px; letter-spacing:-.5px; }
  .blog-grid { gap:22px; }
  .blog-grid > .blog-card { flex-basis:100%; width:100%; max-width:100%; }
  .filter-row { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding-bottom:6px; }
  .filter-row > button { flex:0 0 auto; }
}