/* Reusable card primitives and reusable visual variants. Section CSS owns layout only. */

.vl-card {
  position: relative;
  border: var(--vl-card-border, 1px solid rgba(245, 245, 245, 0.95));
  border-radius: var(--vl-card-radius);
  background: var(--vl-card-bg, rgba(255, 255, 255, 0.93));
  box-shadow: var(--vl-card-shadow-value, var(--vl-card-shadow));
  color: var(--vl-card-color, #0a0a0a);
  overflow: hidden;
}

.vl-card--default {
  --vl-card-bg: rgba(255, 255, 255, 0.93);
  --vl-card-border: 1px solid rgba(245, 245, 245, 0.95);
  --vl-card-color: #0a0a0a;
  --vl-card-shadow-value: var(--vl-card-shadow);
}

.vl-card--dark {
  --vl-card-bg: #071017;
  --vl-card-border: 1px solid rgba(255, 255, 255, 0.22);
  --vl-card-color: #fff;
  --vl-card-shadow-value: 0 26px 48px rgba(0, 0, 0, 0.45);
}

.vl-card--panel-dark {
  --vl-card-bg:
    linear-gradient(110deg, rgba(255, 255, 255, 0.045), transparent 64%),
    rgba(8, 10, 14, 0.86);
  --vl-card-border: 1px solid rgba(255, 255, 255, 0.22);
  --vl-card-color: #fff;
  --vl-card-shadow-value: 0 26px 48px rgba(0, 0, 0, 0.45);
  --vl-card-title-color: #fff;
  --vl-card-text-color: rgba(255, 255, 255, 0.72);
}

.vl-card--panel-red-glow {
  --vl-card-bg:
    radial-gradient(circle at 10% 12%, rgba(233, 29, 37, 0.1), transparent 24%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    rgba(5, 7, 10, 0.94);
  --vl-card-border: 1px solid rgba(233, 29, 37, 0.55);
  --vl-card-color: #fff;
  --vl-card-shadow-value: 0 26px 48px rgba(0, 0, 0, 0.45);
  --vl-card-title-color: #fff;
  --vl-card-text-color: rgba(255, 255, 255, 0.72);
}

.vl-card--panel-red-strong {
  --vl-card-bg:
    radial-gradient(circle at 28% 45%, rgba(233, 29, 37, 0.13), transparent 20%),
    radial-gradient(circle at 88% 42%, rgba(233, 29, 37, 0.18), transparent 31%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    rgba(4, 5, 7, 0.94);
  --vl-card-border: 1px solid rgba(233, 29, 37, 0.72);
  --vl-card-color: #fff;
  --vl-card-shadow-value: 0 26px 60px rgba(0, 0, 0, 0.46);
  --vl-card-title-color: #fff;
  --vl-card-text-color: rgba(255, 255, 255, 0.72);
}

.vl-card--panel-red-soft {
  --vl-card-bg:
    linear-gradient(100deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    rgba(6, 8, 12, 0.93);
  --vl-card-border: 1px solid rgba(233, 29, 37, 0.52);
  --vl-card-color: #fff;
  --vl-card-shadow-value: 0 26px 48px rgba(0, 0, 0, 0.45);
  --vl-card-title-color: #fff;
  --vl-card-text-color: rgba(255, 255, 255, 0.72);
}

.vl-card--content-tight {
  --vl-card-eyebrow-margin: 0 0 10px;
  --vl-card-title-margin: 0 0 9px;
  --vl-card-text-margin: 0;
}

.vl-section-thesis {
  --vl-section-thesis-gap: 28px;
  --vl-section-thesis-min-height: 82px;
  --vl-section-thesis-margin: clamp(24px, 3vh, 34px) 0;
  --vl-section-thesis-padding: 0 48px;
  --vl-section-thesis-color: rgba(255, 255, 255, 0.9);
  --vl-section-thesis-font-size: 24px;
  --vl-section-thesis-line-height: 1.2;
  --vl-section-thesis-icon-size: 66px;
  --vl-section-thesis-icon-font-size: 33px;

  display: flex;
  align-items: center;
  gap: var(--vl-section-thesis-gap);
  min-height: var(--vl-section-thesis-min-height);
  margin: var(--vl-section-thesis-margin);
  padding: var(--vl-section-thesis-padding);
  color: var(--vl-section-thesis-color);
  font-size: var(--vl-section-thesis-font-size);
  line-height: var(--vl-section-thesis-line-height);
}

.vl-section-thesis__icon {
  display: grid;
  place-items: center;
  width: var(--vl-section-thesis-icon-size);
  height: var(--vl-section-thesis-icon-size);
  flex: 0 0 auto;
  border: 2px solid var(--vl-red-bright);
  border-radius: 50%;
  color: #fff;
  font-size: var(--vl-section-thesis-icon-font-size);
  box-shadow: 0 0 24px rgba(233, 29, 37, 0.45), inset 0 0 21px rgba(233, 29, 37, 0.16);
}

.vl-card--interactive-red-shift {
  transition: transform 180ms ease;
}

.vl-card--interactive-red-shift:hover,
.vl-card--interactive-red-shift:focus-visible {
  --vl-card-bg:
    linear-gradient(110deg, rgba(233, 29, 37, 0.12), transparent 64%),
    rgba(12, 14, 20, 0.94);
  --vl-card-border: 1px solid rgba(233, 29, 37, 0.78);

  outline: none;
  transform: translateX(5px);
}

.vl-card--interactive-red-lift {
  transition: transform 250ms ease, border-color 250ms ease, background 250ms ease;
}

.vl-card--interactive-red-lift:hover,
.vl-card--interactive-red-lift:focus-visible {
  --vl-card-bg: rgba(14, 16, 24, 0.82);
  --vl-card-border: 1px solid rgba(233, 29, 37, 0.72);

  outline: none;
  transform: translateY(-6px);
}

.vl-card--nav-dark {
  --vl-card-title-size: 18px;
  --vl-card-title-letter-spacing: 0.08em;
  --vl-card-title-line-height: 1;
  --vl-card-title-margin: 0 0 12px;
  --vl-card-text-size: 15px;
  --vl-card-text-line-height: 1.42;
  --vl-card-text-color: rgba(255, 255, 255, 0.68);
}

.vl-card--node-dark {
  --vl-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(10, 12, 14, 0.74);
  --vl-card-border: 1px solid rgba(255, 255, 255, 0.12);
  --vl-card-color: rgba(255, 255, 255, 0.92);
  --vl-card-shadow-value: none;
}

.vl-card--accent-top {
  border-top: var(--vl-card-accent-line-width, 2px) solid var(--vl-card-accent-color, var(--vl-red-bright));
}

.vl-card--media-dark {
  height: var(--vl-card-height, 100%);
  min-height: var(--vl-card-min-height, 0);
  --vl-card-bg: #071017;
  --vl-card-border: 1px solid rgba(255, 255, 255, 0.22);
  --vl-card-shadow-value: 0 26px 48px rgba(0, 0, 0, 0.45);
  --vl-card-title-color: #fff;
  --vl-card-title-margin: 0 0 18px;
  --vl-card-text-color: rgba(255, 255, 255, 0.86);
  --vl-card-text-max-width: 420px;
}

.vl-card--media-dark::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, transparent 45%, rgba(4, 10, 14, 0.58) 58%, #071017 72%, #071017 100%),
    linear-gradient(90deg, rgba(233, 29, 37, 0.08), transparent 28%, transparent 72%, rgba(233, 29, 37, 0.08));
  content: "";
  pointer-events: none;
  z-index: 1;
}

.vl-card-grid {
  display: grid;
  grid-template-columns: var(--vl-card-grid-columns, repeat(3, minmax(0, 1fr)));
  justify-content: var(--vl-card-grid-justify, start);
  align-items: stretch;
  gap: var(--vl-card-grid-gap, 24px);
}

.vl-card__image {
  display: block;
  width: 100%;
  height: var(--vl-card-media-height, auto);
  object-fit: var(--vl-card-media-fit, cover);
  object-position: var(--vl-card-media-position, center);
}

.vl-card--media-dark > .vl-card__image {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.vl-card__body {
  position: relative;
  z-index: 2;
  margin-top: var(--vl-card-body-offset, 0);
  padding: var(--vl-card-body-padding, 29px 30px 33px);
}

.vl-card__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--vl-card-eyebrow-gap, 13px);
  margin: var(--vl-card-eyebrow-margin, 0 0 28px);
  color: var(--vl-card-eyebrow-color, var(--vl-red-bright));
  font-size: var(--vl-card-eyebrow-size, 11px);
  font-weight: 900;
  letter-spacing: var(--vl-card-eyebrow-letter-spacing, 4.3px);
  line-height: 1;
  text-transform: uppercase;
}

.vl-card__icon {
  display: grid;
  place-items: center;
  width: var(--vl-card-icon-size, 38px);
  height: var(--vl-card-icon-size, 38px);
  flex: 0 0 auto;
  border: var(--vl-card-icon-border, 2px solid currentColor);
  border-radius: 50%;
  color: var(--vl-card-icon-color, currentColor);
  font-size: var(--vl-card-icon-font-size, 16px);
}

.vl-card__title {
  display: block;
  margin: var(--vl-card-title-margin, 0);
  color: var(--vl-card-title-color, currentColor);
  font-family: var(--vl-display);
  font-size: var(--vl-card-title-size);
  font-weight: 900;
  letter-spacing: var(--vl-card-title-letter-spacing);
  line-height: var(--vl-card-title-line-height);
  text-transform: uppercase;
}

.vl-card__text {
  display: block;
  max-width: var(--vl-card-text-max-width, none);
  margin: var(--vl-card-text-margin, 0);
  color: var(--vl-card-text-color, currentColor);
  font-size: var(--vl-card-text-size);
  line-height: var(--vl-card-text-line-height);
}

@media (max-width: 900px) {
  .vl-section-thesis {
    --vl-section-thesis-gap: 20px;
    --vl-section-thesis-padding: 22px 24px;
    --vl-section-thesis-font-size: 22px;

    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .vl-section-thesis {
    --vl-section-thesis-icon-size: 58px;
    --vl-section-thesis-icon-font-size: 27px;
    --vl-section-thesis-font-size: 20px;

    flex-direction: column;
  }
}