/* =========================================================
   PINAKA — shared sub-page template
   (facilities / course / contact / members / OTP)
   ========================================================= */

/* smaller hero on sub-pages than the homepage */
.content-page .hero-image{ padding: 2.4rem 2rem 0.4rem; }
.content-page .hero-image img{ max-height: 16vh; }
.content-page .hero-title-h1{ font-size: clamp(1.7rem, 3vw, 2.3rem); }
.content-page .hero-action{ padding: 0 2rem 2.2rem; }

/* ---------- roster / member cards (members.html) ---------- */
.card-container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.4rem;
  padding: 0;
}
.card-fs-container{ display: grid; }

.card{
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: 0;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease;
}
.card:hover{ transform: translateY(-4px); border-color: var(--gold); }
.card img{ width: 100%; height: auto; display: block; }

.card-content{ padding: 1.1rem 1.2rem; }
.card-content h3{ font-size: 1.05rem; color: var(--gold-bright); margin-bottom: 0.4rem; }
.card-content p{ font-size: 0.88rem; color: var(--slate); margin-bottom: 0.3rem; }
.card-content ul{ padding-left: 1.1rem; }
.card-content li{ font-size: 0.84rem; color: var(--slate); margin-bottom: 0.3rem; }

.card-fs{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
}
.card-fs img{
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  object-position: top;
  margin: 0;
  grid-column: 1;
  grid-row: 1 / span 2;
}
.card-fs .hr, .card-fs .hr-bottom{ display: none; }
.card-fs .details1{ padding: 1.2rem; grid-column: 2; }
.card-fs .details2{ padding: 1.2rem; grid-column: 3; display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; }
.card-fs ul{ list-style: disc inside; color: var(--slate); line-height: 1.6rem; }
.card-fs button{
  font-family: var(--sans);
  background: var(--crimson);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  font-weight: 600;
  transition: all .2s ease;
}
.card-fs button:hover{ background: var(--crimson-bright); }

@media (max-width: 768px){
  .card-fs{ grid-template-columns: 1fr; }
  .card-fs img{ grid-column: 1; grid-row: 1; height: 180px; }
  .card-fs .details1, .card-fs .details2{ grid-column: 1; }
}