/**
 * @file
 * Standard Drupal Views, exposed filters, and grid displays for Wares Point Theme.
 * Provides universal, professional card styling and spacing for all Views grids.
 */

.views-element-container {
  margin-bottom: var(--wp-space-3xl);
  width: 100%;
}

.view-header {
  margin-bottom: var(--wp-space-xl);
  font-size: 1.1rem;
  color: var(--wp-text-muted);
}

.view-empty {
  padding: var(--wp-space-2xl);
  text-align: center;
  background-color: var(--wp-white);
  border: 1px dashed var(--wp-border-soft);
  border-radius: var(--wp-radius-md);
  color: var(--wp-text-muted);
}

/* ==========================================================================
   Exposed Filters Form
   ========================================================================== */

.views-exposed-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--wp-space-md);
  padding: var(--wp-space-lg);
  background-color: var(--wp-white);
  border: 1px solid var(--wp-border-soft);
  border-radius: var(--wp-radius-md);
  margin-bottom: var(--wp-space-2xl);
}

.views-exposed-form .form-item {
  margin-bottom: 0;
  flex: 1 1 200px;
}

.views-exposed-form .form-actions {
  margin-top: 0;
}

/* ==========================================================================
   Views Grid - Universal Professional Card Layout & Spacing
   ========================================================================== */

.views-view-grid {
  margin: var(--wp-space-lg) 0 var(--wp-space-2xl);
  width: 100%;
}

/* Row separation and flex grid */
.views-view-grid .views-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp-space-xl); /* 32px horizontal and vertical gap between card entries */
  margin-bottom: var(--wp-space-xl); /* 32px separation between rows */
  width: 100%;
}

.views-view-grid .views-row:last-child {
  margin-bottom: 0;
}

/* Individual Card Styling for each grid column */
.views-view-grid .views-col {
  flex: 1 1 100%;
  min-width: 0;
  background-color: var(--wp-white);
  border: 1px solid var(--wp-border-soft);
  border-top: 3px solid var(--wp-sand-primary); /* Editorial brand accent */
  border-radius: var(--wp-radius-lg); /* 12px rounded corners */
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(36, 33, 30, 0.06), 0 1px 3px rgba(36, 33, 30, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  box-sizing: border-box;
}

.views-view-grid .views-col:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(36, 33, 30, 0.12), 0 3px 6px rgba(36, 33, 30, 0.06);
  border-color: var(--wp-sand-primary);
}

/* 2 Columns on Tablets and Desktop */
@media (min-width: 640px) {
  .views-view-grid.cols-2 .views-col,
  .views-view-grid .views-col {
    flex: 1 1 calc(50% - var(--wp-space-xl));
  }
}

/* 3 Columns when cols-3 is configured */
@media (min-width: 992px) {
  .views-view-grid.cols-3 .views-col {
    flex: 1 1 calc(33.333% - var(--wp-space-xl));
  }
}

/* Card Image Treatment */
.views-view-grid .views-col .views-field[class*="field-page-image"],
.views-view-grid .views-col .views-field[class*="field-image"],
.views-view-grid .views-col .views-field-field-page-image,
.views-view-grid .views-col .views-field-field-image,
.views-view-grid .views-col .views-field-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--wp-beige-light);
  flex-shrink: 0;
  margin: 0;
}

.views-view-grid .views-col .views-field[class*="image"] img,
.views-view-grid .views-col .views-field img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.views-view-grid .views-col:hover .views-field[class*="image"] img,
.views-view-grid .views-col:hover .views-field img {
  transform: scale(1.03);
}

/* Card Title Treatment & Spacing */
.views-view-grid .views-col .views-field-title {
  padding: var(--wp-space-lg) var(--wp-space-lg) var(--wp-space-xs);
  margin: 0;
}

.views-view-grid .views-col .views-field-title a,
.views-view-grid .views-col .views-field-title h2,
.views-view-grid .views-col .views-field-title h3,
.views-view-grid .views-col .views-field-title .field-content {
  font-family: var(--wp-font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--wp-color-heading, var(--wp-brown-deep));
  text-decoration: none;
  line-height: 1.3;
  display: block;
  overflow-wrap: break-word;
  transition: color var(--wp-transition-fast);
}

.views-view-grid .views-col .views-field-title a:hover,
.views-view-grid .views-col .views-field-title a:focus {
  color: var(--wp-color-link-hover, var(--wp-tan-dark));
}

/* Card Body Text & Spacing */
.views-view-grid .views-col .views-field-body {
  padding: 0 var(--wp-space-lg) var(--wp-space-lg);
  margin: 0;
  font-family: var(--wp-font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--wp-text-muted);
  flex-grow: 1;
}

.views-view-grid .views-col .views-field-body p {
  margin: 0;
}

/* ==========================================================================
   Utility & More Link
   ========================================================================== */

.more-link {
  margin-top: var(--wp-space-xl);
  text-align: right;
}

.more-link a {
  display: inline-flex;
  align-items: center;
  gap: var(--wp-space-xs);
  font-weight: 700;
  color: var(--wp-brown-deep);
  text-decoration: none;
}

.more-link a:hover {
  color: var(--wp-tan-dark);
  text-decoration: underline;
}

.more-link a::after {
  content: "→";
}

.feed-icon {
  display: inline-flex;
  align-items: center;
  margin-top: var(--wp-space-lg);
}