/* =========================================================
   layout.css — header/nav, hero, sections, page headers, footer
   ========================================================= */

/* ---------- TOP BAR ---------- */
.topbar{
  position:sticky; top:0; z-index:100;
  background:rgba(238,242,234,0.86);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--paper-line);
  transition:background .3s ease;
}
.topbar-inner{
  max-width:var(--maxw); margin:0 auto; padding:10px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{display:flex; align-items:center; flex-shrink:0;}
.brand-logo{
  height:96px; width:auto; display:block;
  transition:opacity .2s ease;
}
.brand:hover .brand-logo{opacity:0.82;}

nav.mainnav{display:flex; gap:2px; flex-wrap:wrap;}
nav.mainnav a{
  font-size:13.5px; font-weight:600; color:var(--ink-soft);
  padding:9px 13px; border-radius:100px; white-space:nowrap;
  transition:background .2s ease, color .2s ease;
}
nav.mainnav a:hover{background:var(--paper-raised);}
nav.mainnav a.active{background:var(--moss); color:#fff;}

.spectrum-bar{display:flex; width:100%; height:5px;}
.spectrum-bar span{flex:1; display:block;}

.nav-toggle{display:none; background:none; border:none; padding:8px;}
.nav-toggle svg{width:24px; height:24px;}

@media (max-width: 980px){
  nav.mainnav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--paper-line);
    flex-direction:column; padding:18px 24px; gap:6px;
    max-height:calc(100vh - 100%); overflow-y:auto;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
  }
  nav.mainnav.open{opacity:1; pointer-events:auto; transform:translateY(0);}
  nav.mainnav a{font-size:17px; padding:13px 10px; border-radius:10px;}
  .nav-toggle{display:block;}
  .brand-logo{height:66px;}
}

/* ---------- HERO ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:86px 0 40px;
  background:var(--paper);
}
/* The campus aerial sits behind the hero under a light scrim: heaviest
   on the left where the type is, easing right so the photograph still
   reads. Keeping it on a pseudo-element means the hero grid is
   untouched and nothing reflows. */
.hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(100deg,
      rgba(238,242,234,0.96) 0%,
      rgba(238,242,234,0.90) 42%,
      rgba(238,242,234,0.72) 100%),
    url("../assets/img/campus-drone.jpg");
  background-size:cover, cover;
  /* the top third of the photograph is sky, so bias the crop downward */
  background-position:center, center 64%;
  background-repeat:no-repeat, no-repeat;
}
.hero > *{position:relative; z-index:1;}
.hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center;}
.eyebrow-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; color:var(--moss-deep);
  background:var(--accent-soft); padding:7px 14px; border-radius:100px;
  margin-bottom:20px;
}
.eyebrow-tag .dot{width:6px; height:6px; border-radius:50%; background:var(--gold);}

/* the Centre's tagline, above the headline */
.hero-tagline{
  font-family:'Fraunces',serif;
  font-size:clamp(17px, 2vw, 21px); font-weight:500;
  color:var(--moss); margin:0 0 18px; padding-top:14px;
  position:relative; letter-spacing:0.005em;
}
.hero-tagline::before{
  content:""; position:absolute; top:0; left:0;
  width:46px; height:3px; border-radius:2px; background:var(--gold);
}
.hero h1{font-size:clamp(34px, 5vw, 60px); font-weight:500; max-width:12.5ch;}
.hero-sub{
  font-size:17.5px; max-width:46ch; margin-bottom:28px;
  text-align:justify; text-justify:inter-word;
  hyphens:none; -webkit-hyphens:none;   /* justify, but never break words */
}
.hero-wheel{
  position:relative; width:100%; max-width:440px;
  justify-self:end; aspect-ratio:1/1;
}
.hero-wheel img{
  width:100%; height:100%; object-fit:contain; display:block;
}

@media (max-width: 900px){
  /* stacked, the type runs the full width, so the scrim is even */
  .hero::before{
    background-image:
      linear-gradient(rgba(238,242,234,0.93), rgba(238,242,234,0.93)),
      url("../assets/img/campus-drone.jpg");
  }
  .hero-grid{grid-template-columns:1fr;}
  .hero-wheel{justify-self:center; max-width:330px; margin-top:22px;}
}

/* ---------- SECTIONS ---------- */
.section{padding:88px 0;}
.section-alt{background:var(--paper-raised);}
.section-head{max-width:640px; margin-bottom:46px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
/* A section head that must hold one line: the 640px measure is lifted
   and the type size is derived from how many characters the text has
   (--h-chars / --p-chars, set by the template), so nothing overflows
   as the viewport narrows. Below tablet a single line would be too
   small to read, so wrapping is allowed again. */
.section-head.one-line{
  max-width:none;
  container-type:inline-size;
}
.section-head.one-line h2{
  white-space:nowrap;
  font-size:min(38px, calc(100cqw / var(--h-chars, 40) * 1.92));
}
.section-head.one-line p{
  white-space:nowrap; max-width:none;
  font-size:min(17px, calc(100cqw / var(--p-chars, 90) * 1.92));
}
@media (max-width:760px){
  .section-head.one-line h2{
    white-space:normal;
    font-size:clamp(24px, 5vw, 32px);
  }
  .section-head.one-line p{
    white-space:normal;
    font-size:15.5px;
  }
}

.section-kicker{
  font-size:12.5px; font-weight:700; color:var(--moss);
  letter-spacing:0.02em; margin-bottom:10px; display:block;
}
.section-head h2{font-size:clamp(26px,3.4vw,38px);}

/* ---------- GRIDS ---------- */
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:980px){
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .grid-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
}

/* ---------- INNER PAGE HEADER ---------- */
.page-header{
  padding:120px 0 60px; position:relative; color:#fff;
  background:linear-gradient(150deg, var(--moss-deep), var(--moss) 70%);
  overflow:hidden;
}
.page-header::after{
  content:""; position:absolute; right:-60px; top:-60px;
  width:340px; height:340px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.12);
}
.page-header .crumb{
  font-size:12.5px; font-weight:700; opacity:0.8; margin-bottom:14px;
  display:flex; align-items:center; gap:6px;
}
.page-header h1{color:#fff; font-size:clamp(30px,4.2vw,48px); max-width:16ch;}
.page-header p{color:rgba(255,255,255,0.82); max-width:56ch; font-size:16px;}

/* Page headers that hold one line each. The 16ch / 56ch measures are
   lifted and the type size follows the text's own length, so nothing
   overflows as the viewport narrows. Below tablet both wrap again. */
.page-header.one-line .wrap{container-type:inline-size;}
.page-header.one-line h1{
  max-width:none; white-space:nowrap;
  font-size:min(48px, calc(100cqw / var(--h-chars, 30) * 1.92));
}
.page-header.one-line p{
  max-width:none; white-space:nowrap;
  font-size:min(16px, calc(100cqw / var(--p-chars, 90) * 1.92));
}
@media (max-width:760px){
  .page-header.one-line h1{
    white-space:normal;
    font-size:clamp(28px, 6vw, 38px);
  }
  .page-header.one-line p{white-space:normal; font-size:15px;}
}

/* SDG detail pages tint the header with the goal's own colour */
.sdg-header{
  background:linear-gradient(150deg, color-mix(in srgb, var(--accent) 78%, #000), var(--accent) 75%);
}

/* ---------- FOOTER ---------- */
footer{background:var(--ink); color:#c6d0c6; padding:60px 0 30px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; margin-bottom:44px;}
@media (max-width:800px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr;} }
footer h5{
  color:#fff; font-family:'Manrope',sans-serif; font-size:12.5px;
  letter-spacing:0.05em; margin:0 0 16px; font-weight:700;
}
footer a{display:block; font-size:13.5px; color:#a9b8a8; margin-bottom:10px; transition:color .2s ease;}
footer a:hover{color:#fff;}
.footer-logo{
  display:inline-block; background:#fff;
  padding:14px 18px; border-radius:14px; margin-bottom:16px;
  transition:transform .2s ease;
}
.footer-logo:hover{transform:translateY(-2px);}
.footer-logo img{height:92px; width:auto; display:block;}
.footer-brand p{color:#93a292; font-size:13.5px; max-width:34ch;}
.footer-tagline{
  font-family:'Fraunces',serif; font-size:15px; font-weight:500;
  color:#fff !important; margin-bottom:10px !important;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.1); padding-top:22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:12.5px; color:#7f8f7e;
}