/* Kids page only (loaded by /kids). Everything is prefixed .kids- so other pages are unaffected. */

/* hero: portrait in the existing arch frame (image is 4:5, so nothing is cropped) */
.kids-hero__img{background:var(--walnut)}
.kids-hero__img img{object-position:50% 30%}
@media (max-width:820px){
  .phero__img.kids-hero__img{aspect-ratio:4/5;width:min(100%,360px);margin-inline:auto}
}

/* What we evaluate: illustration on the left (same size as the consultation photo), text on the right */
.sec.kids-eval{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}
.kids-eval__media>h2{margin:0 0 clamp(20px,2.6vw,30px)}
.kids-eval__fig{margin:0}
.kids-eval__fig picture{display:block}
.kids-eval__fig img{display:block;width:100%;height:auto;border-radius:6px;border:1px solid rgba(20,16,13,.1);background:#FBF8F1}
.kids-eval__zoom{margin-top:14px}
.kids-eval__intro{margin:0}

/* the four labels as HTML: screen-reader only, shown visibly only on phone widths where the artwork's own text is tiny */
.kids-eval__list{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.kids-eval__list>div,.kids-eval__list dt,.kids-eval__list dd{margin:0}
@media (max-width:520px){
  .kids-eval__list{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;margin-top:24px}
  .kids-eval__list>div{padding:16px 0;border-top:1px solid rgba(20,16,13,.14)}
  .kids-eval__list dt{font-family:var(--serif);font-size:19px;font-weight:400;color:#221812;line-height:1.25}
  .kids-eval__list dd{margin-top:6px;color:var(--muted);font-size:15.5px;line-height:1.7}
}
@media (max-width:820px){
  .sec.kids-eval{grid-template-columns:1fr;gap:20px}
}

/* expandable assessment details */
.kids-more{margin-top:clamp(22px,2.6vw,32px);border-top:1px solid rgba(20,16,13,.14)}
.kids-more summary{display:flex;justify-content:space-between;gap:20px;align-items:baseline;list-style:none;cursor:pointer;
  padding:22px 0;font-size:clamp(18px,1.7vw,20px);font-weight:300;color:#221812}
.kids-more summary::-webkit-details-marker{display:none}
.kids-more summary::after{content:"+";font-family:var(--serif);font-size:22px;color:var(--amber);flex:none}
.kids-more[open] summary::after{content:"\2212"}
.kids-more summary:hover{color:#8A5A2B}
.kids-more__body{max-width:70ch;padding:0 0 26px}

/* Our approach: heading + photo on the left, text on the right */
.sec.kids-approach{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}
.kids-approach__media>h2{margin:0 0 clamp(20px,2.6vw,30px)}
.kids-approach__fig{margin:0}
.kids-approach__fig picture{display:block}
.kids-approach__fig img{display:block;width:100%;height:auto;border-radius:6px}
@media (max-width:820px){
  .sec.kids-approach{grid-template-columns:1fr;gap:20px}
}

/* "View larger" viewer */
.kids-viewer{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:var(--ink);color:#F7F3EC;overflow:hidden}
.kids-viewer[open]{display:flex;flex-direction:column}
.kids-viewer::backdrop{background:rgba(20,16,13,.9)}
.kids-viewer__bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:12px var(--gut);border-bottom:1px solid rgba(244,239,230,.16)}
.kids-viewer__title{font:500 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--amber-soft)}
.kids-viewer__tools{display:flex;gap:8px;align-items:center}
.kids-viewer__btn{appearance:none;cursor:pointer;min-width:44px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(244,239,230,.4);background:transparent;color:#F7F3EC;
  font:400 11px var(--sans);letter-spacing:.12em;text-transform:uppercase}
.kids-viewer__btn:hover:not(:disabled){border-color:var(--amber-soft);color:#fff}
.kids-viewer__btn:disabled{opacity:.35;cursor:default}
.kids-viewer__btn--close{background:var(--amber);border-color:var(--amber);color:#1A1209}
.kids-viewer__btn--close:hover:not(:disabled){background:var(--amber-soft);border-color:var(--amber-soft);color:#1A1209}
.kids-viewer__btn:focus-visible,.kids-viewer__scroll:focus-visible{outline:2px solid var(--amber-soft);outline-offset:2px}
.kids-viewer__scroll{flex:1;min-height:0;display:flex;overflow:auto;background:#FBF8F1;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.kids-viewer__scroll img{display:block;flex:none;margin:auto;max-width:none;height:auto}
html.kids-viewer-open{overflow:hidden}