/**
 * @file
 * Shared hero collapse toggle.
 *
 * Generic chevron button + collapsed state used by groups-landing,
 * groups-network, and crm-contacts hero sections.
 */

/* Container must be position:relative so the button can be positioned */
.hero-toggle {
  position: relative;
}

/* 32x32 semi-transparent button, top-right corner */
.hero-toggle__button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
  z-index: 1;
}

.hero-toggle__button:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Chevron icon: two bars forming a "^" (points up = expanded) */
.hero-toggle__icon {
  width: 12px;
  height: 12px;
  position: relative;
  transform: rotate(0deg);
  transition: transform 0.25s ease;
}

.hero-toggle__icon::before,
.hero-toggle__icon::after {
  content: '';
  position: absolute;
  top: 5px;
  width: 8px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
}

.hero-toggle__icon::before {
  left: 0;
  transform: rotate(-40deg);
  transform-origin: left center;
}

.hero-toggle__icon::after {
  right: 0;
  transform: rotate(40deg);
  transform-origin: right center;
}

/* Collapsed: rotate chevron 180deg so it points down */
.hero-toggle--collapsed .hero-toggle__icon {
  transform: rotate(180deg);
}

/* Hide everything after the first child (the title) in the content wrapper */
.hero-toggle--collapsed .hero-toggle__content > *:first-child ~ * {
  display: none;
}