/* =============================================
   MAIGHTYLABS BLOG — Design-System-Erweiterung
   Light, aligned mit styles.css (homepage)
   ============================================= */

/* Nav: homepage-Original (kein overriding background nötig) */
/* .nav hat bereits in styles.css: background:rgba(255,255,255,.85) + backdrop-filter:blur */
/* wir brauchen hier nur mobile menu fix für blog-kontext */

/* ── Mobile menu (leicht abgesetzt) ── */
.mmenu{ background:var(--bg-soft); border-top:1px solid var(--line); }
.mmenu a{ color:var(--ink); border-color:var(--line); }
.mmenu a:first-child{ border-color:var(--line); }
.mmenu a .ai{ color:var(--blue); }

/* ── Filter Section ── */
.filter-section{ padding-block: clamp(32px, 5vw, 56px); background: var(--bg-soft); border-block: 1px solid var(--line); }

.filter-bar{ display:flex; gap:20px; flex-wrap:wrap; align-items:center; }

.search-wrap{ flex:1; min-width:220px; }
.search-wrap input{
  width:100%;
  padding:11px 16px 11px 40px;
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:.95rem;
  outline:none; transition:border-color .2s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A8194' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:12px center;
}
.search-wrap input:focus{ border-color:var(--blue); }

.filter-tags{ display:flex; gap:8px; flex-wrap:wrap; }

.filter-btn{
  padding:7px 14px; border-radius:999px;
  border:1px solid var(--line-2); background:var(--bg);
  font-family:var(--sans); font-size:.82rem; font-weight:500;
  color:var(--muted); cursor:pointer;
  transition:.2s var(--ease);
}
.filter-btn:hover{ border-color:var(--blue-soft); color:var(--blue); }
.filter-btn.active{ background:var(--blue); border-color:var(--blue); color:#fff; }

/* ── Blog Content Area ── */
.blog-content{ padding-block: clamp(56px, 8vw, 96px); }

.card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:40px;
}

/* ── Loading State ── */
.blog-loading{ grid-column:1/-1; text-align:center; padding:4rem 0; color:var(--muted); }
.blog-loading p{ margin-top:16px; font-size:.95rem; }
.loading-dot{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  background:var(--blue); margin:0 4px;
  animation:loadingPulse 1.2s ease-in-out infinite;
}
.loading-dot:nth-child(2){ animation-delay:.2s; }
.loading-dot:nth-child(3){ animation-delay:.4s; }
@keyframes loadingPulse{ 0%,80%,100%{transform:scale(.6);opacity:.4} 40%{transform:scale(1);opacity:1} }

/* ── Featured Card ── */
.featured-article{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  background:var(--bg); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow); margin-bottom:40px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.featured-article:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }

.featured-img{
  min-height:320px;
  background:linear-gradient(135deg, var(--blue-glow) 0%, var(--bg-soft) 100%);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.featured-img::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 60% 40%, rgba(91,155,247,.25), transparent 65%);
}
.featured-img .featured-icon{ font-size:4rem; opacity:.5; position:relative; z-index:1; }

.featured-body{ padding:clamp(28px, 4vw, 48px); display:flex; flex-direction:column; justify-content:center; }
.featured-badge{
  display:inline-flex; align-items:center; gap:.4em;
  background:var(--blue-glow); color:var(--blue);
  font-family:var(--mono); font-size:.72rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px;
  width:fit-content; margin-bottom:16px;
}
.featured-body h2{ font-size:clamp(1.4rem, 2.2vw, 2rem); margin:0 0 14px; }
.featured-body h2 a{ color:var(--ink); text-decoration:none; transition:color .2s; }
.featured-body h2 a:hover{ color:var(--blue); }
.featured-excerpt{ font-size:.97rem; color:var(--body); line-height:1.65; margin-bottom:20px; }
.featured-meta{
  display:flex; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:.76rem; color:var(--muted);
  margin-bottom:24px;
}
.featured-meta span{ display:flex; align-items:center; gap:.4em; }

/* ── Article Card ── */
.article-card{
  background:var(--bg); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
  display:flex; flex-direction:column;
}
.article-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--line-2); }

.card-img{
  height:180px; background:var(--bg-soft);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.card-img::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(91,155,247,.2), transparent 70%);
}
.card-icon{ font-size:2.5rem; opacity:.4; position:relative; z-index:1; }

.card-body{ padding:24px; flex:1; display:flex; flex-direction:column; }
.card-cat{
  font-family:var(--mono); font-size:.72rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue); margin-bottom:10px;
}
.card-body h3{ font-size:1.15rem; margin:0 0 10px; }
.card-body h3 a{ color:var(--ink); text-decoration:none; transition:color .2s; }
.card-body h3 a:hover{ color:var(--blue); }
.card-excerpt{ font-size:.88rem; color:var(--body); line-height:1.6; flex:1; margin-bottom:18px; }
.card-footer{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; border-top:1px solid var(--line);
}
.card-date{ font-family:var(--mono); font-size:.72rem; color:var(--muted); }
.read-link{
  font-size:.85rem; font-weight:600; color:var(--blue);
  display:flex; align-items:center; gap:.4em;
  transition:gap .2s;
}
.read-link:hover{ gap:.7em; }

/* ── Newsletter ── */
.blog-newsletter{ padding-block: clamp(56px, 8vw, 96px); }
.nl-card{
  position:relative; background:var(--dark); border-radius:var(--r-xl);
  overflow:hidden; padding:clamp(48px, 6vw, 80px);
}
.nl-card-inner{ position:relative; z-index:2; max-width:560px; }
.nl-card h2{ color:#fff; }
.nl-card .lead{ color:rgba(255,255,255,.6); }
.nl-form{ display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
.nl-form input{
  flex:1; min-width:200px;
  padding:12px 16px; border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.08); color:#fff;
  font-family:var(--sans); font-size:.95rem;
  outline:none; transition:border-color .2s;
}
.nl-form input::placeholder{ color:rgba(255,255,255,.4); }
.nl-form input:focus{ border-color:var(--blue-bright); }
.nl-success{ color:var(--blue-bright); font-weight:600; padding:12px 0; }
.nl-card-bg{ position:absolute; right:-60px; top:-60px; bottom:-60px; width:400px; }
.nl-glow{
  width:100%; height:100%; border-radius:50%;
  background:radial-gradient(circle, rgba(91,155,247,.35), transparent 65%);
  filter:blur(30px);
}

/* ── Footer ── */
/* Blog nutzt class="footer" aus styles.css — kein eigenes site-footer nötig */

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width:900px){
  .featured-article{ grid-template-columns:1fr; }
  .featured-img{ min-height:200px; }
}
@media (max-width:700px){
  .card-grid{ grid-template-columns:1fr !important; }
  .filter-bar{ flex-direction:column; align-items:stretch; }
}
@media (max-width:600px){
  .card-grid{ grid-template-columns:1fr !important; }
  .filter-bar{ flex-direction:column; align-items:stretch; }
  .nl-form{ flex-direction:column; }
}