/* team.css */

/* ── Scroll reveal ────────────────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 560ms cubic-bezier(0.22, 1, 0.36, 1), transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ── Team card: hover scale inner ────────────────────────────────────────── */
.vs-tm-card:hover .vs-tm-card-inner {
  transform: scale(1.04);
}

/* ── Team card: focus ring ───────────────────────────────────────────────── */
.vs-tm-card:focus-visible {
  outline: 2px solid #6FC7B6;
  outline-offset: 4px;
  border-radius: 4px;
}

/* ── Drawer overlay open state ───────────────────────────────────────────── */
#vs-tm-overlay.is-open {
  visibility: visible;
  pointer-events: auto;
}
#vs-tm-overlay.is-open #vs-tm-backdrop {
  opacity: 1;
}
#vs-tm-overlay.is-open #vs-tm-drawer {
  transform: translateX(0);
}

/* ── Close button hover ──────────────────────────────────────────────────── */
#vs-tm-close:hover {
  background: #6FC7B6 !important;
}

/* ── General padding responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  #dong-hanh,
  #doi-ngu {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

@media (max-width: 600px) {
  #dong-hanh,
  #doi-ngu {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  #doi-ngu {
    padding-bottom: 0 !important;
  }
}

/* ── Đồng hành: stack on tablet ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .vs-dh-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }
}

/* ── Team grid: tablet 3 cols, mobile 2 cols ─────────────────────────────── */
@media (max-width: 1024px) and (min-width: 768px) {
  .vs-tm-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 24px !important;
    row-gap: 40px !important;
  }
}

@media (max-width: 767px) {
  .vs-tm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 20px !important;
    row-gap: 32px !important;
  }
}

/* ── Drawer: full-width on small screens ────────────────────────────────── */
@media (max-width: 480px) {
  #vs-tm-drawer {
    width: 100% !important;
    padding: 24px 20px !important;
  }
}

/* ── Hero: mobile ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  #hero {
    height: auto !important;
    min-height: 56vh !important;
  }
  #hero > div:last-child {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

@media (max-width: 600px) {
  #hero > div:last-child {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}