/*
 * stgag_babygalerie — the frontend layout for the gallery, the detail page,
 * the statistics page and the teaser plugin.
 *
 * Hand-written plain CSS, no build. Replaces the 60-column Foundation float
 * grid, the `hide-for-*` / `show-for-*` visibility classes and Foundation's
 * Equalizer, all of 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 and this package still HAS that build — its
 * backend module is AngularJS with its own SCSS, which imports Foundation in
 * full. Hand-written CSS filed in the build's destination is indistinguishable
 * from a generated file.
 *
 * ⚠️ SCOPE IS THE GRID. These templates are still an AngularJS application —
 * `ng-repeat`, the ui-bootstrap `<pagination>`, `comsolit-dropdown`,
 * `kt-date-range-picker`, `reset-input`. None of that is Foundation and none of
 * it is touched here. Neither are the Foundation *components* the templates
 * still name — `.button`, `.thumbnail`, `.pagination`, `.close-button` — nor the
 * look of `.baby`, `.babygallery-list`, `.babygalerie-show`, `.stats-details`
 * and friends, which is t3base's own component CSS sitting in the same file.
 * Those go with the legacy layer itself, which open-issues #82 has always
 * described as the separate, larger job.
 *
 * ⚠️ The breakpoints are t3base's, and this extension uses more of them than
 * any other package in the app:
 *   smed     26.25em   (420px)
 *   medium   40em      (640px)   gutter 10px -> 15px
 *   mlarge   48em      (768px)
 *   large    62em      (992px)
 *   xslarge  71.875em  (1150px)
 *   xlarge   87.5em    (1400px)
 * 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.
 *
 * Widths are the 60-column grid resolved: `small-30` is a half, `large-38` is
 * 63.333%, `smed-7` is 11.667%. Measured against production at 500 / 800 / 1100
 * / 1500px on /babygalerie/, /babygalerie/detail/49306, /babystatistik and
 * /fachbereiche/frauenklinik/angebot/schwangerschaft-und-geburt.
 */

/* --- Rows and columns ------------------------------------------------------
 *
 * ⚠️ NO negative margins here, unlike stgag_factsfigures and the theme's own
 * container elements — and that is measured, not an oversight.
 *
 * On production these are NESTED rows: t3base wraps page content in
 * `.row > .columns`, Foundation gives a nested row a gutter-cancelling negative
 * margin, and the gallery ends up flush with the content column. Under
 * stgag_theme they are TOP-LEVEL rows instead — the theme's page templates have
 * no `.row` — so Foundation gave them `max-width: 82rem` and auto margins, which
 * is what has been holding this page together: the theme serves /babygalerie
 * with a FULL-BLEED container from 62em up (measured: 1085px wide at x=0 in an
 * 1100px viewport, no side padding at all), and the row's own max-width is the
 * only thing constraining the gallery there.
 *
 * Porting the negative margin across anyway put the row at x=-15 and gave the
 * page a horizontal scrollbar. So this reproduces the top-level row: 82rem
 * against the legacy layer's 16.8px root is 1377.6px, measured, and written in px
 * so it does not silently become 1312px the day that root goes. The two list
 * pages override the cap away further down — see the note there.
 *
 * ⚠️ The consequence is that the gallery stays inset by one gutter from the
 * theme's content column below 62em, where that column IS padded — the same 10px
 * misalignment the container elements had. Fixing it belongs in the theme's page
 * template, not here: the extension cannot both cancel a gutter its container
 * has and survive a container that has none.
 */

.bgal-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
    max-width: 1377.6px;
    margin-left: auto;
    margin-right: auto;
}

/*
 * ⚠️ `align-items: flex-start`, because the columns being replaced were FLOATS
 * and floats keep their natural height. Flex's default would silently equalise
 * every column in a line — on the statistics page that stretched the totals
 * column from 245px to 363px. Invisible there, since the column has no
 * background of its own, but it is the kind of difference that only shows up
 * later, on a column that does. The detail page opts back into stretch below,
 * where the Equalizer used to do exactly that job.
 */

/*
 * ⚠️ `width: 100%` is load-bearing, not decoration. `.details-wrapper` is a
 * COLUMN flex container (legacy layer), and a flex item with `margin-left: auto`
 * and `margin-right: auto` does not stretch — the auto margins win over
 * `align-self: stretch`, so the row shrink-wrapped to its content and centred
 * itself. On the detail page that took the share row from 505px to 367px and
 * squeezed "E-Card senden" onto two lines. With an explicit width there is no
 * free space for the auto margins to absorb, and they only bite where the
 * max-width does.
 */

/*
 * The nested-row variant, for rows that sit INSIDE a column rather than
 * directly in the page: `.baby-share` in the detail column and the totals rows
 * on the statistics page. Foundation gives those the gutter-cancelling negative
 * margin and no max-width, and here it is safe — they are deep inside a column,
 * not at the page edge, so there is nothing to overflow. Measured on production:
 * the share row is 505px inside a 490px content box, and a totals row 451px
 * inside 465px.
 *
 * ⚠️ `width: auto`, not 100%. With `width: 100%` the box would be the content
 * width and the negative margins would only shift it left.
 */

.bgal-row--nested {
    width: auto;
    max-width: none;
    margin-left: -10px;
    margin-right: -10px;
}

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

/*
 * ⚠️ Every page of this extension drops the cap, so the gallery, the statistics
 * page and the detail page line up with the rest of the page instead of with
 * Foundation's idea of a page.
 *
 * `max-width: 82rem` is 1377.6px and the theme's content frame is 1440px wide
 * from ~1420px up, so the capped rows sat 62px narrower and 31px inset from
 * every other content element — measured at 1500px, where the frame is 1440@23
 * and the rows were 1378@54. Below ~1420px the cap never bound, which is why a
 * check at 500 / 800 / 1100 / 1400px did not catch it.
 *
 * ⚠️ ONLY `max-width`. Setting the margins here too would beat
 * `.bgal-row--nested`'s negative margins on specificity and quietly narrow the
 * totals rows on the statistics page by 20px.
 *
 * ⚠️ Scoped to `.tx-stgag-babygalerie`, which is the wrapper in
 * Layouts/Default.html. The teaser plugin does not use that layout and so keeps
 * the cap — it renders inside a container the theme currently blows out to
 * 3288px (see the README), and there the cap is the only thing keeping the cards
 * a sane size.
 */

.tx-stgag-babygalerie .bgal-row {
    max-width: none;
}

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

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

/*
 * Foundation's `.column.row` — a full-bleed block inside a column — is reset to
 * a plain block by `.row .column.row.row { padding: 0; margin: 0 }`, so it is
 * neither a row nor a column. The templates used it in four places and it is now
 * simply a `<div>`; these two classes are the only thing those places needed.
 */

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

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

/* --- Gallery list: the filter bar ------------------------------------------
 *
 * small-60 / medium-30 / large-11|16|13, and the two buttons medium-15 /
 * large-9|11. The medium row therefore wraps 30+30 then 15+15+30, which is what
 * production does at 800px: 393, 393 / 393, 196, 196.
 */

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

    .bgal-filter--reset,
    .bgal-filter--stats {
        width: 25%;
    }
}

@media screen and (min-width: 62em) {
    .bgal-filter--name {
        width: 18.3333333%;
    }

    .bgal-filter--date {
        width: 26.6666667%;
    }

    .bgal-filter--location {
        width: 21.6666667%;
    }

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

    .bgal-filter--stats {
        width: 18.3333333%;
    }
}

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

/* --- Gallery list: the baby grid -------------------------------------------
 * small-60 smed-30 medium-20 large-15 xlarge-12 — 1, 2, 3, 4, then 5 up.
 */

/*
 * ⚠️ The gutter is a `gap`, not padding on each card — see the note on
 * `.bgal-row` about why the negative-margin form is unsafe here. With `gap` the
 * first card is flush with its container, so the grid lines up with the section
 * heading above it. Measured at 1440px on
 * /fachbereiche/frauenklinik/angebot/schwangerschaft-und-geburt: heading and
 * first card both at x=376; before this the card sat at 391 while the heading and
 * the events slider on the same page were at 376.
 */

.bgal-cards,
.bgal-cards-plugin {
    column-gap: 20px;
}

.bgal-cards > *,
.bgal-cards-plugin > * {
    padding-left: 0;
    padding-right: 0;
}

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

    .bgal-cards > *,
    .bgal-cards-plugin > * {
        padding-left: 0;
        padding-right: 0;
    }
}

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

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

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

@media screen and (min-width: 87.5em) {
    .bgal-cards > * {
        width: calc((100% - 120px) / 5);
    }
}

/* --- The teaser plugin's grid ----------------------------------------------
 *
 * A coarser set — small-60 smed-60 medium-30 large-20 xlarge-20, so 1, 1, 2, 3,
 * 3 — because it sits in a narrower column. A separate class rather than a
 * modifier of `.bgal-cards`, since it shares none of its breakpoints.
 *
 * ⚠️ `.babywrap` is KEPT on the items. Below 40em the legacy layer hides
 * everything past the fourth with `.babygallery-plugin .babywrap:nth-of-type(1n+5)`,
 * so the teaser is four babies on a phone and eight everywhere else. Renaming the
 * class would silently have shown all eight on mobile. Restated below so the
 * behaviour survives the legacy layer's removal.
 */

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

@media screen and (min-width: 62em) {
    .bgal-cards-plugin > * {
        width: calc((100% - 60px) / 3);
    }
}

@media print, screen and (max-width: 39.99875em) {
    .babygallery-plugin .babywrap:nth-of-type(1n+5) {
        display: none;
    }
}

/* --- Pagination and the empty state ---------------------------------------
 *
 * Two `<pagination>` elements, one with five page links and one with three,
 * swapped at medium. `show-for-medium` / `hide-for-medium` were Foundation
 * visibility classes; they are the same two media queries either way.
 */

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

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

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

/*
 * ℹ️ One deliberate difference. The "no entries" 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. it did nothing. Full width at every size here, which is
 * what the class was asking for.
 */

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

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

/* --- Detail page -----------------------------------------------------------
 *
 * ⚠️ `align-items: stretch` replaces `data-equalizer` / `data-equalizer-watch`.
 * The image column and the details column were equalised by Foundation's
 * Equalizer with `data-equalize-on="medium"`, and — because `equalizeOnStack`
 * was not set — it skipped the job whenever the two were stacked. So they match
 * only once they sit side by side, which is exactly what flex stretch does:
 * 414/414 at 1100px on production, 476/279 at 800px where they are stacked.
 */

.bgal-detail {
    align-items: stretch;
}

@media screen and (min-width: 62em) {
    .bgal-detail__image {
        width: 63.3333333%;
    }

    .bgal-detail__info {
        width: 36.6666667%;
    }
}

/* small-36 / large-30 for the e-card button, small-12 / large-15 for the two
 * share buttons. */

.bgal-share__ecard {
    width: 60%;
}

.bgal-share__social {
    width: 20%;
}

@media screen and (min-width: 62em) {
    .bgal-share__ecard {
        width: 50%;
    }

    .bgal-share__social {
        width: 25%;
    }
}

/*
 * ⚠️ Restated from the legacy layer, which tightens the gaps between the three
 * share buttons with `.baby-share > .columns:first-child`,
 * `:nth-child(2)` and `:last-child`. Those selectors name the FOUNDATION class,
 * so renaming the columns silently dropped them: the e-card button lost 15px of
 * width and the two social buttons drifted apart. Same trap as `.babywrap`
 * above and as comsolit_staff's `small-offset-30`. The rem values are t3base's
 * own and are kept as rem, not resolved, since they are a hair's width either
 * way.
 */

.bgal-share__ecard {
    padding-right: 0;
}

.baby-share > .bgal-share__social:nth-child(2) {
    padding-right: 0.2976190476rem;
}

.baby-share > .bgal-share__social:last-child {
    padding-left: 0.2976190476rem;
}

@media print, screen and (min-width: 40em) {
    .baby-share > .bgal-share__social:nth-child(2) {
        padding-right: 0.4464285714rem;
    }

    .baby-share > .bgal-share__social:last-child {
        padding-left: 0.4464285714rem;
    }
}

/* --- E-card form (inside the modal) ----------------------------------------
 *
 * ⚠️ The modal is the ONE place where the rows are NOT nested. ECardModalCtrl
 * renders this template into a Foundation Reveal appended to <body>, so its rows
 * matched Foundation's top-level `.row` — `max-width: 82rem`, margin 0, no
 * negative margin — while its columns kept the gutter padding. Measured on
 * production: rows `margin: 0px; max-width: 1377.6px`, fields inset 10px (15px
 * from 40em) on each side — which is exactly what `.bgal-row` does, so the modal
 * needs no variant of its own. What it does need is `.bgal-ecard__fields`: the
 * inset came from the per-field `.row > .small-60.columns` pair, and dropping
 * those without restoring the padding would have widened every field by one
 * gutter on each side.
 *
 * ⚠️ The modal itself is still Foundation's Reveal component, applied from
 * JavaScript rather than from this template. Replacing it — as comsolit_docs
 * replaced its flipbook Reveals with native <dialog> — is an AngularJS job, not
 * a grid job, and is not part of this pass.
 */

.bgal-ecard__text {
    width: 90%;
}

.bgal-ecard__close {
    width: 10%;
    text-align: right;
}

.bgal-ecard__fields {
    padding-left: 10px;
    padding-right: 10px;
}

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

/* --- Statistics page ------------------------------------------------------- */

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

    .bgal-stats-heading {
        width: 66.6666667%;
    }
}

@media screen and (min-width: 62em) {
    .bgal-stats-filter {
        width: 18.3333333%;
    }
}

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

@media screen and (min-width: 62em) {
    .bgal-stats__names {
        width: 36.6666667%;
    }

    .bgal-stats__totals {
        width: 26.6666667%;
    }
}

/*
 * ⚠️ Each name row is its own flex row now. It used to be a bare block whose two
 * children were floated columns, so the row itself measured ZERO pixels high on
 * production — the rows only stacked because the floats did, inside the block
 * formatting context the enclosing column happened to establish. Nothing
 * depended on that height, so making it real changes no geometry, but the old
 * markup was not laying out the way it reads.
 *
 * ⚠️ No negative margin here, unlike `.bgal-row`: these were never rows, only
 * floated columns inside `.top-female-names`, so the children keep the gutter
 * padding and the box stays flush. Measured 54 + 411 across a 465px column.
 */

.bgal-name-row {
    display: flex;
    flex-wrap: nowrap;
}

.bgal-name-row__index {
    width: 16.6666667%;
}

.bgal-name-row__name {
    width: 83.3333333%;
}

@media print, screen and (min-width: 26.25em) {
    .bgal-name-row__index {
        width: 11.6666667%;
    }

    .bgal-name-row__name {
        width: 88.3333333%;
    }
}

@media print, screen and (min-width: 40em) {
    .bgal-name-row__index {
        width: 18.3333333%;
    }

    .bgal-name-row__name {
        width: 81.6666667%;
    }
}

@media print, screen and (min-width: 48em) {
    .bgal-name-row__index {
        width: 15%;
    }

    .bgal-name-row__name {
        width: 85%;
    }
}

@media screen and (min-width: 71.875em) {
    .bgal-name-row__index {
        width: 13.3333333%;
    }

    .bgal-name-row__name {
        width: 86.6666667%;
    }
}

/*
 * The totals block: two halves per line, and these ARE nested rows —
 * `.total-amount` pads by 1rem and the negative margin eats 10px of it back,
 * which is why production measures 451px inside a 465px column rather than the
 * 431px the padding alone would give.
 */

.bgal-total-row > * {
    width: 50%;
}