/**
 * Vitalisite FSE - Bento Grid Styles
 * 
 * CSS Grid layout for the Bento Grid pattern
 * 
 * @package Vitalisite_FSE
 * @since 1.0.0
 */

/* Container */
.vitalisite-bento-grid .vitalisite-bento-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px; /* Larger gap for premium feel */
  width: 100%;
}

/* Base Item Styles */
.vitalisite-bento-item {
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: var(--wp--custom--image-radius);
  margin-top: 0 !important; /* Override global block spacing */
  padding: 40px 25px;

  @media screen and (min-width: 960px) {
    padding: 80px 40px;
  }
}

.vitalisite-bento-item p {
  margin-block-start: 15px;
}

.vitalisite-bento-item--span-1 .wp-block-heading,
.vitalisite-bento-item--span-1 .wp-block-heading a,
.vitalisite-bento-item--span-1 h1,
.vitalisite-bento-item--span-1 h2,
.vitalisite-bento-item--span-1 h3,
.vitalisite-bento-item--span-1 h4,
.vitalisite-bento-item--span-1 h5,
.vitalisite-bento-item--span-1 h6 {
  color: var(--wp--preset--color--on-primary) !important;
}

/* Tablet & Desktop (Switch to 3-column grid for 2/3 + 1/3 layout) */
@media (min-width: 960px) {
  .vitalisite-bento-grid .vitalisite-bento-inner {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(auto, auto); /* Let content define height */
  }

  /* Spans */
  .vitalisite-bento-item--span-2 {
    grid-column: span 2;
  }

  /* Increase specificity to override utilities.css */
  .vitalisite-section .vitalisite-bento-inner > .vitalisite-bento-item--span-1,
  .vitalisite-bento-item--span-1 {
    grid-column: span 1;
    margin-block-start: 0 !important;
  }
}