/* Members module styles.
   Moved from app.css and inline views to keep module-specific styles together. */

/* Division page hero, member cards and latest-news thumbnail.
   Used in: app/Modules/Members/Views/divisions/show.php */
.division-hero {
  min-height: 240px;
}

.division-hero-description {
  max-width: 52rem;
}

.division-member-avatar {
  width: 96px;
  height: 96px;
  font-size: 32px;
}

.division-article-thumb {
  width: 96px;
  flex: 0 0 96px;
  aspect-ratio: 1 / 1;
}

.division-article-thumb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Member profile image and placeholder used in member detail views.
   Used in: app/Modules/Members/Views/members/show.php */
.member-profile-image {
  width: 140px;
  height: 140px;
  object-fit: cover;
  cursor: zoom-in;
}

.member-profile-placeholder {
  width: 140px;
  height: 140px;
  background: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #6c757d;
}

/* Five equal columns on wide screens, fallback to 3/2/1 on smaller.
   Used in: app/Modules/Members/Views/divisions/show.php */
.col-5th {
  flex: 0 0 20%;
  max-width: 20%;
}

@media (max-width: 991.98px) {
  .col-5th {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
}

@media (max-width: 767.98px) {
  .col-5th {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 575.98px) {
  .col-5th {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Members profile: stack definition-list label above value on xs screens.
   .members-dl is added to the <dl class="row"> in members/show.php */
@media (max-width: 575.98px) {
  .members-dl dt,
  .members-dl dd {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .members-dl dd {
    margin-bottom: 0.5rem;
  }
}

/* Members index filter form: allow controls to wrap on narrow screens */
@media (max-width: 767.98px) {
  #members-filter-form {
    width: 100%;
  }
  #members-filter-form .form-select,
  #members-filter-form .form-control {
    flex: 1 1 130px;
  }
}

/* Desktop: constrain filter selects so form stays compact next to the heading */
@media (min-width: 768px) {
  #members-filter-form .form-select {
    max-width: 155px;
    min-width: 90px;
  }
  #members-filter-form .form-control[type="search"] {
    max-width: 180px;
  }
}