/* ==========================================================================
   COMPOUND — components reusable (port từ Next.js src/components)
   ========================================================================== */

/* ===== Button (Next.js button.model.css) ===== */
/* Lưu ý: dùng selector a.button để tăng specificity, vì global.css
   có rule `a:link { width: 100% }` sẽ override `.button { width: auto }` */
.button,
a.button,
a.button:link,
a.button:visited {
  display: inline-flex;
  height: 3.5rem;
  padding: 1rem 1.25rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  min-width: 10rem;

  border-radius: 0 0.75rem 0 0;
  border: 1px solid rgba(255, 255, 255, 0.47);
  backdrop-filter: blur(10px);

  color: #1d262d;
  cursor: pointer;
  text-decoration: none;
  width: auto;
  transition: padding-right 0.25s ease;
}

/* Variants — selector dài để override a:link cùng specificity (0,2,1) */
.button.white,
a.button.white,
a.button.white:link,
a.button.white:visited {
  background: #fff;
  color: #1d262d;
}

.button.black,
a.button.black,
a.button.black:link,
a.button.black:visited {
  background: #000;
  color: #fff;
}

.button.vavariant,
a.button.vavariant,
a.button.vavariant:link,
a.button.vavariant:visited {
  background: transparent;
  color: #1d262d;
  border: 1px solid rgba(29, 38, 45, 0.47);
}

.button svg {
  width: 1.5rem;
  height: 1.5rem;
  transition: transform 0.3s ease;
}

.button:hover,
a.button:hover {
  padding-right: 1.5rem;
}

.button:hover .button-icon svg {
  transform: rotate(45deg);
}

.button h4 {
  text-align: center;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 120%;
  text-transform: uppercase;
  margin: 0;
}

.button span {
  transform: rotate(45deg);
}

.button .button-sub {
  position: relative;
  overflow: hidden;
}

.button .button-sub .whitespace-nowrap {
  white-space: nowrap;
  transform: none;
  opacity: 1;
  transition: none;
}

.button .button-sub .title-sub {
  display: none;
}

/* Hover animation — text slide-up + replacement slide-in */
.button:hover .button-sub .whitespace-nowrap:not(.title-sub) {
  transform: none;
  opacity: 1;
}

.button:hover .button-sub .title-sub {
  display: none;
}

@media (max-width: 640px) {
  .button h4 {
    font-size: 0.75rem;
    font-weight: 550;
  }
  .button,
  a.button,
  a.button:link,
  a.button:visited {
    border-radius: 0 0.75rem 0 0;
    width: 100%;
    border: 1px solid rgba(29, 38, 45, 0.47);
    backdrop-filter: blur(10px);
  }
  .button svg {
    width: 1rem;
    height: 1rem;
  }
  .button,
  a.button,
  a.button:link,
  a.button:visited {
    padding: 0.88rem 1rem;
    height: 2.25rem;
  }
}