/*
 * comsolit_staff — the frontend person lists' layout.
 *
 * Hand-written plain CSS, no build. Replaces the Foundation grid used by
 * PersonList.html, GroupedPersonList.html and Person/Footer.html, which came
 * from comsolit_t3base's stylesheet — the `legacy` cascade layer stgag/theme is
 * deleting (app repo open-issues #82).
 *
 * ⚠️ In Resources/Public/Css/, NOT Resources/Public/stylesheets/. The latter is
 * the gulp SCSS build's output (`scss.build` in gulp.config.json), and this
 * package still HAS that build — its backend module is still AngularJS with its
 * own SCSS, so gulp and node_modules stay. Hand-written CSS filed in the build's
 * destination is indistinguishable from a generated file.
 *
 * ⚠️ SCOPE IS LAYOUT ONLY. These templates are still an AngularJS application —
 * `ng-repeat`, `ng-class`, the ui-bootstrap `<pagination>`, and four external
 * Angular components (comsolit-angular-tree-select at 1,061 lines,
 * comsolit-angular-dropdown-toggle, comsolit-card-flip, comsolit-reset-input).
 * None of that is Foundation and none of it is touched here.
 *
 * ⚠️ The grid is 60 columns and the breakpoints are t3base's:
 *   smed   26.25em    small-30  -> 50%      medium-30 -> 50%
 *   medium 40em       large-13  -> 21.667%  large-8   -> 13.333%
 *   mlarge 48em       small-60 / large-60 -> 100%
 *   large  62em
 * Media-query lengths resolve against the initial font size, so they are immune
 * to the legacy layer's `html { font-size: 105% }`.
 *
 * Verified against the pre-port rendering of /personal: cards 2-up at 500px
 * (219@24, 219@243), 3-up at 800 (246@24/270/515), 4-up at 1100 (271@0/271/543/814)
 * and 1400 (344@4/348/692/1037); footer halves 109/109 at 500.
 */

/* --- Rows ----------------------------------------------------------------- */

.staff-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

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

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

/*
 * ⚠️ NO `max-width` here, and that is a correction to 13.4.4.
 *
 * Foundation caps a row at `max-width: 82rem` and centres it — 1377.6px against
 * the legacy layer's inflated 16.8px root — and 13.4.4 reproduced that
 * faithfully. But Foundation's idea of a page is not the theme's: stgag_theme's
 * content frame is 1440px wide from about 1420px up, so above that width the
 * person lists sat 62px narrower and 31px inset from every other content element
 * on the page. Measured on /personal at 1700px: the frame is 1440@123 and the
 * lists were 1378@154.
 *
 * ⚠️ It only binds above ~1420px, which is exactly why the 500 / 800 / 1100 /
 * 1400px checks that verified 13.4.4 all passed — 1400 is just under the
 * threshold. A width sweep that stops at 1400 cannot see this class of defect;
 * the same cap was removed from stgag_babygalerie in the same round.
 *
 * The lists now take their width from the theme's container, which is what any
 * other content element on the page does.
 */

/* --- Filter bar: small-60 / medium-30 / large-13, reset on large-8 --------- */

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

@media screen and (min-width: 62em) {
    .staff-filter {
        width: 21.6666667%;
    }

    .staff-filter--reset {
        width: 13.3333333%;
    }
}

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

/* Foundation's `.button.secondary`. */
.staff-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;
    transition: background-color 0.25s ease-out, color 0.25s ease-out;
}

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

/* --- Card grid ------------------------------------------------------------
 * Foundation's block grid. The template switches between three combinations
 * with ng-class on `listMode`, so each is a modifier here:
 *   --4  small-up-1 smed-up-2 mlarge-up-3 large-up-4   (listMode '0')
 *   --3  small-up-1 smed-up-2 mlarge-up-3              (listMode 'cat', grouped)
 *   --2  small-up-1 smed-up-2 mlarge-up-2              (listMode 'maincontacts')
 */

/*
 * ⚠️ The gutter is a `gap`, not padding on each card. Foundation put padding on
 * every column and cancelled the outer half with a negative margin on the row;
 * that only works when the container has matching padding to eat. stgag_theme
 * serves some of these pages with a FULL-BLEED container (measured: /personal is
 * 1085px at x=0 in an 1100px viewport), where the negative margin would push the
 * first card off the left edge of the page.
 *
 * `gap` puts the space only BETWEEN cards, so the first card is flush with its
 * container at every width and the list lines up with the section heading above
 * it — which is what production achieves via the negative margin, and what the
 * events slider on the same pages already does. Measured at 1440px: heading and
 * first card both at x=337 on production, both at x=376 here; before this they
 * were 376 and 391.
 */

.staff-cards {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 20px;
}

.staff-cards > * {
    box-sizing: border-box;
    width: 100%;
}

@media print, screen and (min-width: 40em) {
    .staff-cards {
        column-gap: 30px;
    }
}

@media print, screen and (min-width: 26.25em) {
    .staff-cards--2 > *,
    .staff-cards--3 > *,
    .staff-cards--4 > * {
        width: calc((100% - 20px) / 2);
    }
}

@media print, screen and (min-width: 40em) {
    .staff-cards--2 > *,
    .staff-cards--3 > *,
    .staff-cards--4 > * {
        width: calc((100% - 30px) / 2);
    }
}

@media print, screen and (min-width: 48em) {
    .staff-cards--3 > *,
    .staff-cards--4 > * {
        width: calc((100% - 60px) / 3);
    }
}

@media screen and (min-width: 62em) {
    .staff-cards--4 > * {
        width: calc((100% - 90px) / 4);
    }
}

/* --- Person footer: two halves, the second right-aligned ------------------ */

/*
 * ⚠️ This one IS a nested row and does take the gutter-cancelling negative
 * margins — it sits inside a card column, where Foundation applies them. Without
 * them the two halves came out 99@34 against the reference's 109@24: inset by one
 * gutter on the left and a gutter narrower overall. The filter and card rows above
 * sit directly in the content column and must NOT have them; which is which can
 * only be settled by measuring.
 */
.staff-footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-left: -10px;
    margin-right: -10px;
}

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

.staff-footer-row > * {
    box-sizing: border-box;
    width: 50%;
    padding-left: 10px;
    padding-right: 10px;
}

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

.staff-footer-col--end {
    text-align: right;
}

/*
 * ⚠️ Foundation's `small-offset-30` — a half-width offset — was applied from
 * Angular via `ng-class="{'small-offset-30': !person.email}"`, i.e. it pushes the
 * info button across when a person has no e-mail and the first half is absent.
 * The modifier had to be renamed in the ng-class expression too, not just in the
 * static markup.
 */
.staff-footer-col--offset {
    margin-left: 50%;
}

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

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

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

/* --- Pagination: two copies, one per breakpoint --------------------------- */

.staff-pagination {
    width: 100%;
    text-align: center;
}

.staff-pagination--wide {
    display: none;
}

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

    .staff-pagination--narrow {
        display: none;
    }
}