/* Article Page Styles */
/* Inherits base styles from landing.css */

/* Article body setup */
body.article-page {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top right, rgba(64, 94, 255, 0.22), transparent 55%),
    radial-gradient(circle at bottom left, rgba(164, 249, 107, 0.18), transparent 60%),
    var(--bg);
  color: var(--fg);
  font-family: inherit;
  display: flex;
  flex-direction: column;
}

/* Article Header */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(16px, 3vw, 28px) clamp(24px, 6vw, 72px);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(18px);
  background: rgba(4, 6, 12, 0.42);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header-logo-icon {
  height: 32px;
  width: auto;
  margin-right: 10px;
  vertical-align: middle;
}

/* Article Content Container */
.article-content {
  flex: 1;
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 48px) clamp(20px, 5vw, 40px) clamp(64px, 8vw, 96px);
  width: 100%;
}

/* Breadcrumb */
.breadcrumb {
  margin-bottom: clamp(24px, 4vw, 36px);
  font-size: 0.85rem;
}

.breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.breadcrumb li:not(:last-child)::after {
  content: '›';
  color: var(--muted);
  opacity: 0.6;
}

.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
  transition: color 150ms ease;
}

.breadcrumb a:hover {
  color: var(--accent);
}

.breadcrumb li[aria-current="page"] {
  color: var(--fg);
}

/* Article Header */
.article-header {
  margin-bottom: clamp(24px, 4vw, 40px);
}

.article-header h1 {
  margin: 0 0 16px;
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1.15;
  font-weight: 700;
}

.article-meta {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
}

/* Hero Image */
.article-hero {
  margin: 0 0 clamp(32px, 5vw, 48px);
  border-radius: clamp(16px, 3vw, 24px);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
}

.article-hero img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Article Intro */
.article-intro {
  margin-bottom: clamp(32px, 5vw, 48px);
}

.article-intro p {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  line-height: 1.7;
  color: var(--fg);
  margin: 0;
}

.article-intro .lead {
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  color: var(--fg);
  font-weight: 500;
}

/* Table of Contents */
.table-of-contents {
  background: rgba(12, 16, 24, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: clamp(14px, 2.5vw, 20px);
  padding: clamp(20px, 3vw, 28px);
  margin-bottom: clamp(32px, 5vw, 48px);
}

.table-of-contents h2 {
  margin: 0 0 16px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent);
}

.table-of-contents ol {
  margin: 0;
  padding-left: 20px;
}

.table-of-contents li {
  margin-bottom: 10px;
}

.table-of-contents a {
  color: var(--muted);
  text-decoration: none;
  transition: color 150ms ease;
  font-size: 0.95rem;
}

.table-of-contents a:hover {
  color: var(--accent);
}

/* Article Sections */
article section {
  margin-bottom: clamp(36px, 5vw, 56px);
}

article h2 {
  margin: 0 0 20px;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  line-height: 1.2;
  font-weight: 600;
}

article h3 {
  margin: 24px 0 14px;
  font-size: clamp(1.15rem, 2.5vw, 1.35rem);
  line-height: 1.3;
  font-weight: 600;
}

article p {
  margin: 0 0 16px;
  font-size: clamp(0.95rem, 1.8vw, 1.05rem);
  line-height: 1.75;
  color: var(--muted);
}

article strong {
  color: var(--fg);
  font-weight: 600;
}

/* Lists */
article ul, article ol {
  margin: 0 0 20px;
  padding-left: 24px;
}

article li {
  margin-bottom: 10px;
  line-height: 1.6;
  color: var(--muted);
  font-size: clamp(0.95rem, 1.8vw, 1.05rem);
}

article li::marker {
  color: var(--accent);
}

/* Inline Images */
article figure {
  margin: clamp(24px, 4vw, 40px) 0;
  border-radius: clamp(14px, 2.5vw, 20px);
  overflow: hidden;
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.35);
}

article figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* Compact figure variant - for smaller inline images
   Use this class on figures that should not span full article width,
   such as mobile app screenshots or UI detail views that look better
   when displayed at a constrained size. */
article figure.figure--compact {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

article figcaption {
  padding: 14px 18px;
  background: rgba(12, 16, 24, 0.7);
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
  font-style: italic;
}

/* Article Carousel */
.article-carousel {
  position: relative;
}

.article-carousel__slides {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
}

.article-carousel__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  transition: opacity 400ms ease;
}

.article-carousel__slide--active {
  opacity: 1;
}

.article-carousel__dots {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 2;
}

.article-carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0;
  transition: background 200ms ease, transform 200ms ease;
}

.article-carousel__dot:hover {
  background: rgba(255, 255, 255, 0.7);
  transform: scale(1.2);
}

.article-carousel__dot--active {
  background: var(--accent);
}

/* CTA Box */
.article-cta {
  background: linear-gradient(145deg, var(--accent-glow), var(--accent-subtle));
  border: 1px solid rgba(164, 249, 107, 0.25);
  border-radius: clamp(18px, 3vw, 26px);
  padding: clamp(28px, 4vw, 40px);
  text-align: center;
  margin: clamp(40px, 6vw, 64px) 0;
}

.article-cta h3 {
  margin: 0 0 12px;
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  color: var(--fg);
}

.article-cta p {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: clamp(0.95rem, 1.8vw, 1.05rem);
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.button--primary {
  background: var(--accent);
  color: #041206;
  box-shadow: 0 20px 45px rgba(164, 249, 107, 0.35);
}

.button--primary:hover,
.button--primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 26px 55px rgba(164, 249, 107, 0.45);
  outline: none;
}

.button--small {
  padding: 10px 20px;
  font-size: 0.88rem;
}

/* Conclusion Section */
.article-conclusion {
  background: rgba(12, 16, 24, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: clamp(16px, 3vw, 24px);
  padding: clamp(24px, 4vw, 36px);
  margin-top: clamp(32px, 5vw, 48px);
}

.article-conclusion h2 {
  color: var(--accent);
  margin-bottom: 16px;
}

/* Related Articles */
.related-articles {
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.related-articles h2 {
  margin: 0 0 20px;
  font-size: 1.3rem;
  font-weight: 600;
}

.related-articles ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.related-articles li {
  margin-bottom: 12px;
}

.related-articles a {
  color: var(--accent);
  text-decoration: none;
  transition: color 150ms ease;
  font-size: 0.95rem;
}

.related-articles a:hover {
  text-decoration: underline;
}

/* Footer */
.site-footer {
  padding: clamp(32px, 5vw, 48px) clamp(24px, 6vw, 72px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(4, 6, 12, 0.6);
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-content p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.footer-content nav {
  display: flex;
  gap: 24px;
}

.footer-content nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 150ms ease;
}

.footer-content nav a:hover {
  color: var(--accent);
}

/* Feature Highlight Boxes */
.feature-highlight {
  background: rgba(12, 16, 24, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: clamp(14px, 2.5vw, 20px);
  padding: clamp(20px, 3vw, 28px);
  margin: clamp(24px, 4vw, 36px) 0;
}

.feature-highlight h3 {
  margin: 0 0 12px;
  color: var(--accent);
}

.feature-highlight p {
  margin: 0;
}

/* Blockquotes */
article blockquote {
  margin: clamp(24px, 4vw, 36px) 0;
  padding: 20px 24px;
  border-left: 4px solid var(--accent);
  background: rgba(164, 249, 107, 0.08);
  border-radius: 0 12px 12px 0;
}

article blockquote p {
  margin: 0;
  color: var(--fg);
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.1rem);
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
  .site-header {
    flex-wrap: wrap;
    gap: 12px;
  }
  
  .article-content {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .breadcrumb {
    font-size: 0.8rem;
  }
  
  .footer-content {
    flex-direction: column;
    text-align: center;
  }
}

/* Print styles */
@media print {
  .site-header,
  .site-footer,
  .article-cta,
  .related-articles {
    display: none;
  }
  
  body.article-page {
    background: white;
    color: black;
  }
  
  article p,
  article li {
    color: black;
  }
}