/*!******************************************************!*\
  !*** ../src/elements/project-grid/project-grid.scss ***!
  \******************************************************/
/*******************************
 * Buttons
 ******************************/
/*
 * Applies the complete set of button styles with all desired style variations.
 * This mixin is normally applied to form buttons or links with
 * the desired button classes eg. .button.style-xxx.
 */
/*
 * Contains styles that all of the buttons have in common.
 * Some button styles might opt out or override some of these styles.
 * One benefit of this approach is that all of the buttons will be consistently
 * configurable with the CSS variables defined below.
 */
/*******************************
 * Button Styles
 *
 * Styles should define the way the buttons look. Depending on the project,
 * you may need to optimize each style based on the section / element that
 * a button is used in. For that purpose you can use the predefined CSS
 * variables to easily overwrite the desired colors based on your need.
 ******************************/
/*******************************
 * Inputs
 ******************************/
.projects-overview {
  --additional-scroll-offset: /* grow(20, 50) */ clamp(1.25rem, 0.7386363636rem + 2.2727272727vw, 3.125rem);
}
.projects-overview .projects-filter {
  --gap: /* grow(24, 30) */ clamp(1.5rem, 1.3977272727rem + 0.4545454545vw, 1.875rem);
  --direction: column;
  --align: flex-start;
  margin-bottom: var(--grid-gutter);
}
@media (width >= 768px /* sm */) {
  .projects-overview .projects-filter {
    --direction: row;
    --align: center;
  }
}
.projects-overview .projects-filter .projects-filter-submit {
  --framed-icon-inner-size: 0.9375rem;
}
.projects-overview .projects-filter .projects-filter-popover-service {
  --popover-width: 15rem;
}
.projects-overview .projects-filter .projects-filter-list {
  list-style: none;
  padding: 0;
  margin: 0 calc(-1 * var(--panel-padding-x));
}
.projects-overview .projects-filter .projects-filter-list li {
  text-transform: uppercase;
  font-size: 0.875rem;
  font-weight: bold;
}
.projects-overview .projects-filter .projects-filter-list li a {
  display: block;
  padding: /* grow(8, 12) */ clamp(0.5rem, 0.4318181818rem + 0.303030303vw, 0.75rem) var(--panel-padding-x);
  color: var(--color-blue-600);
  border-radius: 0.5rem;
}
:root.no-focus-visible .projects-overview .projects-filter .projects-filter-list li a:focus {
  outline: 2px solid var(--focus-color, var(--primary-color));
  outline-offset: var(--focus-offset, 3px);
}

.projects-overview .projects-filter .projects-filter-list li a:focus:not(:focus-visible) {
  outline: none;
}
.projects-overview .projects-filter .projects-filter-list li a:focus-visible {
  outline: 2px solid var(--focus-color, var(--primary-color));
  outline-offset: var(--focus-offset, 3px);
}
.projects-overview .projects-filter .projects-filter-list li a {
  --focus-offset: -4px;
}
.projects-overview .projects-filter .projects-filter-list li a:hover {
  color: var(--color-blue-500);
}
.projects-overview .projects-filter .projects-filter-list li a:active {
  color: var(--color-blue-700);
}
.projects-overview .projects-filter .projects-filter-list li a[aria-current=page] {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.projects-overview .projects-filter .projects-filter-content {
  position: relative;
  z-index: 1000;
  background-color: var(--color-white);
  padding: /* grow(36, 30) */ clamp(1.875rem, 2.3522727273rem + -0.4545454545vw, 2.25rem) /* grow(24, 45) */ clamp(1.5rem, 1.1420454545rem + 1.5909090909vw, 2.8125rem);
  border-radius: 0.25rem;
  display: flex;
  flex-direction: var(--direction);
  align-items: var(--align);
  justify-content: space-between;
  gap: var(--gap);
}
.projects-overview .projects-filter .projects-filter-form {
  display: flex;
  gap: 1rem;
  white-space: nowrap;
}
.projects-overview .projects-filter .projects-filter-form > * {
  flex-shrink: 0;
}
.projects-overview .projects-filter .projects-filter-current-year {
  font-weight: 700;
  font-size: 1.5rem;
  text-transform: uppercase;
}
.projects-overview .projects-filter .projects-filter-options {
  display: flex;
  flex-direction: var(--direction);
  align-items: var(--align);
  gap: var(--gap);
}
@media (width >= 768px /* sm */) {
  .projects-overview .projects-filter .projects-filter-options {
    margin-left: auto;
  }
}
.projects-overview .projects-overview-grid {
  --cols-xs: 1;
  --grid-layout-columns: 1;
}
@media (min-width: 560px) {
  .projects-overview .projects-overview-grid {
    --grid-layout-columns: 2;
  }
}
@media (width >= 992px /* md */) {
  .projects-overview .projects-overview-grid {
    --grid-layout-columns: 3;
  }
}

.projects-overview-controls .page-nav {
  justify-content: center;
}

/*# sourceMappingURL=css-wpce--project-grid.css.map*/