/* cpa-form.css
   Styles for the "Closest Point of Approach" input form (closest.cgi,
   closest_pac.cgi). Replaces the original table+rowspan layout with
   CSS Grid.

   Grid was chosen over Flexbox here specifically because this component
   needs two things Flexbox can't do at once: one box (Forecast)
   visually spanning multiple rows next to three stacked boxes (Island,
   Coordinates, Map) - exactly what rowspan did - AND a completely
   different visual order on mobile (Map moves to after Forecast)
   without touching the actual form markup or duplicating any inputs.
   grid-template-areas handles both natively: desktop and mobile each
   get their own area map, and the underlying HTML never changes.

   This is the ONE deliberate use of a modern CSS layout technique on
   the site (previously Flexbox; now Grid, for the same component).
*/

.cpa-form-wrap {
  border: 1px solid #000000;
  padding: 4px;
  margin: 10px 0;
}

.cpa-form-grid {
  display: grid;
  grid-template-columns: calc(40% - 2px) calc(60% - 2px);
  grid-template-rows: 1fr 1fr 1fr auto;
  grid-template-areas:
    "island   forecast"
    "coords   forecast"
    "map      forecast"
    "submit   submit";
  column-gap: 4px;
  row-gap: 0;
}

.cpa-island   { grid-area: island; display: flex; align-items: center; }
.cpa-coords   { grid-area: coords; display: flex; align-items: center; }
.cpa-map      { grid-area: map; display: flex; align-items: center; }
.cpa-forecast { grid-area: forecast; min-width: 0; overflow-x: auto; }
.cpa-submit   { grid-area: submit; display: flex; align-items: center; }

.cpa-island, .cpa-coords, .cpa-map, .cpa-forecast, .cpa-submit {
  background: #ffffff;
  border: 1px solid #000000;
  padding: 5px;
  box-sizing: border-box;
}

.cpa-island { background: #cccccc; }
.cpa-coords { background: #999999; }
.cpa-submit { background: #9999cc; justify-content: center; }

@media (max-width: 700px) {
  .cpa-form-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "island"
      "coords"
      "forecast"
      "map"
      "submit";
    row-gap: 4px;
  }
}

/* Variant for simpler forms with no "Map" cell (e.g. distance.htm/distance.cgi's
   "How close is it?" form) - Island+Coordinates span 2 rows next to the
   right-hand box instead of 3, everything else works the same way. */
.cpa-form-grid.cpa-form-grid--2row {
  grid-template-rows: 1fr 1fr auto;
  grid-template-areas:
    "island   forecast"
    "coords   forecast"
    "submit   submit";
}

@media (max-width: 700px) {
  .cpa-form-grid.cpa-form-grid--2row {
    grid-template-rows: auto;
    grid-template-areas:
      "island"
      "coords"
      "forecast"
      "submit";
  }
}