/* ============================================================
   Compendium Article Pages
   Extends the base style.css with article-specific layout
   ============================================================ */

.article-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

.article-title {
  font-family: var(--font-title);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--white);
  border-bottom: 1px solid var(--card-border);
  padding-bottom: 12px;
  margin-bottom: 10px;
}

.article-meta {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.article-meta a { color: var(--gold); }

/* ── TOC ── */
.article-toc {
  float: right;
  clear: right;
  margin: 0 0 20px 28px;
  padding: 16px 20px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  min-width: 200px;
  max-width: 260px;
  font-family: var(--font-body);
  font-size: 0.85rem;
}

.article-toc strong {
  display: block;
  font-family: var(--font-title);
  color: var(--gold);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.article-toc ol {
  margin: 0;
  padding-left: 18px;
}

.article-toc li { margin: 5px 0; }
.article-toc a { color: var(--text-muted); text-decoration: none; }
.article-toc a:hover { color: var(--gold); }

/* ── Article Body ── */
.article-body {
  line-height: 1.75;
}

/* ── Photo slideshow ─────────────────────────────────────────
   Renders <div class="article-photos"> as a single-image-at-a-time
   slideshow with hover arrows and touch swipe support. Sits at the
   top of the article body; the floated TOC sits to its right on desktop.
   Hidden when empty. In edit mode (body.rt-editing) the slideshow chrome
   is torn down by JS and images stack vertically so contributors can
   manage them inline. */
.article-photos:not(.has-photos) { display: none; }

.article-photos.rt-slideshow-active {
  position: relative;
  margin: 0 0 28px 0;
  background: var(--deep-navy);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
  /* No fixed aspect — the container adapts to whichever photo is showing.
     We cap the height so very tall portrait shots don't dominate the page,
     and ensure the box has at least some height when the active image is
     still loading. */
  max-height: 460px;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  /* Smooth height changes when switching between photos of different aspects */
  transition: height 0.2s ease;
}

.article-photos.rt-slideshow-active > img {
  display: none;
  max-width: 100%;
  max-height: 460px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.article-photos.rt-slideshow-active > img.active {
  display: block;
}

.rt-photo-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  background: rgba(0, 0, 0, 0.55);
  color: var(--white);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.18s, background 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  padding: 0 0 3px 0; /* nudge the chevron up a hair */
  z-index: 2;
}
.article-photos.rt-slideshow-active:hover .rt-photo-nav,
.article-photos.rt-slideshow-active:focus-within .rt-photo-nav {
  opacity: 1;
}
.rt-photo-nav:hover { background: rgba(0, 0, 0, 0.85); }
.rt-photo-prev { left: 12px; }
.rt-photo-next { right: 12px; }

.rt-photo-counter {
  position: absolute;
  bottom: 10px;
  right: 12px;
  background: rgba(0, 0, 0, 0.6);
  color: var(--white);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 10px;
  pointer-events: none;
  font-family: var(--font-body);
  z-index: 2;
}

/* Single-photo case: hide nav/counter (only one image to show) */
.article-photos.rt-slideshow-active:not(.multi) .rt-photo-nav,
.article-photos.rt-slideshow-active:not(.multi) .rt-photo-counter {
  display: none;
}

/* Mobile / touch: arrows always visible (no hover on touch devices) */
@media (hover: none) {
  .article-photos.rt-slideshow-active .rt-photo-nav { opacity: 0.85; }
}

/* Edit mode: slideshow chrome is removed by JS; show all photos stacked */
body.rt-editing .article-photos {
  display: block;
  margin: 0 0 24px 0;
  padding: 12px;
  background: rgba(201, 160, 74, 0.06);
  border: 1px dashed var(--gold-dark);
  border-radius: var(--radius);
}
body.rt-editing .article-photos > img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 0 10px 0;
  border-radius: 4px;
  position: static;
  opacity: 1;
  pointer-events: auto;
  background: transparent;
}
body.rt-editing .article-photos:empty::before,
body.rt-editing .article-photos:not(:has(img))::before {
  content: "Drop or paste device photos here";
  display: block;
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.9rem;
}

.article-body h2 {
  font-family: var(--font-title);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--white);
  border-bottom: 1px solid var(--card-border);
  padding-bottom: 6px;
  margin-top: 36px;
  margin-bottom: 14px;
  clear: both;
}

.article-body h3 {
  font-family: var(--font-title);
  font-size: 1.05rem;
  color: var(--gold);
  margin-top: 24px;
  margin-bottom: 10px;
}

.article-body p {
  margin: 0.8em 0;
  color: var(--text);
}

.article-body ul, .article-body ol {
  padding-left: 24px;
  margin: 0.8em 0;
  color: var(--text);
}

.article-body li { margin: 6px 0; }

.article-body strong { color: var(--white); }
.article-body em { color: var(--text-muted); font-style: italic; }

.article-body a { color: var(--gold); }
.article-body a:hover { color: var(--gold-light); }

/* ── Specs Table ── */
.specs-table {
  border-collapse: collapse;
  width: 100%;
  max-width: 600px;
  margin: 16px 0;
  font-family: var(--font-body);
  font-size: 0.88rem;
}

.specs-table td {
  border: 1px solid var(--card-border);
  padding: 8px 14px;
  color: var(--text);
  vertical-align: top;
}

.specs-table tr:first-child td {
  background: var(--card-bg);
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.specs-table tr:nth-child(even) td {
  background: rgba(255,255,255,0.02);
}

.specs-table td:first-child {
  color: var(--white);
  font-weight: 600;
  white-space: nowrap;
  width: 40%;
}

/* ── Article Footer ── */
.article-footer {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--card-border);
  clear: both;
}

.article-footer h2 {
  font-family: var(--font-title);
  font-size: 1rem;
  color: var(--white);
  margin-bottom: 14px;
}

.source-threads {
  list-style: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.88rem;
}

.source-threads li { margin: 8px 0; }
.source-threads a { color: var(--gold); }
.post-count { color: var(--text-muted); font-size: 0.8rem; }

.archive-notice {
  margin-top: 20px;
  padding: 14px 18px;
  background: var(--card-bg);
  border-left: 3px solid var(--gold-dark);
  border-radius: 0 6px 6px 0;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.archive-notice a { color: var(--gold); }

/* ── Suggest Edit (inside TOC box) ── */
.toc-suggest-edit {
  display: block;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--card-border);
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.toc-suggest-edit:hover {
  color: var(--gold);
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .article-toc {
    float: none;
    margin: 0 0 24px 0;
    max-width: 100%;
  }
}