/* =========================
   Scientific article layout
   NATURASCHUTZ.CH
   ========================= */

.article-page {
  background:
    radial-gradient(circle at top left, rgba(143, 189, 63, 0.08), transparent 30rem),
    var(--color-bg);
}

.article-header {
  padding-block: var(--space-3xl) var(--space-2xl);
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, #ffffff 0%, rgba(248, 250, 246, 0.82) 100%);
}

.article-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: var(--space-2xl);
  align-items: start;
}

.article-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.article-breadcrumbs a {
  color: var(--color-accent-dark);
  font-weight: var(--font-weight-semibold);
}

.article-breadcrumbs span:not(:last-child)::after,
.article-breadcrumbs a::after {
  content: "/";
  margin-left: 0.45rem;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
}

.article-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}

.article-title {
  max-width: 16ch;
  margin-bottom: var(--space-md);
  font-size: clamp(2.3rem, 5vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.article-deck {
  max-width: 78ch;
  font-size: var(--font-size-md);
  line-height: var(--line-height-loose);
  color: var(--color-text-soft);
}

.article-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}

.article-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-primary-dark);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.article-chip--caution {
  border-color: rgba(156, 123, 47, 0.34);
  background: rgba(156, 123, 47, 0.09);
  color: var(--color-warning);
}

.article-meta-card {
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.article-meta-card h2 {
  max-width: 100%;
  margin-bottom: var(--space-md);
  font-size: var(--font-size-lg);
}

.article-meta-list {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
}

.article-meta-list div {
  display: grid;
  gap: 0.1rem;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.article-meta-list div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.article-meta-list dt {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}

.article-meta-list dd {
  margin: 0;
  color: var(--color-text-soft);
  font-size: var(--font-size-sm);
}

.language-tools {
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(10px);
}

.language-tools__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.language-tools__label {
  margin: 0;
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-semibold);
}

.language-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.language-switcher__button {
  min-height: 40px;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-primary-dark);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.language-switcher__button:hover,
.language-switcher__button:focus-visible {
  transform: translateY(-1px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

.language-switcher__button.is-active,
.language-switcher__button[aria-pressed="true"] {
  border-color: rgba(143, 189, 63, 0.55);
  background: var(--color-accent-soft);
  color: var(--color-primary-dark);
}

.scientific-layout {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: start;
  padding-block: var(--space-3xl);
}

.article-sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--space-lg));
  display: grid;
  gap: var(--space-lg);
}

.article-sidebar__box {
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow-sm);
}

.article-sidebar__box h2,
.article-sidebar__box h3 {
  max-width: 100%;
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-md);
}

.article-sidebar__box p,
.article-sidebar__box li {
  font-size: var(--font-size-sm);
}

.article-toc {
  display: grid;
  gap: 0.45rem;
}

.article-toc a {
  display: block;
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-soft);
  font-size: var(--font-size-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.article-toc a:hover,
.article-toc a:focus-visible {
  background: var(--color-accent-soft);
  color: var(--color-primary-dark);
}

.article-main {
  min-width: 0;
}

.article-lang-panel[hidden] {
  display: none !important;
}

.scientific-paper {
  display: grid;
  gap: var(--space-2xl);
}

.paper-section {
  padding: var(--space-2xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.paper-section--plain {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.paper-section__label {
  display: inline-block;
  margin-bottom: var(--space-xs);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}

.paper-section h2,
.paper-section h3 {
  max-width: 100%;
}

.paper-section h2 {
  font-size: clamp(1.65rem, 3vw, 2.35rem);
}

.paper-section h3 {
  margin-top: var(--space-lg);
}

.paper-section p,
.paper-section li {
  max-width: 80ch;
}

.structured-abstract {
  display: grid;
  gap: var(--space-md);
}

.abstract-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.abstract-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.abstract-row strong {
  color: var(--color-primary-dark);
}

.key-findings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.key-finding {
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-soft);
}

.key-finding strong {
  display: block;
  margin-bottom: var(--space-xs);
}

.evidence-table {
  width: 100%;
  margin-top: var(--space-lg);
  border-collapse: collapse;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
}

.evidence-table th,
.evidence-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.evidence-table th {
  background: var(--color-surface-alt);
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-bold);
}

.evidence-table tr:last-child td {
  border-bottom: 0;
}

.caution-box,
.method-box,
.source-box {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface-soft);
}

.caution-box {
  border-left: 4px solid var(--color-warning);
}

.method-box {
  border-left: 4px solid var(--color-primary-light);
}

.source-box {
  border-left: 4px solid var(--color-accent);
}

.scientific-figure {
  margin: 0;
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.scientific-figure img,
.scientific-figure iframe {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
}

.scientific-figure figcaption {
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

.references-list {
  display: grid;
  gap: var(--space-sm);
  padding-left: 1.2rem;
  list-style: decimal;
}

.references-list a {
  color: var(--color-accent-dark);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.article-end-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

@media (max-width: 1060px) {
  .article-header__inner,
  .scientific-layout {
    grid-template-columns: 1fr;
  }

  .article-sidebar {
    position: static;
    order: 2;
  }

  .article-main {
    order: 1;
  }
}

@media (max-width: 768px) {
  .article-header {
    padding-block: var(--space-2xl);
  }

  .article-title {
    max-width: 100%;
  }

  .language-tools__inner {
    align-items: flex-start;
  }

  .language-switcher {
    width: 100%;
  }

  .language-switcher__button {
    flex: 1 1 calc(50% - var(--space-xs));
  }

  .scientific-layout {
    padding-block: var(--space-2xl);
    gap: var(--space-xl);
  }

  .paper-section {
    padding: var(--space-lg);
  }

  .abstract-row {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }

  .key-findings {
    grid-template-columns: 1fr;
  }

  .evidence-table {
    display: block;
    overflow-x: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .language-switcher__button,
  .article-toc a {
    transition: none;
  }
}

/* =========================
   Scientific article refinements V5
   ========================= */

.scientific-paper {
  max-width: 880px;
}

.scientific-paper p,
.scientific-paper li {
  font-size: 1.02rem;
  line-height: 1.85;
}

.scientific-list {
  display: grid;
  gap: var(--space-sm);
  margin: var(--space-lg) 0 0;
  padding-left: 1.2rem;
  list-style: disc;
}

.scientific-list li {
  color: var(--color-text-soft);
}

.article-main {
  min-width: 0;
}

@media (max-width: 980px) {
  .scientific-paper {
    max-width: 100%;
  }
}

/* =========================
   V5.1 scientific article refinements
   ========================= */

.article-language-panel[hidden],
.article-lang-panel[hidden],
[data-lang-panel][hidden] {
  display: none !important;
}

.article-title-panel[hidden],
.article-deck-panel[hidden] {
  display: none !important;
}

.article-toc a.is-current {
  background: var(--color-accent-soft);
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-semibold);
}

.paper-section:target,
.scientific-figure:target {
  outline: 3px solid rgba(143, 189, 63, 0.22);
  outline-offset: 5px;
}

/* =========================================================
   V3.1 mobile-safe scientific article typography
   ========================================================= */
.article-breadcrumbs, .article-title, .article-deck, .article-chip, .paper-section, .article-meta-card { min-inline-size: 0; max-inline-size: 100%; }
.article-title { overflow-wrap: anywhere; hyphens: auto; text-wrap: balance; }
.article-deck { overflow-wrap: break-word; }
.article-chip { white-space: normal; }
.article-status-row { max-inline-size: 100%; }
.article-meta-card { overflow: clip; }
.paper-section { overflow-wrap: break-word; }
.evidence-table { max-inline-size: 100%; }
@media (max-width: 768px) {
  .article-header { padding-block: clamp(2rem, 8vw, var(--space-2xl)); }
  .article-title { font-size: clamp(2.05rem, 10.5vw, 3.2rem); line-height: 1.04; letter-spacing: -0.045em; max-inline-size: 100%; }
  .article-deck { font-size: clamp(1rem, 4.4vw, 1.125rem); line-height: 1.68; }
  .article-status-row { gap: 0.55rem; }
  .article-chip { max-inline-size: 100%; }
  .article-meta-card, .paper-section, .scientific-figure { border-radius: var(--radius-lg); }
  .evidence-table { display: block; inline-size: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 420px) {
  .article-title { font-size: clamp(1.95rem, 10vw, 2.65rem); letter-spacing: -0.035em; }
  .article-kicker { letter-spacing: 0.11em; }
  .article-meta-card, .paper-section { padding: var(--space-md); }
}

/* =========================
   Article bullet lists
   ========================= */

.scientific-paper .article-list {
  display: grid;
  gap: var(--space-sm);
  margin: var(--space-lg) 0 var(--space-lg);
  padding-left: 1.6rem;
  list-style: disc;
  list-style-position: outside;
}

.scientific-paper .article-list li {
  display: list-item;
  color: var(--color-text-soft);
  padding-left: 0.15rem;
}

.scientific-paper .article-list li::marker {
  color: var(--color-accent-dark);
}