/* OttoFish — Catalog page styles
   Used by: /ryby/index.html
   Requires: common.css
   ================================ */

.page-header{padding:24px 0 36px}
.page-header h1{font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(28px,5vw,44px);color:var(--navy);letter-spacing:-.03em;margin-bottom:10px}
.page-header p{font-size:17px;color:var(--ink-soft);max-width:56ch}

.fish-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;padding-bottom:50px}

.fish-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s;display:flex;flex-direction:column}
.fish-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#bfe6ec}
.fish-thumb{aspect-ratio:3/2;overflow:hidden;background:#0b1418}
.fish-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.fish-card:hover .fish-thumb img{transform:scale(1.04)}
.fish-info{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column}
.fish-info h2{font-family:'Unbounded',sans-serif;font-weight:600;font-size:18px;color:var(--navy);margin-bottom:2px}
.fish-info .latin{font-size:13px;color:var(--muted);font-style:normal;letter-spacing:.02em;margin-bottom:10px}
.fish-info .snippet{font-size:14px;color:var(--ink-soft);margin-bottom:14px;flex:1}
.fish-tags{display:flex;gap:6px;flex-wrap:wrap}
.fish-tags span{font-size:12px;padding:4px 10px;border-radius:999px;background:#e8f6f8;color:var(--teal-deep);font-weight:500}

.fish-card.coming{opacity:.55;pointer-events:none}
.fish-card.coming .fish-thumb{background:linear-gradient(135deg,#e0eff2,#d0e4e8);display:flex;align-items:center;justify-content:center}
.fish-card.coming .fish-thumb::after{content:'Скоро';font-family:'Unbounded',sans-serif;font-weight:600;font-size:16px;color:var(--muted)}

em{font-style:normal}