/* ─────────────────────────────────────────
   UTILITY: CONTAINER
───────────────────────────────────────── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 34px;
}

/* ─────────────────────────────────────────
   UTILITY: NAV ARROWS (shared by sections)
───────────────────────────────────────── */
.nav-arrows {
  display: flex;
  gap: 28px;
  stroke: var(--black);
}
.nav-arrows:hover { stroke: var(--purple); }

.nav-arrows__btn {
  width: auto;
  height: 10px;
  border: none;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav-arrows__btn {
  border: none;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav-arrows__img {
  width: auto;
  height: 17px;
  border: none;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav-arrow__right {
  stroke: var(--black);
}
.nav-arrow__right:hover { stroke: var(--purple); }

/* ─────────────────────────────────────────
   UTILITY: ICONS
───────────────────────────────────────── */

.icon {
    background: none;
    border: none;
}
.icon-btn {
  background: none;
  border: none;
  stroke: #202020; 
  stroke-width: 2px;
  /* width: 40px;
  height: 40px; */
  position: relative;
  display: flex;
}
.icon-btn:hover { stroke: var(--purple); }
/* ─────────────────────────────────────────
   UTILITY: TABS
───────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.tabs__btn {
  padding: 8px 18px;
  border-radius: 24px;
  border: 1px solid var(--gray-border);
  background: #fff;
  color: var(--gray-dark);
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.tabs__btn--active {
  background: var(--black);
  color: #fff;
  border-color: transparent;
  font-weight: 500;
}
.tabs__btn:hover:not(.tabs__btn--active) { border: 1px solid var(--purple); }

/* ─────────────────────────────────────────
   UTILITY: BADGE
───────────────────────────────────────── */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 400;
  padding: 4px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.badge--purple { background: var(--purple); color: #fff; }
.badge--pink   { background: #F33456;       color: #fff; }
.badge--gray   { background: #e5e7eb;       color: var(--gray-dark); }
.badge--black   { background: var(--black);       color: var(--white); }

/* ─────────────────────────────────────────
   UTILITY: SECTION HEADING ROW
───────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.section-header__title {
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
}
.section-header__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: var(--gray-dark);
}
.section-header__link:hover { text-decoration: underline; }

/* ─────────────────────────────────────────
   UTILITY: PHOTO PLACEHOLDER
───────────────────────────────────────── */
.photo-placeholder {
  background: #e5e7eb;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 11px;
}