/* ============================================================
   article-t10.css — Opinion / Commentary Template
   Intent: Informational | Layout: Single column + pull quote cards
   ============================================================ */

.article-t10 {
  padding: var(--rhythm-loose) 0 var(--rhythm-breath);
}

.article-t10 .article-hero {
  max-width: 720px;
  margin: 0 auto var(--rhythm-loose);
  padding: 0 var(--gutter);
}

.article-t10 .article-kicker {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent-600);
  padding: 3px 10px;
  background: hsl(14 76% 55% / 0.1);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}

.article-t10 h1 {
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  margin-bottom: var(--rhythm-normal);
  letter-spacing: var(--tracking-tight);
}

.article-t10 .article-lead {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-style: italic;
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: 55ch;
  padding-left: var(--space-5);
  border-left: 3px solid var(--color-accent-400);
}

.article-t10 .article-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.article-t10 .article-body p {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  margin-bottom: var(--rhythm-normal);
  color: var(--color-text-primary);
}

.article-t10 .article-body h2 {
  font-size: var(--text-2xl);
  margin-top: var(--rhythm-breath);
  margin-bottom: var(--rhythm-normal);
  color: var(--color-text-primary);
}

/* Author's view box */
.article-t10 .author-view {
  margin: var(--rhythm-loose) 0;
  padding: var(--space-5) var(--space-6);
  background: linear-gradient(135deg, hsl(152 46% 97%) 0%, hsl(14 76% 97%) 100%);
  border-radius: var(--radius-lg);
  position: relative;
}
.article-t10 .author-view::before {
  content: 'MY TAKE';
  position: absolute;
  top: -12px;
  left: var(--space-5);
  background: var(--color-accent-500);
  color: white;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-wider);
}
.article-t10 .author-view p:first-of-type { margin-top: var(--space-2); }
.article-t10 .author-view p:last-child { margin-bottom: 0; }

/* Pull quote */
.article-t10 .pull-quote {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--color-primary-700);
  text-align: center;
  padding: var(--rhythm-loose) var(--space-4);
  margin: var(--rhythm-loose) 0;
  position: relative;
  max-width: none;
  border: none;
}
.article-t10 .pull-quote::before,
.article-t10 .pull-quote::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: var(--color-accent-500);
}
.article-t10 .pull-quote::before { top: 0; }
.article-t10 .pull-quote::after { bottom: 0; }

/* Disagreement block */
.article-t10 .counter-point {
  margin: var(--rhythm-normal) 0;
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border-strong);
}
.article-t10 .counter-point::before {
  content: 'COUNTERPOINT';
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-2);
}
.article-t10 .counter-point p:last-child { margin-bottom: 0; }

/* Conclusion box */
.article-t10 .opinion-conclusion {
  margin-top: var(--rhythm-breath);
  padding: var(--space-6);
  background: var(--color-primary-700);
  color: white;
  border-radius: var(--radius-lg);
}
.article-t10 .opinion-conclusion h2 {
  color: white;
  margin-top: 0;
  font-size: var(--text-xl);
}
.article-t10 .opinion-conclusion p { color: hsl(152 30% 94%); }
.article-t10 .opinion-conclusion a { color: var(--color-accent-300); }

@media (max-width: 768px) {
  .article-t10 h1 { font-size: var(--text-3xl); }
  .article-t10 .article-lead { font-size: var(--text-lg); }
  .article-t10 .article-body p { font-size: var(--text-base); }
  .article-t10 .pull-quote { font-size: var(--text-xl); }
}