/* ==========================================================================
   Peak View (pv) - peakview.uk

   Established 2017. Maroon and forest green. The seal is a ram holding a key,
   set against mountains, a compass rose and a glass-and-steel building - a
   thirty-year-younger school that behaves like it invented the idea.
   So the visual language is contemporary: asymmetric, airy, geometric sans,
   soft gradients, generous radii. Deliberately NOT Union High's engraving.
   ========================================================================== */

:root {
  /* Brand - kept in sync with packages/ui/src/tokens.ts TENANT_THEME.pv */
  --brand: #7b1e3b;
  --brand-dark: #571026;
  --on-brand: #fdf4f6;
  --on-brand-muted: #e7c3cf;
  --surface: #f7eef1;
  --accent: #3f6e5e;
  --accent-strong: #325a4c;
  --on-accent: #f2fbf7;

  --page: #ffffff;
  --card: #ffffff;
  --text: #241a1e;
  --text-muted: #6b5a60;
  --heading: #3b0d1e;
  --border: #ece0e4;
  --rule: color-mix(in srgb, var(--brand) 22%, transparent);

  --figure-bg: linear-gradient(145deg, #7b1e3b, #3f6e5e);
  --plate-bg: linear-gradient(150deg, #571026 0%, #7b1e3b 55%, #3f6e5e 100%);
  --plate-frame: color-mix(in srgb, var(--on-brand) 30%, transparent);

  /* Photo-slot fallbacks: what each slot shows before its file exists. */
  --hero-fallback: linear-gradient(175deg, #3b0d1e 0%, #7b1e3b 55%, #a84a63 100%);
  --section-fallback: linear-gradient(150deg, #571026, #3f6e5e);
  --cta-fallback: radial-gradient(circle at 12% 18%, #3f6e5e, transparent 52%),
                  radial-gradient(circle at 88% 82%, #a84a63, transparent 55%),
                  linear-gradient(#571026, #571026);

  /* Scrims: lighter than Union High's - Peak View wants the photograph to
     stay the loudest thing on the page. */
  /* Peak View's headline sits left over open sky, so this can stay lighter
     than Union High's - the photograph is meant to be the loudest thing here. */
  --hero-scrim: linear-gradient(100deg,
                  rgb(59 13 30 / 0.80) 0%,
                  rgb(59 13 30 / 0.55) 42%,
                  rgb(87 16 38 / 0.28) 70%,
                  rgb(59 13 30 / 0.42) 100%);
  --section-scrim: linear-gradient(180deg, rgb(59 13 30 / 0.82), rgb(87 16 38 / 0.74));
  --cta-scrim: linear-gradient(100deg, rgb(59 13 30 / 0.86) 0%, rgb(63 110 94 / 0.55) 100%);

  /* Type - a geometric/humanist sans, no serifs anywhere */
  --font-display: "Avenir Next", "Futura", "Segoe UI Variable Display", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --display-weight: 700;
  --display-tracking: -0.03em;
  --lockup-tracking: -0.01em;

  /* Scale - a touch larger and tighter than Union High */
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: clamp(1.18rem, 0.45vw + 1.06rem, 1.38rem);
  --step-2: clamp(1.45rem, 0.8vw + 1.24rem, 1.8rem);
  --step-3: clamp(1.8rem, 1.5vw + 1.44rem, 2.5rem);
  --step-4: clamp(2.2rem, 2.6vw + 1.6rem, 3.4rem);
  --step-5: clamp(2.7rem, 3.8vw + 1.85rem, 4.4rem);
  --step-6: clamp(3.2rem, 6.2vw + 1.5rem, 6.2rem);

  --space-2: 0.5rem;
  --space-3: 0.9rem;
  --space-4: 1.5rem;
  --space-5: 2.4rem;
  --space-6: 3.6rem;

  --gutter: 1.5rem;
  --measure: 1240px;
  --radius-card: 20px;
  --radius-btn: 999px;
}

/* Peak View is left-aligned and off-centre on purpose. */

.hero { text-align: left; }

.hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 940px) {
  .hero__grid { grid-template-columns: 1.25fr 0.75fr; }
}

.hero h1 { max-width: 14ch; }

/* The hero's right-hand column is a tall photograph with the school seal
   sitting on its corner - the seal is the only mark on the page, so it earns
   the overlap rather than floating on its own. */
.hero__card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-card);
  background-image: var(--photo, none), var(--plate-bg);
  background-size: cover;
  background-position: center;
  box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.7);
  animation: pv-float 9s ease-in-out infinite;
}

.hero__card-seal {
  position: absolute;
  left: -28px;
  bottom: -22px;
  width: clamp(78px, 9vw, 120px);
  filter: drop-shadow(0 14px 28px rgb(0 0 0 / 0.6));
}

@keyframes pv-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__card { animation: none; }
}

@media (max-width: 939px) {
  .hero__card { aspect-ratio: 16 / 10; max-width: 520px; }
  .hero__card-seal { left: auto; right: -16px; }
}

/* A soft green aurora behind the hero content - the "view" in Peak View. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 60vw;
  aspect-ratio: 1;
  right: -12vw;
  top: -18vw;
  background: radial-gradient(circle, rgb(63 110 94 / 0.45), transparent 62%);
  filter: blur(30px);
  pointer-events: none;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1rem 0.45rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--on-brand) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-brand) 22%, transparent);
  backdrop-filter: blur(8px);
  font-size: var(--step--1);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
}

/* The forest-green accent is the right colour on white but sits too close to
   the maroon scrim to read as a highlight - the hero motto takes a lifted tint
   of it instead. */
.hero__motto { color: #a8ded0; }

.hero__badge b {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Angled section transition - a ridge line, matching the mountains. */
.ridge {
  --ridge-h: clamp(40px, 6vw, 96px);
  position: relative;
  padding-top: var(--ridge-h);
}

.ridge::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--ridge-h);
  background: inherit;
  clip-path: polygon(0 100%, 0 42%, 22% 8%, 44% 46%, 68% 0, 86% 38%, 100% 12%, 100% 100%);
}

/* Cards float rather than sit in a frame. */
.card {
  border-color: transparent;
  box-shadow: 0 2px 4px rgb(59 13 30 / 0.04), 0 14px 34px -22px rgb(59 13 30 / 0.35);
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 4px 8px rgb(59 13 30 / 0.06), 0 32px 56px -28px rgb(59 13 30 / 0.45);
}

.card__figure { --figure-overlay: radial-gradient(circle at 30% 20%, rgb(255 255 255 / 0.22), transparent 55%); }
.card__figure-mark { width: 44%; opacity: 0.92; }

/* Pill tags used across programme + news cards. */
.tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.section--dark .tag { background: color-mix(in srgb, var(--on-brand) 16%, transparent); color: var(--on-brand); }

/* Offset feature blocks - the asymmetry that separates PV from UH. */
.feature-stack { display: grid; gap: var(--space-5); }

@media (min-width: 900px) {
  .feature-stack { grid-template-columns: repeat(12, 1fr); }
  .feature-stack > :nth-child(odd) { grid-column: 1 / span 7; }
  .feature-stack > :nth-child(even) { grid-column: 6 / span 7; margin-top: calc(var(--space-6) * -1); }
}

.feature {
  background: var(--card);
  border-radius: var(--radius-card);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  box-shadow: 0 20px 50px -34px rgb(59 13 30 / 0.5);
  border: 1px solid var(--border);
}

.feature__num {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: var(--space-3);
}

/* Stats read as big numerals with a thin green underline. */
.stat__value { font-weight: 700; letter-spacing: -0.04em; }
.stat { padding-bottom: var(--space-3); border-bottom: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.stat-band { border-block: 0; text-align: left; }

/* The CTA gets a mesh gradient instead of flat brand. */
.cta {
  background:
    radial-gradient(circle at 12% 18%, rgb(63 110 94 / 0.75), transparent 52%),
    radial-gradient(circle at 88% 82%, rgb(168 74 99 / 0.7), transparent 55%),
    var(--brand-dark);
}