/* =========================================================
   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: the logo + pill + CTA need 1024px to sit inside the
   container. At 960 the CTA ran 60px past the viewport edge and was only
   hidden by body{overflow-x:hidden}. The tablet menu therefore stays in use
   until there is genuinely room for the full bar. */
@media (min-width:1024px){
  .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}
  .nav__link{padding:.7rem .95rem}
  .nav__link::after{left:.95rem;right:.95rem}
  .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: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){
  /* 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}
  .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}
}