/* Keep the gallery compact on phones while preserving every approved image. */
.profile-mobile-title {
  display: none;
}

@media (max-width: 679px) {
  .profile-mobile-title {
    display: block;
    margin: 12px 0 19px;
  }

  .profile-mobile-title h1 {
    margin: 8px 0 5px;
    font-size: clamp(2.25rem, 11vw, 3.1rem);
    line-height: 1.06;
  }

  .profile-mobile-title .latin {
    font-size: 1rem;
  }

  .profile-copy > .card-kicker,
  .profile-copy > h1,
  .profile-copy > .latin {
    display: none;
  }

  .profile-gallery {
    display: flex;
    flex-direction: column;
    gap: 9px;
  }

  .profile-gallery .main-photo {
    order: -1;
    width: 100%;
    aspect-ratio: 3 / 2;
  }

  .profile-gallery .thumbs {
    width: 100%;
    max-height: none;
    flex-direction: row;
    gap: 8px;
    padding: 0 0 3px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .profile-gallery .thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
  }

  .profile-copy {
    padding-top: 6px;
  }
}

/* A quiet fact line keeps profile information distinct from actions. */
body[data-page="species"] .fact-pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 20px 0;
  border-block: 1px solid #dce8e4;
}
body[data-page="species"] .fact-pill {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  min-height: 64px;
  padding: 10px 15px;
  border: 0;
  border-right: 1px solid #dce8e4;
  border-radius: 0;
  background: transparent;
  color: #285149;
  font-size: .78rem;
  line-height: 1.4;
}
body[data-page="species"] .fact-pill:first-child { padding-left: 0; }
body[data-page="species"] .fact-pill:last-child { border-right: 0; }
body[data-page="species"] .fact-pill small { color: #657c75; font-size: .67rem; font-weight: 600; }
body[data-page="species"] .fact-pill strong { overflow-wrap: anywhere; color: #183e38; font-size: .86rem; line-height: 1.3; }
body[data-page="species"] .profile-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
body[data-page="species"] .profile-actions > .btn,
body[data-page="species"] .profile-planning-actions > .btn {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 14px;
  text-align: center;
}
body[data-page="species"] .profile-actions > [data-add-tank-current] { grid-column: 1 / -1; }

body[data-page="species"] .profile-suitability-section { padding: 24px 0 42px; scroll-margin-top: calc(var(--header) + 18px); }
body[data-page="species"] .profile-suitability-section[hidden] { display: none; }
body[data-page="species"] .profile-suitability[data-suitability-mode="exploring"],
body[data-page="species"] .profile-suitability[data-suitability-mode="planning"] {
  border-color: #d2e4df;
  background: #f5faf8;
  box-shadow: none;
}
body[data-page="species"] .profile-planning-intro { padding: clamp(20px, 3vw, 30px); }
body[data-page="species"] .profile-planning-intro h2 {
  margin: 8px 0 9px;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.2;
}
body[data-page="species"] .profile-planning-intro p { max-width: 780px; margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.6; }
body[data-page="species"] .profile-planning-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  max-width: 500px;
  margin-top: 18px;
}

/* One scrollable topic row is easier to scan than a wall of eleven buttons. */
body[data-page="species"] .filter-bar { position: relative; top: auto; padding: 15px 0 8px; }
body[data-page="species"] .profile-nav-heading { display: flex; align-items: baseline; gap: 12px; margin-bottom: 11px; }
body[data-page="species"] .profile-nav-heading strong { font-size: .88rem; }
body[data-page="species"] .profile-nav-heading span { color: var(--muted); font-size: .73rem; }
body[data-page="species"] .profile-nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 8px;
  border-bottom: 1px solid #dce8e4;
  scrollbar-width: thin;
  scrollbar-color: #a7c9bf transparent;
  scroll-snap-type: x proximity;
}
body[data-page="species"] .profile-nav button {
  flex: 0 0 132px;
  width: 132px;
  min-width: 132px;
  height: 46px;
  min-height: 46px;
  display: grid;
  place-items: center;
  padding: 5px 8px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: #34534d;
  font-size: .75rem;
  line-height: 1.22;
  text-align: center;
  scroll-snap-align: start;
}
body[data-page="species"] .profile-nav button:hover { background: #f0f7f4; }
body[data-page="species"] .profile-nav button.active,
body[data-page="species"] .profile-nav button[aria-selected="true"] { border-bottom-color: #168976; background: #eaf5f0; color: #194c42; }
body[data-page="species"] .profile-nav button:focus-visible { outline: 3px solid var(--aqua); outline-offset: 2px; }

/* A three-value water strip must not leave an empty fourth grid cell. */
body[data-page="species"] [data-care-panel="water"] .care-visitor-facts[data-fact-count="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-page="species"] .family-first-pet {
  display: grid;
  grid-template-columns: minmax(155px, .42fr) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin: 17px 0;
  padding: 18px;
  border: 1px solid #bcd9d1;
  border-radius: 15px;
  background: #eef8f4;
}
body[data-page="species"] .family-first-pet strong { display: block; margin-top: 7px; color: #1d5146; font-size: .95rem; }
body[data-page="species"] .family-first-pet p { margin: 0; color: #365951; font-size: .78rem; line-height: 1.56; }

body[data-page="species"] .sticky-mobile-cta .btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding-inline: 9px; }

/* Give the range and food context the full width between the two paired rows. */
.has-care-presentation[data-active-care="naturalHistory"] .care-wild-facts-card { grid-row: 2; }
.has-care-presentation[data-active-care="naturalHistory"] .care-at-glance { grid-row: 3; }
.has-care-presentation[data-active-care="naturalHistory"] .care-visitor-copy {
  grid-column: 1 / -1;
  grid-row: 4;
  display: grid;
  gap: 12px;
  max-width: none;
  margin: 0;
  padding: 18px 0;
  border-block: 1px solid #dce8e4;
}
.has-care-presentation[data-active-care="naturalHistory"] .care-wild-translation { grid-row: 5; }
.has-care-presentation[data-active-care="naturalHistory"] [data-profile-range-map] { grid-row: 6; }

@media (min-width: 900px) {
  .has-care-presentation[data-active-care="naturalHistory"] .care-wild-facts-card,
  .has-care-presentation[data-active-care="naturalHistory"] .care-at-glance { grid-row: 2; }
  .has-care-presentation[data-active-care="naturalHistory"] .care-visitor-copy {
    grid-row: 3;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  .has-care-presentation[data-active-care="naturalHistory"] .care-wild-translation,
  .has-care-presentation[data-active-care="naturalHistory"] [data-profile-range-map] { grid-row: 4; }
}
@media (max-width: 679px) {
  body[data-page="species"] .profile-nav-heading { display: grid; gap: 2px; }
  body[data-page="species"] .family-first-pet { grid-template-columns: 1fr; gap: 9px; }
  body[data-page="species"] [data-care-panel="water"] .care-visitor-facts[data-fact-count="3"] .fact-cell { padding: 12px; }
}
@media (max-width: 359px) {
  body[data-page="species"] .fact-pill { padding-inline: 8px; }
  body[data-page="species"] .fact-pill strong { font-size: .76rem; }
  body[data-page="species"] [data-care-panel="water"] .care-visitor-facts[data-fact-count="3"] .fact-cell { padding: 10px 7px; }
  body[data-page="species"] [data-care-panel="water"] .care-visitor-facts[data-fact-count="3"] .fact-cell strong { font-size: .72rem; }
}