/* ================================================
   SUFRAH - Blog Page Overrides
   Premium editorial layout for blog, questions, and comments
   ================================================ */

.blog-community {
  position: relative;
}

.blog-community::before {
  content: '';
  position: absolute;
  inset: 42px 0 auto;
  height: 360px;
  background:
    radial-gradient(circle at 22% 22%, rgba(124, 58, 237, 0.12), transparent 26%),
    radial-gradient(circle at 82% 0%, rgba(59, 130, 246, 0.1), transparent 24%);
  pointer-events: none;
}

.blog-layout {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(280px, 0.34fr) minmax(0, 1fr);
}

.blog-compose {
  position: sticky;
  top: 118px;
  display: grid;
  gap: var(--space-5);
}

.blog-compose__panel {
  display: grid;
  gap: var(--space-5);
  border-radius: 30px;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.14), transparent 34%),
    linear-gradient(155deg, rgba(124, 58, 237, 0.14), rgba(255, 255, 255, 0.02)),
    var(--color-bg-card);
  border-color: rgba(124, 58, 237, 0.16);
}

.blog-compose__panel-copy {
  display: grid;
  gap: 12px;
}

.blog-compose__eyebrow,
.blog-feed__eyebrow,
.blog-toolbar__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(124, 58, 237, 0.14);
  color: var(--color-brand-100);
  font-size: 12px;
  font-weight: var(--fw-semibold);
}

.blog-compose__panel .page-card__title,
.blog-feed__head .page-card__title {
  margin-bottom: 0;
}

.blog-compose__panel-btn {
  width: 100%;
}

.blog-compose__toggle {
  display: none;
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 1100;
  width: auto;
  height: auto;
  min-width: 0;
  padding: 14px 18px;
  border-radius: 999px;
  box-shadow: 0 24px 50px rgba(124, 58, 237, 0.34);
}

.blog-compose__toggle:hover,
.blog-compose__toggle:focus-visible {
  box-shadow: 0 30px 60px rgba(124, 58, 237, 0.42);
}

.blog-compose__toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 1.25rem;
  line-height: 1;
}

.blog-compose__toggle-label {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  line-height: 1;
}

.blog-compose__metric-grid,
.blog-post__stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.blog-compose__metric,
.blog-post__stat-card {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(9, 11, 20, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.blog-compose__metric-label,
.blog-post__stat-label,
.blog-feed__summary-label {
  font-size: 12px;
  color: var(--color-text-tertiary);
}

.blog-compose__metric-value,
.blog-post__stat-value,
.blog-feed__summary-item strong {
  color: var(--color-text-primary);
  font-size: 0.95rem;
  font-weight: var(--fw-semibold);
  line-height: 1.6;
}

.blog-compose__list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-compose__list li {
  position: relative;
  padding-inline-start: 22px;
  color: var(--color-text-secondary);
  line-height: 1.8;
  font-size: 14px;
}

.blog-compose__list li::before {
  content: '';
  position: absolute;
  top: 11px;
  inset-inline-start: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-brand-300), var(--color-info));
  box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.08);
}

.blog-compose-modal__backdrop {
  background: rgba(2, 6, 23, 0.68);
  backdrop-filter: blur(12px);
}

.blog-compose__card {
  width: min(100%, 820px);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 26%),
    linear-gradient(145deg, rgba(124, 58, 237, 0.12), rgba(255, 255, 255, 0.02)),
    var(--color-bg-card);
  border-color: rgba(124, 58, 237, 0.16);
  box-shadow: 0 34px 90px rgba(2, 6, 23, 0.4);
}

.blog-compose__header {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.blog-form__grid,
.blog-toolbar,
.blog-toolbar__body,
.blog-feed__intro,
.blog-toolbar__heading,
.blog-feed {
  display: grid;
  gap: var(--space-4);
}

.blog-feed__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: end;
  padding: 24px 28px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 28%),
    linear-gradient(145deg, rgba(124, 58, 237, 0.12), rgba(255, 255, 255, 0.02)),
    var(--color-bg-card);
}

.blog-feed__summary {
  display: grid;
  gap: 12px;
  justify-items: end;
}

.blog-feed__summary-item {
  min-width: 230px;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.blog-feed__count,
.blog-post__badge {
  width: fit-content;
  min-height: 44px;
  padding-inline: 16px;
  background: rgba(124, 58, 237, 0.12);
  color: var(--color-brand-100);
}

.blog-toolbar {
  padding: 24px 28px;
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.03);
}

.blog-toolbar__topline {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.blog-toolbar__caption {
  margin: 0;
  max-width: 54ch;
  color: var(--color-text-secondary);
  line-height: 1.9;
  font-size: 14px;
}

.blog-toolbar__label {
  margin-bottom: 0;
}

.blog-toolbar__body {
  grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
  align-items: end;
}

.blog-toolbar__search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.blog-toolbar__search-icon {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(124, 58, 237, 0.14);
  color: var(--color-brand-100);
}

.blog-toolbar__search-icon svg {
  width: 20px;
  height: 20px;
}

.blog-toolbar__search-copy {
  display: grid;
  gap: 4px;
}

.blog-toolbar__hint {
  color: var(--color-text-tertiary);
  font-size: 12px;
}

.blog-toolbar__filters,
.blog-toolbar__sort {
  display: grid;
  gap: 10px;
}

.blog-toolbar__search input {
  grid-column: 2 / -1;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.blog-toolbar__search input:focus {
  box-shadow: none;
}

.blog-toolbar__search:focus-within {
  border-color: rgba(124, 58, 237, 0.32);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
}

.blog-tab {
  font-weight: var(--fw-medium);
  box-shadow: none;
}

.blog-tab:hover,
.blog-tab.is-active {
  border-color: rgba(124, 58, 237, 0.24);
  background: rgba(124, 58, 237, 0.14);
  box-shadow: 0 14px 28px rgba(124, 58, 237, 0.1);
}

.blog-posts {
  gap: var(--space-6);
}

.blog-post {
  scroll-margin-top: 140px;
  padding: var(--space-7);
  border-radius: 30px;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 35%),
    linear-gradient(145deg, rgba(124, 58, 237, 0.08), rgba(255, 255, 255, 0.02)),
    var(--color-bg-card);
}

.blog-post:hover {
  transform: translateY(-6px);
  border-color: rgba(124, 58, 237, 0.2);
  box-shadow: 0 32px 68px rgba(2, 6, 23, 0.24);
}

.blog-post__shell,
.blog-post__head,
.blog-post__title-block,
.blog-post__content-stack,
.blog-post__sidebar {
  display: grid;
  gap: 16px;
}

.blog-post__topline,
.blog-post__topline-group,
.blog-post__meta-row,
.blog-post__footer,
.blog-post__footer-tags,
.blog-comments__header,
.blog-comment__head,
.blog-comment__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.blog-post__topline,
.blog-post__footer,
.blog-comments__header,
.blog-comment__head {
  justify-content: space-between;
}

.blog-post__meta-row {
  justify-content: flex-end;
}

.blog-post__kind,
.blog-post__signal,
.blog-post__meta-pill,
.blog-post__status-chip,
.blog-comments__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  font-size: 12px;
}

.blog-post__signal,
.blog-post__meta-pill,
.blog-post__status-chip,
.blog-post__footer-note {
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: var(--color-text-secondary);
}

.blog-post__title {
  font-size: clamp(1.25rem, 1.8vw, 1.65rem);
  line-height: 1.55;
}

.blog-post__eyebrow {
  margin: 0;
  font-size: 14px;
}

.blog-post__body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.34fr);
  gap: var(--space-5);
  align-items: start;
}

.blog-post__content-wrap {
  display: grid;
  gap: 12px;
}

.blog-post__content {
  padding: 22px;
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    rgba(15, 23, 42, 0.14);
}

.blog-post__content,
.blog-comment p,
.blog-comments__empty {
  margin: 0;
  line-height: 2;
}

.blog-post__author-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.blog-post__author-copy {
  display: grid;
  gap: 4px;
}

.blog-post__author-label {
  font-size: 12px;
  color: var(--color-text-tertiary);
}

.blog-post__author-meta {
  color: var(--color-text-secondary);
  font-size: 13px;
}

.blog-comments {
  gap: var(--space-5);
}

.blog-comment {
  padding: 18px;
  border-radius: 22px;
}

.blog-comment__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  color: #6ee7b7;
  font-size: 11px;
  font-weight: var(--fw-semibold);
}

.blog-comment-form {
  padding: 20px;
  border-radius: 24px;
}

[data-theme="light"] .blog-compose__panel,
[data-theme="light"] .blog-feed__head,
[data-theme="light"] .blog-toolbar,
[data-theme="light"] .blog-post,
[data-theme="light"] .blog-post__content,
[data-theme="light"] .blog-post__author-card,
[data-theme="light"] .blog-feed__summary-item,
[data-theme="light"] .blog-compose__metric,
[data-theme="light"] .blog-post__stat-card,
[data-theme="light"] .blog-comment-form {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(246, 243, 255, 0.92));
  border-color: rgba(124, 58, 237, 0.08);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .blog-toolbar__search,
[data-theme="light"] .blog-post__signal,
[data-theme="light"] .blog-post__meta-pill,
[data-theme="light"] .blog-post__status-chip,
[data-theme="light"] .blog-post__footer-note {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(124, 58, 237, 0.08);
}

[data-theme="light"] .blog-compose__eyebrow,
[data-theme="light"] .blog-feed__eyebrow,
[data-theme="light"] .blog-toolbar__eyebrow,
[data-theme="light"] .blog-feed__count,
[data-theme="light"] .blog-post__badge {
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(124, 58, 237, 0.14);
  color: var(--color-brand-700);
}

[data-theme="light"] .blog-toolbar__search-icon {
  background: rgba(124, 58, 237, 0.12);
  color: var(--color-brand-700);
}

[data-theme="light"] .blog-compose__metric-label,
[data-theme="light"] .blog-post__stat-label,
[data-theme="light"] .blog-feed__summary-label,
[data-theme="light"] .blog-toolbar__hint,
[data-theme="light"] .blog-post__author-label {
  color: #6b7280;
}

[data-theme="light"] .blog-compose__list li,
[data-theme="light"] .blog-toolbar__caption,
[data-theme="light"] .blog-post__signal,
[data-theme="light"] .blog-post__meta-pill,
[data-theme="light"] .blog-post__status-chip,
[data-theme="light"] .blog-post__footer-note,
[data-theme="light"] .blog-post__author-meta {
  color: #374151;
}

[data-theme="light"] .blog-toolbar__label,
[data-theme="light"] .blog-post__title,
[data-theme="light"] .blog-comments__title,
[data-theme="light"] .blog-compose__metric-value,
[data-theme="light"] .blog-post__stat-value,
[data-theme="light"] .blog-feed__summary-item strong {
  color: var(--color-text-primary);
}

[data-theme="light"] .blog-toolbar__search input::placeholder {
  color: #9ca3af;
}

[data-theme="light"] .blog-comment__badge {
  background: rgba(5, 150, 105, 0.12);
  color: #047857;
}

@media (max-width: 1024px) {
  .blog-community::before {
    inset: 28px 0 auto;
    height: 280px;
  }

  .blog-hero__content,
  .blog-layout,
  .blog-feed__head,
  .blog-toolbar__body,
  .blog-post__body-grid {
    grid-template-columns: 1fr;
  }

  .blog-layout {
    gap: var(--space-6);
  }

  .blog-compose {
    position: static;
  }

  .blog-feed__summary {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: start;
  }

  .blog-feed__summary-item {
    min-width: 0;
  }

  .blog-toolbar__topline {
    align-items: stretch;
  }

  .blog-toolbar__sort {
    width: 100%;
    max-width: 320px;
  }
}

@media (max-width: 768px) {
  .page-hero--blog .page-hero__title,
  .page-hero--blog .page-hero__desc {
    max-width: 100%;
  }

  .blog-community::before {
    inset: 16px 0 auto;
    height: 220px;
  }

  .blog-hero {
    overflow: hidden;
  }

  .blog-hero__content,
  .blog-hero__mini-grid {
    grid-template-columns: 1fr;
  }

  .blog-hero__glow--one {
    top: -24px;
    inset-inline-end: -4%;
    width: 160px;
    height: 160px;
  }

  .blog-hero__glow--two {
    bottom: -44px;
    inset-inline-start: -6%;
    width: 200px;
    height: 200px;
  }

  .blog-hero__copy,
  .blog-hero__visual,
  .blog-hero__mini-grid {
    gap: var(--space-4);
  }

  .blog-hero__actions {
    flex-direction: column;
  }

  .blog-hero__actions .btn {
    width: 100%;
    min-width: 0;
  }

  .blog-hero__highlight,
  .blog-hero__pill {
    width: 100%;
    justify-content: flex-start;
  }

  .blog-compose__panel {
    display: none;
  }

  .blog-feed__head,
  .blog-toolbar,
  .blog-post {
    padding: var(--space-6);
  }

  .blog-feed__summary {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .blog-feed__summary-item,
  .blog-feed__count {
    width: 100%;
    min-width: 0;
  }

  .blog-feed__count {
    justify-content: flex-start;
  }

  .blog-toolbar__topline {
    flex-direction: column;
    align-items: stretch;
  }

  .blog-toolbar__sort {
    width: 100%;
    max-width: none;
  }

  .blog-post__topline,
  .blog-post__meta-row,
  .blog-post__footer,
  .blog-comment__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .blog-compose__metric-grid,
  .blog-post__stat-grid,
  .blog-form__grid,
  .blog-toolbar__body {
    grid-template-columns: 1fr;
  }

  .blog-toolbar__search {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 12px;
  }

  .blog-toolbar__search input {
    grid-column: auto;
  }

  .blog-toolbar__search-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }

  .blog-toolbar__search-icon svg {
    width: 18px;
    height: 18px;
  }

  .blog-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .blog-tab {
    width: 100%;
    min-height: 44px;
    padding: 12px 10px;
    text-align: center;
    justify-content: center;
  }

  .blog-post__topline-group,
  .blog-post__meta-row,
  .blog-post__footer-tags {
    width: 100%;
  }

  .blog-post__signal,
  .blog-post__meta-pill,
  .blog-post__status-chip,
  .blog-post__footer-note,
  .blog-post__badge,
  .blog-comments__toggle {
    width: 100%;
    justify-content: flex-start;
  }

  .blog-post__author-card,
  .blog-comment {
    border-radius: 18px;
  }

  .blog-comment-form__actions,
  .blog-form__actions {
    align-items: stretch;
  }

  .blog-comment-form__actions .btn,
  .blog-form__actions .btn {
    width: 100%;
  }

  .blog-compose__toggle {
    display: inline-flex;
    left: 16px;
    bottom: 16px;
    padding: 12px 16px;
  }

  .blog-compose-modal {
    padding: 16px;
  }
}

@media (max-width: 560px) {
  .blog-feed__head,
  .blog-toolbar,
  .blog-post {
    padding: 20px;
  }

  .blog-tabs {
    grid-template-columns: 1fr;
  }

  .blog-post__content,
  .blog-comment-form {
    padding: 16px;
  }

  .blog-compose__toggle {
    left: 12px;
    bottom: 12px;
    padding: 12px 14px;
  }
}