/* ═══════════════════════════════════════
   GROUP DETAIL PAGE — Osmo Aesthetic
   Extends groups-page.css base styles
   ═══════════════════════════════════════ */

/* ── Loading & Error States ── */
.gd-loading,
.gd-error {
  padding: 12em 2em 6em;
  max-width: 76em;
  margin: 0 auto;
  text-align: center;
}

.gd-loading__spinner {
  font-size: 1.25em;
  color: #0a0a0a80;
  font-weight: 300;
}

.gd-error__code {
  font-size: 8em;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #0a0a0a15;
  margin-bottom: 0.1em;
}

.gd-error__title {
  font-size: 2em;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 0.5em;
}

.gd-error__link {
  display: inline-block;
  margin-top: 1em;
  padding: 0.6em 1.5em;
  font-size: 0.9375em;
  font-weight: 500;
  color: #fff;
  background: #0a0a0a;
  border-radius: 100px;
  transition: background 0.2s;
}
.gd-error__link:hover {
  background: #333;
}

/* ── Back Link ── */
.gd-back {
  padding: 8em 2em 0;
  max-width: 76em;
  margin: 0 auto;
}

.gd-back__link {
  font-size: 0.875em;
  font-weight: 400;
  color: #0a0a0a80;
  transition: color 0.2s;
}
.gd-back__link:hover {
  color: #0a0a0a;
}

/* ── Hero Section ── */
.gd-hero {
  padding: 2em 2em 0;
  max-width: 76em;
  margin: 0 auto;
}

.gd-hero__badge {
  display: inline-block;
  font-size: 0.6875em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #0a0a0a60;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 100px;
  padding: 0.4em 1em;
  margin-bottom: 1.5em;
}

.gd-hero__name {
  font-size: 5em;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #0a0a0a;
  margin: 0 0 0.3em;
}

.gd-hero__meta {
  font-size: 1.125em;
  font-weight: 300;
  color: #0a0a0a80;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em;
}

.gd-hero__meta-sep {
  margin: 0 0.25em;
}

/* ── Actions ── */
.gd-actions {
  padding: 2em 2em 0;
  max-width: 76em;
  margin: 0 auto;
  display: flex;
  gap: 0.75em;
  flex-wrap: wrap;
}

.gd-btn {
  display: inline-block;
  padding: 0.65em 1.6em;
  font-size: 0.9375em;
  font-weight: 500;
  font-family: inherit;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.2s;
}
.gd-btn:hover {
  transform: translateY(-1px);
}

.gd-btn--primary {
  background: #0a0a0a;
  color: #fff;
}
.gd-btn--primary:hover {
  background: #333;
}

.gd-btn--secondary {
  background: transparent;
  color: #0a0a0a;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.gd-btn--secondary:hover {
  background: rgba(0, 0, 0, 0.03);
}

.gd-btn--usc {
  background: #73000a;
  color: #fff;
}
.gd-btn--usc:hover {
  background: #8a0010;
}

/* ── Cover Image ── */
.gd-cover {
  padding: 3em 2em 0;
  max-width: 76em;
  margin: 0 auto;
}

.gd-cover__img {
  width: 100%;
  max-height: 28em;
  object-fit: cover;
  border-radius: 0.75em;
}

/* ── Tabs ── */
.gd-tabs {
  padding: 3em 2em 0;
  max-width: 76em;
  margin: 0 auto;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  gap: 2.5em;
}

.gd-tab {
  padding-bottom: 1em;
  font-size: 0.9375em;
  font-weight: 400;
  color: #0a0a0a50;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  transition: color 0.2s;
}
.gd-tab:hover {
  color: #0a0a0a;
}
.gd-tab.is--active {
  color: #0a0a0a;
}
.gd-tab.is--active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #0a0a0a;
}

.gd-tab__count {
  font-size: 0.75em;
  font-weight: 500;
  background: #0a0a0a10;
  color: #0a0a0a80;
  padding: 0.15em 0.5em;
  border-radius: 100px;
  margin-left: 0.25em;
}

/* ── Tab Panels ── */
.gd-panel {
  display: none;
  padding: 3em 2em;
  max-width: 76em;
  margin: 0 auto;
}
.gd-panel.is--active {
  display: block;
}

/* ── Overview Panel ── */
.gd-description {
  font-size: 1.125em;
  font-weight: 300;
  line-height: 1.65;
  color: #0a0a0a;
  max-width: 48em;
}

.gd-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
  gap: 2em;
  margin-top: 3em;
  padding-top: 3em;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.gd-info-item__label {
  font-size: 0.75em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #0a0a0a50;
  margin-bottom: 0.5em;
}

.gd-info-item__value {
  font-size: 1.0625em;
  font-weight: 400;
  color: #0a0a0a;
}

/* ── Members Panel — Card Grid ── */
.gd-members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
  gap: 1.5em;
}

.gd-member-card {
  min-height: 20em;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 0.75em;
  padding: 2em 1.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6em;
  position: relative;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}
.gd-member-card:hover {
  box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.06);
  transform: translateY(-0.125em);
}
.gd-member-card--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.gd-member-card.is--pending {
  border-style: dashed;
  color: #0a0a0a60;
}
.gd-member-card.is--pending .gd-member__avatar {
  opacity: 0.5;
}
.gd-member-card.is--unpublished {
  cursor: default;
  color: #0a0a0a50;
}
.gd-member-card.is--unpublished .gd-member__avatar {
  filter: grayscale(1);
  opacity: 0.45;
}
.gd-member-card.is--unpublished .gd-member__name,
.gd-member-card.is--unpublished .gd-member__school,
.gd-member-card.is--unpublished .gd-member__dept,
.gd-member-card.is--unpublished .gd-member__joined,
.gd-member-card.is--unpublished .gd-member__badge {
  opacity: 0.5;
}

.gd-member__avatar {
  width: 4.5em;
  height: 4.5em;
  border-radius: 50%;
  background: #0a0a0a08;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  margin-top: 0.5em;
}
.gd-member__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gd-member__avatar-initial {
  font-size: 1.5em;
  font-weight: 500;
  color: #0a0a0a40;
  text-transform: uppercase;
}

.gd-member__name {
  font-size: 1.0625em;
  font-weight: 600;
  color: #0a0a0a;
  text-align: center;
  line-height: 1.3;
  max-width: 100%;
}

.gd-member__badge {
  display: inline-block;
  font-size: 0.75em;
  font-weight: 500;
  padding: 0.3em 0.75em;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.04);
  color: #0a0a0a80;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.gd-member__badge.is--admin {
  background: #73000a12;
  color: #73000a;
}
.gd-member__badge.is--pending {
  background: #fef3c7;
  color: #92400e;
}
.gd-member__badge.is--unpublished {
  background: #f3f4f6;
  color: #9ca3af;
  font-style: italic;
}

.gd-member__college-badge {
  display: inline-block;
  font-size: 0.6875em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.3em 0.75em;
  border: 1px solid currentColor;
  border-radius: 100px;
  opacity: 0.7;
}

.gd-member__college-badge--community {
  border-color: #0a0a0a;
  color: #0a0a0a;
}

.gd-member__school {
  font-size: 0.875em;
  font-weight: 500;
  color: #0a0a0a80;
  text-align: center;
  max-width: 100%;
  line-height: 1.3;
}

.gd-member__dept {
  font-size: 0.8125em;
  font-weight: 400;
  color: #0a0a0a60;
  text-align: center;
  max-width: 100%;
  line-height: 1.3;
}
.gd-member__joined {
  font-size: 0.8125em;
  font-weight: 400;
  color: #000000;
  margin-top: auto;
}

/* Admin controls on cards */
.gd-member__controls {
  display: flex;
  gap: 0.375em;
  margin-top: auto;
  width: 100%;
  justify-content: center;
}

.gd-member__role-select {
  font-size: 0.6875em;
  font-family: inherit;
  padding: 0.3em 0.5em;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.375em;
  background: #fff;
  color: #0a0a0a;
  cursor: pointer;
  max-width: 8em;
}
.gd-member__role-select:focus {
  outline: none;
  border-color: #0a0a0a;
}

.gd-member__remove-btn {
  font-size: 0.6875em;
  font-family: inherit;
  padding: 0.3em 0.5em;
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: 0.375em;
  background: none;
  color: #dc2626;
  cursor: pointer;
  transition: background 0.15s;
}
.gd-member__remove-btn:hover {
  background: #fee2e2;
}

.gd-members__empty {
  padding: 3em 0;
  text-align: center;
  color: #0a0a0a50;
  font-size: 1em;
}

/* ── Stacks Panel (empty state) ── */
.gd-stacks__empty {
  padding: 4em 0;
  text-align: center;
}

.gd-stacks__empty-icon {
  font-size: 3em;
  margin-bottom: 0.5em;
  opacity: 0.15;
}

.gd-stacks__empty-text {
  font-size: 1.125em;
  font-weight: 300;
  color: #0a0a0a60;
}

/* ── Members OSMO Slider ── */
.gd-members-slider__wrap {
  width: 100%;
}

.gd-members-slider__collection {
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
  position: relative;
}

.gd-members-slider__list {
  flex-flow: row;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}

.gd-members-slider__item {
  flex: none;
  margin-right: 1.5em;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.gd-members-slider__item .gd-member-card {
  height: 20em;
  width: 16em;
}

/* ── Group Card Slider ── */
.gd-group-slider {
  background: #fff;
  border: 2px solid #ddd;
  border-radius: 0.75rem;
  overflow: hidden;
  min-height: 20rem;
}

.gd-group-slider .os-wrap {
  padding: 2rem 0 3rem;
}

.gd-group-slider .os-title {
  color: #0a0a0a;
}

.gd-group-slider .os-count {
  color: #0a0a0a60;
}

.gd-group-slider .os-nav-btn {
  background: #0a0a0a;
  color: #fff;
}

.gd-group-slider .os-nav-btn:disabled {
  opacity: 0.3;
}

.gd-group-slider .os-empty {
  color: #0a0a0a60;
}

.gd-group-slider .os-loading {
  color: #0a0a0a60;
}

/* ── Join Confirmation Banner ── */
.gd-join-success {
  background: #dcfce7;
  border: 1px solid #bbf7d0;
  border-radius: 0.5rem;
  padding: 1rem 1.5rem;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #166534;
}

/* ═══ RESPONSIVE ═══ */

@media screen and (max-width: 991px) {
  .gd-hero__name {
    font-size: 3em;
  }

  .gd-cover__img {
    max-height: 20em;
  }

  .gd-members-grid {
    grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
    gap: 1em;
  }
}

@media screen and (max-width: 767px) {
  .gd-back {
    padding: 7em 1em 0;
  }

  .gd-hero {
    padding: 1.5em 1em 0;
  }

  .gd-hero__name {
    font-size: 2.25em;
  }

  .gd-actions {
    padding: 1.5em 1em 0;
  }

  .gd-cover {
    padding: 2em 1em 0;
  }

  .gd-tabs {
    padding: 2em 1em 0;
    gap: 1.5em;
    overflow-x: auto;
  }

  .gd-panel {
    padding: 2em 1em;
  }

  .gd-info-grid {
    grid-template-columns: 1fr 1fr;
  }

  .gd-members-grid {
    grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
    gap: 0.75em;
  }

  .gd-member-card {
    min-height: 16em;
    padding: 1.25em 1em;
  }

  .gd-member__avatar {
    width: 3.5em;
    height: 3.5em;
  }

  .gd-member__controls {
    flex-direction: column;
    gap: 0.25em;
  }
}