/*
 * comsolit_infos — the contact list (Templates/Info/ContactList.html).
 *
 * Hand-written plain CSS, no build. Replaces the Foundation grid this template
 * used for its filter bar, its card grid and its pagination, so the template no
 * longer depends on comsolit_t3base's stylesheet — the `legacy` cascade layer
 * stgag/theme is deleting (app repo open-issues #82).
 *
 * ⚠️ SCOPE. This template is also an AngularJS application: `ng-app`,
 * `comsolit-tree-select`, and the ui-bootstrap `<accordion>` / `<pagination>`
 * directives. None of that is Foundation and none of it is touched here — it
 * belongs to the separate AngularJS migration. What this file replaces is the
 * layout the Angular markup was arranged in, nothing more. The accordion cards
 * themselves are still styled from the legacy layer via
 * `.info-contact-container`, which is a project class rather than a Foundation
 * one; those rules come over when the Angular app does.
 *
 * ⚠️ The grid is 60 columns, not Foundation's default 12 — t3base built it with
 * `$grid-column-count: 60`. So `small-60` is full width, `xslarge-17` is 17/60 =
 * 28.333% and `xslarge-9` is 9/60 = 15%. Reading these as twelfths gets every
 * width wrong.
 *
 * ⚠️ Breakpoints are t3base's, which are NOT Foundation's defaults either:
 * medium 40em and xslarge 71.875em are the two this template uses. Lengths in a
 * media query resolve against the initial font size, so they are immune to the
 * legacy layer's `html { font-size: 105% }` — unlike em/rem inside a rule body.
 *
 * ⚠️ The gutter changes at the medium breakpoint: 10px below, 15px from 40em up.
 * Measured, not assumed. Negative margins on the row rather than `gap`, also
 * measured: the outer edge of the first column sits flush with the content
 * column, which a gap-based grid would inset by half a gutter and shift the
 * whole list right.
 */

/* --- Row / column ---------------------------------------------------------- */

.icl-row {
  display: flex;
  flex-wrap: wrap;
}

.icl-row > * {
  box-sizing: border-box;
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
}

@media print, screen and (min-width: 40em) {
  .icl-row > * {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/*
 * ⚠️ Only the NESTED row gets the negative margins, and getting this wrong is
 * invisible until measured. A top-level Foundation `.row` is `margin: 0 auto`
 * with a max-width; the gutter-cancelling negative margins apply to a row inside
 * a column, so its children line up with the column's own edge instead of being
 * inset by a second gutter. The card grid sits inside `.icl-letter-group`, which
 * is padded, and therefore needs them; the filter bar and the pagination rows sit
 * directly in the content column and do not.
 *
 * Applying them everywhere pulls the filter bar 10-15px left of the cards below
 * it and makes each filter a gutter wider — measured at 500/800/1500px against
 * the released version, which is how it was caught.
 */
.icl-cards {
  margin-left: -10px;
  margin-right: -10px;
}

@media print, screen and (min-width: 40em) {
  .icl-cards {
    margin-left: -15px;
    margin-right: -15px;
  }
}

/* --- Filter bar ------------------------------------------------------------
 * small-60 (100%) → medium-30 (50%) → xslarge-17 (28.333%), with the reset
 * button on xslarge-9 (15%) so the four together fill the row exactly.
 */
@media print, screen and (min-width: 40em) {
  .icl-filter {
    width: 50%;
  }
}

@media screen and (min-width: 71.875em) {
  .icl-filter {
    width: 28.3333333%;
  }

  .icl-filter--reset {
    width: 15%;
  }
}

.icl-filter--reset {
  text-align: right;
}

/*
 * The filter controls. Foundation styled these through ELEMENT selectors, with
 * no class to remove, so leaving them would look like a finished port and then
 * drop the bar to browser defaults when the layer goes — the same trap as the
 * contact form. Restated here, scoped to this plugin.
 */
.info-contact-list .icl-filter input[type="text"],
.info-contact-list .icl-filter select {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 18px;
  padding: 9px;
  border: 1px solid var(--color-border, #d5d6da);
  border-radius: 0;
  background-color: var(--color-surface, #fff);
  box-shadow: inset 0 1px 2px rgb(10 10 10 / 0.1);
  font-family: inherit;
  font-size: 14px;
  color: var(--color-text, #5c5c5d);
}

/* Foundation's `.button.secondary`. */
.icl-reset-button {
  display: inline-block;
  padding: 12.852px 15.12px;
  border: 1px solid transparent;
  border-radius: 0;
  background-color: #ebebeb;
  color: var(--color-text, #5c5c5d);
  font-size: 15.12px;
  line-height: 15.12px;
  text-decoration: none;
  cursor: pointer;
}

.icl-reset-button:hover,
.icl-reset-button:focus-visible {
  background-color: #d5d5d5;
  color: var(--color-text, #5c5c5d);
}

/* --- Letter groups and cards ----------------------------------------------
 * Foundation's block grid: small-up-1 → medium-up-2 → xslarge-up-3.
 */
.icl-letter-group {
  padding-left: 10px;
  padding-right: 10px;
}

@media print, screen and (min-width: 40em) {
  .icl-letter-group {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.icl-card {
  width: 100%;
}

@media print, screen and (min-width: 40em) {
  .icl-card {
    width: 50%;
  }
}

@media screen and (min-width: 71.875em) {
  .icl-card {
    width: 33.3333333%;
  }
}

/* --- Pagination ------------------------------------------------------------
 * Two copies exist, one for each breakpoint, differing only in `max-size`
 * (5 links vs 3). Foundation's show-for-medium / hide-for-medium swapped them.
 */
.icl-pagination__wide,
.icl-pagination__narrow {
  text-align: center;
}

.icl-pagination__wide {
  display: none;
}

@media print, screen and (min-width: 40em) {
  .icl-pagination__wide {
    display: block;
  }

  .icl-pagination__narrow {
    display: none;
  }
}

/* --- Empty / loading state ------------------------------------------------- */

.icl-empty {
  width: 100%;
  text-align: center;
}

/* Foundation's `.subheader`: a lighter, less emphatic heading. */
.icl-empty__title {
  color: var(--color-text-muted, #8a8a8a);
  font-weight: normal;
}