/**
 * Device Grid Component
 * Displays included devices/services in package cards
 *
 * Grid layout with device icons
 * Icons: Router, TV Box, FPT Play
 * Size: 60×60px per icon
 */

.device-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-3);
  width: 100%;
}

.device-grid__item {
  display: flex;
  align-items: center;
  justify-content: center;

  /* Size */
  width: 60px;
  height: 60px;

  /* Visual */
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);

  /* Transitions */
  transition: all var(--duration-fast) var(--ease-in-out);
}

.device-grid__item:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.device-grid__icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

/* Specific device icons */
.device-grid__item--router .device-grid__icon {
  /* Router icon: 8215538c302711e4d20078ea27f88580e3fbfd62.png */
  content: url('../../images/8215538c302711e4d20078ea27f88580e3fbfd62.png');
}

.device-grid__item--tvbox .device-grid__icon {
  /* TV Box icon: 50f56450715701aab7645a39f32ede4ab1c49879.png */
  content: url('../../images/50f56450715701aab7645a39f32ede4ab1c49879.png');
}

.device-grid__item--fptplay .device-grid__icon {
  /* FPT Play icon: 8b86cf2fe57fa6c9b9c99cf08c37fd5005d56af5.png */
  content: url('../../images/8b86cf2fe57fa6c9b9c99cf08c37fd5005d56af5.png');
}

/* Alternative: 2 items layout */
.device-grid--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

/* Alternative: 4 items layout */
.device-grid--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* With labels */
.device-grid__item--labeled {
  flex-direction: column;
  height: auto;
  padding: var(--spacing-2);
}

.device-grid__label {
  margin-top: var(--spacing-1);
  font-size: var(--font-size-10);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-align: center;
  line-height: 1.2;
}

/* =============================================
 * RESPONSIVE DESIGN
 * ============================================= */

/* Mobile (< 768px) */
@media (max-width: 767px) {
  .device-grid {
    gap: var(--spacing-2);
  }

  .device-grid__item {
    width: 52px;
    height: 52px;
  }

  .device-grid__icon {
    width: 40px;
    height: 40px;
  }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .device-grid {
    gap: var(--spacing-3);
  }

  .device-grid__item {
    width: 56px;
    height: 56px;
  }

  .device-grid__icon {
    width: 44px;
    height: 44px;
  }
}

/* Desktop (≥1024px) */
@media (min-width: 1024px) {
  .device-grid {
    gap: var(--spacing-3);
  }

  .device-grid__item {
    width: 60px;
    height: 60px;
  }

  .device-grid__icon {
    width: 48px;
    height: 48px;
  }
}