/* ==========================================================================
   Bento Grid Catalog Component
   ========================================================================== */

.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 280px;
  /* Slightly taller to showcase the gradients beautifully */
  gap: var(--spacing-gutter);
}

.bento-card {
  border-radius: var(--rounded-xl);
  text-decoration: none;
  color: var(--on-surface);
  position: relative;
  overflow: hidden;
  display: flex;
  box-shadow: 0 4px 16px var(--shadow-color);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
  background-color: var(--surface-container-lowest);
}

.bento-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}

/* --- Image as Full Cover Background --- */
.bento-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Fills the entire card seamlessly */
  z-index: 1;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Subtle premium zoom effect on the whole background when hovering */
.bento-card:hover .bento-img {
  transform: scale(1.04);
}

/* --- Content Overlay --- */
.bento-content {
  position: relative;
  z-index: 2;
  /* Sits above the background image */
  display: flex;
  flex-direction: column;
  padding: 32px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* Align text dynamically based on the component prop */
.content-top {
  justify-content: flex-start;
}

.content-bottom {
  justify-content: flex-end;
}

.bento-content .headline-sm {
  margin-bottom: 8px;
}

.bento-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--primary-container);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  gap: 4px;
  transition: color 0.2s ease;
}

.bento-card:hover .bento-link {
  color: var(--primary);
}

/* --- Desktop Layout Assignments (4-Column Bento Box) --- */
.bento-item-0 {
  grid-column: span 2;
  grid-row: span 2;
}

/* iPhone */
.bento-item-1 {
  grid-column: span 2;
  grid-row: span 1;
}

/* MacBook */
.bento-item-2 {
  grid-column: span 1;
  grid-row: span 1;
}

/* iPad */
.bento-item-3 {
  grid-column: span 1;
  grid-row: span 1;
}

/* iMac */
.bento-item-4 {
  grid-column: span 1;
  grid-row: span 2;
}

/* Apple Watch */
.bento-item-5 {
  grid-column: span 1;
  grid-row: span 1;
}

/* Mac mini */
.bento-item-6 {
  grid-column: span 1;
  grid-row: span 1;
}

/* Mac Studio */
.bento-item-7 {
  grid-column: span 1;
  grid-row: span 1;
}

/* AirPods */
.bento-item-8 {
  grid-column: span 2;
  grid-row: span 1;
}

/* HomePod */
.bento-item-9 {
  grid-column: span 1;
  grid-row: span 1;
}

/* Pre-owned */

/* --- Tablet Responsive (2 Columns) --- */
@media (max-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Remove vertical spanning on tablet to prevent layout holes */
  .bento-card {
    grid-row: span 1 !important;
  }

  /* Keep hero items wide */
  .bento-item-0,
  .bento-item-1,
  .bento-item-8 {
    grid-column: span 2;
  }

  /* Everything else becomes 1 column (square) */
  .bento-item-2,
  .bento-item-3,
  .bento-item-4,
  .bento-item-5,
  .bento-item-6,
  .bento-item-7,
  .bento-item-9 {
    grid-column: span 1;
  }
}

/* --- Mobile Responsive (1 Column) --- */
@media (max-width: 768px) {
  .bento-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 240px;
  }

  /* Every card stacks full width */
  .bento-card {
    grid-column: span 1 !important;
  }
}