/* =====================================================================
   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; }

/* ---------- 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: center; align-items: flex-start;
  padding: var(--space-6) var(--space-4) var(--space-7); max-width: 1120px; margin: 0 auto;
}

.hero__logo { display: block; height: 250px; min-height: 250px; width: auto; margin: 0 0 30px; }

.hero__title {
  color: var(--white); font-weight: 900; letter-spacing: -0.03em;
  font-size: clamp(1.5rem, 6.5vw, 2.25rem); line-height: 1.05; margin: 0 0 var(--space-4);
}
.hero__title-line { display: block; white-space: nowrap; }
.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;
  margin-top: var(--space-5);
}
.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 {
    height: 100vh;
    /* .hero becomes the outer flex box purely to centre .hero__body as
       one unit, both directions, on the phone screen. */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero__media img { object-position: var(--hero-focus-mobile, var(--hero-focus-desktop, 50% 50%)); }

  /* .hero__body is now a flex child of .hero above, so it naturally
     shrinks to the width of its widest line rather than filling the
     screen; align-items: flex-start (already set on the shared rule)
     keeps the logo, both title lines, the description, and the login
     button flush against that box's own left edge. Nothing here
     changes the position of the text within any single line, only
     where the block as a whole sits on the screen. */
  .hero__body {
    height: auto;
    max-width: calc(100% - (var(--space-4) * 2));
    margin: 0;
  }
}

@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-6) var(--space-6); max-width: 50vw; margin: 0 auto 0 20%; align-items: flex-start; }
  .hero__logo { align-self: flex-start; }
  .hero__title { font-size: clamp(1.75rem, 3vw, 2.75rem); }
}