/* panel — content-element tag <panel> */

/* ═══════════════════════════════════════════════════════════
   Panel Block (.panel)
   Visually separated content container for multi-paragraph,
   text-heavy sections that need structural breathing room.

   Variants:  card (default), ruled
   Themes:    light, dark, accent, success, warning
              gradient, dark+gradient, success+gradient, …
   Modifiers: border, compact, body
   ═══════════════════════════════════════════════════════════ */

/* ── Base ── */
article .panel {
  --panel-text-size: 0.9375rem;
  margin: 2rem 0;
  border-radius: var(--radius);
}

/* Paragraphs and list items share one size, so bullets never outgrow body text */
article .panel p,
article .panel li {
  font-size: var(--panel-text-size);
}

article .panel.panel--body p,
article .panel.panel--body li {
  font-size: inherit;
}

article .panel > p:last-child,
article .panel > ul:last-child,
article .panel > ol:last-child {
  margin-bottom: 0;
}

/* ── Label — acts as the panel heading: never smaller than the panel text ── */
article .panel-label {
  display:        block;
  font-size:      1rem;
  font-weight:    700;
  line-height:    1.4;
  margin-bottom:  0.75rem;
  color:          var(--panel-label-color, var(--color-text-muted));
}

article .panel-label::before {
  content:        '';
  display:        inline-block;
  width:          5px;
  height:         5px;
  border-radius:  50%;
  background:     currentColor;
  margin-right:   0.45em;
  vertical-align: 0.1em;
  opacity:        0.7;
}

/* ══════════════════════════════════════════════════════════════
   Themes — set CSS custom properties consumed by variants
   ══════════════════════════════════════════════════════════════ */

article .panel--light {
  --panel-bg:          var(--color-primary-50);
  --panel-border:      var(--color-primary-100);
  --panel-accent:      var(--color-primary);
  --panel-label-color: #5e72a8;
  --panel-grad-from:   var(--color-primary-50);
  --panel-circle-rgb:  3, 33, 105;
}

article .panel--dark {
  --panel-bg:          var(--color-primary);
  --panel-border:      rgba(255, 255, 255, 0.08);
  --panel-accent:      var(--color-primary);
  --panel-label-color: rgba(255, 255, 255, 0.45);
  --panel-color:       rgba(255, 255, 255, 0.9);
  --panel-grad-from:   var(--color-primary);
  --panel-grad-to:     #021648;
  --panel-circle-rgb:  255, 255, 255;
}

article .panel--accent {
  --panel-bg:          var(--color-accent-50);
  --panel-border:      var(--color-accent-100);
  --panel-accent:      var(--color-accent);
  --panel-label-color: var(--color-accent);
  --panel-grad-from:   var(--color-accent-50);
  --panel-circle-rgb:  203, 0, 62;
}

article .panel--success {
  --panel-bg:          var(--color-emerald-50);
  --panel-border:      var(--color-emerald-100);
  --panel-accent:      var(--color-emerald-600);
  --panel-label-color: var(--color-emerald-600);
  --panel-grad-from:   var(--color-emerald-50);
  --panel-circle-rgb:  5, 150, 105;
}

article .panel--warning {
  --panel-bg:          var(--color-amber-50);
  --panel-border:      var(--color-amber-100);
  --panel-accent:      var(--color-amber-500);
  --panel-label-color: var(--color-amber-700);
  --panel-grad-from:   var(--color-amber-50);
  --panel-circle-rgb:  245, 158, 11;
}

/* ══════════════════════════════════════════════════════════════
   Card — white has border by default; themed variants are borderless
   ══════════════════════════════════════════════════════════════ */

article .panel--card {
  background: var(--panel-bg, #fff);
  border:     1px solid var(--panel-border, var(--color-neutral-200));
  padding:    1.75rem 2rem;
  color:      var(--panel-color, inherit);
}

/* Themed cards provide their own visual separation — no border needed */
article .panel--card.panel--light,
article .panel--card.panel--dark,
article .panel--card.panel--accent,
article .panel--card.panel--success,
article .panel--card.panel--warning { border: none; }

article .panel--card.panel--dark a      { color: rgba(255, 255, 255, 0.75); }
article .panel--card.panel--dark strong { color: #fff; }

/* ── Border opt-in (overrides themed borderless) ── */
article .panel--border {
  border: 1px solid var(--panel-border, var(--color-neutral-200));
}

/* ══════════════════════════════════════════════════════════════
   Gradient modifier — diagonal brand gradient with decorative
   circles. Works with any variant + color theme via + syntax.
   e.g. theme="dark+gradient", theme="success+gradient"
   ══════════════════════════════════════════════════════════════ */

article .panel--gradient {
  background: linear-gradient(135deg, var(--panel-grad-from, var(--color-primary-50)) 0%, var(--panel-grad-to, #fff) 100%);
  position:   relative;
  overflow:   hidden;
}

/* Large decorative circle — bottom right */
article .panel--gradient::before {
  content:        '';
  position:       absolute;
  bottom: -3rem;  right: -2rem;
  width:          13rem;
  height:         13rem;
  border-radius:  50%;
  pointer-events: none;
  background:     rgba(var(--panel-circle-rgb, 3, 33, 105), 0.06);
}

/* Small decorative circle — top right */
article .panel--gradient::after {
  content:        '';
  position:       absolute;
  top: -2.5rem;   right: 5rem;
  width:          8rem;
  height:         8rem;
  border-radius:  50%;
  pointer-events: none;
  background:     rgba(var(--panel-circle-rgb, 3, 33, 105), 0.035);
}

article .panel--gradient .panel-label,
article .panel--gradient p,
article .panel--gradient ul,
article .panel--gradient ol { position: relative; z-index: 1; }

/* Gradient cards are also borderless — background is the visual anchor */
article .panel--gradient { border: none; }

article .panel--gradient.panel--dark a      { color: rgba(255, 255, 255, 0.75); }
article .panel--gradient.panel--dark strong { color: #fff; }

/* ══════════════════════════════════════════════════════════════
   Ruled — accent top line, text-focused
   ══════════════════════════════════════════════════════════════ */

article .panel--ruled {
  border-top:    3px solid var(--panel-accent, var(--color-primary));
  border-bottom: 1px solid var(--panel-border, var(--color-neutral-200));
  border-radius: 0;
  padding:       1.5rem 0;
  background:    transparent;
}

/* ══════════════════════════════════════════════════════════════
   Compact — reduced padding and text
   ══════════════════════════════════════════════════════════════ */

article .panel--compact.panel--card,
article .panel--compact.panel--gradient { padding: 1.125rem 1.375rem; }

article .panel--compact.panel--ruled    { padding: 1rem 0; }

article .panel--compact                 { --panel-text-size: 0.875rem; }

article .panel--compact .panel-label    { margin-bottom: 0.625rem; }

/* ══════════════════════════════════════════════════════════════
   Embedded tables — on a tinted panel, rows switch to white /
   light-grey striping instead of repeating the panel's tint
   ══════════════════════════════════════════════════════════════ */

article .panel .comparison-table tbody tr                  { background: #fff; border-bottom-color: var(--color-neutral-100); }
article .panel .comparison-table tbody tr:nth-child(even)  { background: var(--color-neutral-25); }
article .panel .comparison-table tbody tr:hover            { background: var(--color-neutral-50); }