/* =========================================================
   Vet House — home.css
   Блоки, которые есть только на главной: первый экран с подбором по весу,
   «Что случилось?», подбор корма. Остальное — в components.css.
   ========================================================= */
/* ---------- 1. Hero ---------- */
.hero{padding:36px 0 24px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:stretch}
.hero-copy{display:flex;flex-direction:column;padding:40px 8px 8px 0}
.hero h1{font-size:60px;line-height:1.02;font-weight:700;letter-spacing:-.035em;max-width:11ch}
.hero-lead{font-size:18px;line-height:1.55;color:var(--ink-2);margin-top:22px;max-width:46ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-pets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:auto;padding-top:36px}
.pet-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:190px;border-radius:24px;overflow:hidden;padding:20px;isolation:isolate}
.pet-tile .ph{position:absolute;inset:0;z-index:-1;justify-content:flex-start;padding-top:22px}
.pet-tile b{font-size:22px;font-weight:700;letter-spacing:-.01em}
.pet-tile span{font-size:14px;color:var(--ink-2)}
.pet-tile .go{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;color:var(--teal);transition:transform .2s var(--ease)}
.pet-tile:hover .go{transform:translateX(3px)}

/* ---------- 3. Что случилось ---------- */

/* ---------- 6. Подбор корма ---------- */
.food{display:grid;grid-template-columns:340px minmax(0,1fr);gap:20px;align-items:stretch}
.food-panel{border-radius:24px;background:var(--mist);padding:28px;display:flex;flex-direction:column;gap:22px}
.food-panel h3{font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.food-q{display:flex;flex-direction:column;gap:10px}
.food-q > span{font-size:14px;color:var(--muted)}
.food-note{font-size:13px;color:var(--muted);margin-top:auto}
.food-res{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.food-res .card-media{aspect-ratio:4/3}


/* ---------- адаптив ---------- */
@media (max-width:1199px){
  .hero h1{font-size:50px}
  .food{grid-template-columns:1fr}
}
@media (max-width:1023px){
  .hero{padding:16px 0 8px}
  .hero-grid{grid-template-columns:1fr;gap:20px}
  .hero-copy{padding:8px 0 0}
  .hero h1{font-size:38px;max-width:12ch}
  .hero-lead{font-size:16px;margin-top:14px}
  .hero-actions{margin-top:20px}
  .hero-actions .btn{flex:1;height:48px;padding:0 16px}
  .hero-pets{padding-top:20px;gap:10px}
  .pet-tile{min-height:140px;border-radius:20px;padding:16px}
  .pet-tile b{font-size:18px}
  .pet-tile span{font-size:13px}
  .pet-tile .go{width:34px;height:34px;top:12px;right:12px}
  .food-panel{padding:20px;border-radius:20px}
  .food-res{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -16px;padding:0 16px 8px;scrollbar-width:none}
  .food-res .card{flex:0 0 76%;scroll-snap-align:start}
}