/* Article Content Styles - Figma Design Specifications */

/* Base Typography - Source Serif Pro 20px/32px */
.article-content {
  font-family: 'Source Serif Pro', serif !important;
  color: #3b3c4a !important;
  font-size: 20px !important;
  line-height: 32px !important;
  max-width: none !important;
}

.article-content p {
  margin-bottom: 24px !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 32px !important;
  font-family: 'Work Sans', sans-serif !important;
  color: #3b3c4a !important;
}

/* Links */
.article-content a {
  color: #e7145d !important;
  text-decoration: underline !important;
  transition: opacity 0.2s ease !important;
}

.article-content a:hover {
  opacity: 0.8 !important;
}

/* Headings - Work Sans Semibold */
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4 {
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 600 !important;
  color: #181a2a !important;
  margin-top: 32px !important;
  margin-bottom: 16px !important;
}

/* h2 - 24px/28px */
.article-content h2 {
  font-size: 24px !important;
  line-height: 28px !important;
}

/* h3 - 20px/24px */
.article-content h3 {
  font-size: 20px !important;
  line-height: 24px !important;
}

/* h4 - 18px/26px */
.article-content h4 {
  font-size: 18px !important;
  line-height: 26px !important;
}

/* Blockquotes - Source Serif Pro Italic 24px/32px */
.article-content blockquote {
  background: #f6f6f7 !important;
  border-left: 4px solid #e8e8ea !important;
  padding: 32px !important;
  margin: 32px 0 !important;
  border-radius: 12px !important;
  font-style: italic !important;
  font-size: 24px !important;
  line-height: 32px !important;
  color: #181a2a !important;
  font-weight: 400 !important;
  font-family: 'Source Serif Pro', serif !important;
}

.article-content blockquote p {
  margin-bottom: 0 !important;
  font-size: 24px !important;
  line-height: 32px !important;
  font-family: 'Source Serif Pro', serif !important;
}

/* Images */
.article-content img {
  width: 100% !important;
  height: auto !important;
  border-radius: 12px !important;
  margin: 32px 0 !important;
  max-width: 100% !important;
  display: block !important;
}

.article-content figure {
  margin: 32px 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.article-content figure img {
  width: 100% !important;
  height: auto !important;
}

.article-content figcaption {
  margin-top: 8px !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #696a75 !important;
  text-align: center !important;
  font-family: 'Work Sans', sans-serif !important;
}

/* Embeds de redes sociales - Twitter, Instagram, Facebook, etc */
.article-content .wp-block-embed {
  margin: 32px 0 !important;
  overflow: hidden !important;
}

.article-content .wp-block-embed iframe {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

.article-content .wp-block-embed__wrapper {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* Twitter/X Embeds */
.article-content .twitter-tweet {
  margin: 32px auto !important;
  max-width: 100% !important;
}

.article-content blockquote.twitter-tweet {
  border-left: none !important;
  background: transparent !important;
  padding: 0 !important;
  font-style: normal !important;
  margin: 32px 0 !important;
}

/* Instagram Embeds */
.article-content .instagram-media {
  margin: 32px auto !important;
  max-width: 100% !important;
}

/* Facebook Embeds */
.article-content .fb-post,
.article-content .fb-video {
  margin: 32px 0 !important;
  max-width: 100% !important;
}

/* YouTube Embeds */
.article-content .wp-block-embed-youtube {
  margin: 32px 0 !important;
}

.article-content .wp-block-embed-youtube iframe {
  width: 100% !important;
  height: auto !important;
}

/* TikTok Embeds */
.article-content .tiktok-embed {
  margin: 32px auto !important;
  max-width: 100% !important;
}

/* Generic responsive video container */
.article-content .wp-block-video {
  margin: 32px 0 !important;
  max-width: 100% !important;
}

.article-content .wp-block-video video {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Aspect ratio container para embeds */
.article-content [style*="aspect-ratio"] {
  max-width: 100% !important;
  width: 100% !important;
}

/* Asegurar que los iframes estén contenidos */
.article-content iframe {
  max-width: 100% !important;
  display: block !important;
  margin: 32px 0 !important;
}

/* Lists - Ordered & Unordered */
.article-content ul,
.article-content ol {
  margin: 24px 0 !important;
  padding-left: 32px !important;
  font-size: 20px !important;
  line-height: 32px !important;
  font-family: 'Source Serif Pro', serif !important;
}

.article-content ul {
  list-style-type: disc !important;
}

.article-content ul ul {
  list-style-type: circle !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.article-content ol {
  list-style-type: decimal !important;
  counter-reset: item !important;
}

.article-content ol ol {
  list-style-type: lower-alpha !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.article-content li {
  margin-bottom: 12px !important;
  padding-left: 8px !important;
  font-size: 20px !important;
  line-height: 32px !important;
  font-family: 'Work Sans', sans-serif !important;
}

.article-content li::marker {
  color: #3b3c4a !important;
  font-weight: 600 !important;
}

/* Nested lists */
.article-content li > ul,
.article-content li > ol {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

/* Links */
.article-content a {
  color: #e7145d !important;
  text-decoration: underline !important;
  font-weight: 400 !important;
  transition: color 0.2s ease !important;
}

.article-content a:hover {
  color: #3b5beb !important;
}

/* Strong/Bold */
.article-content strong,
.article-content b {
  font-weight: 600 !important;
  color: #181a2a !important;
}

/* Emphasis/Italic */
.article-content em,
.article-content i {
  font-style: italic !important;
}

/* Code blocks */
.article-content code {
  background: #f6f6f7 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-family: 'Courier New', monospace !important;
  font-size: 18px !important;
  color: #181a2a !important;
}

.article-content pre {
  background: #f6f6f7 !important;
  padding: 24px !important;
  border-radius: 12px !important;
  margin: 24px 0 !important;
  overflow-x: auto !important;
}

.article-content pre code {
  padding: 0 !important;
  background: transparent !important;
  font-size: 16px !important;
}

/* Tables */
.article-content table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 32px 0 !important;
}

.article-content th,
.article-content td {
  border: 1px solid #e8e8ea !important;
  padding: 12px 16px !important;
  text-align: left !important;
}

.article-content th {
  background: #f6f6f7 !important;
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 600 !important;
  color: #181a2a !important;
}

/* Horizontal Rule */
.article-content hr {
  border: none !important;
  border-top: 1px solid #e8e8ea !important;
  margin: 32px 0 !important;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
  .article-content {
    font-size: 18px !important;
    line-height: 30px !important;
  }
  
  .article-content p {
    font-size: 18px !important;
    line-height: 30px !important;
  }
  
  .article-content blockquote {
    font-size: 22px !important;
    line-height: 30px !important;
    padding: 24px !important;
  }
  
  .article-content blockquote p {
    font-size: 22px !important;
    line-height: 30px !important;
  }
  
  .article-content ul,
  .article-content ol {
    font-size: 18px !important;
    line-height: 30px !important;
  }
  
  .article-content li {
    font-size: 18px !important;
    line-height: 30px !important;
  }
}

@media (max-width: 640px) {
  .article-content {
    font-size: 16px !important;
    line-height: 28px !important;
  }
  
  .article-content p {
    font-size: 16px !important;
    line-height: 28px !important;
  }
  
  .article-content h2 {
    font-size: 20px !important;
    line-height: 24px !important;
  }
  
  .article-content h3 {
    font-size: 18px !important;
    line-height: 22px !important;
  }
  
  .article-content h4 {
    font-size: 16px !important;
    line-height: 20px !important;
  }
  
  .article-content blockquote {
    font-size: 18px !important;
    line-height: 28px !important;
    padding: 20px !important;
  }
  
  .article-content blockquote p {
    font-size: 18px !important;
    line-height: 28px !important;
  }
  
  .article-content ul,
  .article-content ol {
    padding-left: 24px !important;
    font-size: 16px !important;
    line-height: 28px !important;
  }
  
  .article-content li {
    font-size: 16px !important;
    line-height: 28px !important;
  }
  
  .article-content code {
    font-size: 14px !important;
  }
}