/*
 * The blog archive (/de/blog-archiv/, templates blog/*.html): the Magazin's plugin
 * markup -- Bootstrap grid and netigo utility classes, written for the netigo theme --
 * laid out inside the KSW shell (theme.css of the Goethe-Portal's snapshot), which has
 * no Bootstrap. Only what the migrated posts use, scoped to the page's <main>; the
 * shell header and footer keep their own styles.
 */

/* The shell header sticks below the django CMS toolbar while editing. */
.cms-toolbar-expanded #header { top: 46px; }

/* Page frame ------------------------------------------------------------- */

.blog main { padding-top: 2rem; }
.blog-post,
.blog-overview { max-width: 60rem; margin-inline: auto; }
.blog-back { margin-bottom: 1.5rem; font-size: .875rem; }
.blog-back a::before { content: "\2190\00a0"; }
.blog-series-post { margin-bottom: .5rem; font-size: .875rem; }
.blog-title { margin-bottom: 1rem; }
.blog-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-bottom: 2rem; font-size: .875rem; color: #555; }
.blog-header { margin-bottom: 2rem; }

/* Text ------------------------------------------------------------------- */

.blog main p { margin-bottom: 1rem; }
.blog main h2 { margin: 2.5rem 0 1rem; }
.blog main h3,
.blog main .h3 { margin: 2rem 0 .75rem; font-size: 1.375rem; line-height: 1.25; font-weight: 500; }
.blog main a { text-decoration: underline; text-underline-offset: .15em; }
.blog main ul,
.blog main ol { margin: 0 0 1rem 1.5rem; }
.blog main ul { list-style: disc; }
.blog main ol { list-style: decimal; }
.blog main sup { line-height: 0; }
.blog main blockquote { margin: 2rem 0; }
.blog main table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; }
.blog main th,
.blog main td { padding: .5rem; border-bottom: 1px solid #ddd; text-align: left; vertical-align: top; }
.blog main .lead { font-size: 1.25rem; line-height: 1.5; }
.blog main .dj-subtitle { margin-bottom: 1rem; font-family: var(--font-suisse-works); font-size: 1.25rem; }
.blog main .text-body-small,
.blog main .caption { font-size: .875rem; }
.blog main .text-dark-60 { color: #666; }
.blog main .text-center { text-align: center; }
.blog main .fw-bold { font-weight: 700; }

/* Grid (the Bootstrap classes of the plugin templates) ------------------- */

.blog main .container,
.blog main .container-fluid { width: 100%; max-width: none; padding-inline: 0; margin-inline: auto; }
.blog main .row { display: flex; flex-wrap: wrap; margin-inline: -.75rem; }
.blog main .row > * { width: 100%; max-width: 100%; padding-inline: .75rem; }
.blog main .col { flex: 1 0 0; }
.blog main .col-6 { width: 50%; }
.blog main .col-12 { width: 100%; }
@media (min-width: 768px) {
  .blog main .col-md-6 { width: 50%; }
}
@media (min-width: 992px) {
  .blog main .col-lg-3 { width: 25%; }
  .blog main .col-lg-4 { width: 33.3333%; }
  .blog main .col-lg-6 { width: 50%; }
  .blog main .col-lg-8 { width: 66.6667%; }
  .blog main .col-lg-12 { width: 100%; }
  .blog main .offset-lg-6 { margin-left: 50%; }
  .blog main .mt-lg-0 { margin-top: 0; }
  .blog main .mb-lg-0 { margin-bottom: 0; }
  .blog main .text-lg-end { text-align: right; }
  .blog main .justify-content-lg-end { justify-content: flex-end; }
}
@media (min-width: 1200px) {
  .blog main .col-xl-6 { max-width: 75%; }
}
.blog main .d-flex { display: flex; }
.blog main .flex-wrap { flex-wrap: wrap; }
.blog main .flex-column { flex-direction: column; }
.blog main .justify-content-center { justify-content: center; }
.blog main .align-items-center { align-items: center; }
.blog main .gap-1 { gap: 1rem; }
.blog main .gap-0-5 { gap: .5rem; }

/* Spacing (Bootstrap and the netigo .space blocks) ----------------------- */

.blog main .my-5 { margin-block: 2rem; }
.blog main .mt-1 { margin-top: .25rem; }
.blog main .mt-2 { margin-top: .5rem; }
.blog main .mb-1-5 { margin-bottom: 1.5rem; }
.blog main .mb-4 { margin-bottom: 1.5rem; }
.blog main .mb-5 { margin-bottom: 3rem; }
.blog main .space.mb-xs { margin-bottom: .5rem; }
.blog main .space.mb-md { margin-bottom: 1.5rem; }
.blog main .space.mb-lg { margin-bottom: 3rem; }
.blog main .space.mb-xl { margin-bottom: 4rem; }
.blog main .space.mb-xxl { margin-bottom: 5rem; }

/* Images, galleries, video ----------------------------------------------- */

.blog main img { max-width: 100%; height: auto; }
.blog main .figure { margin: 0 0 1.5rem; }
.blog main .figure .caption { margin-top: .5rem; margin-bottom: 0; }
.blog main .sticky-top { position: sticky; top: 8rem; }
.blog main .videowrapper { position: relative; aspect-ratio: 16 / 9; }
.blog main .videowrapper iframe,
.blog main .videowrapper video { position: absolute; inset: 0; width: 100%; height: 100%; }
.blog main .gallery-row { margin-block: 2rem; overflow: hidden; }
.blog main .gallery-row .swiper-wrapper { display: flex; gap: 1rem; overflow-x: auto; }
.blog main .gallery-row .swiper-slide { flex: 0 0 auto; max-width: 80%; }
/* The fullscreen gallery modal needs the netigo/Bootstrap script, which the archive does not load. */
.blog main .modal,
.blog main .swiper-controls { display: none; }

/* Footnotes, sources ------------------------------------------------------ */

.blog main .dj-footnotes { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid #ddd; font-size: .875rem; }
.blog main .dj-footnotes:empty { display: none; }
.blog main .dj-notes-label { padding-bottom: .5rem; }

/* Overview: chronology and title index ------------------------------------ */

.blog-intro { margin-bottom: 2rem; }
.blog-jump { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: 1.5rem; }
.blog main .blog-list { margin-left: 0; list-style: none; }
.blog-list li { padding-block: .375rem; border-bottom: 1px solid #eee; }
.blog-list time { display: inline-block; min-width: 6.5rem; color: #666; font-variant-numeric: tabular-nums; }
.blog-list .blog-authors,
.blog-list .blog-year { color: #666; font-size: .875rem; }
.blog-list .blog-authors::before { content: "\2013\00a0"; }
.blog-chronicle,
.blog-index { margin-top: 3rem; }
.blog-chronicle h3,
.blog-index h3 { scroll-margin-top: 8rem; }