/* Blog styles — follow MindCare design system tokens */
:root {
  --blog-max-width: 700px;
}

body.public-page {
  background: var(--bg-main);
}

body.public-page {
  min-height: 100dvh;
}

.main-content {
  padding: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.breadcrumbs {
  max-width: 1100px;
  margin: 16px auto 0;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 0.95rem;
  flex-wrap: wrap;
}

.breadcrumbs a {
  color: var(--text-secondary);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--primary-indigo);
  text-decoration: underline;
}

.eyebrow {
  margin: 0 0 6px 0;
  color: var(--primary-indigo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.public-page .main-content {
  padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
}

.page-header,
.post-page .post-article {
  max-width: 100%;
}

.page-header { margin-bottom: 20px; }
.page-header h1 { font-size: 1.8rem; margin-bottom: 6px; color: var(--text-primary); }
.page-header .lead { color: var(--text-secondary); margin-bottom: 12px; }

.blog-controls { display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }
.blog-controls input[type="search"] { width:100%; max-width:420px; padding:10px 12px; border:1px solid var(--border-light); border-radius:10px; background:var(--bg-card); color:var(--text-primary); }
.category-filters { display:flex; gap:8px; flex-wrap:wrap; }
.filter-btn { padding:8px 12px; border-radius:999px; background:transparent; border:1px solid var(--border-light); color:var(--text-secondary); cursor:pointer; }
.filter-btn.is-active { background:var(--primary-teal); color:white; border-color:transparent; }

.blog-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:16px; }
.blog-empty-state { margin: 0; padding: 18px; border-radius: 16px; background: var(--bg-card); border: 1px solid var(--border-light); color: var(--text-secondary); box-shadow: var(--shadow-card); }
.blog-card { background:var(--bg-card); border-radius:16px; padding:16px; box-shadow:var(--shadow-card); transition:transform var(--t-normal), box-shadow var(--t-normal); border:1px solid var(--border-light); overflow:hidden; }
.blog-card:hover { transform: translateY(-6px); box-shadow:var(--shadow-card-hover); }
.blog-card:hover .blog-card__media img { transform: scale(1.02); }
.blog-card__link { display:flex; flex-direction:column; gap:10px; color:inherit; text-decoration:none; min-height:100%; }
.blog-card__link:focus-visible { outline:3px solid rgba(79,70,229,0.18); outline-offset:4px; border-radius:14px; }
.blog-card__body { display:flex; flex-direction:column; gap:10px; }
.blog-card__media { margin:-16px -16px 6px; overflow:hidden; border-radius:16px 16px 12px 12px; background:linear-gradient(135deg, rgba(79,70,229,0.08), rgba(14,165,233,0.12)); aspect-ratio: 16 / 9; }
.blog-card__media img { display:block; width:100%; height:100%; object-fit:cover; transition:transform var(--t-normal); }
.blog-card__media--placeholder { position:relative; }
.blog-card__media--placeholder::before,
.blog-card__media--placeholder::after {
  content:'';
  position:absolute;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(255,255,255,0.45), rgba(255,255,255,0.08));
  opacity:0.7;
}
.blog-card__media--placeholder::before { width:120px; height:120px; right:10%; top:14%; }
.blog-card__media--placeholder::after { width:170px; height:170px; left:-20px; bottom:-35px; }
.blog-card--featured { background: linear-gradient(180deg, rgba(79,70,229,0.04), var(--bg-card)); }
.card-meta { display:flex; gap:12px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
.card-tag { background:rgba(79,70,229,0.08); border-radius:999px; padding:6px 10px; font-size:0.85rem; color:var(--primary-indigo); border:1px solid rgba(79,70,229,0.10); }
.featured-badge { margin-left:auto; background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff; border-radius: 999px; padding: 4px 10px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.card-title { margin:0 0 8px 0; font-size:1.1rem; color:var(--text-primary); }
.card-excerpt { margin:0 0 12px 0; color:var(--text-secondary); line-height:1.6; }
.card-footer { color:var(--text-muted); font-size:0.9rem; }
.card-read-more { align-self:flex-start; color:var(--primary-indigo); font-weight:600; text-decoration:none; }
.card-read-more:hover { text-decoration:underline; }

/* Post page */
.post-page .post-article { max-width: var(--blog-max-width); margin: 18px auto; background: var(--bg-card); padding:20px; border-radius:16px; box-shadow:var(--shadow-card); }
.post-shell { display:flex; flex-direction:column; gap:18px; }
.post-hero { display:grid; gap:18px; padding:18px; border-radius:20px; background: linear-gradient(180deg, rgba(79,70,229,0.06), rgba(255,255,255,0.96)); border: 1px solid var(--border-light); }
.post-hero__meta { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:8px; }
.post-hero__badge { display:inline-flex; align-items:center; justify-content:center; padding:6px 12px; border-radius:999px; background:linear-gradient(135deg, #8b5cf6, #6366f1); color:#fff; font-size:0.72rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; }
.post-hero__details { color:var(--text-muted); font-size:0.95rem; }
.post-hero__title { margin:0; font-size:clamp(2rem, 4vw, 3.2rem); line-height:1.05; color:var(--text-primary); }
.post-hero__lead { margin:0; color:var(--text-secondary); line-height:1.7; max-width: 68ch; }
.post-hero__media { margin-top:6px; border-radius:18px; overflow:hidden; background:linear-gradient(135deg, rgba(79,70,229,0.08), rgba(14,165,233,0.10)); aspect-ratio: 16 / 9; }
.post-hero__media img { display:block; width:100%; height:100%; object-fit:cover; }
.blog-back-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
  color:var(--primary-indigo);
  text-decoration:none;
  font-weight:600;
}
.blog-back-link:hover { text-decoration:underline; }
.post-content { line-height:1.75; color:var(--text-secondary); }
.post-title { margin:6px 0 8px 0; color:var(--text-primary); }
.post-byline { color:var(--text-muted); margin-bottom:12px; }
.post-hero img { width:100%; border-radius:8px; }
.post-section { padding: 0 2px; }
.post-section h2 { margin: 0 0 10px 0; font-size: 1.2rem; color: var(--text-primary); }
.post-section p { margin: 0 0 12px 0; }
.post-highlight { padding: 16px; border-radius: 16px; background: rgba(79,70,229,0.06); border: 1px solid rgba(79,70,229,0.10); }
.post-cta { display:flex; flex-wrap:wrap; gap:12px; padding:18px; border-radius:18px; background:linear-gradient(135deg, rgba(79,70,229,0.08), rgba(14,165,233,0.10)); border:1px solid rgba(79,70,229,0.12); }
.post-cta__content { flex:1 1 280px; }
.post-cta__actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.post-cta__actions .btn { min-width: 160px; justify-content:center; }

.related-posts h2 {
  margin: 0 0 8px 0;
  font-size: 1.05rem;
}

.post-tag {
  display: inline-flex;
  align-items: center;
  margin-bottom: 8px;
  color: var(--primary-indigo);
  text-decoration: none;
  font-weight: 600;
}

.related-posts { margin-top:20px; padding-top:12px; border-top:1px dashed var(--border-light); }
.related-posts h3 { margin:0 0 8px 0; }

body.public-page .bottom-nav {
  display: none !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 10000 !important;
  min-height: 76px !important;
  height: auto !important;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) !important;
  background: var(--bg-card) !important;
  border-top: 1px solid var(--border-light) !important;
  box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.08) !important;
}

@media (max-width: 767px) {
  body.public-page .bottom-nav {
    display: flex !important;
    width: 100% !important;
    overflow: visible !important;
  }
}

@media (min-width: 768px) {
  body.public-page .bottom-nav {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

body.public-page .bottom-nav .nav-item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 8px 4px !important;
}

body.public-page .bottom-nav .nav-item i {
  font-size: 1.35rem !important;
}

body.public-page .bottom-nav .nav-item span {
  display: block !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Responsive grid */
@media (min-width:720px) {
  .blog-grid { grid-template-columns: repeat(2,1fr); }
}
@media (min-width:1024px) {
  .blog-grid { grid-template-columns: repeat(3,1fr); }
}

/* Mobile-friendly spacing */
@media (max-width:479px) {
  .main-content { padding:16px; }
  .breadcrumbs { padding: 0 16px; }
  body.public-page .main-content { padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important; }
  .blog-controls { gap:8px; }
  .page-header h1 { font-size: 1.5rem; }
  .blog-card, .post-page .post-article { padding:14px; }
  .blog-card__media { margin:-14px -14px 6px; }
  .featured-badge { font-size:0.66rem; padding:4px 8px; }
  .post-hero { padding:14px; }
  .post-cta { padding:14px; }
  body.public-page .bottom-nav {
    min-height: 72px !important;
    padding-top: 7px !important;
    padding-bottom: calc(7px + env(safe-area-inset-bottom)) !important;
  }
}

/* Accessibility: focus states */
.filter-btn:focus, .card-link:focus { outline:3px solid rgba(79,70,229,0.12); outline-offset:2px; }