*{
  box-sizing:border-box;
}

:root{
  --enc-blue:#245ca8;
  --enc-text:#172033;
  --enc-muted:#738096;
  --enc-line:#dfe7f1;
  --enc-bg:#f5f6f8;
}

body{
  margin:0;
  overflow-x:hidden;
  background:var(--enc-bg);
  color:var(--enc-text);
}

.encyclopedia-page{
  padding:0 20px 80px;
}

.encyclopedia-inner{
  width:min(1320px,100%);
  margin:0 auto;
}

.encyclopedia-hero{
  padding:72px 0 30px;
}

.encyclopedia-hero>p{
  margin:0;
  color:var(--enc-blue);
  font-size:10px;
  font-weight:800;
  letter-spacing:.17em;
}

.encyclopedia-hero h1{
  margin:8px 0 0;
  font-size:clamp(48px,8vw,96px);
  line-height:.98;
  letter-spacing:-.055em;
}

.encyclopedia-hero span{
  display:block;
  margin-top:18px;
  color:var(--enc-muted);
  font-size:13px;
}

.encyclopedia-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:22px;
}

.encyclopedia-stats article{
  padding:17px;
  border:1px solid var(--enc-line);
  border-radius:17px;
  background:#fff;
}

.encyclopedia-stats span,
.encyclopedia-stats strong{
  display:block;
}

.encyclopedia-stats span{
  color:var(--enc-muted);
  font-size:8px;
  font-weight:800;
  letter-spacing:.13em;
}

.encyclopedia-stats strong{
  margin-top:7px;
  font-size:29px;
}

.encyclopedia-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) 180px;
  gap:8px;
  align-items:center;
  margin-bottom:24px;
}

.encyclopedia-controls select{
  width:100%;
  min-height:43px;
  padding:0 12px;
  border:1px solid var(--enc-line);
  border-radius:12px;
  background:#fff;
}

.breed-picker{position:relative}
.breed-picker>button{width:100%;min-height:43px;padding:0 14px;border:1px solid var(--enc-line);border-radius:12px;background:#fff;text-align:left;font-size:13px;cursor:pointer}
.breed-picker-list{position:absolute;z-index:20;top:calc(100% + 7px);left:0;width:min(640px,calc(100vw - 40px));max-height:320px;overflow:auto;padding:10px;border:1px solid var(--enc-line);border-radius:16px;background:#fff;box-shadow:0 18px 46px rgba(20,40,70,.14)}
.breed-picker-list[hidden]{display:none}
.breed-picker-list button{display:block;width:100%;min-height:40px;padding:0 12px;border:0;border-radius:9px;background:transparent;text-align:left;font-size:13px;cursor:pointer}
.breed-picker-list button:hover,.breed-picker-list button.is-active{background:#edf3fb;color:var(--enc-blue);font-weight:800}

.breed-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:15px;
}

.breed-card{
  overflow:hidden;
  border:1px solid var(--enc-line);
  border-radius:22px;
  background:#fff;
  color:inherit;
  text-decoration:none;
  box-shadow:0 10px 26px rgba(20,40,70,.05);
  transition:transform .2s,box-shadow .2s;
}

.breed-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(20,40,70,.1);
}

.breed-card-image{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#e8edf3;
}

.breed-card-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .35s ease;
}

.breed-card:hover .breed-card-image img{
  transform:scale(1.018);
}

.breed-card-fallback{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  color:var(--enc-muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.15em;
}

.breed-card-count{
  position:absolute;
  right:10px;
  bottom:10px;
  padding:6px 9px;
  border-radius:999px;
  background:rgba(15,28,44,.72);
  color:#fff;
  font-size:8px;
}

.breed-card-body{
  padding:15px;
}

.breed-card-body>span,
.breed-card-body>strong,
.breed-card-body>p{
  display:block;
}

.breed-card-body>span{
  color:var(--enc-blue);
  font-size:8px;
  font-weight:800;
  letter-spacing:.14em;
}

.breed-card-body>strong{
  margin-top:6px;
  font-size:22px;
}

.breed-card-body>p{
  display:-webkit-box;
  margin:9px 0 0;
  overflow:hidden;
  color:var(--enc-muted);
  font-size:10px;
  line-height:1.7;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.breed-card-meta{
  display:flex;
  gap:10px;
  margin-top:12px;
  padding-top:11px;
  border-top:1px solid var(--enc-line);
  color:var(--enc-muted);
  font-size:8px;
}

.empty-state{
  padding:70px 20px;
  border:1px dashed var(--enc-line);
  border-radius:20px;
  color:var(--enc-muted);
  text-align:center;
}

@media(max-width:960px){
  .breed-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:680px){
  .encyclopedia-page{
    padding-inline:12px;
  }

  .encyclopedia-hero{
    padding-top:48px;
  }

  .encyclopedia-controls{
    grid-template-columns:1fr 1fr;
  }

  .encyclopedia-controls input{
    grid-column:1/-1;
  }
}

@media(max-width:500px){
  .encyclopedia-stats{
    gap:7px;
  }

  .encyclopedia-stats article{
    padding:13px 10px;
  }

  .breed-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }

  .breed-card{
    min-width:0;
    border-radius:15px;
    box-shadow:0 7px 18px rgba(20,40,70,.05);
  }

  .breed-card:hover{
    transform:none;
  }

  .breed-card-image{
    aspect-ratio:1/1;
  }

  .breed-card-image img{
    object-position:center;
  }

  .breed-card-count{
    right:7px;
    bottom:7px;
    padding:4px 6px;
    font-size:6px;
  }

  .breed-card-body{
    min-height:64px;
    padding:10px 11px 11px;
  }

  .breed-card-body>strong{
    margin-top:0;
    font-size:15px;
    line-height:1.35;
  }

  .breed-card-body>p{
    display:none;
  }

  .breed-card-meta{
    margin-top:7px;
    padding-top:7px;
    font-size:7px;
  }

  .encyclopedia-controls{
    grid-template-columns:1fr;
  }

  .encyclopedia-controls input{
    grid-column:auto;
  }
}