/* =====================================================================
   The College Prof: public marketing pages
   Reproduces the live thecollegeprof.ca home page within the
   application's own palette and typography.
   ===================================================================== */

.site { background: var(--white); overflow-x: hidden; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-4); }
.wrap--narrow { max-width: 780px; }
.center { text-align: center; }

/* ---------- Header ---------- */
/* Transparent while it sits on top of the hero photo, so the header
   reads as part of the photo rather than a bar drawn over it. A small
   scroll watcher in home.js adds --solid once the hero has scrolled out
   of view, at which point the header needs a background to stay legible
   over the white content bands underneath it. */

.site-head {
  background: transparent; position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.site-head.is-solid {
  position: fixed; background: var(--navy); box-shadow: 0 2px 10px rgba(23,47,67,0.15);
}
.site-head__inner {
  max-width: 1120px; margin: 0 auto; padding: var(--space-3) var(--space-4);
  display: flex; align-items: center; gap: var(--space-4);
}
.site-head__logo { display: block; line-height: 0; }
.site-head__logo img { height: 250px; min-height: 250px; width: auto; display: block; }
.site-head.is-solid .site-head__logo img { height: 64px; min-height: 64px; }

.site-nav { display: flex; margin-left: auto; align-items: center; align-self: center; gap: var(--space-4); }
.site-nav a { display: inline-flex; align-items: center; }
.site-nav a {
  color: var(--white); text-decoration: none; font-size: var(--step--1);
  font-weight: 700; letter-spacing: 0.01em;
}
.site-nav a:hover { color: var(--sage-pale); }
.site-nav__cta {
  background: var(--sage-light); color: var(--navy) !important;
  padding: var(--space-2) var(--space-4); border-radius: 99px;
}
.site-nav__cta:hover { background: var(--sage-pale); }

/* ---------- Hero: full viewport ---------- */

.hero {
  position: relative; width: 100%; height: 100svh; min-height: 520px;
  color: var(--white); overflow: hidden;
}
.hero__media { position: absolute; inset: 0; line-height: 0; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: var(--hero-focus-desktop, 50% 50%);
}
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,47,67,0.35) 0%, rgba(23,47,67,0.55) 55%, rgba(23,47,67,0.85) 100%);
}
.hero__body {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-6) var(--space-4) var(--space-7); max-width: 1120px; margin: 0 auto;
}

.hero__title {
  color: var(--white); font-weight: 900; letter-spacing: -0.03em;
  font-size: clamp(2rem, 7vw, 3.75rem); line-height: 1.02; margin: 0 0 var(--space-4);
}
.hero__lede { font-size: clamp(1.0625rem, 2.4vw, 1.375rem); font-weight: 700; color: var(--sage-pale); margin-bottom: var(--space-6); }
.hero__eyebrow { font-size: var(--step--1); color: var(--white); margin-bottom: var(--space-3); }

.badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.badges--center { justify-content: center; }
.badges img { height: 52px; width: auto; display: block; }
.badges a { display: block; line-height: 0; border-radius: var(--radius-sm); }
.badges a:hover { opacity: 0.88; }

/* ---------- Bands ---------- */

.band { padding: var(--space-7) 0; }
.band h2 { font-size: clamp(1.625rem, 4vw, 2.375rem); margin-bottom: var(--space-4); }

.band--start { background: var(--white); }
.band--features { background: var(--surface); }
.band--works { background: var(--white); }
.band--podcast { background: var(--sage-pale); }

.btn-hero {
  display: inline-block; background: var(--navy); color: var(--white);
  text-decoration: none; font-weight: 900; letter-spacing: 0.02em;
  padding: var(--space-4) var(--space-7); border-radius: 99px;
  box-shadow: var(--shadow); transition: background 140ms ease, transform 140ms ease;
}
.btn-hero:hover { background: var(--olive); transform: translateY(-1px); }

/* ---------- Features ---------- */

.features { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.feature {
  background: var(--white); border-radius: var(--radius);
  border-top: var(--rail) solid var(--sage-mid);
  padding: var(--space-5); box-shadow: var(--shadow);
}
.feature__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--sage-pale); color: var(--navy);
  margin-bottom: var(--space-3);
}
.feature h3 { font-size: var(--step-1); margin-bottom: var(--space-2); }
.feature p { font-size: var(--step--1); margin: 0; }

/* ---------- How it works ---------- */

.works__logo { display: block; margin: 0 auto var(--space-4); height: 250px; min-height: 250px; width: auto; }
.works__lede { max-width: 760px; margin: 0 auto var(--space-6); }

.steps { list-style: none; counter-reset: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
.step { text-align: center; }
.step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto var(--space-3);
  background: var(--navy); color: var(--white); font-weight: 900; font-size: var(--step-1);
}
.step h3 { font-size: var(--step-1); margin-bottom: var(--space-2); }
.step p { font-size: var(--step--1); margin: 0; }

/* ---------- Footer ---------- */

.site-foot { background: var(--navy); color: var(--white); padding: var(--space-6) 0; }
.site-foot__inner { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-4); text-align: center; }
.site-foot__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5); margin-bottom: var(--space-4); }
.site-foot__nav a { color: var(--white); text-decoration: none; font-weight: 700; font-size: var(--step--1); }
.site-foot__nav a:hover { color: var(--sage-pale); }
.site-foot p { color: var(--sage-pale); font-size: var(--step--1); margin: 0; }

/* ---------- Responsive ---------- */

@media (max-width: 700px) {
  .hero__media img { object-position: var(--hero-focus-mobile, var(--hero-focus-desktop, 50% 50%)); }
}

@media (min-width: 720px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .features { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(4, 1fr); }

  .hero__body { padding: var(--space-7) var(--space-6); max-width: 780px; }
  .hero__title { font-size: clamp(2.75rem, 6vw, 4.25rem); }
}