/* OttoFish — Fish Card page styles
   Used by: /ryby/SLUG/index.html (53 pages)
   Requires: common.css
   ======================================= */

/* Hero layout */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:center;padding:14px 0 40px}
@media(max-width:760px){.hero{grid-template-columns:1fr;gap:18px}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--teal-deep);background:#dff4f7;border:1px solid #c5e9ee;padding:6px 13px;border-radius:999px;text-transform:uppercase;letter-spacing:.06em}
.dot{width:9px;height:9px;border-radius:50%;background:var(--coral);display:inline-block;box-shadow:0 0 0 4px var(--coral-soft)}
h1{font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(34px,6vw,52px);line-height:1.05;letter-spacing:-.03em;color:var(--navy);margin:16px 0 6px}
h1 .lat{display:block;font-family:'Golos Text',sans-serif;font-weight:400;font-style:normal;font-size:clamp(16px,3vw,20px);color:var(--muted);letter-spacing:.02em;margin-top:10px}
.lead{margin:14px 0 24px;max-width:46ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

/* Fish photo box */
.fishbox{
  position:relative;aspect-ratio:3/2;border-radius:26px;
  overflow:hidden;box-shadow:var(--shadow);background:#0b1418;
}
.fishbox img{width:100%;height:100%;object-fit:cover;display:block}
.fishbox figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 18px 12px;font-size:12.5px;color:#cfe9ee;
  background:linear-gradient(transparent,rgba(7,20,24,.75));
}

/* Params grid */
.params{margin:8px 0 44px}
.params h2{font-family:'Unbounded',sans-serif;font-weight:600;font-size:24px;color:var(--navy);letter-spacing:-.02em;margin-bottom:18px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:760px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.grid{grid-template-columns:1fr}}
.pcell{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;transition:transform .18s,border-color .18s}
.pcell:hover{transform:translateY(-3px);border-color:#bfe6ec}
.pcell .k{font-size:13px;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:7px;margin-bottom:6px}
.pcell .v{font-size:17px;font-weight:600;color:var(--ink)}

/* Section h2 override for fish cards */
.params h2,.section h2{font-size:24px}

/* Compatibility columns */
.compat{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
@media(max-width:760px){.compat{grid-template-columns:1fr}}
.col{border-radius:14px;padding:18px;border:1px solid var(--line)}
.col.good{background:#e9f9f1;border-color:#bfe9d5}
.col.warn{background:#fdf6e6;border-color:#f0e0b4}
.col.bad{background:#fdecea;border-color:#f4cdc6}
.col h4{font-family:'Unbounded',sans-serif;font-weight:600;font-size:15px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.col.good h4{color:var(--ok)}
.col.warn h4{color:var(--warn)}
.col.bad h4{color:var(--bad)}
.col ul{list-style:none;font-size:14.5px;color:var(--ink-soft)}
.col li{padding:5px 0;border-bottom:1px dashed rgba(15,43,51,.08)}
.col li:last-child{border-bottom:none}

em{font-style:normal}