/* ===== Blog Modal (scoped; safe for other pages) ===== */

.blog-modal{
  position: fixed;
  inset: 0;
  z-index: 2147483000;            /* outrank any site element */
  display: none;
  overscroll-behavior: contain;
}
.blog-modal.is-open{
  display: flex;
  align-items: center;            /* centered vertically */
  justify-content: center;
}
/* When content is very tall, pin near top (no clipping) */
.blog-modal.is-open.is-tall{
  align-items: flex-start;
}

/* Backdrop */
.blog-modal__overlay{
  position: fixed;
  inset: 0;
  background: rgba(2,8,23,.55);
  backdrop-filter: blur(1.5px);
  opacity: 0;
  transition: opacity .18s ease;
}
.blog-modal.is-open .blog-modal__overlay{ opacity: 1; }

/* Dialog */
.blog-modal__dialog{
  position: relative;
  width: min(1100px, calc(100% - 32px));
  margin: 24px 16px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  box-shadow: 0 30px 90px rgba(15,23,42,.28);

  /* entrance animation */
  transform: translateY(6px) scale(.96);
  opacity: 0;
  transition:
    transform .22s cubic-bezier(.22,.61,.36,1),
    opacity .22s ease;

  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  z-index: 1;
}
.blog-modal.is-open .blog-modal__dialog{
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Header */
.blog-modal__hdr{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid #e5e7eb;
  background:#fff;
  border-radius:16px 16px 0 0;
}
.blog-modal__title{ margin:0; font-size:18px; }
.blog-modal__close{
  background:transparent; border:0; line-height:1;
  font-size:22px; cursor:pointer; color:#475569;
}
.blog-modal__close:hover{ color:#0f172a; }

/* Body — only scrollable area */
.blog-modal__body{
  padding:16px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  flex:1;
  min-height:0;
}

/* Optional content styles */
.blog-modal__body .prose{ max-width:72ch; line-height:1.65; color:#0f172a; }
.blog-modal__body .prose h1,
.blog-modal__body .prose h2,
.blog-modal__body .prose h3{ margin:.6em 0 .4em; line-height:1.25; }
.blog-modal__body .prose p{ margin:.5em 0; }
.blog-modal__body .prose ul{ margin:.5em 0 .8em 1.1em; }
.blog-modal__body .prose li{ margin:.25em 0; }

/* CTA blocks (if used inside modal) */
.blog-modal .chip{
  display:inline-block; padding:6px 10px; font-size:12px; border-radius:999px;
  background:#ecfdf5; color:#065f46; font-weight:600;
}
.blog-modal__grid{ display:grid; grid-template-columns:1fr; gap:16px; }
.blog-modal__article{ background:#fff; border:1px solid #cbd5e1; border-radius:12px; padding:16px; }
.blog-modal__ctas{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cta-mini{ background:#fff; border:1px solid #dbe5ef; border-radius:12px; padding:12px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cta-mini .btn{ padding:10px 12px; border:1px solid #d1e7dd; border-radius:8px; background:#f0fdf4; color:#14532d; font-weight:700; text-decoration:none; font-size:14px; }
.cta-panel{ background:linear-gradient(92deg,#0b4b2f,#173f2a); color:#e7f5ed; border-radius:12px; padding:16px; border:1px solid #0e3a26; display:flex; flex-direction:column; gap:12px; justify-content:center; }
.cta-panel h4{ margin:0; color:#e7f5ed; }
.cta-panel p{  margin:0; color:#cfe7dc; }
.cta-panel .btn-accent{ align-self:flex-start; margin-top:4px; background:#f97316; color:#fff; border:none; border-radius:8px; padding:10px 14px; font-weight:800; text-decoration:none; }

/* Mobile tweaks */
@media (max-width: 860px){
  .blog-modal__dialog{ margin:16px; max-height:calc(100dvh - 32px); }
  .blog-modal__ctas{ grid-template-columns:1fr; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .blog-modal__overlay, .blog-modal__dialog{ transition: none; }
}

/* Body lock marker */
body.modal-open{ overflow:hidden; }