/* ==========================================================================
   3RR Game — about.css
   Statement masthead with a hard diagonal colour block, mission/vision
   panels, principle badges and the closing CTA band.
   ========================================================================== */

/* ------------------------------------------------- 1. statement masthead */
.ab-hero {
  position: relative;
  padding-block: 0 clamp(3rem, 7vw, 5rem);
  overflow: hidden;
  background: var(--color-bg-base);
}
.ab-hero > .wrap { position: relative; z-index: 1; }

/* the bold sapphire block that sits behind the statement */
.ab-hero__block {
  position: absolute;
  z-index: 0;
  top: -10%;
  right: -22%;
  width: 86%;
  height: 130%;
  background: linear-gradient(148deg, var(--color-sapphire-block) 0%, var(--color-sapphire-block-light) 55%, var(--color-cyan-scoreboard) 128%);
  clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%);
  opacity: 0.11;
  animation: blockDrift 24s ease-in-out infinite alternate;
}

.ab-hero__inner { max-width: 74ch; padding-top: clamp(1rem, 3vw, 2rem); }
.ab-hero h1 { margin-bottom: var(--space-md); }
.ab-hero .lead { max-width: 62ch; margin-bottom: var(--space-lg); }

@media (min-width: 1200px) { .ab-hero__inner { padding-block: clamp(1.5rem, 4vw, 3rem) 0; } }

/* -------------------------------------------------- 2. mission / vision */
.mv { display: grid; gap: var(--space-lg); }

.mv__panel {
  position: relative;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.mv__panel--mission { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%); }
.mv__panel--vision  { clip-path: polygon(26px 0, 100% 0, 100% 100%, 0 100%, 0 26px); }

.mv__panel::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--color-sapphire-block), var(--color-cyan-scoreboard));
  transform: skewY(-0.4deg);
}
.mv__panel--vision::after { background: linear-gradient(90deg, var(--color-cyan-scoreboard), var(--color-sapphire-block)); }

.mv__label {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-sapphire-block);
}
.mv__panel--vision .mv__label { color: var(--color-cyan-ink); }

.mv__panel h3 { font-size: 1.4rem; margin-bottom: var(--space-md); }
.mv__panel p { font-size: var(--fs-sm); }

@media (min-width: 768px) { .mv { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .mv__panel--vision { transform: translateY(28px); } }

/* ------------------------------------------------------- 3. principles */
.principles { display: grid; gap: var(--space-lg); }

.principle {
  position: relative;
  padding: clamp(1.5rem, 3.8vw, 2.1rem);
  background: var(--color-surface-card);
  clip-path: var(--clip-angle-panel);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-mid) var(--ease-snap), box-shadow var(--dur-mid) var(--ease-out);
}
.principle:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
.principle h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.principle p { font-size: var(--fs-sm); }

.principle__badge {
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  margin-bottom: var(--space-md);
  background: linear-gradient(125deg, var(--color-sapphire-deep), var(--color-sapphire-block-light));
  clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%);
  color: #fff;
  box-shadow: 0 10px 22px rgba(30, 79, 216, 0.26);
}
.principle__badge svg { width: 28px; height: 28px; }
.principle__badge--cyan { background: linear-gradient(125deg, var(--color-cyan-ink), var(--color-cyan-scoreboard)); box-shadow: 0 10px 22px rgba(20, 216, 242, 0.28); }
.principle__badge--navy { background: linear-gradient(125deg, var(--color-navy-ink), #2A3D68); box-shadow: 0 10px 22px rgba(11, 23, 48, 0.28); }

@media (min-width: 1200px) { .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------- 4. affiliate split */
.ab-split { display: grid; gap: clamp(2rem, 5vw, 3rem); align-items: start; }

.ab-panel {
  padding: clamp(1.35rem, 3.4vw, 1.9rem);
  background: var(--color-surface-card);
  clip-path: var(--clip-angle-panel);
  box-shadow: var(--shadow-card);
}
.ab-panel h3 { font-size: 1.2rem; margin-bottom: var(--space-md); }
.ab-panel__note { margin-top: var(--space-md); font-size: var(--fs-xs); color: var(--color-text-tertiary); }

@media (min-width: 1200px) { .ab-split { grid-template-columns: 1.05fr 0.95fr; gap: clamp(3rem, 5vw, 4.5rem); } }

/* ------------------------------------------------ 5. responsible header */
.ab-rg {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.ab-rg h2 { margin-bottom: 0; }
.ab-rg + p { font-size: var(--fs-lead); line-height: 1.7; }

/* ------------------------------------------------------- 6. CTA banner */
.ab-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(1.75rem, 4.5vw, 2.75rem);
  background: var(--color-bg-block-tint);
  clip-path: var(--clip-angle-band);
  box-shadow: var(--shadow-inset-hair);
}

.ab-cta__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-md);
  align-items: center;
}
.ab-cta h2 { font-size: var(--fs-display-md); margin-bottom: 0.4rem; }
.ab-cta p { font-size: var(--fs-sm); margin: 0; }

@media (min-width: 768px) { .ab-cta__inner { grid-template-columns: 1.4fr auto; gap: var(--space-lg); } }

/* -------------------------------------------- 7. angled-surface shadow pass */
.mv__panel { box-shadow: none; filter: var(--drop-card); }
.principle {
  box-shadow: none;
  filter: var(--drop-card);
  transition: transform var(--dur-mid) var(--ease-snap), filter var(--dur-mid) var(--ease-out);
}
.principle:hover { box-shadow: none; filter: var(--drop-card-hover); }
.principle__badge { box-shadow: none; filter: var(--drop-btn); }
.principle__badge--cyan { filter: drop-shadow(0 8px 18px rgba(20, 216, 242, 0.4)); }
.principle__badge--navy { filter: drop-shadow(0 8px 18px rgba(11, 23, 48, 0.32)); }
.ab-panel { box-shadow: none; filter: var(--drop-card); }
.ab-cta { box-shadow: var(--shadow-inset-hair); }

.mv__panel,
.principle,
.ab-panel { box-shadow: inset 0 0 0 1px var(--color-border-soft); }