/* YFI RESPONSIVE V6 — per-template subject-safe framing, 2026-09-09 */
:root{--yfi-header:84px}
@media(max-width:1100px){:root{--yfi-header:72px}}

/* Never let media overflow its own frame. */
img{max-width:100%;display:block}
.d4-photo,.d5-founder-media,.d5-breadth-media,.d5-education-media,.media-frame,.school-media,.camp-image,.results-image,.age-photo,.staff-image,.safety-image,.experience-grid article{overflow:hidden}
.d4-photo img,.d5-founder-media img,.d5-breadth-media img,.d5-education-media img,.media-frame img,.school-media img,.camp-image img,.results-image img,.age-photo img,.staff-image img,.safety-image img,.experience-grid img{max-width:100%;object-position:center}

/* HOME: use the portrait coaching photograph whole on phones; headline overlaps only the lower image edge. */
@media (orientation:portrait) and (max-width:767px){
  .hero{min-height:0!important;max-height:none!important;height:auto!important;padding-top:var(--yfi-header)!important;overflow:hidden!important;background:#081A2B!important;display:block!important}
  .hero-img{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;object-position:center!important;background:#081A2B!important}
  .hero-shade{position:absolute!important;top:var(--yfi-header)!important;left:0!important;right:0!important;height:min(585px,149.85vw)!important;bottom:auto!important;background:linear-gradient(0deg,rgba(8,26,43,.88) 0%,rgba(8,26,43,.25) 40%,rgba(8,26,43,0) 72%)!important;pointer-events:none}
  .hero-content{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;z-index:2!important;min-height:0!important;margin-top:-205px!important;padding:22px 20px 46px!important;background:linear-gradient(0deg,#081A2B 0%,#081A2B 74%,rgba(8,26,43,.92) 88%,rgba(8,26,43,0) 100%)!important;display:block!important}
  .hero h1{font-size:clamp(40px,11.5vw,53px)!important;line-height:.92!important;max-width:100%!important}
  .hero-copy{font-size:16px!important;line-height:1.5!important;margin:20px 0 22px!important}
  .hero .actions{display:flex!important;flex-direction:column!important;gap:10px!important}.hero .btn{width:100%!important}
  .hero-note{display:none!important}
}

/* HOME landscape phones: use an actual landscape real YFI image, never crop it. */
@media (orientation:landscape) and (max-height:600px) and (max-width:1000px){
  .hero{min-height:0!important;height:auto!important;max-height:none!important;padding-top:var(--yfi-header)!important;display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr)!important;align-items:stretch!important;background:#081A2B!important;overflow:hidden!important}
  .hero-img{content:url('assets/private-lessons-real.jpeg')!important;position:relative!important;inset:auto!important;grid-column:2!important;grid-row:1!important;width:100%!important;height:100%!important;max-height:calc(100svh - var(--yfi-header))!important;object-fit:contain!important;object-position:center!important;background:#081A2B!important}
  .hero-shade{display:none!important}
  .hero-content{display:flex!important;grid-column:1!important;grid-row:1!important;position:relative!important;z-index:2!important;min-height:calc(100svh - var(--yfi-header))!important;padding:26px 28px!important;margin:0!important;background:linear-gradient(110deg,#061422,#0b2942)!important;flex-direction:column!important;justify-content:center!important}
  .hero .eyebrow{font-size:9px!important;margin:0 0 8px!important}.hero h1{font-size:clamp(31px,5.1vw,48px)!important;line-height:.9!important}.hero-copy{font-size:12px!important;line-height:1.4!important;margin:10px 0 12px!important}.hero .actions{gap:8px!important;flex-wrap:wrap!important}.hero .btn{min-height:36px!important;padding:0 12px!important;font-size:10px!important}.hero-note{display:none!important}
}

/* DAY 4 HEROES: image and copy are separate panes on tablet/desktop, never a cropped full-bleed background. */
@media (min-width:768px){
  .day4-page .d4-hero{min-height:560px!important;height:auto!important;padding-top:var(--yfi-header)!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(360px,.9fr)!important;align-items:stretch!important;background:#081A2B!important;overflow:hidden!important}
  .day4-page .d4-hero>img{position:relative!important;inset:auto!important;grid-column:2!important;grid-row:1!important;width:100%!important;height:100%!important;min-height:476px!important;object-fit:contain!important;object-position:center!important;background:#081A2B!important}
  .day4-page .d4-hero-shade{display:none!important}
  .day4-page .d4-hero-copy{grid-column:1!important;grid-row:1!important;align-self:stretch!important;width:100%!important;max-width:none!important;margin:0!important;padding:70px clamp(34px,5vw,72px)!important;background:linear-gradient(110deg,#061422,#0c2a43)!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
  .day4-page .d4-hero h1{font-size:clamp(42px,5.4vw,74px)!important;max-width:780px!important}
}

/* Short landscape phones: compact split, full image preserved. */
@media (orientation:landscape) and (max-height:600px) and (max-width:1000px){
  .day4-page .d4-hero{min-height:calc(100svh - 0px)!important;grid-template-columns:minmax(0,1.06fr) minmax(300px,.94fr)!important;padding-top:var(--yfi-header)!important}
  .day4-page .d4-hero>img{height:calc(100svh - var(--yfi-header))!important;min-height:0!important;max-height:none!important;object-fit:contain!important;background:#081A2B!important}
  .day4-page .d4-hero-copy{padding:20px 26px!important;min-height:calc(100svh - var(--yfi-header))!important}
  .day4-page .d4-hero .eyebrow{font-size:9px!important;margin-bottom:8px!important}.day4-page .d4-hero h1{font-size:clamp(30px,4.7vw,44px)!important;line-height:.91!important;margin-bottom:10px!important}.day4-page .d4-hero-copy>p:not(.eyebrow){font-size:11.5px!important;line-height:1.4!important;margin:0!important}.day4-page .d4-hero .actions{margin-top:12px!important;gap:8px!important;flex-wrap:wrap!important}.day4-page .d4-hero .btn{min-height:34px!important;font-size:10px!important;padding:0 12px!important}
}

/* Day 4 phone portrait: show the complete photograph first, then the message — zero cropping. */
@media (orientation:portrait) and (max-width:767px){
  .day4-page .d4-hero{min-height:0!important;height:auto!important;padding-top:var(--yfi-header)!important;display:block!important;background:#081A2B!important}
  .day4-page .d4-hero>img{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;object-position:center!important;background:#081A2B!important}
  .day4-page .d4-hero-shade{display:none!important}
  .day4-page .d4-hero-copy{position:relative!important;width:100%!important;max-width:none!important;margin:0!important;padding:34px 20px 50px!important;background:#081A2B!important}
  .day4-page .d4-hero h1{font-size:clamp(40px,11vw,52px)!important;line-height:.93!important;margin-bottom:20px!important}.day4-page .d4-hero-copy>p:not(.eyebrow){font-size:16px!important;line-height:1.55!important}.day4-page .d4-hero .actions{flex-direction:column!important;gap:10px!important}.day4-page .d4-hero .btn{width:100%!important}
}

/* ABOUT hero: complete portrait on phones; balanced split on larger screens. */
@media (min-width:768px){
  .day5-page .d5-hero{min-height:560px!important;height:auto!important;padding-top:var(--yfi-header)!important;display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr)!important;background:#081A2B!important;overflow:hidden!important}
  .day5-page .d5-hero>img{position:relative!important;inset:auto!important;grid-column:2!important;grid-row:1!important;width:100%!important;height:100%!important;min-height:476px!important;object-fit:contain!important;object-position:center!important;background:#081A2B!important}
  .day5-page .d5-hero-shade{display:none!important}.day5-page .d5-hero-copy{grid-column:1!important;grid-row:1!important;align-self:stretch!important;width:100%!important;max-width:none!important;margin:0!important;padding:70px clamp(34px,5vw,72px)!important;background:linear-gradient(110deg,#061422,#0c2a43)!important;display:flex!important;flex-direction:column!important;justify-content:center!important}.day5-page .d5-hero h1{font-size:clamp(42px,5.4vw,72px)!important;max-width:820px!important}
}
@media (orientation:landscape) and (max-height:600px) and (max-width:1000px){
  .day5-page .d5-hero{min-height:100svh!important;grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr)!important}.day5-page .d5-hero>img{height:calc(100svh - var(--yfi-header))!important;min-height:0!important}.day5-page .d5-hero-copy{padding:20px 26px!important;min-height:calc(100svh - var(--yfi-header))!important}.day5-page .d5-hero h1{font-size:clamp(30px,4.8vw,45px)!important;line-height:.92!important;margin:8px 0 12px!important}.day5-page .d5-hero-copy>p:not(.eyebrow){font-size:11.5px!important;line-height:1.4!important;margin:0!important}.day5-page .d5-hero .actions{margin-top:12px!important}.day5-page .d5-hero .btn{min-height:34px!important;font-size:10px!important;padding:0 12px!important}
}
@media (orientation:portrait) and (max-width:767px){
  .day5-page .d5-hero{min-height:0!important;height:auto!important;padding-top:var(--yfi-header)!important;display:block!important;background:#081A2B!important}.day5-page .d5-hero>img{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;object-position:center!important;background:#081A2B!important}.day5-page .d5-hero-shade{display:none!important}.day5-page .d5-hero-copy{position:relative!important;width:100%!important;max-width:none!important;margin:0!important;padding:34px 20px 50px!important;background:#081A2B!important}.day5-page .d5-hero h1{font-size:clamp(40px,11vw,52px)!important;line-height:.93!important}.day5-page .d5-hero-copy>p:not(.eyebrow){font-size:16px!important;line-height:1.55!important}.day5-page .d5-hero .actions{flex-direction:column!important}.day5-page .d5-hero .btn{width:100%!important}
}

/* Content images: never crop people. */
.d4-photo,.d5-founder-media,.d5-breadth-media,.d5-education-media,.founder-image,.school-media,.camp-image,.results-image,.age-photo,.staff-image,.safety-image{height:auto!important;min-height:0!important;aspect-ratio:auto!important;background:#081A2B!important}
.d4-photo img,.d5-founder-media img,.d5-breadth-media img,.d5-education-media img,.founder-image img,.school-media img,.camp-image img,.results-image img,.age-photo img,.staff-image img,.safety-image img{width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;object-position:center!important}
.experience-grid img{width:100%!important;height:auto!important;aspect-ratio:auto!important;object-fit:contain!important;background:#081A2B!important}

/* Keep content grids inside viewport at intermediate widths. */
.d4-split>*,.d5-founder>*,.d5-breadth>*,.d5-education>*,.age-path>*,.safety>*,.staff>*,.university>*{min-width:0!important}
@media(max-width:900px){.d4-split,.d5-founder,.d5-breadth,.d5-education,.age-path,.safety,.staff,.university{grid-template-columns:1fr!important}.d4-split{gap:34px!important}}

/* iPad/tablet: use stable image aspect without clipping. */
@media(min-width:768px) and (max-width:1194px) and (orientation:portrait){
  .day4-page .d4-hero,.day5-page .d5-hero{grid-template-columns:1fr!important;padding-top:var(--yfi-header)!important}.day4-page .d4-hero>img,.day5-page .d5-hero>img{grid-column:1!important;grid-row:1!important;width:100%!important;height:auto!important;min-height:0!important;max-height:640px!important;object-fit:contain!important}.day4-page .d4-hero-copy,.day5-page .d5-hero-copy{grid-column:1!important;grid-row:2!important;min-height:0!important;padding:48px 36px!important}
}