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

.phantom-grid-layout,
.phantom-news-grid-layout {
  form {
    display: grid;
    gap: 40px;
    grid-template-columns: 1fr;
  }

  /* 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;
}

@media (min-width: 1024px) {
.phantom-grid-layout,
  .phantom-news-grid-layout {
    form {
      grid-template-columns: repeat(4, 1fr);
      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;
    }
  }
}

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