/* ==========================================================================
   Blog Article Styles — Reova
   ========================================================================== */

/* ===== ARTICLE HERO IMAGE ===== */
.article__hero-img {
  width: 100%;
  height: auto;
  border-radius: var(--r-xl);
  margin-bottom: var(--sp-6);
  display: block;
}

/* ===== ARTICLE LAYOUT ===== */
.article {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--sp-8) var(--gutter) var(--sp-16);
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.article__date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.article__updated {
  background: var(--c-primary-bg);
  color: var(--c-primary);
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
}

.article__reading-time {
  color: var(--c-text-muted);
}

/* ===== BREADCRUMB ===== */
.article__breadcrumb {
  padding: calc(var(--sp-24) + var(--sp-4)) 0 0;
  max-width: 780px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.article__breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.article__breadcrumb li::after {
  content: '/';
  margin-left: 6px;
  color: var(--c-border);
}

.article__breadcrumb li:last-child::after {
  display: none;
}

.article__breadcrumb a {
  color: var(--c-primary);
  text-decoration: none;
}

.article__breadcrumb a:hover {
  text-decoration: underline;
}

/* ===== TYPOGRAPHY ===== */
.article h1 {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--c-text);
  margin-bottom: var(--sp-6);
}

.article h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--c-text);
  margin-top: var(--sp-12);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--c-border-light);
}

.article h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--c-text);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
}

.article p {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-text-sec);
  margin-bottom: var(--sp-4);
}

.article strong {
  color: var(--c-text);
  font-weight: var(--fw-semibold);
}

.article a {
  color: var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article a:hover {
  color: var(--c-primary-dark);
}

/* ===== TL;DR BOX ===== */
.tldr {
  background: var(--c-primary-bg);
  border-left: 4px solid var(--c-primary);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-8);
}

.tldr__title,
.tldr > h4,
.tldr > strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--c-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--sp-4) 0;
}

.tldr ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.tldr li {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-text);
  padding-left: 20px;
  position: relative;
}

.tldr li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-primary);
}

/* ===== TOC ===== */
.toc {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-8);
}

.toc__title,
.toc > h4,
.toc > strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  margin: 0 0 var(--sp-4) 0;
}

.toc ol {
  padding-left: 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  list-style: decimal;
}

.toc a {
  font-size: var(--fs-sm);
  color: var(--c-text-sec);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.toc a:hover {
  color: var(--c-primary);
}

/* ===== TABLES ===== */
.article__table-wrap {
  overflow-x: auto;
  margin-bottom: var(--sp-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
}

.article table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.article thead {
  background: var(--c-bg-alt);
}

.article th {
  text-align: left;
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 2px solid var(--c-border);
  white-space: nowrap;
}

.article td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border-light);
  color: var(--c-text-sec);
  vertical-align: top;
}

.article tbody tr:hover {
  background: var(--c-primary-bg);
}

.article tbody tr:last-child td {
  border-bottom: none;
}

/* ===== BLOCKQUOTE (legal refs) ===== */
.article blockquote {
  border-left: 3px solid var(--c-border);
  margin: 0 0 var(--sp-6);
  padding: var(--sp-3) var(--sp-6);
  background: var(--c-bg-alt);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

.article blockquote p {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  margin-bottom: 0;
}

.article blockquote a {
  font-size: var(--fs-xs);
}

/* ===== LISTS ===== */
.article ul,
.article ol {
  padding-left: 24px;
  margin-bottom: var(--sp-4);
}

.article ul {
  list-style: disc;
}

.article ol {
  list-style: decimal;
}

.article li {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-text-sec);
  margin-bottom: var(--sp-2);
}

/* Override article list defaults for embedded components */
.article .tldr ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.article .checklist {
  list-style: none;
  padding-left: 0;
}

.article .checklist li {
  margin-bottom: 0;
}

/* ===== CHECKLIST ===== */
.checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.checklist li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-bg-alt);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.checklist li::before {
  content: '☐';
  flex-shrink: 0;
  font-size: var(--fs-lg);
  line-height: 1;
}

/* ===== VIOLATION CARD (for "7 нарушений") ===== */
.violation-card {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-4);
  transition: border-color var(--dur) var(--ease);
}

.violation-card:hover {
  border-color: var(--c-primary-light);
}

.violation-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-primary);
  color: var(--c-text-inv);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  margin-right: var(--sp-3);
  vertical-align: middle;
}

.violation-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  margin-bottom: var(--sp-2);
}

.violation-card__desc {
  font-size: var(--fs-sm);
  color: var(--c-text-sec);
  line-height: var(--lh-normal);
  margin-bottom: var(--sp-3);
}

.violation-card__fine {
  display: inline-block;
  background: var(--c-red-bg);
  color: var(--c-red);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  padding: 3px 12px;
  border-radius: var(--r-full);
}

/* ===== CTA BOX ===== */
.article-cta {
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-8);
  text-align: center;
  margin: var(--sp-8) 0;
}

.article-cta__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--c-text-inv);
  margin-bottom: var(--sp-2);
}

.article-cta__text {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--sp-5);
}

.article-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-accent);
  color: var(--c-text);
  font-weight: var(--fw-bold);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-full);
  text-decoration: none;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.article-cta__btn:hover {
  background: var(--c-accent-hover);
  transform: translateY(-1px);
  color: var(--c-text);
}

.article-cta__counter {
  display: none;
}

/* ===== CROSS-PRODUCT CTA ===== */
.cross-cta {
  background: var(--c-primary-bg);
  border: 1px solid var(--c-primary-light);
  border-left: 4px solid var(--c-primary);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  margin: var(--sp-6) 0;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.cross-cta__text {
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--c-text-sec);
  line-height: var(--lh-normal);
}

.cross-cta__link {
  flex-shrink: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
  text-decoration: none;
  white-space: nowrap;
}

.cross-cta__link:hover {
  text-decoration: underline;
}

/* ===== TIMELINE (changes) ===== */
.timeline {
  margin-bottom: var(--sp-6);
}

.timeline__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  position: relative;
}

.timeline__item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 11px;
  top: 28px;
  bottom: 0;
  width: 2px;
  background: var(--c-border);
}

.timeline__dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-primary);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline__dot::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

.timeline__date {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  font-weight: var(--fw-medium);
}

.timeline__text {
  font-size: var(--fs-sm);
  color: var(--c-text-sec);
}

/* ===== FAQ ACCORDION ===== */
.article-faq {
  margin-bottom: var(--sp-8);
}

.article-faq__item {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-3);
  overflow: hidden;
}

.article-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  text-align: left;
  font-family: var(--ff);
}

.article-faq__q::after {
  content: '+';
  font-size: var(--fs-xl);
  color: var(--c-text-muted);
  transition: transform var(--dur) var(--ease);
  flex-shrink: 0;
}

.article-faq__item.is-open .article-faq__q::after {
  transform: rotate(45deg);
}

.article-faq__a {
  display: none;
  padding: 0 var(--sp-5) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-text-sec);
  line-height: var(--lh-normal);
}

.article-faq__item.is-open .article-faq__a {
  display: block;
}

/* ===== SOURCES ===== */
.sources {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-border);
}

.sources__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  margin-bottom: var(--sp-3);
}

.sources ol {
  padding-left: 20px;
  margin: 0;
  list-style: decimal;
}

.sources li {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  margin-bottom: var(--sp-1);
  line-height: var(--lh-normal);
}

.sources a {
  color: var(--c-primary);
  text-decoration: none;
  word-break: break-all;
}

.sources a:hover {
  text-decoration: underline;
}

/* ===== BUTTON OVERRIDES INSIDE ARTICLES ===== */
/* .article a has higher specificity (0-1-1) than .btn--primary (0-1-0),
   so we need explicit overrides for buttons inside articles */
.article .btn--primary {
  color: #fff;
  text-decoration: none;
}

.article .btn--primary:hover {
  color: #fff;
}

.article .btn--outline {
  color: var(--c-primary);
  text-decoration: none;
}

.article .btn--outline:hover {
  color: var(--c-text-inv);
}

/* ===== CTA BOX (blog articles) ===== */
.cta-box {
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  text-align: center;
  margin: var(--sp-8) 0;
}

.cta-box h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--c-text-inv);
  margin-top: 0;
  margin-bottom: var(--sp-2);
  border-bottom: none;
  padding-bottom: 0;
}

.cta-box p {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--sp-5);
}

.cta-box a {
  color: #fff;
}

.cta-box--secondary {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
}

.cta-box--secondary h3 {
  color: var(--c-text);
}

.cta-box--secondary p {
  color: var(--c-text-sec);
}

.cta-box--secondary a:not(.btn) {
  color: var(--c-primary);
}

/* Fix article-cta text/button overrides by .article p / .article a */
.article .article-cta .article-cta__title {
  color: var(--c-text-inv);
}

.article .article-cta .article-cta__text {
  color: rgba(255, 255, 255, 0.8);
}

.article .article-cta__btn {
  color: #fff;
  text-decoration: none;
}

.article .article-cta__btn:hover {
  color: #fff;
}

.article .article-cta__counter {
  color: rgba(255, 255, 255, 0.6);
}

/* ===== FAQ ANSWER (alias for .faq-item__answer) ===== */
.faq-answer {
  padding: 0 var(--sp-6) var(--sp-5);
  color: var(--c-text-sec);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.faq-answer p {
  margin-bottom: var(--sp-2);
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

/* ===== BLOG-UPDATABLE BADGE ===== */
.blog-updatable:not(.article__updated):not(.article__table-wrap):not(.timeline) {
  display: inline-block;
  background: var(--c-primary-bg);
  color: var(--c-primary);
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  margin-bottom: var(--sp-4);
}

/* ===== RELATED ARTICLES ===== */
.related {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-border);
}

.related__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  margin-bottom: var(--sp-4);
}

.related__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.related__link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  text-decoration: none;
  font-size: var(--fs-sm);
  color: var(--c-text-sec);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.related__link:hover {
  border-color: var(--c-primary-light);
  background: var(--c-primary-bg);
  color: var(--c-text);
}

.related__link::before {
  content: '→';
  color: var(--c-primary);
}

/* Related articles using <ul><li><a> pattern */
.related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.related li {
  margin: 0;
}

.related li a {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  text-decoration: none;
  font-size: var(--fs-sm);
  color: var(--c-text-sec);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.related li a:hover {
  border-color: var(--c-primary-light);
  background: var(--c-primary-bg);
  color: var(--c-text);
}

.related li a::before {
  content: '→';
  color: var(--c-primary);
  flex-shrink: 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .article__breadcrumb {
    padding-top: calc(var(--sp-20) + var(--sp-2));
  }

  .article h1 {
    font-size: var(--fs-2xl);
  }

  .article h2 {
    font-size: var(--fs-xl);
    margin-top: var(--sp-8);
  }

  .article h3 {
    font-size: var(--fs-lg);
  }

  .tldr {
    padding: var(--sp-4);
  }

  .article-cta {
    padding: var(--sp-6) var(--sp-5);
  }

  .cta-box {
    padding: var(--sp-6) var(--sp-5);
  }

  .cross-cta {
    flex-direction: column;
    text-align: center;
  }

  .violation-card {
    padding: var(--sp-4);
  }
}