/*
 * comsolit_events — the frontend layout for the event list, the detail page and
 * the registration form.
 *
 * Hand-written plain CSS, no build. Replaces the 60-column Foundation float
 * grid, Foundation's BLOCK grid (`small-up-1 mlarge-up-2 xslarge-up-3`), the
 * `hide-for-*` / `show-for-*` visibility classes and the `.callout` component,
 * all of which came from comsolit_t3base's stylesheet — the `legacy` cascade
 * layer stgag/theme is deleting (app repo open-issues #82). This was the last
 * extension on the list.
 *
 * ⚠️ IN Resources/Public/Css/, NOT Resources/Public/stylesheets/. The latter is
 * the gulp SCSS build's output and this package still HAS that build — its
 * backend module is AngularJS with its own SCSS.
 *
 * ⚠️ SCOPE IS THE GRID. The list is still an AngularJS application —
 * `ng-repeat`, the ui-bootstrap `<pagination>`, `comsolit-dropdown`,
 * `comsolit-tree-select`, `kt-date-range-picker`. None of that is Foundation.
 * Neither are `.button`, `.thumbnail` or the look of `.summary-list-item`,
 * `.item-date`, `.event-show` and friends, which is t3base's own component CSS
 * in the same stylesheet and goes with the legacy layer itself.
 *
 * ⚠️ The block grid was NOT counted by the ratchet. `bin/check-foundation-classes.sh`
 * matches `^(small|medium|large)-[0-9]+$`, which `small-up-1` does not, so the
 * summary list's three responsive column counts never appeared in the 207. The
 * same undercount that hid `Partials/Baby/FormFields.html` in stgag_babygalerie,
 * from the other direction.
 *
 * ⚠️ Breakpoints are t3base's:
 *   smed     26.25em   (420px)   the list item's date block swaps
 *   medium   40em      (640px)   gutter 10px -> 15px
 *   mlarge   48em      (768px)   summary list 2-up; filter bar halves
 *   large    62em      (992px)   filter bar 6-up; detail page splits
 *   xslarge  71.875em  (1150px)  summary list 3-up
 *   xlarge   87.5em    (1400px)  filter bar re-balances
 * Media-query lengths resolve against the initial font size, so they are immune
 * to the legacy layer's `html { font-size: 105% }`. `1rem` is not — it is 16.8px
 * today, which is where the measured values below come from.
 *
 * Measured against production /events, /events/detail/…/geburtsvorbereitung-im-
 * wasser-4/ and its /register at 500 / 800 / 1100 / 1700px.
 */

/* --- Rows and columns ------------------------------------------------------
 *
 * ⚠️ NO `max-width` on the rows. Foundation caps a top-level row at 82rem =
 * 1377.6px against the inflated root, but the theme's content frame is 1440px
 * from about 1420px up — reproducing that cap left comsolit_staff and
 * stgag_babygalerie 62px narrower and 31px inset from every other element on
 * the page, and cost each of them a follow-up release. It only binds above
 * ~1420px, so a width sweep that stops at 1400 cannot see it.
 *
 * ⚠️ Rows that sit INSIDE a column take the gutter-cancelling negative margin
 * (`.ev-row--nested`), the ones directly on the page do not. That is Foundation's
 * own `.row .row` rule, and it is what keeps a nested row's columns aligned with
 * the column that contains them: measured 633px inside a 603px content box on
 * the detail page.
 */

.ev-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
}

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

.ev-row--nested {
    width: auto;
    margin-left: -10px;
    margin-right: -10px;
}

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

    .ev-row--nested {
        margin-left: -15px;
        margin-right: -15px;
    }
}

.ev-center {
    text-align: center;
}

.ev-right {
    text-align: right;
}

/* --- Event list: the filter bar --------------------------------------------
 * Four identical filters plus the date picker and the reset button:
 *   small-60 mlarge-30 large-10
 *   small-60 mlarge-30 large-11 xslarge-12 xlarge-13   (date)
 *   small-60 mlarge-30 large-9  xslarge-8  xlarge-7    (reset)
 */

@media print, screen and (min-width: 48em) {
    .ev-filter > * {
        width: 50%;
    }
}

@media screen and (min-width: 62em) {
    .ev-filter > * {
        width: 16.6666667%;
    }

    .ev-filter__date {
        width: 18.3333333%;
    }

    .ev-filter__reset {
        width: 15%;
    }
}

@media screen and (min-width: 71.875em) {
    .ev-filter__date {
        width: 20%;
    }

    .ev-filter__reset {
        width: 13.3333333%;
    }
}

@media screen and (min-width: 87.5em) {
    .ev-filter__date {
        width: 21.6666667%;
    }

    .ev-filter__reset {
        width: 11.6666667%;
    }
}

/* --- Event list: the summary cards -----------------------------------------
 * Foundation's block grid, `small-up-1 mlarge-up-2 xslarge-up-3`.
 */

@media print, screen and (min-width: 48em) {
    .ev-cards > * {
        width: 50%;
    }
}

@media screen and (min-width: 71.875em) {
    .ev-cards > * {
        width: 33.3333333%;
    }
}

/*
 * The list item shows a compact date block on phones and a stacked one from
 * smed up — `hide-for-smed` / `show-for-smed`.
 */

.ev-date--stacked {
    display: none;
}

@media print, screen and (min-width: 26.25em) {
    .ev-date--inline {
        display: none;
    }

    .ev-date--stacked {
        display: block;
    }
}

/* --- Pagination and the empty state ---------------------------------------- */

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

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

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

/*
 * ℹ️ The "no events" box was `large-60 text-center columns` — a size class only
 * from 62em up — so below that it was a floated shrink-to-fit box and
 * `text-center` centred the text inside the box rather than in the row, i.e. did
 * nothing. Full width at every size here, as in stgag_babygalerie.
 */

.ev-empty {
    width: 100%;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}

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

/* --- Detail page -----------------------------------------------------------
 * medium-60 large-35 for the body, medium-60 large-25 for the image.
 */

@media screen and (min-width: 62em) {
    .ev-detail__main {
        width: 58.3333333%;
    }

    .ev-detail__aside {
        width: 41.6666667%;
    }
}

/* The repeated label / value pairs: small-60 medium-15 and small-60 medium-45. */

@media print, screen and (min-width: 40em) {
    .ev-label {
        width: 25%;
    }

    .ev-value {
        width: 75%;
    }
}

/* --- Registration form -----------------------------------------------------
 *
 * The event summary above the form: small-20 large-10 against
 * small-40 large-50.
 */

.ev-info__label {
    width: 33.3333333%;
}

.ev-info__value {
    width: 66.6666667%;
}

@media screen and (min-width: 62em) {
    .ev-info__label {
        width: 16.6666667%;
    }

    .ev-info__value {
        width: 83.3333333%;
    }
}

/*
 * The two form blocks — personal details, and billing when the event has a
 * price. `large-30 small-60`, and full width when there is no price at all,
 * which the template used to express by emitting no size class.
 */

@media screen and (min-width: 62em) {
    .ev-form-col {
        width: 50%;
    }
}

/* Every label / field pair inside a form block: small-20 against small-40. */

.ev-field__label {
    width: 33.3333333%;
}

.ev-field {
    width: 66.6666667%;
}

/* Post code and town share one field row: small-25 and small-35. */

.ev-zip {
    width: 41.6666667%;
}

.ev-city {
    width: 58.3333333%;
}

/* Options and comments sit side by side from medium: small-60 medium-30. */

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

/* The conditions heading is small-60 medium-10; its checkbox row is full width. */

@media print, screen and (min-width: 40em) {
    .ev-conditions__label {
        width: 16.6666667%;
    }
}

/* Back and submit, and the two-thirds boxes for the captcha and the closed
 * notice. */

.ev-actions > * {
    width: 50%;
}

.ev-two-thirds {
    width: 66.6666667%;
}

/* --- Event slider navigation ----------------------------------------------
 *
 * The prev/next arrows under the slider. Was `column medium-10 float-right`.
 *
 * ⚠️ Below 40em it is FULL WIDTH, not shrink-to-fit. Foundation's `.column` base
 * is `width: 100%`, and a size class only narrows it from `medium` up — so on a
 * phone the wrapper spans the slider and the two floated arrows land on its
 * outer edges, left and right. Setting `width: auto` here instead (as the first
 * version did) shrink-wrapped it and parked both arrows together on the right,
 * which is production's ≥640px layout shown at every width. Measured at 600px:
 * production's nav is 585px wide with the arrows 469px apart.
 *
 * ⚠️ These arrows are the first confirmed casualty of open-issues #81: t3base
 * pins them with `position: relative` / `float`, that rule sits in the theme's
 * `legacy` cascade layer, and `swiper-bundle.min.css` is UNLAYERED — so on the
 * theme they fly to the outer edges instead of sitting side by side under the
 * slider. Nothing here changes that; the wrapper is the only Foundation class in
 * this template and #81 is about the buttons inside it.
 */

.ev-slider-nav {
    margin-left: auto;
}

@media screen and (min-width: 792px) {
    .ev-slider-nav {
        width: 16.6666667%;
    }
}

/* --- Callouts --------------------------------------------------------------
 *
 * ⚠️ Restated from Foundation's `.callout`. These carry the registration
 * result — the success message after a booking and the validation errors before
 * one — so they are the least cosmetic thing in this file. Values measured from
 * the legacy layer: 1px solid rgba(10,10,10,.25), 1rem padding, 1rem bottom
 * margin, and the tinted backgrounds Foundation derives from its $success and
 * $alert colours.
 */

.ev-callout {
    position: relative;
    margin: 0 0 1rem 0;
    padding: 1rem;
    border: 1px solid rgba(10, 10, 10, 0.25);
    border-radius: 0;
    background-color: #fff;
    color: #5c5c5d;
}

.ev-callout > :first-child {
    margin-top: 0;
}

.ev-callout > :last-child {
    margin-bottom: 0;
}

.ev-callout--success {
    background-color: rgb(225, 250, 234);
}

.ev-callout--alert {
    background-color: rgb(252, 220, 222);
}

.ev-callout--alert ul {
    list-style-type: none;
    margin: 0;
}