/* =====================================================================
   THERALETIK STEGLITZ — team.css
   Section khusus halaman Team: team-grid, values (orbit bento),
   gallery-carousel, career. Butuh globals.css + utilities.css.
   Token + rem/clamp only (no px, no hex).
   ===================================================================== */

/* ============================ TEAM GRID ============================ */
.team_sec { background: var(--light-100); padding-block: var(--sp-sect); }
.team_wrap { display: flex; flex-direction: column; gap: var(--sp-8); }
.team_head { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 35.25rem; }
.team_eyebrow { font-weight: 500; color: var(--brand-o60); }
.team_title { color: var(--brand-500); }
.team_title_accent { color: var(--brand-200); }
.team_lead { max-width: 35.25rem; font-weight: 500; color: var(--brand-o60); }

.team_grid { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.team_card {
  position: relative;
  width: 27.5625rem; max-width: 100%;      /* 441 */
  height: 32.4375rem;                       /* 519 */
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--sp-3);
  border-radius: .625rem;
  overflow: hidden;
}
.team_card_img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.team_card_bar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--brand-500);
  border-radius: .625rem;
}
.team_card_info { display: flex; flex-direction: column; gap: var(--sp-1); }
.team_card_name { font-weight: 500; color: var(--light-100); }
.team_card_role { font-weight: 500; color: var(--white-o60); }
.team_card_arrow {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  background: var(--white-o10);
  border-radius: var(--r-100);
}
.team_card_arrow img { width: 1.25rem; height: 1.25rem; filter: invert(1) brightness(2); }

/* ============================ VALUES (orbit bento) ============================ */
.val_sec { background: var(--light-100); padding-block: var(--sp-sect); }
.val_wrap { display: flex; flex-direction: column; gap: var(--sp-8); }
.val_head { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); max-width: 56.8125rem; margin-inline: auto; text-align: center; }
.val_eyebrow { font-weight: 500; color: var(--brand-o60); }
.val_title { color: var(--brand-500); }
.val_lead { font-weight: 500; color: var(--brand-o60); }

.val_media { display: flex; gap: var(--sp-3); align-items: stretch; }
.val_orbit {
  position: relative; flex: 0 0 40.9375rem; width: 40.9375rem; height: 40.9375rem;   /* 655 */
  background: var(--brand-500);
  border: var(--bw) solid var(--brand-o10);
  border-radius: .625rem;
  overflow: hidden;
}
.val_ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.val_ring.is-outer { width: 37.5rem; }   /* 600 */
.val_ring.is-inner { width: 27.5rem; }    /* 440 */
.val_orb { position: absolute; border-radius: var(--r-100); overflow: hidden; }
.val_orb.is-lg { width: 4.6875rem; height: 4.6875rem; }   /* 75 */
.val_orb.is-sm { width: 3.5625rem; height: 3.5625rem; }   /* 57 */
.val_orb img { width: 100%; height: 100%; object-fit: cover; }
.val_orbit_text {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 18.5625rem;                        /* 297 */
  display: flex; flex-direction: column; gap: var(--sp-3); text-align: center;
}
.val_orbit_title { color: var(--light-100); }
.val_orbit_desc { font-weight: 500; color: var(--white-o60); }

.val_col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.val_panel {
  position: relative; flex: 1;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--brand-400);
  border: var(--bw) solid var(--brand-o10);
  border-radius: .625rem;
  overflow: hidden;
}
.val_panel_list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--sp-4); max-width: 24.8125rem; }
.val_item { display: flex; flex-direction: column; gap: var(--sp-1); }
.val_item_title { color: var(--brand-500); }
.val_item_text { font-weight: 500; color: var(--brand-o60); }
.val_panel_deco { position: absolute; right: -1.5rem; top: 50%; transform: translateY(-50%); width: 24.125rem; opacity: .6; pointer-events: none; }

.val_contact { position: relative; flex: 1; min-height: 11rem; border-radius: .625rem; overflow: hidden; background: var(--light-900); display: flex; isolation: isolate; }
.val_contact_img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.val_contact_scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, transparent 40%, var(--black-o55)); }
.val_contact_body { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); width: 100%; padding: var(--sp-4); }
.val_contact_text { display: flex; flex-direction: column; gap: var(--sp-1); }
.val_contact_title { color: var(--light-100); }
.val_contact_desc { max-width: 23rem; font-weight: 500; color: var(--white-o60); }
.val_contact_btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  padding: var(--sp-3) var(--sp-4);
  font-weight: 500; color: var(--brand-500);
  background: var(--brand-400);
  border-radius: var(--r-100);
  white-space: nowrap;
  transition: transform .2s ease, filter .2s ease;
}
.val_contact_btn:hover { filter: brightness(1.06); transform: translateY(-.125rem); }
.val_contact_btn:focus-visible { outline: var(--bw2) solid var(--brand-400); outline-offset: .25rem; }

/* ============================ GALLERY (carousel) ============================ */
.gal_sec { background: var(--light-100); padding-block: var(--sp-sect); display: flex; flex-direction: column; gap: var(--sp-8); overflow: hidden; }
.gal_head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-7); }
.gal_info { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 41.5rem; }
.gal_eyebrow { font-weight: 500; color: var(--brand-o60); }
.gal_title { color: var(--brand-500); }
.gal_lead { max-width: 20.3125rem; font-weight: 500; color: var(--brand-o60); }

.gal_track {
  display: flex; gap: var(--sp-3);
  padding-inline: var(--band-gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--band-gutter);
  scrollbar-width: none;
}
.gal_track::-webkit-scrollbar { display: none; }
.gal_card { flex: 0 0 27.5rem; max-width: 85vw; height: 32.25rem; border-radius: .625rem; overflow: hidden; scroll-snap-align: start; background: var(--light-1000); }
.gal_img { width: 100%; height: 100%; object-fit: cover; }

.gal_nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.gal_progress { display: flex; align-items: center; gap: var(--sp-1); }
.gal_progress_seg { width: .625rem; height: .625rem; border-radius: var(--r-100); background: var(--brand-o20); transition: width .3s ease, background .3s ease; }
.gal_progress_seg.is-on { width: 2.8125rem; background: var(--brand-500); }
.gal_arrows { display: flex; gap: var(--sp-3); }
.gal_arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  background: var(--brand-500);
  border-radius: var(--r-100);
  transition: transform .2s ease, filter .2s ease;
}
.gal_arrow img { width: .875rem; height: .875rem; filter: invert(1) brightness(2); }
.gal_arrow:hover { filter: brightness(1.2); transform: translateY(-.125rem); }
.gal_arrow:focus-visible { outline: var(--bw2) solid var(--brand-500); outline-offset: .125rem; }

/* ============================ CAREER ============================ */
.car_sec { background: var(--light-100); padding-top: var(--sp-sect); padding-bottom: var(--sp-sect-lg); }
.car_card {
  position: relative;
  display: flex; align-items: stretch;
  min-height: 28.5rem;                      /* 456 */
  border: var(--bw) solid var(--brand-o10);
  border-radius: var(--r-large);
  overflow: hidden;
  background: linear-gradient(90deg, var(--light-900), var(--light-100));
}
.car_text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sp-5); padding: var(--sp-7); max-width: 36rem; }
.car_eyebrow { font-weight: 500; color: var(--brand-o60); }
.car_title { color: var(--brand-500); max-width: 32.375rem; }
.car_lead { max-width: 28rem; font-weight: 500; color: var(--brand-o60); }
.car_btn {
  align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--sp-3) var(--sp-4);
  font-weight: 500; color: var(--light-100);
  background: var(--brand-500);
  border-radius: var(--r-100);
  transition: transform .2s ease, filter .2s ease;
}
.car_btn:hover { filter: brightness(1.2); transform: translateY(-.125rem); }
.car_btn:focus-visible { outline: var(--bw2) solid var(--brand-500); outline-offset: .25rem; }

.car_faces { flex: 0 0 auto; display: flex; }
.car_face { position: relative; width: 11.625rem; height: 28.5rem; overflow: hidden; border-left: var(--bw2) solid var(--light-100); }
.car_face_img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.car_face_scrim { position: absolute; inset: 0; background: linear-gradient(to top, var(--black-o55), transparent 45%); }
.car_face.is-1 .car_face_scrim { background: linear-gradient(to top, var(--black-o55), transparent 45%), linear-gradient(to top, var(--brand-400), transparent 38%); }
.car_face.is-2 .car_face_scrim, .car_face.is-3 .car_face_scrim { background: linear-gradient(to top, var(--black-o55), transparent 45%), linear-gradient(to top, var(--brand-200), transparent 38%); }
.car_face.is-4 .car_face_scrim { background: linear-gradient(to top, var(--black-o55), transparent 45%), linear-gradient(to top, var(--brand-500), transparent 38%); }
.car_face_info { position: absolute; left: var(--sp-1); right: var(--sp-1); bottom: var(--sp-4); display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); text-align: center; }
.car_face_name { font-weight: 500; color: var(--light-100); }
.car_face_role { font-weight: 500; color: var(--white-o60); }

/* ============================ RESPONSIVE (team) ============================ */
@media (max-width: 60rem) {
  .team_grid { justify-content: center; }
  .val_head { max-width: 100%; }
  .val_media { flex-direction: column; }
  .val_orbit { flex-basis: auto; width: 100%; max-width: 40.9375rem; height: auto; aspect-ratio: 1; margin-inline: auto; }
  .val_ring.is-outer { width: 92%; }
  .val_ring.is-inner { width: 67%; }
  .gal_head { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .car_card { flex-direction: column; }
  .car_text { max-width: 100%; }
  .car_faces { width: 100%; }
  .car_face { flex: 1; min-width: 0; height: 18rem; }
}

@media (max-width: 48rem) {
  .team_card { width: 100%; height: 24rem; }
  .val_panel { flex-direction: column; align-items: flex-start; }
  .val_panel_deco { display: none; }
  .val_contact_body { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 30rem) {
  .car_faces { flex-wrap: wrap; }
  .car_face { flex: 1 1 45%; height: 14rem; }
  .val_orb.is-lg { width: 3.5rem; height: 3.5rem; }
  .val_orb.is-sm { width: 2.75rem; height: 2.75rem; }
}