/**
 * @file
 * Flex-based grid layout for Drupal Views.
 * 
 * Usage:
 * - Add class "view-flex-grid" to your View wrapper
 * - Add class "view-flex-grid-item" to each View row/item
 */

/* View Container - Flex Grid */
.view-flex-grid .view-content {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin: 0;
  padding: 0;
}

/* View Item - Flex Item */
.view-flex-grid .view-content > .views-row,
.view-flex-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1 1 100%;
  min-width: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  background: transparent;
  border-radius: 8px;
  overflow: hidden;
}

/* Responsive: Tablet - 2 columns */
@media (min-width: 768px) {
  .view-flex-grid .view-content > .views-row,
  .view-flex-grid-item {
    flex: 1 1 calc(50% - 15px);
    max-width: calc(50% - 15px);
  }
}

/* Responsive: Desktop - 3 columns */
@media (min-width: 992px) {
  .view-flex-grid .view-content > .views-row,
  .view-flex-grid-item {
    flex: 1 1 calc(33.333% - 20px);
    max-width: calc(33.333% - 20px);
  }
}

/* Responsive: Large Desktop - 4 columns (optional) */
@media (min-width: 1200px) {
  .view-flex-grid.view-flex-grid-4col .view-content > .views-row,
  .view-flex-grid-4col .view-flex-grid-item {
    flex: 1 1 calc(25% - 22.5px);
    max-width: calc(25% - 22.5px);
  }
}

/* Hover Effects */
.view-flex-grid .view-content > .views-row:hover,
.view-flex-grid-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  background-color: rgba(128, 128, 128, 0.1);
}

/* Optional: Image hover effect */
.view-flex-grid .view-content > .views-row:hover .field--type-image img,
.view-flex-grid-item:hover .field--type-image img {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

.view-flex-grid .view-content > .views-row .field--type-image,
.view-flex-grid-item .field--type-image {
  overflow: hidden;
}

.view-flex-grid .view-content > .views-row .field--type-image img,
.view-flex-grid-item .field--type-image img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  transition: transform 0.3s ease;
}

/* Removed overlay effect - using background-color transition instead */

/* Center all child elements */
.view-flex-grid .view-content > .views-row > *,
.view-flex-grid-item > * {
  text-align: center;
}

/* Remove default list styling */
.view-flex-grid .view-content {
  list-style: none;
  padding: 0;
}

.view-flex-grid .view-content > .views-row {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Equal height items */
.view-flex-grid .view-content {
  align-items: stretch;
}

/* Text and Link Colors - Theme Blue */
.view-flex-grid .view-content > .views-row,
.view-flex-grid-item {
  color: var(--color-theme-blue);
}

/* All text elements */
.view-flex-grid .view-content > .views-row p,
.view-flex-grid .view-content > .views-row h1,
.view-flex-grid .view-content > .views-row h2,
.view-flex-grid .view-content > .views-row h3,
.view-flex-grid .view-content > .views-row h4,
.view-flex-grid .view-content > .views-row h5,
.view-flex-grid .view-content > .views-row h6,
.view-flex-grid .view-content > .views-row span,
.view-flex-grid .view-content > .views-row div,
.view-flex-grid .view-content > .views-row li,
.view-flex-grid-item p,
.view-flex-grid-item h1,
.view-flex-grid-item h2,
.view-flex-grid-item h3,
.view-flex-grid-item h4,
.view-flex-grid-item h5,
.view-flex-grid-item h6,
.view-flex-grid-item span,
.view-flex-grid-item div,
.view-flex-grid-item li {
  color: var(--color-theme-blue);
  text-align: center;
}

/* All links */
.view-flex-grid .view-content > .views-row a,
.view-flex-grid-item a {
  color: var(--color-theme-blue);
}

/* Link hover state */
.view-flex-grid .view-content > .views-row a:hover,
.view-flex-grid .view-content > .views-row a:focus,
.view-flex-grid-item a:hover,
.view-flex-grid-item a:focus {
  color: var(--color-theme-blue);
  opacity: 0.8;
}

/* Drupal field elements */
.view-flex-grid .view-content > .views-row .field,
.view-flex-grid .view-content > .views-row .field__label,
.view-flex-grid .view-content > .views-row .field__item,
.view-flex-grid .view-content > .views-row .views-field,
.view-flex-grid-item .field,
.view-flex-grid-item .field__label,
.view-flex-grid-item .field__item,
.view-flex-grid-item .views-field {
  color: var(--color-theme-blue);
  text-align: center;
}

/* Drupal field links */
.view-flex-grid .view-content > .views-row .field a,
.view-flex-grid .view-content > .views-row .views-field a,
.view-flex-grid-item .field a,
.view-flex-grid-item .views-field a {
  color: var(--color-theme-blue);
}

/* Title fields specifically */
.view-flex-grid .view-content > .views-row .views-field-title,
.view-flex-grid .view-content > .views-row .views-field-title a,
.view-flex-grid-item .views-field-title,
.view-flex-grid-item .views-field-title a {
  color: var(--color-theme-blue);
}

/* Optional: Card padding */
.view-flex-grid .view-content > .views-row,
.view-flex-grid-item {
  padding: 20px;
}

/* Optional: Remove padding if using full-width images */
.view-flex-grid.view-flex-grid-no-padding .view-content > .views-row,
.view-flex-grid-no-padding .view-flex-grid-item {
  padding: 0;
}

/* Optional: Border on hover */
.view-flex-grid.view-flex-grid-border-hover .view-content > .views-row:hover,
.view-flex-grid-border-hover .view-flex-grid-item:hover {
  border: 2px solid #007bff;
  box-shadow: 0 5px 15px rgba(0, 123, 255, 0.2);
}

/* Optional: Color overlay variant */
.view-flex-grid.view-flex-grid-overlay .view-content > .views-row:hover::before,
.view-flex-grid-overlay .view-flex-grid-item:hover::before {
  background: rgba(0, 123, 255, 0.1);
}