@charset "UTF-8";
/* =============================================================
   layout/species.css — หน้ารวมชนิดปลา /species (pages/species_list.php)
   โหลดเฉพาะหน้านี้ผ่าน layout_start(['styles' => ['layout/species.css']])

   หน้าตาตามการ์ดปลาบนหน้าแรก: รูปบน · วงกลมไอคอนปลาซ้อนขอบล่างของรูป · ชื่อ · ชื่อวิทยาศาสตร์ตัวเอียง · ป้ายค่าน้ำ
   แต่ใช้ตัวแปร --lt-* ล้วน ไม่พึ่งตัวแปรชุด --p-* ที่มีเฉพาะบนหน้าแรก (layout/home.css)
   โหมดมืดจึงสลับตามทั้งเว็บเอง ไม่ต้องเขียน prefers-color-scheme ในไฟล์นี้
   mobile-first: จอ 360px เป็นคอลัมน์เดียว แล้วเพิ่มคอลัมน์เองตามความกว้าง (auto-fill)
   ============================================================= */

/* ── กริดการ์ด ──────────────────────────────────────────────
   auto-fill ใช้ได้ทั้งหน้าสาธารณะแบบกว้าง (1140px) และหน้าในระบบที่เมนูข้างกินที่ไป 232–256px */
.lt-spgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

/* ── การ์ด ─────────────────────────────────────────────────
   ซ้อนบนการ์ดกลาง (พื้น ขอบ มุม เงา) แล้วยก padding ออกให้รูปชนขอบการ์ด */
.lt-spcard {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
/* ระยะห่างมาจาก gap ของกริด — ล้าง margin-top 12px ของการ์ดที่ต่อกัน ไม่งั้นแถวแรกเหลื่อมกัน */
.lt-spcard + .lt-spcard { margin-top: 0; }

/* กล่องรูป 3:2 — รูปจริง 1200×800 และภาพวาดแทน 600×400 เป็น 3:2 ทั้งคู่
   object-fit: cover กันรูปที่ส่งมาผิดสัดส่วนไม่ให้บีบหรือมีขอบว่าง */
.lt-spcard__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--lt-surface-2);
}
.lt-spcard__media img,
.lt-spcard__media svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* วงกลมไอคอนปลาซ้อนขอบล่างซ้ายของรูป (docs/SPECIES-IMAGES.md บอกเจ้าของให้เว้นมุมนี้ไว้) */
.lt-spcard__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 16px;
  border: 4px solid var(--lt-surface);
  border-radius: 50%;
  background: var(--lt-surface);
  color: var(--lt-primary);
  box-shadow: var(--lt-shadow);
}
.lt-spcard__icon svg { width: 24px; height: 24px; }

.lt-spcard__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  padding: 6px 16px 16px;
}
/* ระยะในการ์ดมาจาก gap ล้วน ล้าง margin ประจำตัวของ h2/p */
.lt-spcard__body > * { margin: 0; }

.lt-spcard__name {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.45;            /* หัวเรื่องไทยต่ำกว่านี้วรรณยุกต์ชนบรรทัดบน */
  overflow-wrap: anywhere;
}

/* ชื่อภาษาอีกฝั่ง */
.lt-spcard__sub {
  color: var(--lt-muted);
  font-size: .9375rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.lt-spcard__sci {
  color: var(--lt-muted);
  font-size: .8125rem;
  font-style: italic;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.lt-spcard__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 2px;
}

/* ป้ายหายาก — จุดและขอบสีส้มอุ่นแบบเดียวกับป้ายเตือน ตัวอักษรยังเป็น ink ตามฐานของป้าย */
.lt-pill--rare::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lt-pill-color, var(--lt-custom));
}
.lt-pill--rare { --lt-pill-color: var(--lt-warn); border-color: var(--lt-warn); }

/* หมายเหตุชื่อการค้าและ cf. — ต้องอ่านออกบนการ์ด จึงใช้สี ink ไม่ใช่ muted แล้วแยกด้วยเส้นซ้าย */
.lt-spcard__taxon {
  padding: 2px 0 2px 10px;
  border-inline-start: 3px solid var(--lt-warn);
  color: var(--lt-ink);
  font-size: .8125rem;
  line-height: 1.6;
}

/* บันทึกสั้นตัดสามบรรทัด — padding-block: 2px กัน overflow ของ line-clamp ตัดวรรณยุกต์บรรทัดแรก */
.lt-spcard__note {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  padding-block: 2px;
  color: var(--lt-muted);
  font-size: .875rem;
  line-height: 1.7;
}

/* ตัวเลขจำนวนปลาในชิปกลุ่ม (ตัวชิปอยู่ใน app-theme.css เพราะหน้าอื่นใช้ด้วย) */
.lt-chip__count {
  display: inline-block;
  min-width: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--lt-surface-2);
  color: var(--lt-ink);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.lt-chip.is-active .lt-chip__count,
.lt-chip[aria-current="page"] .lt-chip__count { background: var(--lt-surface); }

@media (min-width: 768px) {
  .lt-spgrid { gap: 18px; }
}