/* =====================================================
   TRANSFRIO UNIVERSAL — COMPONENTS
   Buttons, cards, nav, service items
   ===================================================== */

/* --- Buttons --- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  background: var(--primary);
  color: var(--on-primary);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease-out, box-shadow 0.15s ease-out, transform 0.15s ease-out;
}

.btn-primary:hover {
  background: var(--primary-container);
  box-shadow: inset 0 0 0 2px rgba(151, 212, 173, 0.3);
}

.btn-primary:active {
  transform: scale(0.97);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  background-color: var(--surface-container-high);
  color: var(--on-surface);
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease-out;
}

.btn-secondary:hover {
  background-color: var(--surface-container-highest);
}

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  background-color: var(--secondary);
  color: var(--on-secondary);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease-out, transform 0.15s ease-out;
}

.btn-whatsapp:hover {
  background-color: var(--on-secondary-fixed-variant, #005049);
}

.btn-whatsapp:active {
  transform: scale(0.97);
}

/* --- Service Cards --- */
.service-card {
  background-color: var(--surface-container-lowest);
  border-radius: 0.75rem;
  box-shadow: var(--ambient-shadow);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: box-shadow 0.2s ease;
}

.service-card:hover {
  box-shadow: 0 24px 48px rgba(25, 28, 29, 0.1);
}

.service-card--featured {
  background-color: var(--primary-container);
}

.service-card--featured h3 {
  color: var(--primary-fixed-dim); /* #97d4ad — light green, readable on dark bg */
}

.service-card--featured p {
  color: var(--on-primary-container); /* #7ab590 — medium light green */
}

.service-card--featured .service-card__icon {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--primary-fixed-dim);
}

@media (min-width: 768px) {
  .service-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 2.5rem;
    gap: 0;
  }

  .service-card .service-card__icon {
    margin-bottom: 2rem;
  }

  .service-card .service-card__content h3 {
    margin-bottom: 1rem;
  }
}

/* --- Bento Cards --- */
.bento-card {
  border-radius: 0.75rem;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  transition: transform 0.2s ease-out;
}

.bento-card:hover {
  transform: translateY(-2px);
}

/* Row layout variant — for full-width conversion cards */
.bento-card--row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

/* --- Stat Item --- */
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-item__number {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
}

.stat-item__label {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.25rem;
}

@media (min-width: 768px) {
  .stat-item__number {
    font-size: 2.5rem;
  }

  .stat-item__label {
    font-size: 0.8125rem;
  }
}

/* --- Contact Input --- */
.contact-input {
  width: 100%;
  padding: 0.875rem 1rem;
  background-color: var(--surface-container-low);
  color: var(--on-surface);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.875rem;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0.375rem 0.375rem 0 0;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  outline: none; /* overridden by :focus-visible below */
}

.contact-input:focus {
  border-bottom-color: var(--primary);
  background-color: var(--surface-container-lowest);
}

.contact-input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 0;
}

.contact-input::placeholder {
  color: var(--on-surface-variant);
  opacity: 0.7;
}

/* --- Nav Drawer --- */
.nav-drawer {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Animation */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}

.nav-open .nav-drawer {
  max-height: 400px;
  opacity: 1;
}

.nav-drawer a {
  display: block;
  padding: 0.875rem 1.5rem;
  color: var(--on-surface);
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  font-size: 0.9375rem;
  transition: background-color 0.15s ease;
}

.nav-drawer a:hover {
  background-color: var(--surface-container-low);
}