/*
Client Custom CSS
*/

/* ===== 基本カード ===== */
.card-container{
  display:grid;
  gap:20px;
  justify-content:center;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.card{
  border:1px solid #ccc;border-radius:12px;overflow:hidden;
  box-shadow:0 4px 6px rgba(0,0,0,0.1);background:#fff;transition:.3s;
  display:flex;flex-direction:column;
}
.card-img{
  width:100%;
  /* 画像サイズ統一：高さ指定はやめ、aspect-ratioに一本化 */
  aspect-ratio:4/3;
  object-fit:cover;object-position:center;display:block;
}
.card-body{padding:15px;flex-grow:1;}
.card-title{font-size:18px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;flex-wrap:wrap;gap:6px;}
.card-subtitle{font-size:16px;color:#333;margin-bottom:6px;}
.card-result{font-size:15px;font-weight:700;margin-top:4px;}
.card-note{font-size:14px;color:#555;margin-top:10px;}
.card-comment{font-size:14px;color:#333;margin-top:4px;}

/* ===== バッジ ===== */
.badge{color:#fff;font-size:12px;padding:3px 8px;border-radius:12px;}
a.badge{display:inline-block;text-decoration:none;color:#fff;}
a.badge:visited{color:#fff;}
a.badge:hover{filter:brightness(.95);}
a.badge:focus-visible{outline:2px solid rgba(0,0,0,.2);outline-offset:2px;border-radius:14px;}

/* ===== 学校カラー変数 ===== */
:root{
  --pink:#dfaeb3; --green:#69b7a1; --yellow:#e9b61d; --blue:#76a7d0;
}

/* ===== 強調カード 4種 ===== */
.card--kanto-entry{border:2px solid var(--pink);background:#f9eaea}
.card--kanto-entry .badge{background:var(--pink)}
.card--kanto-entry .card-result{color:#a03845}

.card--kanto-result{border:2px solid var(--green);background:#eef8f5}
.card--kanto-result .badge{background:var(--green)}
.card--kanto-result .card-result{color:#2b6b5e}

.card--nationals-entry{border:2px solid var(--yellow);background:#fff8da}
.card--nationals-entry .badge{background:var(--yellow);color:#333}
.card--nationals-entry .card-result{color:#7a6a00}

.card--nationals-result{border:2px solid var(--blue);background:#eef5fb}
.card--nationals-result .badge{background:var(--blue)}
.card--nationals-result .card-result{color:#1e5a86}

/* ===== PC向けhover ===== */
.card:hover{transform:translateY(-2px);box-shadow:0 8px 14px rgba(0,0,0,.12);}

/* ===== レスポンシブ ===== */
@media (max-width:768px){.card-img{aspect-ratio:4/3;}}
@media (max-width:480px){
  .card-container{grid-template-columns:1fr;}
}