/* ===== Cyber Security Stocks page =====
 * Embeds TradingView Symbol Overview + Mini Symbol Overview widgets.
 * Theme-aware (light/dark): JS re-renders widgets on theme toggle.
 */
.stocks-page{max-width:var(--content-wide);margin:0 auto;padding:clamp(var(--sp-12),6vw,var(--sp-24)) var(--sp-6)}

.stocks-section{margin-bottom:clamp(var(--sp-8),4vw,var(--sp-12))}
.stocks-section-label{
  font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-text-faint);margin:0 0 var(--sp-3) 0;
}
.stocks-section h2{
  font-family:var(--font-display);font-weight:400;letter-spacing:-.01em;line-height:1.2;
  font-size:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  margin:0 0 var(--sp-3) 0;color:var(--color-text);
}
.stocks-section-lede{
  color:var(--color-text-muted);max-width:760px;margin:0 0 var(--sp-6) 0;font-size:var(--text-base);
}

/* Compare chart card */
.stocks-chart-card{
  background:var(--color-surface);
  border:1px solid var(--color-divider);
  border-radius:var(--radius-lg);
  padding:clamp(var(--sp-3),1.5vw,var(--sp-5));
  overflow:hidden;
}
.stocks-compare-wrap{
  position:relative;width:100%;
  height:clamp(420px,60vh,620px);
}

/* Individual mini-charts grid */
.stocks-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:var(--sp-4);
}
.stocks-mini-card{
  background:var(--color-surface);
  border:1px solid var(--color-divider);
  border-radius:var(--radius-lg);
  padding:var(--sp-3);
  overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.stocks-mini-card:hover{
  border-color:var(--color-border);
  box-shadow:0 4px 12px rgba(0,0,0,.07);
}
[data-theme="dark"] .stocks-mini-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.4)}

.stocks-mini-header{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:var(--sp-1) var(--sp-2) var(--sp-2);
  border-bottom:1px solid var(--color-divider);
  margin-bottom:var(--sp-2);
  gap:var(--sp-2);
}
.stocks-mini-ticker{
  font-weight:700;letter-spacing:.02em;
  font-size:var(--text-sm);color:var(--color-text);
}
.stocks-mini-name{
  font-size:var(--text-xs);color:var(--color-text-muted);
  font-weight:500;text-align:right;
}
.stocks-mini-chart{
  position:relative;width:100%;height:200px;
}

/* TradingView attribution */
.stocks-tv-attribution{
  font-size:var(--text-xs);
  color:var(--color-text-faint);
  margin:var(--sp-2) 0 0 0;
  text-align:right;
}
.stocks-tv-attribution a{
  color:var(--color-text-muted);text-decoration:none;
}
.stocks-tv-attribution a:hover{color:var(--color-accent)}

/* Disclosure / footer note */
.stocks-disclosure{
  margin-top:clamp(var(--sp-6),3vw,var(--sp-10));
  padding-top:var(--sp-5);
  border-top:1px solid var(--color-divider);
  font-size:var(--text-xs);color:var(--color-text-faint);line-height:1.7;
}
.stocks-disclosure a{color:var(--color-accent);text-decoration:underline;text-underline-offset:3px}

/* Mobile tuning */
@media(max-width:720px){
  .stocks-compare-wrap{height:clamp(360px,55vh,520px)}
  .stocks-grid{grid-template-columns:1fr;gap:var(--sp-3)}
  .stocks-mini-chart{height:180px}
}

/* Print: hide widgets cleanly */
@media print{
  .site-header,footer{display:none !important}
  body{background:#fff;color:#000}
  .stocks-page{padding:0;max-width:none}
  .page-title{font-size:18pt;margin-bottom:8pt}
  .page-intro{font-size:9pt;margin-bottom:8pt;color:#444 !important}
  .stocks-chart-card,.stocks-mini-card{border:1px solid #888;background:#fff !important}
  .stocks-compare-wrap,.stocks-mini-chart{height:auto;min-height:220px}
  .stocks-section h2{font-size:12pt}
  /* Hide opposite language during print */
  [data-lang="en"] [lang="de"],
  [data-lang="de"] [lang="en"]{display:none !important}
}