/* ===== Blog Coming Soon (scoped to .blog-page only) ===== */

.coming-chip{
  display:inline-block; margin-top:10px; padding:6px 10px; border-radius:999px;
  background:var(--accent-base, #A2EBCC); color:#0F3D34; font-weight:700; font-size:.9rem;
  box-shadow:0 6px 24px rgba(162,235,204,.35);
}

/* Panel (no hero/header/footer styles) */
.blog-page .blog-panel { margin: 8vh auto 10vh; }
.blog-page .blog-grid{
  display:grid; gap: clamp(18px, 3vw, 32px);
  grid-template-columns: 1.15fr .85fr;
}

.blog-page .skeleton-column,
.blog-page .side-column{
  background: var(--glass-bg, rgba(255,255,255,.08));
  border: 1px solid var(--line, rgba(26,32,44,.12));
  border-radius: 16px;
  padding: clamp(18px, 3vw, 32px);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 12px 36px rgba(0,0,0,.07);
}

.blog-page .skeleton-column h2,
.blog-page .tagbox h2,
.blog-page .newsletter h2{
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  color: var(--ink,#1A202C);
}

/* Skeleton previews */
.blog-page .skeleton-grid{
  display:grid; gap: 14px; grid-template-columns: repeat(2, minmax(0,1fr));
}
.blog-page .sk-card{
  background: #fff;
  border: 1px solid var(--line, rgba(26,32,44,.12));
  border-radius: 12px;
  padding: 12px;
  overflow: hidden;
}
.blog-page .sk-media{
  height: 140px; border-radius: 10px; background: #e9eef1; margin-bottom: 10px;
}
.blog-page .sk-lines{ display:flex; flex-direction:column; gap:8px; }
.blog-page .sk-line{
  display:block; height: 10px; border-radius: 6px; background: #e9eef1;
}

/* Shimmer animation */
.blog-page .shimmer{ position: relative; overflow: hidden; }
.blog-page .shimmer::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(110deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.55) 35%, rgba(255,255,255,0) 50%);
  transform: translateX(-100%); animation: shimmer 2.2s infinite;
}
@keyframes shimmer{ 100% { transform: translateX(100%); } }

/* Tag cloud */
.blog-page .tagbox{ margin-bottom: 20px; }
.blog-page .tags{ display:flex; flex-wrap:wrap; gap:8px; }



/* Newsletter form */
.blog-page .newsletter .muted{ color: var(--muted,#718096); margin-bottom: 10px; }
.blog-page .news-form .field{ display:flex; flex-direction:column; min-width:0; }
.blog-page .news-form label{ font-weight:600; color: var(--ink,#1A202C); font-size:14px; }
.blog-page .news-form input,
.blog-page .news-form select{
  margin-top:6px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--line, rgba(26,32,44,.16));
  background:#fff; color: var(--ink,#1A202C);
  font-size: 1rem; min-height: 44px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.blog-page .news-form input:focus,
.blog-page .news-form select:focus{
  outline:none; border-color: var(--accent-base,#A2EBCC);
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(162,235,204,.35));
}

/* Field + form messages (scoped) */
.blog-page .field-msg{ margin-top:6px; min-height:1.1em; font-size:.93rem; line-height:1.28; }
.blog-page .field-msg[data-tone="error"]{ color:#c53030; }
.blog-page .field-msg[data-tone="success"]{ color:#1f9d55; }
.blog-page .field-msg[data-tone="info"]{ color:#4a5568; }

.blog-page .mx-form .form-status{
  margin-top:8px; text-align:center; min-height:1.1em; font-size:.95rem;
}
.blog-page .mx-form .form-status[data-tone="success"]{ color:#1f9d55; }
.blog-page .mx-form .form-status[data-tone="error"]{ color:#c53030; }
.blog-page .mx-form .form-status[data-tone="info"]{ color:#4a5568; }
.blog-page .mx-form .btn.is-loading{ opacity:.7; pointer-events:none; }

/* Keep Turnstile footprint invisible but scoped */
.blog-page .cf-turnstile{ width:0; height:0; overflow:hidden; }

/* Breakpoints (scoped) */
@media (max-width: 1100px){
  .blog-page .blog-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .blog-page .skeleton-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 320px){
  .blog-page .skeleton-column, .blog-page .side-column{ padding: 14px; border-radius: 12px; }
  .blog-page .sk-media{ height: 120px; }
}