/**
 * Soltis Landscaping — Project Grid
 *
 * Styles for the portfolio grid, category filters,
 * project cards, and responsive layouts.
 *
 * Colors are connected to Avada's global palette.
 */


/* ----------------------------------------
   Brand Colors & Base Styles
---------------------------------------- */

.soltis-projects {
  /* Soltis brand palette */
  --soltis-white: var(--awb-color1, #ffffff);
  --soltis-ivory: var(--awb-color2, #f8f6f1);
  --soltis-sand: var(--awb-color3, #f2eee1);
  --soltis-earth: var(--awb-color4, #a67c52);
  --soltis-brown: var(--awb-color5, #7a4308);
  --soltis-sage: var(--awb-color6, #556f1d);
  --soltis-charcoal: var(--awb-color7, #333333);
  --soltis-black: var(--awb-color8, #0a0a0a);
  --soltis-forest: var(--awb-custom_color_1, #3f541b);

  /* Neutral colors */
  --soltis-text-muted: rgb(51 51 51 / 68%);
  --soltis-placeholder: rgb(51 51 51 / 62%);

  /* Project grid colors */
  --soltis-project-accent: var(--soltis-forest);
  --soltis-project-text: var(--soltis-charcoal);
  --soltis-project-muted: var(--soltis-text-muted);
  --soltis-project-surface: var(--soltis-sand);

  width: 100%;
  color: var(--soltis-project-text);
}

/* Consistent sizing throughout the grid. */
.soltis-projects *,
.soltis-projects *::before,
.soltis-projects *::after {
  box-sizing: border-box;
}

.soltis-projects__heading {
  margin: 0 0 1rem;
}


/* ----------------------------------------
   Project Filters
---------------------------------------- */

.soltis-projects__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;

  margin: 0 0 1rem;
}

/* Borderless category filter buttons. */
.soltis-projects .soltis-projects__filter {
  appearance: none;

  padding: 0.65rem 1.05rem;

  border: 0 !important;
  border-radius: 999px;

  background: var(--soltis-sand);
  color: var(--soltis-project-text);

  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.025em;
  text-transform: uppercase;

  cursor: pointer;

  transition:
    background 0.18s ease,
    color 0.18s ease;
}

/* Subtle hover treatment for inactive categories. */
.soltis-projects .soltis-projects__filter:not(.is-active):hover {
  border: 0 !important;

  background: #e8e2d3;
  color: var(--soltis-forest);
}

/* Highlight the selected category. */
.soltis-projects .soltis-projects__filter.is-active {
  border: 0 !important;

  background: var(--soltis-forest);
  color: var(--soltis-white);
}

/* Preserve visible keyboard focus. */
.soltis-projects .soltis-projects__filter:focus-visible,
.soltis-project-card__link:focus-visible {
  outline: 3px solid var(--soltis-forest);
  outline-offset: 4px;
}


/* ----------------------------------------
   Results & Grid Layout
---------------------------------------- */

.soltis-projects__count {
  margin: 0 0 1.5rem;

  color: var(--soltis-project-muted);
  font-size: 0.875rem;
}

/* Three project cards per row on desktop. */
.soltis-projects__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.25rem 1.5rem;
}

/* Hide projects that don't match the selected filter. */
.soltis-project-card[hidden],
.soltis-projects__empty[hidden] {
  display: none !important;
}

/* Empty results message. */
.soltis-projects__empty {
  padding: 2rem 0;
  color: var(--soltis-project-muted);
}


/* ----------------------------------------
   Project Cards
---------------------------------------- */

/* Keep cards clean and borderless. */
.soltis-projects .soltis-project-card {
  min-width: 0;

  border: 0 !important;
  box-shadow: none !important;

  background: var(--soltis-white);
}

/* Make the entire card clickable. */
.soltis-project-card__link {
  display: block;

  height: 100%;

  background: var(--soltis-white);
  color: inherit;

  text-decoration: none !important;
}

/* Consistent image proportions. */
.soltis-project-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;

  background: var(--soltis-project-surface);
}

/* Fill the image area without stretching photos. */
.soltis-project-card__image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.3s ease;
}

/* Subtle image zoom on hover. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .soltis-project-card__link:hover
  .soltis-project-card__image {
    transform: scale(1.035);
  }
}

/* Warm placeholder for projects without images. */
.soltis-project-card__placeholder {
  display: block;

  width: 100%;
  height: 100%;

  background: var(--soltis-sand);
}


/* ----------------------------------------
   Project Information
---------------------------------------- */

.soltis-project-card__info {
  padding: 0.95rem 10px 0;
}

/* Category label above the project name. */
.soltis-project-card__category {
  margin-bottom: 10px !important;

  color: var(--soltis-forest);

  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Project title. */
.soltis-project-card__title {
  margin: 0.125rem 0 !important;

  color: var(--soltis-project-text);

  font-size: clamp(1.25rem, 1.45vw, 1.45rem) !important;
  line-height: 1.1;
}

/* Project title hover state. */
.soltis-project-card__link:hover
.soltis-project-card__title {
  color: var(--soltis-forest);

  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* City and state beneath the project title. */
.soltis-project-card__location {
  margin: 4px 0 10px !important;

  color: var(--soltis-project-muted);

  font-size: 0.92rem;
  line-height: 1.55;
}


/* ----------------------------------------
   Responsive Layout
---------------------------------------- */

/* Tablets: two projects per row. */
@media (max-width: 1024px) {
  .soltis-projects__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: one project per row. */
@media (max-width: 640px) {
  .soltis-projects__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.7rem;
  }

  .soltis-projects .soltis-projects__filter {
    padding: 0.6rem 0.85rem;
    font-size: 0.875rem;
  }
}


/* ----------------------------------------
   Reduced Motion
---------------------------------------- */

/* Respect visitors who prefer reduced animation. */
@media (prefers-reduced-motion: reduce) {
  .soltis-projects__filter,
  .soltis-project-card__image {
    transition: none;
  }
}