/* =============================================
   Tank Logic — Fish Guide CSS
   Species profile cards used in stocking guides
   ============================================= */

/* ==================== FISH PROFILE CARD ==================== */
.fish-profile-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  margin-block: 24px;
  transition: border-color 0.2s;
}
.fish-profile-card:hover { border-color: rgba(0,200,160,0.3); }

.fish-profile-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.fish-emoji {
  font-size: 2.2rem;
  line-height: 1;
  flex-shrink: 0;
}

.fish-profile-name {
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--tx-hi);
  font-style: italic;
  margin-bottom: 3px;
}

.fish-profile-common {
  font-size: 0.8rem;
  color: var(--tx-lo);
  font-weight: 500;
}

/* ==================== FISH STATS GRID ==================== */
.fish-profile-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.fish-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--bg-2);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}

.fish-stat-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tx);
  font-family: var(--font);
}

.fish-stat-val {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--tx-hi);
  font-family: var(--font);
}

/* Difficulty colour coding */
.fish-stat-easy   { color: var(--accent); }
.fish-stat-medium { color: var(--gold); }
.fish-stat-hard   { color: #ff7070; }

/* ==================== RESPONSIVE ==================== */
@media (min-width: 480px) {
  .fish-profile-stats { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 700px) {
  .fish-profile-stats { grid-template-columns: repeat(6, 1fr); }
}