/*
 * Magazin additions to the netigo theme (theme.css), loaded after it and after the
 * plugin styles (sekizai block "css"). Only what the template overrides in
 * magazin_templates cannot express as legacy markup; the class list with the
 * place each dj- class is served is magazin_templates/README.md.
 */

/* The highlights module (KSW_djangocms_highlights editorial.css) sets the KSW design
   system font; in the Magazin its cards are legacy cards in the theme font. */
.module-highlights {
  font-family: inherit;
}

/* Legacy spacer (dj_plugins/spacer.html: div.space.<value>), migrated as a frontend
   spacing with the nearest Bootstrap size plus dj-space-<value>: the theme's sizes. */
.dj-space-mb-md,
.dj-space-mb-lg,
.dj-space-mb-xl,
.dj-space-mb-xxl {
  overflow: hidden;
}
div.dj-space-mb-md {
  margin-bottom: 4rem !important;
}
div.dj-space-mb-lg {
  margin-bottom: 6rem !important;
}
div.dj-space-mb-xl {
  margin-bottom: 8rem !important;
}
div.dj-space-mb-xxl {
  margin-bottom: 10rem !important;
}

/* The legacy start and magazine templates (home.html, magazin.html) did not render
   the subtitle slot the migration put into article_header. */
.dj-template-home .dj-subtitle,
.dj-template-magazin .dj-subtitle {
  display: none;
}

/* Start page intro (home.html): the header image fills the parallax layer, as the old
   one did with its width of 3840 px and img-fluid. */
.module-article-teaser .img-parallax img {
  width: 100%;
}

/* Article hero of the article1 variant (magazin_theme/article.html): theme.css covers
   the media layer with its .img; the migrated image carries img-fluid only. */
.module-hero .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The start page's button slots render as columns of the intro's teaser row
   (grid_row.html: links order-1, text order-2, rechts order-3). The old row had the
   right slot under the text in the same column and the left buttons at the bottom of
   the whole row: at lg the row becomes a two-column grid with the left slot over both
   lines. */
@media (min-width: 992px) {
  .module-article-teaser .bg-tj-2026 > .container > .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .module-article-teaser .bg-tj-2026 > .container > .row > * {
    width: auto;
    margin-left: 0;
  }
  .module-article-teaser .bg-tj-2026 .dj-slot-buttons-links {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .module-article-teaser .bg-tj-2026 .order-2 {
    grid-column: 2;
    grid-row: 1;
  }
  .module-article-teaser .bg-tj-2026 .dj-slot-buttons-rechts {
    grid-column: 2;
    grid-row: 2;
  }
}

/* Footnotes and sources (footnotes_row.html, sources_row.html in content_base_dj.html):
   one row per group with the label in the left half. The migration made a text per
   footnote, cms/plugins/text.html renders a row for each: a run of rows keeps the
   label on its first and the bottom margin under its last. Sources come first, as
   in the old template. */
.dj-footnotes {
  display: flex;
  flex-direction: column;
}
.dj-sources-row {
  order: -1;
}
.dj-footnotes-row:has(+ .dj-footnotes-row),
.dj-sources-row:has(+ .dj-sources-row) {
  margin-bottom: 0 !important;
}
.dj-footnotes-row + .dj-footnotes-row > .dj-notes-label,
.dj-sources-row + .dj-sources-row > .dj-notes-label {
  display: none !important;
}
@media (min-width: 992px) {
  .dj-footnotes-row + .dj-footnotes-row > .dj-notes-label + div,
  .dj-sources-row + .dj-sources-row > .dj-notes-label + div {
    margin-left: 50%;
  }
}

/* Topic page header (magazin_theme/topic.html): topic2.html and topic3.html opened a
   second main#main inside the one of base_dj.html, so the header height was padded
   twice above the module-header. */
.dj-template-topic2 .module-header,
.dj-template-topic3 .module-header {
  padding-top: var(--header-height, 68px);
}

/* Header image of a topic page (magazin_theme/topic.html): bootstrap.css makes .figure
   an inline-block that shrinks to the image's own width. The live page's image is an
   IIIF image whose sizes fall back to 100vw, so it fills the container; the migrated
   one is a 992 px thumbnail and stayed narrower inside the topic2 card frame. */
.dj-template-topic2 .module-header + .container .figure,
.dj-template-topic3 .module-header + .container .figure {
  display: block;
}

/* Card images (includes/dj_card.html): the same inline-block .figure. The live cards'
   IIIF images have sizes that fall back to 100vw, so the figure takes the column's
   width; the migrated 992 px thumbnails (and the smaller originals) left it narrower
   than its column. .card-img-top (bootstrap.css) then fills the figure. */
.card .article-image .figure {
  display: block;
}

/* Search field of the Beiträge page (search_form.html in magazin_templates): the old
   filter.html set its placeholder "Ich suche" grey and fully opaque in its own style block. */
#id_q::placeholder {
  opacity: 1;
  color: grey;
}