/* Shared card interaction and footer styling. */

html { font-size:17px; }
body { overflow-x:clip; }

/* One header and hero system for every page. */
.page .site-header {
  min-height:80px;
  padding:0 max(28px,calc((100% - 1200px)/2 + 28px));
  gap:24px;
  background:#fff;
  box-shadow:0 12px 32px rgba(39,49,84,.09);
}

.page .site-header .brand {
  display:inline-flex;
  align-items:center;
  flex:0 0 210px;
  width:210px;
  max-width:210px;
  height:54px;
  overflow:hidden;
  border-radius:8px;
}

.page .site-header .header-logo {
  display:block;
  width:210px;
  height:54px;
  object-fit:cover;
  object-position:center 40%;
}

.page .site-header .header-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex:1 1 auto;
  min-width:0;
  margin-left:auto;
}

.page .site-header .nav {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:clamp(16px,1.7vw,24px);
  color:var(--muted,#6c7486);
  font-size:.86rem;
  font-weight:800;
}

.page .site-header .nav a:not(.nav-cta) {
  transition:color 160ms ease,transform 160ms ease;
}

.page .site-header .nav a:not(.nav-cta):hover,
.page .site-header .nav a:not(.nav-cta):focus-visible,
.page .site-header .nav a[aria-current="page"] {
  color:var(--purple,#6b57ff);
  transform:translateY(-1px);
}

.page .site-header .nav-cta {
  min-height:42px;
  padding:0 20px;
  font-size:.84rem;
}

.page > :is(.hero,.about-hero,.programme-hero,.game-hero) {
  position:relative;
  display:grid;
  align-items:center;
  min-height:690px;
  padding:110px 0 30px;
  overflow:hidden;
  background:linear-gradient(105deg,#fff4dc 0%,#fbf7f1 50%,#eff7ff 100%);
}

.page > :is(.hero,.about-hero,.programme-hero,.game-hero) .hero-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.9fr);
  gap:74px;
  align-items:center;
  padding-top:0;
  padding-bottom:0;
}

.page > :is(.hero,.about-hero,.programme-hero,.game-hero) .hero-copy h1 {
  max-width:720px;
  margin:0 0 22px;
  color:var(--ink,#273154);
  font-size:clamp(3.35rem,5.4vw,5rem);
  font-weight:900;
  line-height:.98;
  letter-spacing:-.025em;
}

.page > :is(.hero,.about-hero,.programme-hero,.game-hero) .hero-copy p {
  max-width:650px;
  margin:0 0 30px;
  color:#35405a;
  font-size:1.12rem;
  font-weight:700;
  line-height:1.62;
}

.page > :is(.hero,.programme-hero) .hero-art {
  width:100%;
  min-height:420px;
}

.page > .hero .hero-card,
.page > .programme-hero .abstract-card,
.page > .about-hero .trust-card,
.page > .game-hero .hero-board {
  border:1px solid rgba(255,255,255,.78);
  border-radius:30px;
  box-shadow:0 28px 64px rgba(54,65,112,.16);
}

.page > .hero .hero-card,
.page > .programme-hero .abstract-card {
  width:min(100%,500px);
  height:420px;
}

@media (max-width:980px) {
  .page .site-header .brand {
    flex-basis:190px;
    width:190px;
    max-width:190px;
    height:50px;
  }

  .page .site-header .header-logo { width:190px;height:50px; }
  .page .site-header .nav { gap:14px;font-size:.78rem; }

  .page > :is(.hero,.about-hero,.programme-hero,.game-hero) {
    min-height:auto;
    padding:136px 0 82px;
  }

  .page > :is(.hero,.about-hero,.programme-hero,.game-hero) .hero-grid {
    grid-template-columns:1fr;
    gap:48px;
  }

  .page > :is(.hero,.about-hero,.programme-hero,.game-hero) .hero-copy {
    max-width:760px;
  }

  .page > :is(.hero,.programme-hero) .hero-art,
  .page > .about-hero .trust-card,
  .page > .game-hero .hero-board {
    width:min(100%,620px);
  }
}

@media (max-width:900px) {
  html { font-size:16px; }

  .page .site-header {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    min-height:72px;
    padding:10px 16px;
    gap:10px 14px;
  }

  .page .site-header .brand {
    flex-basis:176px;
    width:176px;
    max-width:176px;
    height:46px;
  }

  .page .site-header .header-logo { width:176px;height:46px; }
  .page .site-header .menu-toggle {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    justify-self:end;
    gap:5px;
  }

  .page .site-header .menu-toggle span {
    flex:0 0 2px;
    width:22px;
    height:2px;
    margin:0;
    transition:transform 180ms ease,opacity 180ms ease;
  }

  .page .site-header.nav-open .menu-toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .page .site-header.nav-open .menu-toggle span:nth-child(2) { opacity:0; }
  .page .site-header.nav-open .menu-toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  .page .site-header .header-actions { display:block;grid-column:1/-1;width:100%; }

  .page .site-header .nav {
    display:none;
    grid-template-columns:1fr;
    gap:7px;
    width:100%;
    padding:4px 0 6px;
    font-size:.9rem;
  }

  .page .site-header.nav-open .nav { display:grid; }

  /* Keep every link reachable on short phones and landscape screens. */
  .page .site-header.nav-open {
    max-height:100dvh;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    align-content:start;
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
  }

  .page .site-header .nav a {
    display:flex;
    align-items:center;
    min-height:42px;
    padding:0 14px;
    border-radius:12px;
    background:#faf9ff;
  }

  .page .site-header .nav-cta {
    justify-content:center;
    min-height:44px;
    color:#fff;
    background:var(--purple,#6b57ff);
  }
}

@media (max-width:620px) {
  .page > :is(.hero,.about-hero,.programme-hero,.game-hero) {
    padding:116px 0 68px;
  }

  .page > :is(.hero,.about-hero,.programme-hero,.game-hero) .hero-grid { gap:40px; }

  .page > :is(.hero,.about-hero,.programme-hero,.game-hero) .hero-copy h1 {
    font-size:clamp(2.65rem,12vw,3.35rem);
    line-height:1;
  }

  .page > :is(.hero,.about-hero,.programme-hero,.game-hero) .hero-copy p {
    font-size:1.04rem;
    line-height:1.6;
  }

  .page > :is(.hero,.programme-hero) .hero-art { min-height:330px; }
  .page > .hero .hero-card,.page > .programme-hero .abstract-card { height:330px; }
}

.page :is(.programme-card,.benefit-card,.quote-card,.contact-card,.trust-card,.info-card,.small-card,.staff-member-card,.compliance-card,.cta-card,.milestone-card,.game-card,.grownups-card) {
  --card-accent: var(--purple,#6b57ff);
  transition:transform 240ms cubic-bezier(.2,.75,.25,1),box-shadow 240ms ease,border-color 240ms ease;
}

.programme-card { --card-accent:var(--programme-accent,var(--purple,#6b57ff)); }
.theme-coral { --card-accent:var(--coral,#ff6b73); }
.theme-blue { --card-accent:var(--blue,#45a8ed); }
.theme-yellow { --card-accent:#d49a14; }
.theme-mint { --card-accent:var(--mint,#22c8a5); }
.benefit-card:nth-child(2),.info-card:nth-child(2) { --card-accent:var(--coral,#ff6b73); }
.benefit-card:nth-child(3),.small-card:nth-child(2) { --card-accent:var(--blue,#45a8ed); }
.benefit-card:nth-child(4),.small-card:nth-child(1) { --card-accent:var(--mint,#22c8a5); }
.small-card:nth-child(3) { --card-accent:#d49a14; }

.page :is(.programme-card,.benefit-card,.quote-card,.contact-card,.trust-card,.info-card,.small-card,.staff-member-card,.compliance-card,.cta-card,.milestone-card,.game-card,.grownups-card) :is(h2,h3,h4) {
  transition:color 220ms ease,transform 220ms ease;
}

.page :is(.programme-card,.staff-member-card,.game-card) img {
  transition:transform 420ms cubic-bezier(.2,.75,.25,1),filter 240ms ease;
}

@media (hover:hover) and (pointer:fine) {
  .page :is(.programme-card,.benefit-card,.quote-card,.contact-card,.trust-card,.info-card,.small-card,.staff-member-card,.compliance-card,.cta-card,.milestone-card,.game-card,.grownups-card):hover {
    transform:translateY(-10px);
    border-color:color-mix(in srgb,var(--card-accent) 28%,transparent);
    box-shadow:inset 0 5px 0 var(--card-accent),0 24px 48px rgba(39,49,84,.15);
  }

  .page :is(.programme-card,.benefit-card,.quote-card,.contact-card,.trust-card,.info-card,.small-card,.staff-member-card,.compliance-card,.cta-card,.milestone-card,.game-card,.grownups-card):hover :is(h2,h3,h4) {
    color:var(--card-accent);
    transform:translateX(4px);
  }

  .page :is(.programme-card,.staff-member-card,.game-card):hover img {
    transform:scale(1.075);
    filter:saturate(1.08) contrast(1.03);
  }

  :is(.compliance-card,.grownups-card):hover :is(h2,h3,h4) { color:#fff; }
}

.footer-section { background:#101c3f; }

.footer {
  position:relative;
  isolation:isolate;
  width:100%;
  overflow:hidden;
  padding:42px 0 24px;
  border-top:0;
  color:rgba(255,255,255,.74);
  background:radial-gradient(circle at 12% 0%,rgba(107,87,255,.18),transparent 30%),radial-gradient(circle at 92% 100%,rgba(34,200,165,.12),transparent 28%),#101c3f;
}

.footer::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0 0 auto;
  height:4px;
  background:linear-gradient(90deg,#6b57ff,#ff6b73,#ffc957,#22c8a5);
}

.footer .footer-inner {
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
  align-items:stretch;
  color:rgba(255,255,255,.74);
  font-size:.78rem;
  font-weight:700;
}

.footer .footer-main { display:flex;align-items:center;justify-content:space-between;gap:36px; }
.footer .footer-identity { display:flex;align-items:center;gap:16px;min-width:0; }

.footer .footer-brand {
  display:inline-flex;
  flex:0 0 68px;
  width:68px;
  height:68px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:rgba(255,255,255,.07);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}

.footer .footer-logo { display:block;width:68px;height:68px;object-fit:cover; }
.footer .footer-copy { display:grid;gap:4px; }
.footer .footer-copy strong { color:#fff;font-size:.94rem;line-height:1.2; }
.footer .footer-copy span { color:rgba(255,255,255,.56); }
.footer .footer-nav { display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px; }

.footer .footer-nav a {
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 13px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.05);
  transition:color 160ms ease,background 160ms ease,border-color 160ms ease,transform 160ms ease;
}

.footer .footer-nav a::before { content:none; }
.footer .footer-nav a:hover,.footer .footer-nav a:focus-visible { color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);transform:translateY(-2px);outline:none; }

.footer .footer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.46);
}

.footer .footer-credit { color:rgba(255,255,255,.58);font-size:.78rem; }
.footer .footer-credit a { color:#fff;font-weight:900; }

@media (max-width:760px) {
  .footer { padding:34px 0 22px; }
  .footer .footer-main,.footer .footer-bottom { display:grid;gap:18px; }
  .footer .footer-nav { justify-content:flex-start; }
  .footer .footer-brand,.footer .footer-logo { width:58px;height:58px; }
  .footer .footer-brand { flex-basis:58px;border-radius:15px; }
}

@media (max-width:430px) {
  .footer .footer-copy strong { font-size:.84rem; }
  .footer .footer-copy span { font-size:.72rem; }
  .footer .footer-nav a { min-height:32px;padding:0 11px;font-size:.72rem; }
}

@media (prefers-reduced-motion:reduce) {
  .page :is(.programme-card,.benefit-card,.quote-card,.contact-card,.trust-card,.info-card,.small-card,.staff-member-card,.compliance-card,.cta-card,.milestone-card,.game-card,.grownups-card,.footer-nav a) { transition:none; }
  .page :is(.programme-card,.benefit-card,.quote-card,.contact-card,.trust-card,.info-card,.small-card,.staff-member-card,.compliance-card,.cta-card,.milestone-card,.game-card,.grownups-card):hover,
  .page :is(.programme-card,.benefit-card,.quote-card,.contact-card,.trust-card,.info-card,.small-card,.staff-member-card,.compliance-card,.cta-card,.milestone-card,.game-card,.grownups-card):hover :is(h2,h3,h4),
  .page :is(.programme-card,.staff-member-card,.game-card):hover img { transform:none; }
}