/* Shared layout and typography system. Loaded last to normalize all routes. */
html,body{max-width:100%;overflow-x:clip}
body,summary,button,input,select{line-height:var(--line-height-body)}
/* Intentional global authority: page-specific legacy values no longer fragment the rhythm. */
p,li{line-height:var(--line-height-copy)!important}
h1,h2,h3,h4,h5,h6{line-height:var(--line-height-heading)!important}

/* Every page uses one container width and one responsive outer gutter. */
.shell{width:min(var(--container-max),calc(100% - (var(--page-gutter) * 2)));max-width:100%;margin-inline:auto}
main section,main article,main div,.shell>*{min-width:0}
main img{max-width:100%}

/* Percentage columns plus gaps previously exceeded 100% of the container. */
.hero,.inner-hero{grid-template-columns:minmax(0,42fr) minmax(0,58fr)}
.choose-grid{grid-template-columns:minmax(0,55fr) minmax(0,45fr)}
.faq-home{grid-template-columns:minmax(0,52fr) minmax(0,48fr);gap:var(--grid-gap)}
.ref-hero,.choose-hero{grid-template-columns:minmax(0,40fr) minmax(0,60fr)}
.about-intro,.breed-hero{grid-template-columns:minmax(0,41fr) minmax(0,59fr)}
.space>div{grid-template-columns:minmax(0,68fr) minmax(0,32fr)}
.why{grid-template-columns:minmax(0,46fr) minmax(0,54fr)}
.meeting{grid-template-columns:minmax(0,37fr) minmax(0,63fr)}
.meeting-check{grid-template-columns:minmax(0,64fr) minmax(0,36fr)}
.choose-calm{grid-template-columns:minmax(0,42fr) minmax(0,58fr)}
.breeds-index-hero{grid-template-columns:minmax(0,46fr) minmax(0,54fr)}
.breed-directory-grid>article{grid-template-columns:minmax(0,38fr) minmax(0,62fr)}
.breed-character>.shell{grid-template-columns:minmax(0,55fr) minmax(0,45fr)}
.breed-colors{grid-template-columns:minmax(0,45fr) minmax(0,55fr)}
.breed-pets article{grid-template-columns:minmax(0,46fr) minmax(0,54fr)}
.care-home{grid-template-columns:minmax(0,55fr) minmax(0,45fr)}
.visit{grid-template-columns:minmax(0,55fr) minmax(0,45fr)}

/* Consistent vertical rhythm for the main page families. */
.section,.faq-home,.breed-available{padding-block:var(--section-space)}
.reviews,.choose-section{padding-block:var(--section-space-compact)}
.breed-section{padding-block:var(--inner-section-space)}
.breed-directory{padding-block:var(--inner-section-space) var(--section-space)}
.breeds-index-hero{padding-bottom:var(--section-space-compact)}
.ref-catalog,.ref-contacts,.ref-faq,.ref-care,.ref-about,.ref-choose{padding-bottom:var(--section-space-compact)}
.section-heading{margin-bottom:var(--text-gap)}

/* Images must remain inside their assigned grid track. */
.faq-home img.faq-home-photo{width:100%;max-width:460px;justify-self:end}
.ref-hero-media,.choose-hero-media,.hero-image{max-width:100%}
.ref-hero-media img,.choose-hero-media img,.hero-image img{max-width:100%}
.breed-character>div>img{width:100%}

@media(max-width:1000px){
 :root{--page-gutter:20px;--grid-gap:20px;--section-space:48px;--section-space-compact:34px;--inner-section-space:30px}
 .choose-grid{grid-template-columns:1fr}
 .choose-grid>div{padding-right:0}
 .choose-grid img{width:min(420px,100%);height:auto;justify-self:center;margin-top:24px}
 .breed-character>.shell{grid-template-columns:1fr}
}

@media(max-width:800px){
 .choose-hero,.choose-calm{grid-template-columns:1fr}
}

@media(max-width:700px){
 :root{--page-gutter:14px;--grid-gap:16px;--section-space:42px;--section-space-compact:30px;--inner-section-space:26px}
 .shell{width:min(var(--container-max),calc(100% - (var(--page-gutter) * 2)))}
 .faq-home img.faq-home-photo{width:100%;max-width:none;justify-self:center}
 .faq-home,.about-intro,.space>div,.why,.meeting,.breeds-index-hero,.breed-directory-grid>article,.breed-hero,.breed-colors,.visit{grid-template-columns:1fr}
 .breed-pets article{grid-template-columns:minmax(0,42fr) minmax(0,58fr)}
}

@media(max-width:480px){.meeting-check{grid-template-columns:1fr}}
@media(max-width:430px){.breed-pets article{grid-template-columns:1fr}}

/* Final authority for internal-page hero media; this file loads after legacy page styles. */
.inner-hero img,.ref-hero-media img,.choose-hero-media img,.breeds-index-hero img,.breed-hero>img{
 border-radius:var(--inner-hero-radius)
}
@media(max-width:700px){
 .inner-hero img,.ref-hero-media img,.choose-hero-media img,.breeds-index-hero img,.breed-hero>img{border-radius:18px}
}