/*
 * PAYANTARA_BLOG_MAIN_UI_SYNC_V3244_1
 * Blog-only UI geometry synchronization.
 * Source design references:
 * - Payantara auth controls: ~10-12px radius
 * - Unified UI: .65rem/.9rem/1.15rem radius scale
 * - Compact dashboard: 6/8/9px control/card scale
 *
 * Intent: keep Blog identity/content layout, but make controls, cards,
 * shadows, surfaces and footer feel like the same Payantara product.
 */

:root {
  --blog-radius-sm: 9px;
  --blog-radius: 12px;
  --blog-radius-lg: 16px;
  --blog-shadow: 0 6px 18px rgba(15, 23, 42, .055);
}

/* Header / navigation: compact like Payantara public + auth controls. */
.blog-header {
  box-shadow: 0 4px 18px rgba(15, 23, 42, .025);
}

.blog-menu-button {
  border-radius: 10px;
}

.blog-navigation a {
  font-weight: 700;
}

/* Buttons: stop using full-pill geometry for normal actions. */
.blog-button {
  min-height: 40px;
  padding-inline: 15px;
  border-radius: 9px;
  font-weight: 750;
  box-shadow: none;
  transform: none;
}

.blog-button:hover,
.blog-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 7px 16px rgba(15, 23, 42, .08);
}

.blog-button--primary {
  box-shadow: 0 7px 18px rgba(227, 116, 52, .18);
}

.blog-button--small {
  min-height: 36px;
  padding-inline: 12px;
}

/* Search behaves like Payantara form controls, not a capsule. */
.blog-search {
  padding: 4px 4px 4px 12px;
  border-color: #cbd5e1;
  border-radius: 11px;
  box-shadow: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.blog-search:focus-within {
  border-color: var(--blog-primary);
  box-shadow: 0 0 0 3px rgba(227, 116, 52, .11);
}

.blog-search button {
  min-height: 34px;
  border-radius: 8px;
  font-weight: 750;
}

/* Hero glass panel remains expressive, but geometry is tightened. */
.blog-hero__panel {
  border-radius: 16px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .15);
}

.blog-topic-list a {
  border-radius: 9px;
}

/* Primary article surfaces. */
.blog-feature-card {
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.blog-card {
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
}

.blog-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(15, 23, 42, .075);
}

/* Taxonomy elements are compact chips, not oversized pills. */
.blog-category-label,
.blog-filter-row a,
.blog-pagination a,
.blog-pagination span,
.blog-article-tags a {
  border-radius: 8px;
}

.blog-category-label {
  font-weight: 750;
}

.blog-filter-row a,
.blog-pagination a,
.blog-pagination span {
  font-weight: 700;
}

.blog-tag-cloud a {
  border-radius: 9px;
  font-weight: 700;
}

/* Keep only semantic count/status indicators circular. */
.blog-tag-cloud small,
.blog-article-meta span + span::before,
.blog-menu-button span {
  border-radius: 999px;
}

.blog-empty-state {
  border-radius: 12px;
}

/* CTA / advertising / article media. */
.blog-cta {
  border-radius: 16px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .13);
}

.blog-ad {
  border-radius: 11px;
}

.blog-article-banner {
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.blog-inline-cta,
.blog-sidebar-card {
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .045);
}

.blog-inline-cta {
  box-shadow: none;
}

/* Long-form content follows the tighter component geometry too. */
.blog-prose blockquote {
  border-radius: 0 11px 11px 0;
}

.blog-prose pre {
  border-radius: 11px;
}

.blog-table-wrap {
  border-radius: 10px;
  box-shadow: 0 5px 16px rgba(15, 23, 42, .045);
}

/* Footer matches the public Payantara surface instead of a separate dark app. */
.blog-footer {
  border-top: 1px solid var(--blog-border);
  background: #fff;
  color: var(--blog-text);
}

.blog-brand--footer .blog-brand__divider {
  background: var(--blog-border);
}

.blog-brand--footer .blog-brand__text {
  color: var(--blog-secondary);
}

.blog-footer p,
.blog-footer__grid a:not(.blog-brand),
.blog-footer__bottom {
  color: var(--blog-muted);
}

.blog-footer__grid a:hover {
  color: var(--blog-primary);
}

.blog-footer__bottom {
  border-top-color: var(--blog-border);
}

/* Mobile: do not re-introduce large rounding from the older blog stylesheet. */
@media (max-width: 980px) {
  .blog-navigation {
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
  }

  .blog-navigation a {
    border-radius: 8px;
  }
}

@media (max-width: 720px) {
  .blog-feature-card {
    border-radius: 14px;
  }

  .blog-cta {
    border-radius: 14px;
  }

  .blog-article-banner {
    border-radius: 13px;
  }

  .blog-card__body {
    padding: 18px;
  }
}

@media (max-width: 640px) {
  .blog-table-wrap {
    border-radius: 9px;
  }
}