/* Responsive fallback for FormSection layouts.
   airframe.css declares .form-layout-2/3/4 as fixed grids with no media queries, so on a narrow
   window the columns keep splitting instead of collapsing and labels overlap the fields.
   Loaded after airframe.css in App.razor, so the .form-layout-* and .form-cell rules win by
   document order alone; !important is used only where inline styles or a component <style>
   block would otherwise take precedence (marked below). */

/* ---------- Narrow window: 3-4 columns -> 2 ---------- */
@media (max-width: 1100px) {
  .form-layout-3,
  .form-layout-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Cells pinned to grid coordinates inline (PersonForm and 4 other forms) must flow again.
     !important is unavoidable here: the coordinates are inline style attributes. */
  .form-section > .form-cell[style*='grid-column'] {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* Person profile: the 280px photo column stops competing with the fields.
     !important because PersonForm.razor carries its own <style> block, which the browser
     applies after this file (it sits in the body, not in the head). */
  .date-personale-wrap {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .date-personale-photo {
    justify-self: start !important;
  }
}

/* ---------- Very narrow window: single column, label above the field ---------- */
@media (max-width: 820px) {
  .form-layout-2,
  .form-layout-3,
  .form-layout-4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-cell {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-item {
    font-size: 11px;
    padding: 6px 8px;
  }
}