/* ==========================================================================
   pages/splash.css — School / Public selection page (Figma 3205:2623)
   Two 954px panels on a 1920 canvas, 900px tall, with a copyright strip.
   ========================================================================== */

.splash-body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
}

.splash {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .splash { grid-template-columns: 1fr 1fr; }
}

/* ---- Panel -------------------------------------------------------------- */
.splash-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(2.5rem, 1.6rem + 3vw, 4.5rem) clamp(1.25rem, 0.5rem + 2.4vw, 2.5rem);
  text-align: center;
}

/* Figma: linear-gradient(#ffffff -> #dbf0fb) */
.splash-panel--school {
  background: linear-gradient(to bottom, #ffffff 0%, #dbf0fb 100%);
}
/* Figma: linear-gradient(#ffffff 20.778% -> rgba(59,126,95,.12)) */
.splash-panel--public {
  background: linear-gradient(to bottom, #ffffff 20.778%, rgba(59, 126, 95, 0.12) 100%);
}

.splash-panel__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 600px;
}

/* ---- Background overlay art (Figma 3205:2623) --------------------------- */
.splash-panel__art {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: clamp(4.75rem, 11vh, 8.5rem);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.splash-panel__art .splash-panel__deco {
  position: relative;
  display: block;
  flex: 0 0 auto;
  pointer-events: none;
  user-select: none;
  max-width: none;
  height: auto;
  margin-inline: auto;
}

/* School panel — swirl + blob (splash-swirl.svg, 54% white fill) */
.splash-panel--school .splash-panel__deco--school {
  width: min(100%, 54rem);
}

/* Public panel — Pennsylvania outline */
.splash-panel--public .splash-panel__deco--map {
  width: min(96%, 52rem);
  aspect-ratio: 834.749 / 538.681;
  transform: rotate(-10.95deg);
}

@media (min-width: 900px) {
  .splash-panel__art {
    padding-top: clamp(5.25rem, 12vh, 9.5rem);
  }

  .splash-panel--school .splash-panel__deco--school {
    width: min(105%, 56rem);
  }

  .splash-panel--public .splash-panel__deco--map {
    width: min(100%, 54rem);
  }
}

/* ---- Logo plate --------------------------------------------------------- */
.splash-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  margin-bottom: clamp(3rem, 1.6rem + 4.4vw, 7.5rem);
  padding: 0.75rem 1.5rem;
  background: var(--color-white);
  border-radius: 7px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.splash-logo img {
  display: block;
  width: auto;
  max-width: min(100%, 320px);
  height: 52px;
  object-fit: contain;
}
.splash-logo--public img {
  height: 72px;
  max-width: min(100%, 220px);
}

@media (min-width: 900px) {
  .splash-logo { min-height: 104px; }
  .splash-logo img { height: 66px; max-width: min(100%, 360px); }
  .splash-logo--public img { height: 96px; max-width: min(100%, 260px); }
}

/* ---- Copy --------------------------------------------------------------- */
.splash-panel__eyebrow {
  margin-bottom: var(--space-8);
  font-size: var(--fs-body);
  font-weight: var(--fw-extrabold);
  line-height: 1.84;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.splash-panel__eyebrow--school { color: var(--color-brand); }
.splash-panel__eyebrow--public {
  font-weight: var(--fw-semibold);
  color: var(--color-public-navy);
}

.splash-panel__title {
  margin-bottom: var(--space-24);
  font-size: clamp(2.5rem, 1.4rem + 3.2vw, 4.375rem); /* 70px */
  font-weight: var(--fw-extrabold);
  line-height: 1.12;
}
.splash-panel__title--school { color: var(--color-brand); }
.splash-panel__title--public { color: var(--color-public-navy); }

.splash-panel__text {
  max-width: 567px;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 1.4rem + 3.2vw, 5.5rem);
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.25rem); /* 20px */
  line-height: 1.9;
  color: var(--color-text);
}
.splash-panel__text--public { color: var(--color-public-navy); }

/* ---- CTA ---------------------------------------------------------------- */
/* Figma: 389×99 outer ring (1px border, blurred glass) + 374×85 solid pill */
.splash-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-24);
  width: min(389px, 100%);
  min-height: 85px;
  padding: 0 var(--space-32);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.splash-cta::before {
  content: '';
  position: absolute;
  inset: -7px;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(6.5px);
  -webkit-backdrop-filter: blur(6.5px);
  pointer-events: none;
}

.splash-cta--school {
  background: var(--color-brand);
  box-shadow: 0 19px 83px rgba(14, 121, 177, 0.37);
}
.splash-cta--school::before { color: var(--color-brand); }
.splash-cta--school:hover {
  background: var(--color-brand-dark);
  box-shadow: 0 24px 60px rgba(14, 121, 177, 0.5);
}

.splash-cta--public {
  background: var(--color-public-green);
  box-shadow: 0 19px 83px rgba(59, 126, 95, 0.63);
}
.splash-cta--public::before { color: var(--color-public-green); }
.splash-cta--public:hover {
  background: var(--color-public-green-dark);
  box-shadow: 0 24px 60px rgba(59, 126, 95, 0.72);
}

.splash-cta:hover { transform: translateY(-3px); }
.splash-cta:active { transform: translateY(0); }

.splash-cta__label {
  position: relative;
  z-index: 1;
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.5rem); /* 24px */
  font-weight: var(--fw-extrabold);
  line-height: 1.25;
  color: var(--color-white);
}
.splash-cta__arrow {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 26px;
  height: 15px;
  color: var(--color-white);
  transition: transform var(--dur) var(--ease);
}
.splash-cta:hover .splash-cta__arrow { transform: translateX(4px); }

/* ---- Footer strip ------------------------------------------------------- */
.splash-footer {
  padding: var(--space-24) var(--container-pad);
  text-align: center;
  background: var(--color-white);
}
.splash-footer__copy {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.875;
  color: var(--color-text);
}