/* =========================================================
   animals-list.css （「水族館の生き物たち」一覧ページ専用）
   - 画像を左に回り込ませ、右側に長文キャプションを流す
   - セクション間で回り込みが漏れないよう BFC(flow-root) で制御
   - モバイルでは自動で縦積みに
   ========================================================= */

/* ---- フォールバック変数（base/animals.css 未読時でも崩れないように） ---- */
:root{
  --radius: 16px;
  --shadow: 0 12px 40px rgba(2,33,73,.08);
  --c-border: #e2e8f0;
  --c-fg: #0f172a;
  --c-muted: #475569;
  --c-primary: #0b63c5;
  --blue-accent: #98c7ff;
}

/* ---- 一覧カードの共通余白（他ページに影響させない） ---- */
.species-card{
  margin: 20px 0;
  clear: both;                /* 前セクションの float を遮断（保険） */
}

/* ---- 画像回り込み本文ブロック ---- */
/* flow-root でブロック内に BFC を作り、回り込みを完結させる */
.species-card .species-excerpt{
  display: flow-root;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--c-fg);
}

/* flow-root 非対応ブラウザ用フォールバック */
@supports not (display: flow-root){
  .species-card .species-excerpt::after{
    content:"";
    display:block;
    clear:both;
  }
}

/* ---- 左に回り込む画像 ---- */
.species-card .species-excerpt figure{
  float: left;
  width: min(48%, 520px);     /* 右側に説明文をしっかり確保 */
  margin: 4px 18px 12px 0;    /* 右と下に余白 */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
  shape-outside: inset(0 round 12px); /* 角丸の回り込み（対応ブラウザ） */
}
.species-card .species-excerpt a{ display:block; }
.species-card .species-excerpt img{
  display:block;
  width:100%;
  height:auto;
}

/* ---- 段落と補助要素 ---- */
.species-card .species-excerpt p{ margin: 0 0 .7rem; }
.species-card .species-excerpt p:last-child{ margin-bottom:0; }
.species-card .species-excerpt em,
.species-card .species-excerpt b,
.species-card .species-excerpt strong{ color: inherit; }

/* ---- 「詳しく見る」リンク行 ---- */
.species-card .species-actions{ margin-top: 10px; }
.species-card .species-actions a{
  font-weight: 600;
  color: var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.species-card .species-actions a:hover{ filter: brightness(1.06); }
.species-card .species-actions a:focus-visible{
  outline: 3px solid var(--blue-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---- セクション見出し（帯は animals.css に準拠。細かな調整のみ） ---- */
.species-card > h2{
  /* animals.css の .section-card h2 をそのまま使う。追加の調整が必要ならここに記述 */
}

/* ---- レスポンシブ：モバイルは縦積みへ ---- */
@media (max-width: 900px){
  .species-card .species-excerpt figure{
    float: none;
    width: 100%;
    margin: 0 0 10px 0;
    shape-outside: auto;
  }
  .species-card .species-excerpt{
    display:block; /* flow-root でも問題ないが明示 */
  }
}

/* ---- 細部の調整（間延び防止・文字の読みやすさ） ---- */
.species-card .species-excerpt{
  /* 文章の行が極端に長くなりすぎないよう最大幅を軽く制限（画像幅が小さい時の保険） */
  /* 必要なければコメントアウト可 */
  /* max-width: 100ch; */
}

/* ===== animals-list.css: このページ専用のヒーローはみ出し対策 ===== */

/* 固定高さをやめて可変（最低 92px は維持） */
.page-hero.is-compact{
  height: auto !important;
  min-height: 92px !important;
  background: var(--hero-grad);
}

/* 絶対配置＆nowrapを解除して、内容に合わせて伸びるように */
.page-hero-caption{
  position: static !important;   /* absolute を無効化 */
  inset: auto !important;
  white-space: normal !important;/* 折り返し許可 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px 12px;
  text-align: center;
  color: #fff;
}

/* PC：サブは1行に収め、長い場合は「…」省略 */
@media (min-width: 721px){
  .page-hero-caption{ flex-wrap: nowrap; }
  .page-hero-caption .hero-sub{
    max-width: 56ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* スマホ：サブを次の行へ回して全文表示 */
@media (max-width: 720px){
  .page-hero-caption{ flex-wrap: wrap; }
  .page-hero-caption .hero-sub{
    flex-basis: 100%;
    max-width: none;
    white-space: normal !important;
    margin-top: 2px;
  }
}