/* ============================================================
   ANIMAL RESPONSIVE — breakpoint refinements, mobile-first fixes.
   Tested widths: 320 / 375 / 390 / 430 / 768 / 1024 / 1280.
   ============================================================ */

@media (max-width:1179px){
  body.pf-page{padding-bottom:64px} /* room for the bottom bar */
}

@media (max-width:1080px){
  .mplates{gap:.9rem}
  .mplate{padding:1.3rem 1.1rem 1.2rem}
}
@media (max-width:900px){
  .mplates{grid-template-columns:1fr;max-width:26rem;margin-inline:auto}
  .mplate--lead{transform:none;order:-1}
  .mplate--lead:hover{transform:translateY(-4px)}
}
@media (max-width:980px){
  .rel-grid{grid-template-columns:repeat(2,1fr)}
  .bridge-row{grid-template-columns:1fr}
  .fact-row{grid-template-columns:repeat(2,auto)}
  .room-grid{grid-template-columns:repeat(2,1fr)}
  .hub-row{grid-template-columns:1fr 1fr}
  .pf-fusion__blocks{grid-template-columns:1fr}
}

@media (max-width:900px){
  .pf-hero{grid-template-columns:1fr;text-align:center;padding-top:4.5rem}
  .pf-hero__inner{order:1;max-width:100%;margin-inline:auto}
  .pf-hero__art{order:2;max-height:36vh;width:min(70vw,340px);margin-inline:auto}
  .pf-hero__cross,.pf-hero__actions{justify-content:center}
  .pf-hero__essence{margin-inline:auto}
}

@media (max-width:860px){
  .overture__inner{grid-template-columns:1fr}
  .overture__art{order:-1;max-width:340px}
  .band{padding:clamp(3rem,8vh,4.5rem) clamp(1.25rem,5vw,3rem)}
  .band__inner,.band--right .band__inner{grid-template-columns:1fr;gap:2rem}
  .band--right .band__side{order:1}
  .band--right .band__payoff{order:2}
  .band__name{margin-bottom:1.2rem}
}

@media (max-width:820px){
  .pf-dossier .card__body{grid-template-columns:1fr;gap:2.4rem}
  /* five gates become a horizontal, swipeable rail on mobile */
  .mirror-gates{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;gap:.2rem}
  .mirror-gates::-webkit-scrollbar{display:none}
  .mgate{flex:0 0 30%;scroll-snap-align:center;min-width:112px}
  .mgate__gate{display:none}
  .mirror-gates__hint{display:block}
  .mirror-gates__fill{display:none} /* the underline-per-tab handles the active state on mobile */
  .mpanel-nav{flex-direction:column-reverse;align-items:stretch}
  .mnext{max-width:none}
  .mprev{text-align:center}
}
@media (max-width:400px){
  .mgate{flex-basis:36%;min-width:104px}
  .mgate__word{font-size:.6rem}
}

@media (max-width:900px){
  .pf-keep__grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .pf-closer__routes{grid-template-columns:1fr}
  .share-modal__list{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:400px){
  .share-modal__list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .bond-form__go{width:100%}
}
@media (max-width:560px){
  .bw-months{grid-template-columns:repeat(4,1fr)}
  .bw-yearrow{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}
  #bw-yearfield{grid-column:1/-1}
  .bond-edges li{grid-template-columns:1fr;gap:.15rem}
}
@media (max-width:360px){
  .bw-months{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .bond-rows{padding:.4rem 1.2rem .2rem}
  .bond-rows__head{margin:1.2rem 1.2rem 0}
}
@media (max-width:760px){
  .bond-card__verdict-label{position:static;display:inline-block;margin-top:.8rem}
  .pf-recognition__lines{grid-template-columns:1fr}
  .pf-fusion__halves{grid-template-columns:1fr}
  .cross-read{min-height:0}
  .pf-moon__grid{grid-template-columns:1fr}
  .facet-tab{padding:12px 14px 14px;font-size:.85rem}
  .facet-tab[aria-selected="true"]::after{left:12px;right:12px}
  .pf-work .panels{padding:28px 0 0;min-height:0}
  .explore-primary{grid-template-columns:1fr}
  .ov-beats{grid-template-columns:1fr;gap:1.4rem}
  .bond-learn{white-space:normal}
}

@media (max-width:720px){
  .pf-elements .identity{grid-template-columns:1fr;gap:20px}
  .glyph-badge{width:84px;height:84px}
  .glyph-badge span{font-size:40px}
}

@media (max-width:700px){
  .shadow-examples{grid-template-columns:1fr}
}

@media (max-width:640px){
  .palette-panel{grid-template-columns:1fr}
  .pp__swatch{width:100%;height:84px;flex-direction:row}
  .room-grid{grid-template-columns:1fr}
  .rel-panel .row{grid-template-columns:1fr;gap:.3rem}
  .rel-panel .row .k{padding-top:0}
}

@media (max-width:600px){
  .pf-power__days li{grid-template-columns:1fr;gap:.3rem}
  .stone-cabinet{grid-template-columns:repeat(2,1fr)}
  .stone-panel__grid{grid-template-columns:1fr}
  .stone-panel__head .choose{margin-left:0;width:100%}
  .pf-elements .archetype{white-space:normal;font-size:.66rem}
}

@media (max-width:540px){
  .facet-tab .num{display:none}
  .hub-row{grid-template-columns:1fr}
  .rel-grid{grid-template-columns:1fr}
  .fact-row{grid-template-columns:1fr 1fr}
  .bridge{padding:26px 22px}
  .pf-dossier .stats{grid-template-columns:1fr}
}

@media (max-width:520px){
  .pf-dossier .card__serial{position:static;text-align:left;margin:0 0 1rem}
  #rail-bottom .rail__mobile-list{grid-template-columns:1fr}
  .pf-essential-close .actions .btn{width:100%}
}

/* very narrow (320px) safety */
@media (max-width:340px){
  .wrap{padding-inline:1rem}
  .pf-hero h1{font-size:2.6rem}
  .band__name{font-size:2rem}
}

/* large desktop comfort */
@media (min-width:1600px){
  #rail{flex-basis:300px}
}