/* =========================================================
   responsive.css — layout builds up from mobile
   Breakpoints: 560 / 760 / 960 / 1180 / 1400
   ========================================================= */

@media (min-width:560px){
  .util__r span{display:inline}
  .feat__card{grid-template-columns:1fr 1fr;column-gap:clamp(1.5rem,4vw,3rem)}
  .feat__card li:nth-child(2){border-bottom:1px solid var(--rule-soft)}
  .feat__card li:nth-last-child(-n+2){border-bottom:0}
  .mom__grid{grid-template-columns:1fr 1fr}
  .learn__grid{grid-template-columns:1fr 1fr}
  .start__steps{grid-template-columns:1fr 1fr}
  .rib__facts ul{grid-template-columns:1fr 1fr;gap:1.75rem clamp(1.5rem,4vw,3rem)}
  .enq__form{grid-template-columns:1fr 1fr;column-gap:1rem}
  .fld--wide{grid-column:1/-1}
  .foot__grid{grid-template-columns:1fr 1fr;gap:2.25rem clamp(1.5rem,4vw,2.5rem)}
  .foot__brand{grid-column:1/-1}
  .foot__contact{grid-column:1/-1}
}

@media (min-width:760px){
  .feat__card{grid-template-columns:repeat(5,1fr);column-gap:0}
  .feat__card li{flex-direction:column;align-items:flex-start;gap:.55rem;
    border-bottom:0!important;border-right:1px solid var(--rule-soft);
    padding:.35rem clamp(.8rem,1.8vw,1.4rem)}
  .feat__card li:first-child{padding-left:0}
  .feat__card li:last-child{border-right:0;padding-right:0}
  .start__steps{grid-template-columns:repeat(3,1fr)}
  .learn__grid{grid-template-columns:repeat(4,1fr)}
  .rib__facts ul{grid-template-columns:repeat(4,1fr)}
  .brk__in{grid-template-columns:1fr 1fr;align-items:center}
}

@media (min-width:960px){
  /* the horizontal scrim is enough once the layout is two columns */
  .brk__scrim{background:linear-gradient(to right,rgba(10,26,29,.76) 0%,rgba(10,26,29,.5) 50%,rgba(10,26,29,.28) 100%)}
  /* about : the note sits beside the overlapping portrait */

  /* care : list left, one media panel right, crossfading */
  .care__head{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:end}
  .care__head .h2{grid-column:1;margin-bottom:0}
  .care__head .eyebrow{grid-column:1;grid-row:1}
  .care__lede{grid-column:2;grid-row:2;padding-bottom:.4rem}
  .care__grid{position:relative;min-height:30rem}
  .care__index{width:52%}
  .care__row{padding:1.5rem 0}
  .care__pane{padding:0}
  .care__item:not(.is-on) .care__pane{display:block}
  .care__media{position:absolute;top:0;right:0;width:44%;height:100%;margin:0;aspect-ratio:auto;
    opacity:0;transition:opacity var(--t3) var(--ease);pointer-events:none}
  .care__item.is-on .care__media{opacity:1}
  .care__desc{max-height:0;opacity:0;overflow:hidden;margin:0;padding-left:2.9rem;
    transition:max-height var(--t2) var(--ease),opacity var(--t2) var(--ease),padding var(--t2) var(--ease)}
  .care__item.is-on .care__desc{max-height:9rem;opacity:1;padding-bottom:1.5rem}
  .care__cta{margin-top:2.2rem}

  /* why : panel overlaps the photograph */
  .why__grid{display:block;padding-top:clamp(1rem,3vw,2.5rem)}
  .why__media{width:66%;aspect-ratio:3/2}
  .why__panel{position:absolute;right:0;bottom:-2.5rem;width:42%;box-shadow:var(--sh-lg)}
  .why{padding-bottom:calc(var(--sec) + 2.5rem)}

  /* moments : editorial, deliberately uneven */
  .mom__head{grid-template-columns:1.05fr .95fr;align-items:end;gap:clamp(2rem,5vw,4rem)}
  .mom__head p{justify-self:end;padding-bottom:.4rem}
  .mom__grid{grid-template-columns:repeat(12,1fr);align-items:stretch}
  .mom__a{grid-column:1/6;grid-row:1;aspect-ratio:25/18}
  .mom__d{grid-column:1/6;grid-row:2;aspect-ratio:25/18}
  .mom__b{grid-column:6/10;grid-row:1/3;aspect-ratio:auto;height:100%}
  .mom__c{grid-column:10/13;grid-row:1/3;aspect-ratio:auto;height:100%}
  .mom__c img{object-position:52% 50%}

  /* philosophy: photography leads on the left */
  .phil{grid-template-columns:1.02fr .98fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
  .phil__art{padding-bottom:4rem}
  .phil__inset{right:-2.5rem;width:40%;max-width:240px}
  .phil__copy{padding-block:1rem}

  /* getting started: a connected three-step journey */
  .start__head{grid-template-columns:1fr auto;align-items:end;justify-items:start}
  .start__head .eyebrow{grid-column:1;grid-row:1}
  .start__head .h2{grid-column:1;grid-row:2}
  .start__head .btn{grid-column:2;grid-row:2;justify-self:end}
  .start__steps::before{content:"";position:absolute;top:3.3rem;left:12%;right:12%;height:1.5px;
    background:repeating-linear-gradient(to right,var(--rule) 0 6px,transparent 6px 12px);z-index:0}
  .scard{position:relative;z-index:1}

  /* room to explore: heading left, copy and actions right */
  .brk__in{grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,4rem);align-items:center}

  .ask__in{grid-template-columns:1.35fr .9fr;gap:clamp(2rem,4.5vw,3.5rem);align-items:start}
  .res{grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:start}

  /* final CTA : image behind, panel sits over it */
  .fin__media{position:absolute;inset:0;z-index:0}
  .fin__media img{width:100%;height:100%;aspect-ratio:auto}
  .fin{position:relative;min-height:clamp(26rem,46vw,36rem);display:flex;align-items:center}
  .fin__panel{position:relative;z-index:2;background:transparent;padding:clamp(3rem,6vw,5rem) 0;width:min(52%,34rem)}
  .fin::before{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(to right,rgba(12,28,31,.92) 0%,rgba(12,28,31,.8) 42%,rgba(12,28,31,.28) 78%,rgba(12,28,31,.12) 100%)}

  /* one consistent grid: brand is widest, contact gets room for the address
     and the three numbers, the two link lists stay narrow */
  .foot__grid{grid-template-columns:1.2fr 1fr 1.25fr 1.35fr 1.3fr;
    gap:clamp(1.5rem,2.4vw,3rem);align-items:start}
  /* the two full-width spans below 960 go back to single columns here */
  .foot__brand,.foot__contact{grid-column:auto}
  /* on smaller laptops the brand column gives width back to the link lists,
     which otherwise wrap "Before School Care" and "QFCC Reportable Conduct" */
  .foot__brand p{max-width:26ch}

  /* enquiry : the form sets the height of the section, the photograph fills
     whatever is left beside it, so both columns finish on the same line and
     no empty area is created underneath either one */
  .enq__in{grid-template-columns:.82fr 1.18fr;gap:clamp(2.5rem,5vw,4rem);align-items:stretch}
  .enq__form{align-self:start}
  /* flex-basis 0 so the photograph's intrinsic height stops dictating the
     column; min-height is the floor, the rest is free space it absorbs */
  .enq__intro .enq__pic{margin-top:2rem;aspect-ratio:auto;flex:1 1 0;min-height:13rem}
  .rib__facts ul{gap:clamp(1.5rem,3vw,2.5rem)}
  .tst__head{grid-template-columns:1.05fr .95fr;align-items:end;gap:clamp(2rem,5vw,4rem)}
  .tst__lede{justify-self:end;padding-bottom:.4rem}
}

/* ---------- desktop navigation ----------
   Measured, not guessed. With seven items (Gallery added) the logo + pill +
   CTA need 1120px to sit inside the container: at 1024 the CTA ran 51px past
   the viewport edge and at 1080 it cleared by only 3px. The tablet menu
   therefore stays in use through 1024 landscape, which is also what keeps
   iPad landscape from feeling cramped. */
@media (min-width:1120px){
  .nav{padding:1.1rem 0}
  .nav__pill{display:block;margin-inline:auto;background:var(--paper);border-radius:var(--pill);
    box-shadow:var(--sh);padding:.3rem .45rem;
    transition:background var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
  .nav__cta{display:inline-flex;flex:0 0 auto}
  .burger{display:none}
  .nav__logo picture{width:126px}
  .nav.is-stuck{padding:.55rem 0}
  .nav.is-stuck .nav__pill{background:transparent;box-shadow:none}
  .nav.is-stuck .nav__cta{min-height:44px;padding:.7rem 1.15rem}
  /* tighter link padding on smaller laptops so the bar keeps clearance */
  .nav__link{padding:.7rem .78rem}
  .nav__link::after{left:.78rem;right:.78rem}
}

@media (min-width:1180px){
  .foot__brand p{max-width:34ch}
  .care__index{width:50%}
  .care__media{width:45%}
  .hero__sub{max-width:52ch}
  .why__media{width:64%}
  .why__panel{width:40%;bottom:-3rem}
}

@media (min-width:1280px){
  .nav__link{padding:.7rem .95rem}
  .nav__link::after{left:.95rem;right:.95rem}
}

@media (min-width:1400px){
  .nav__link{font-size:1.02rem;padding:.72rem 1.1rem}
  .nav__link::after{left:1.1rem;right:1.1rem}
  .nav__logo picture{width:140px}
}

/* ---------- narrow phones ---------- */
@media (max-width:759px){
  /* the control previously sat on top of the hero CTAs on phones. It moves to
     the top-left of the hero and the chip drops far enough to give it a clear
     band, so it overlaps neither the nav, the chip nor either CTA. */
  .vbtn{right:auto;left:var(--gut);top:calc(var(--nav-h,96px) + .5rem);bottom:auto}
  .hero .chip--light{margin-top:3.25rem}

  /* mobile gets its own wave geometry, not a shrunken desktop SVG */
  .rib__svg--d{display:none}
  .rib__svg--m{display:block;width:124%;margin-left:-12%}
  .rib{min-height:clamp(420px,72vh,540px)}
}

@media (max-width:420px){
  .phil__inset{width:42%;bottom:0;right:0}
  .enq__foot{flex-direction:column;align-items:stretch}
  .enq__foot .btn{width:100%}
  .hero__cta .btn,.fin__cta .btn{width:100%}
  .qa__a p{padding-right:1.25rem}
  .ask__tel{gap:0}
  .ask__tel a{width:100%}
  .nav__logo picture{width:100px}
  .burger{padding:.75rem 1rem}
}
@media (max-width:360px){
  .util__in p:first-child{font-size:.72rem}
  .nav__logo picture{width:92px}
}

/* ---------- short landscape phones ---------- */
@media (max-height:520px) and (max-width:959px){
  .hero{min-height:540px}
  .hero__vid{object-position:50% 40%}
  .sheet__nav > ul > li > a{font-size:1.3rem;padding:.5rem 0}
  .sheet__foot{padding-top:1.2rem}
}

/* ---------- print ---------- */
@media print{
  .util,.nav,.sheet,.hero,.brk,.fin,.vbtn{display:none!important}
  body{background:#fff;color:#000}
  .care,.ask__card,.foot,.start{background:#fff!important;color:#000!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
}