/* this is the layout for the form of the views */

.phantom-layout-list,
.phantom-grid-layout,
.phantom-news-grid-layout {
  form {
    position: relative;
    margin-top: 3rem;
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
    /* &::before {
      content: "";
      height: 1px;
      position: absolute;
      width: 100vw;
      left: 50%;
      transform: translateX(-50%);
      top: -2rem;
      background: #a3a3a3;
    } */
  }

  /* Let the grid gap own the spacing between the top-level controls. */
  form > * {
    margin: 0;
    min-width: 0;
  }

  /* "Published date" grouping fieldset (WCAG 1.3.1 / 3.3.2): strip the native
     fieldset chrome so it blends in with the other filters. */
  .phantom-news-date-range {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
  }

  /* The legend is visually hidden but kept for assistive tech — see the
     top-level `.phantom-news-date-range > legend` rule after this block. */

  /* From / To live inside the core .fieldset-wrapper; stack them by default. */
  .phantom-news-date-range .fieldset-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .phantom-news-date-range .fieldset-wrapper > .form-item {
    margin: 0;
    min-width: 0;
  }
}

/* Published-date group label: hidden visually, kept for screen readers.
   The <fieldset>/<legend> still ties the From/To date inputs to the
   "Published date" concept for assistive tech (WCAG 1.3.1); sighted users
   rely on the visible "Dal" / "Al" input labels. NOT display:none — that
   would drop the legend from the accessibility tree too. Targets the class,
   so EN and IT are both covered, in every view that renders this fieldset. */
.phantom-news-date-range > legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

form .form-actions {
  gap: 20px;
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .phantom-layout-list,
  .phantom-grid-layout,
  .phantom-news-grid-layout {
    form {
      grid-auto-rows: auto;
      align-items: end;
    }

    .form-item-title {
      grid-row: 1;
      grid-column: 1;
    }

    .form-item-f-news-type-ref-target-id {
      grid-row: 1;
      grid-column: 2;
    }

    /* Date range spans the last two columns, with From / To side by side. */
    .phantom-news-date-range {
      grid-row: 1;
      grid-column: 3 / span 2;
    }

    .phantom-news-date-range .fieldset-wrapper {
      grid-template-columns: 1fr 1fr;
    }

    /* button container */
    .form-actions {
      grid-row: 2;
      grid-column: 4;
      justify-self: end;
      flex-direction: row-reverse;
      display: flex;
      gap: 20px;
    }
  }
}

/* form button */
.phantom-layout-list,
.phantom-grid-layout,
.phantom-news-grid-layout {
  form {
    .button:hover {
      opacity: 0.8;
    }
  }
}

/* Search + Open-filters row (shared by events / news / jobs / tenders / …).
   Same logic on live listings (with archive link) and archive pages. */
form .exposed-filters__search-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* button toggle accordion filters */
form .exposed-filters__toggle {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 0;
  gap: 10px;
  align-items: center;
  white-space: nowrap;

  /* Fixed size so icons cannot shrink away next to the label. Prefer
     display:block — display:flex on <svg> can prevent <use> from painting. */
  .exposed-filters__toggle-icon,
  .exposed-filters__toggle-chevron {
    flex-shrink: 0;
    display: block;
    overflow: visible;
  }

  .exposed-filters__toggle-icon {
    width: 24px;
    height: 24px;
    position: relative;
    top: -1px;
    left: 2px;
    /* Stroke-based glyph: do not inherit `.btn-link svg { fill: #000 }`. */
    fill: none;
  }

  /* Rotate the chevron on open/close. Driven by the button's aria-expanded,
     which Bootstrap collapse toggles on click — no JS needed. */
  .exposed-filters__toggle-chevron {
    width: 32px;
    height: 32px;
    transition: transform 0.25s ease;
    transform: rotate(180deg);
  }

  &[aria-expanded="true"] .exposed-filters__toggle-chevron {
    transform: rotate(0deg);
  }
}

form .exposed-filters__actions {
  display: flex;
  justify-content: flex-end;

  .form-actions {
    width: auto;
    margin-top: 0;

    input {
      width: auto;
      min-width: 120px;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  form .exposed-filters__toggle-chevron {
    transition: none;
  }
}

form {
  margin-bottom: 3rem;

  .exposed-filters__panel {
    display: flex;
    display: flex;
    flex-direction: column;
    gap: 14px;
    > div {
      display: flex;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
  }

  .form-actions {
    margin-top: 2rem;
    input {
      width: 100%;
    }
  }
}

@media (min-width: 992px) {
  /* search + button */
  form {
    .exposed-filters {
      display: flex;
      flex-direction: column;
      gap: 20px;

      /* Title field + Open filters on one row, bottoms aligned (label sits
         above the input; toggle matches the 40px input height like the
         filters-container Storybook pattern / job listings). */
      .exposed-filters__search-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 20px;

        > .form-item,
        > .form-group {
          margin-bottom: 0;
        }

        .exposed-filters__toggle {
          align-self: end;
          margin-top: 0;
          margin-bottom: 0;
          padding: 0;
          width: auto;
          height: 40px;
          justify-content: flex-end;
        }
      }

      .exposed-filters__filters-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
      }
    }

    /* events */
    .exposed-filters.exposed-filters--events {
      .exposed-filters__filters-row {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    /* publications */
    .exposed-filters.exposed-filters--publications {
      .exposed-filters__filters-row {
        grid-template-columns: repeat(2, 1fr);
      }
      .exposed-filters__dates-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        width: 100%;
      }
    }

    /* tender */
    .exposed-filters.exposed-filters--tender {
      .exposed-filters__dates-row,
      .exposed-filters__filters-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }
    }

    .form-actions {
      margin-top: 0rem;
    }
  }

  /* organizations */
  .view-org-public-blocks-db .views-exposed-form {
    grid-template-columns: auto 150px;
    grid-template-rows: 1fr;

    .form-actions {
      grid-row: 1;
      grid-column: 2;
    }
  }

  /* job opportunity */
  .view-job-opportunity-public-blocks-db .exposed-filters__dates-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  .phantom-grid-layout.phantom-press-review-grid-layout {
    .exposed-filters {
      .exposed-filters__filters-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
      }
    }
  }
}

@media (min-width: 1200px) {
  body form.views-exposed-form {
    margin-bottom: 3rem;

    & .exposed-filters {
      gap: 30px;

      .exposed-filters__filters-row {
        gap: 30px;
      }

      .exposed-filters__dates-row .fieldset-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }
    }
  }

  /* search + button */
  form {
    /* publications */
    .exposed-filters.exposed-filters--publications {
      .exposed-filters__dates-row {
        gap: 30px;
      }
    }
  }
}