/* ==========================================================================
   Article & Blog Post Styles
   Active article stylesheet. Current blog markup is preserved; future generated
   articles can adopt the article_* classes below.
   ========================================================================== */

/* Current blog article markup */
.hero_wrap .u-display-xl {
  font-size: clamp(2rem, 3.6vw, 3.1rem) !important;
  line-height: 1.14;
}

.u-rich-text h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.8rem) !important;
  line-height: 1.28;
}

@media (width < 56em) {
  .hero_wrap .u-display-xl {
    font-size: clamp(1.55rem, 7vw, 2.15rem) !important;
    line-height: 1.2;
  }

  .u-rich-text,
  .u-rich-text li,
  .u-rich-text p {
    overflow-wrap: anywhere;
  }
}

/* Future generated article template hooks */
.hero_wrap.article_hero {
  padding-top: clamp(7rem, 12vh, 10rem);
  padding-bottom: clamp(2rem, 4vw, 4rem);
}

.article_hero .hero_tagline {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.article_hero h1 {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em;
  max-width: 26ch;
  color: var(--_color-theme---text, var(--color-text-primary));
}

.article_main_container {
  max-width: 820px;
  margin-inline: auto;
}

.article_card_wrapper {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 4rem);
  box-shadow: var(--shadow-card-subtle);
}

.article_meta_bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-bottom: 2rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 0.9rem;
  color: #64748b;
}

.article_meta_bar .author_info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  color: #1e1e1e;
}

.article_meta_bar .author_avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-round);
  background: #2b2b2b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
}

.article-template .u-rich-text p {
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
  line-height: 1.7;
  color: #2d3748;
  margin-bottom: 1.75rem;
}

.article-template .u-rich-text h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 3rem;
  margin-bottom: 1.25rem;
  color: #1a202c;
  letter-spacing: -0.01em;
}

.article-template .u-rich-text ul,
.article-template .u-rich-text ol {
  margin-bottom: 2rem;
  padding-left: 1.5rem;
}

.article-template .u-rich-text li {
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
  line-height: 1.65;
  margin-bottom: 0.75rem;
  color: #2d3748;
}

.article-template .u-rich-text strong {
  color: #0f172a;
}

.article-callout {
  padding: var(--space-6);
  border: 1px solid var(--color-border-subtle);
}

.article-callout > :last-child {
  margin-bottom: 0;
}

.article_faq_section {
  padding-top: 3rem;
  margin-top: 3rem;
  border-top: 1px solid var(--color-border-subtle);
}

.faq_accordion_item {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  transition: background 0.2s ease;
}

.faq_accordion_item:hover {
  background: rgba(255, 255, 255, 0.85);
}

.faq_accordion_summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.1rem;
  list-style: none;
}

.faq_accordion_summary::-webkit-details-marker {
  display: none;
}

.faq_icon {
  font-size: 1.25rem;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

details[open] .faq_icon {
  transform: rotate(45deg);
}

.faq_accordion_content {
  padding-top: 1rem;
  line-height: 1.6;
  color: #475569;
}