/* home.css — page-only rules for the home page (specs/home.md). Every selector is prefixed .home-;
   shared classes (.btn, .grad-text, .t-tagline, .text-lg, .no-margin) come from main.css. */

/* ---------- §2.1 hero: full-bleed background video under the transparent header ---------- */
.home-hero{position:relative;z-index:0;margin-top:calc(-1 * var(--header-h));margin-bottom:50px}
.home-hero__media{position:relative;overflow:hidden;height:61.64vw;max-height:900px;color:var(--c-white);
  background:var(--c-black) url("../images/hero-poster.jpg") center / cover no-repeat}
.home-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
.home-hero__content{position:absolute;left:0;right:0;top:50%;transform:translateY(-24px);
  max-width:var(--container-max);margin:0 auto;padding:0 20px;display:flex;flex-direction:column;align-items:flex-start}
.home-hero__title{max-width:768px;font-size:40px;line-height:48px;font-weight:600;letter-spacing:0;color:var(--c-white)}
.home-hero__subline{max-width:464px;margin:26px 0 0;font-size:20px;line-height:22px;font-weight:400;color:var(--c-white)}
.home-hero .home-hero__cta{margin-top:33px;padding:12px 35px;font-size:17px;line-height:20px;letter-spacing:1px;text-transform:uppercase}

/* ---------- §2.2 intro: 40% text column + 50% photo flush to the right of the 1440 box ---------- */
.home-intro{max-width:var(--container-max);margin:0 auto;padding:10px 0;display:flex;justify-content:space-between;align-items:stretch}
.home-intro__text{width:40%;padding:40px 20px}
.home-intro__title{margin-bottom:var(--widget-gap)}
.home-intro__text p,.home-tagline__copy p,.home-why-schools__text p{line-height:1.6}  /* original keeps 1.6 on mobile too (spec §4.6) */
.home-intro__text .home-intro__meta{line-height:1.4}
.home-intro__media{width:50%}
.home-intro__photo{display:block;width:100%;height:600px;object-fit:cover;object-position:center}

/* ---------- §2.3 tagline: gradient serif tagline left, paragraph + Learn More right ---------- */
.home-tagline{position:relative;z-index:2;padding:32px 0 42px}
.home-tagline__inner{max-width:var(--container-max);margin:0 auto;padding:0 20px;display:flex;flex-wrap:nowrap;align-items:flex-start}
.home-tagline__lead{width:50%}
.home-tagline__title{margin:0;font-size:inherit;line-height:inherit;letter-spacing:normal}
.home-tagline__copy{width:50%;padding:70px 10px 0}
.home-tagline__cta{margin-top:var(--widget-gap)}

/* ---------- §2.4 why schools: full-bleed white band, boxed 50/50 row inside ---------- */
.home-why-schools{background:var(--c-white)}
.home-why-schools__inner{max-width:var(--container-max);margin:0 auto;padding:40px 20px;display:flex;column-gap:25px;align-items:stretch}
.home-why-schools__media{width:50%;display:flex;flex-direction:column}
.home-why-schools__photo{display:block;width:100%;height:550px;object-fit:contain;object-position:center}
.home-why-schools__text{width:50%;display:flex;flex-direction:column;justify-content:flex-end;gap:16px;padding-bottom:30px}
.home-why-schools__text p{max-width:550px}
.home-why-schools__cta{align-self:flex-start}

/* ---------- §5 responsive ---------- */
@media (max-width:1366px){
  .home-hero{margin-bottom:40px}
  .home-tagline{padding:0 0 40px}
}
@media (max-width:1239px){
  .home-hero__subline{font-size:16px}
  .home-hero .home-hero__cta{letter-spacing:0}
}
@media (max-width:1200px){
  .home-intro__text{width:48%}
}
@media (max-width:1023px){
  .home-hero__media{height:64vw}
  .home-hero__subline{max-width:412px}
  .home-why-schools__photo{height:376px}
}
@media (max-width:880px){
  .home-why-schools__text p{max-width:90%}
}
@media (max-width:777px){
  .home-hero__media{height:90vw}
  .home-hero__title{font-size:30px;line-height:36px}
  .home-hero__subline{max-width:380px;margin-top:20px}
  .home-hero .home-hero__cta{min-height:0;margin-top:28px;padding:8px 27px;font-size:13px;line-height:14px}
}
@media (max-width:767px){
  .home-intro{flex-direction:column;padding:0}
  .home-intro__text{width:100%;padding:0 20px 30px}
  .home-intro__media{width:100%}
  .home-intro__photo{height:400px}
  .home-tagline{padding:0 0 30px}
  .home-tagline__inner{flex-wrap:wrap}
  .home-tagline__lead{width:100%}
  .home-tagline__title .t-tagline{line-height:68px}   /* original keeps the 68px line box below 768 too */
  .home-tagline__copy{width:100%;padding:0}
  .home-why-schools__inner{flex-direction:column;padding:0 20px 30px}
  .home-why-schools__media{width:100%}
  .home-why-schools__photo{height:260px;object-fit:cover}
  .home-why-schools__text{width:100%;padding:16px 0 0}
}
@media (max-width:479px){
  .home-hero__media{height:114vw;min-height:445px}
  .home-hero__content{align-items:center;text-align:center;transform:translateY(-34px);padding:0 36px}
  .home-hero__title{max-width:none;font-size:24px;line-height:24px}
  .home-hero__subline{max-width:none;margin-top:4px;font-size:15px;line-height:18px}
  .home-hero .home-hero__cta{margin-top:7px;padding:8px 44px;font-size:12px;line-height:12px}   /* pill box 166x28 as on the original */
}