/*
 * post.css — the single post (work step 9).
 *
 * Measured against the legacy site: migration/bestand/seiten/news-media_detail_danube-wildisland-
 * ramsar-regional-initiative-approved.html (captured 2026-08-25) and the rules for
 * `.news-detail-section` in assets/merged.css.
 *
 * **What this file no longer does: the two columns.** The legacy site splits the detail page into
 * `col-md-8` with the text and `col-md-4` with the pictures, and so does the migrated site — but
 * since 2026-09-01 the body of a post is a Divi layout that carries that row itself, with a text
 * module on the left and the gallery module on the right. Divi lays it out; a grid here would be
 * a second opinion on the same question.
 *
 * Two earlier attempts stood here and are worth remembering, because both were wrong in a way
 * that is easy to repeat:
 *
 *   1. Until 2026-08-28 the text ran single-column, on the grounds that the importer delivered no
 *      gallery anyway. That was a fault of the importer, not a trait of the legacy site — 178 of
 *      the 179 articles have one, 982 pictures in total.
 *   2. Until 2026-09-01 the column was a CSS grid over `core/gallery`, with `display: contents`
 *      on the content wrapper. It worked, but it put posts in the block editor while pages were
 *      in the builder — two editors for one editorial team.
 *
 * What remains here is the frame the theme still owns: the head with title and meta row, the foot
 * with the way back — and the running-text rules inside `.et_pb_post_content`, which set the
 * legacy body sizes for anything the Divi presets do not already carry.
 *
 * Why this stands here and not in a Divi preset: title, meta and the back button are markup of
 * this theme (template-parts/post.php and post-foot.php), not Divi modules, so there is nothing a
 * preset could attach to — the same situation as with header and footer, argued at length in
 * sections.css.
 *
 * The breakpoints stand as numbers in the @media rules, not as tokens: CSS does not resolve
 * custom properties in media queries, the reference would have no effect and nobody would notice.
 */

/* ------------------------------------------------------------------ *
 * Content area
 * ------------------------------------------------------------------ */

/*
 * A head and a foot rather than one body: between them stands Divi's `divi/post-content` module
 * since 2026-09-01, so that the article body has ONE place the builder knows and does not appear
 * twice there. The head carries the padding above, the foot the one below.
 *
 * Both halves are complete markup of their own. They have to be: a Divi code module wraps its
 * output in `.et_pb_module`, so a container opened in the first half would be closed before the
 * content module ever ran.
 */
/*
 * The token holds a PAIR of values — 100px vertical, 80px horizontal — and therefore only works
 * inside the `padding` shorthand. `padding-top: 100px 80px` is not a value CSS accepts: the
 * declaration is dropped without a word, and from the split on 2026-09-01 the 100px above the
 * title were silently gone. Measured against the legacy article, which has 101px there. So set
 * the pair and take back the side this half does not own.
 */
.wi-post__head {
  padding: var(--wi-post-padding-block);
  padding-bottom: 0;
}

.wi-post__foot {
  padding: var(--wi-post-padding-block);
  padding-top: 0;
}

/*
 * Divi hangs `et_pb_post` on every post through `post_class()`, and with the class comes the
 * spacing meant for a post in a LIST: 25px of padding and 60px of margin below it. On the single
 * post that lands between the meta row and the body — 85 of the 154px by which the body stood too
 * low. The class stays; only the two values it brings are taken back.
 */
.wi-post.et_pb_post {
  margin-bottom: 0;
  /* `!important` against the house rule of two classes, and deliberately: the padding is what
   * Divi sets `!important` itself, so specificity cannot decide this one. Measured on
   * 2026-09-01 — neither two classes nor a `body` in front of them moved it. */
  padding-bottom: 0 !important;
}

/*
 * Two classes in the selector. The original reason — the font size came out of
 * `.wi-section--light h1`, class plus element — fell away with E11: size and line height now
 * stand in base.css on the bare type selector, which a single-class rule would beat as well.
 *
 * The selector stays two-class all the same, and for the spacing: the 50px below the post title
 * are a legacy value of their own that only happens to match the 50px from base.css. If one of
 * them moved, the title should follow its own token and not the one of the sections.
 */
.wi-post .wi-post__title {
  margin-top: 0;
  margin-bottom: var(--wi-post-title-space);
}

/*
 * Date and category side by side, left aligned. The legacy site calls the row `toolbar`; the name
 * is not carried over here, because nothing in it can be operated.
 */
.wi-post__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--wi-post-meta-gap);
  margin-bottom: var(--wi-post-meta-space);
}

.wi-post__date {
  font-size: var(--wi-post-meta-size);
  line-height: var(--wi-post-meta-line-height);
  color: var(--wi-color-ink);
}

/* ------------------------------------------------------------------ *
 * Running text
 *
 * A floor, not the styling: a Divi layout brings its own through the `wi-text-light` and
 * `wi-heading-light` presets. These rules catch a post that is not a Divi layout — one written
 * by hand, or one whose builder marks were lost.
 * ------------------------------------------------------------------ */

.et_pb_post_content p,
.et_pb_post_content li {
  font-size: var(--wi-font-size-body);
  font-weight: var(--wi-font-weight-light);
  line-height: var(--wi-line-height-body);
  color: var(--wi-color-ink);
}

.et_pb_post_content p {
  margin-bottom: var(--wi-space-paragraph);
}

/* `text-transform: none` stood here until 2026-08-27 as a counter-rule to the all-caps h2 of the
 * dark section. That one is gone — it was a mismeasurement (E11) — and with it the counter-rule
 * is moot. What remains is the colour. */
.et_pb_post_content h2,
.et_pb_post_content h3 {
  color: var(--wi-color-ink);
}

/*
 * The quotation used to stand here, scoped to `.et_pb_post_content`. It moved to base.css with
 * F14 of the frontend defect list and is unscoped there: quotations are not a trait of the
 * article — 6 of the 26 in the stock stand on a page, where this stylesheet is not even loaded.
 */

/*
 * The distance below an embedded block is NOT set here. Divi 5 zeroes the margin of a flex module
 * with `!important`, so a rule at this place loses no matter how it is written — measured on
 * 2026-09-01, two classes were not enough and only `!important` moved it. The value therefore
 * travels as a module attribute out of the importer (wi_divi_embed_spacing() in
 * tools/inhalts-importer/import.php), where it wins by itself and the editors find it in the
 * spacing panel of the module.
 */

/*
 * Divi's gallery prints the attachment TITLE above the caption, and the title of these pictures
 * is the file name of the camera (`_DMC6674`) — the right label for the media library and no text
 * for an article. Divi's switch covers title and caption together (E24), so the module turns the
 * pair on for the sake of the caption and the title is taken back here.
 */
.et_pb_post_content .et_pb_gallery_title {
  display: none;
}

/*
 * The same title, the same reason, the other place: Divi hands the attachment title to the
 * lightbox as well, and the rule above cannot reach it — magnific popup appends its markup to
 * `<body>`, outside `.et_pb_post_content`. Measured on 2026-09-24: no article showed a title in
 * the grid, every article showed one in the lightbox (`3X6A1900`, `IMG_20240416_173826`).
 *
 * Tied to the article rather than written for `.mfp-title` alone. On the four album pages the
 * titles are curated words — "Groynes", "Embankment" — and belong in the lightbox; this file is
 * not even enqueued there, so the scope is belt and braces rather than the only guard.
 *
 * The position counter stays: it sits in `.mfp-counter` of its own and reads "1 of 14" once the
 * title is gone.
 */
body.single-post .mfp-title {
  display: none;
}

/*
 * The caption of a gallery picture. 238 of the 982 legacy pictures carry one, mostly a photo
 * credit. Measured on the legacy article `30-years-life-austria`: 14px on 20px, #333333, 9px of
 * padding all round, left aligned, sitting directly on the picture. The two numbers stand here
 * and not as tokens for the reason the media queries below do the same — they are measurements of
 * this one place, and the file already keeps them that way.
 */
.et_pb_post_content .et_pb_gallery_caption {
  margin: 0;
  padding: var(--wi-post-caption-padding);
  font-size: 14px;
  line-height: 20px;
  color: var(--wi-post-caption-color);
}

.et_pb_post_content img {
  max-width: 100%;
  height: auto;
}

.et_pb_post_content figure {
  margin: 0 0 var(--wi-space-paragraph) 0;
}

.et_pb_post_content figcaption {
  padding: var(--wi-post-caption-padding);
  font-size: var(--wi-post-meta-size);
  color: var(--wi-post-caption-color);
}

/* Embedded videos — 11 of the 179 articles carry one. Without this rule a player that is not a
 * Divi video module stands at a fixed size and sticks out of the column on a phone. */
.et_pb_post_content iframe {
  max-width: 100%;
}

/* ------------------------------------------------------------------ *
 * Way back
 * ------------------------------------------------------------------ */

/*
 * The legacy site sets 50px of space below the text (`.news-text-wrap`) and a "Back" button of
 * 135px width beneath it. It is the only way back to the list — the header leads only to the
 * overview page, not to the post list.
 */
.wi-post__back {
  margin-top: var(--wi-post-content-space);
  margin-bottom: 0;
}

.wi-post__back .wi-button {
  min-width: 135px;
  font-size: var(--wi-post-meta-size);
  text-align: center;
}

/* ------------------------------------------------------------------ *
 * Narrower windows
 * ------------------------------------------------------------------ */

/* 1600px: the legacy site takes the running text back from 20px to 16px here. */
@media only screen and (max-width: 1600px) {
  .et_pb_post_content p,
  .et_pb_post_content li {
    font-size: var(--wi-font-size-body-medium);
    margin-bottom: 15px;
  }
}

/* 1100px: halved padding, a measured legacy value. */
@media only screen and (max-width: 1100px) {
  .wi-post__head {
    padding: var(--wi-post-padding-block-narrow);
    padding-bottom: 0;
  }

  .wi-post__foot {
    padding: var(--wi-post-padding-block-narrow);
    padding-top: 0;
  }
}

/*
 * 991px: size and line height are taken back by base.css on the type selector — for all templates
 * at once, as on the legacy site, which carries both in one rule. What stays here is the spacing,
 * because the title above carries its own and would otherwise keep it.
 *
 * The columns need nothing here: the Divi row drops to full width at its own tablet breakpoint,
 * which is where the gallery moves under the text — the same place Bootstrap's `col-md-*` gives up
 * on the legacy site.
 */
@media only screen and (max-width: 991px) {
  .wi-post .wi-post__title {
    margin-bottom: var(--wi-space-heading-narrow);
  }
}

/*
 * There is NO second step at 450px, and its absence is a measured finding rather than a gap —
 * F15 of the frontend defect list. Until 2026-09-07 this file pulled `.et_pb_post_content p` and
 * `li` back to 14px at a 10px gap there. The rule for it does stand in the legacy stylesheet:
 *
 *   @media (max-width: 450px) { body.sub .news-detail-section .std-content p,
 *                               .std-content li, .std-content p { font-size: 14px;
 *                                                                 margin-bottom: 10px } }
 *
 * and in the content area it bites nowhere: the 1600px step above is carried there by
 * `body .content .content-inner section .std-content p` — four classes against one, and
 * specificity does not care which media query a rule stands in.
 *
 * Measured over all 213 snapshot documents at 460px and at 375px. Exactly ONE thing moves
 * across that boundary, and it is not the content area: the running text of the FOOTER, 1908
 * paragraphs in 212 documents, goes from 16px/15px to 14px/10px — there `.std-content p` meets
 * no four-class rule. On a page, in an article, in the news list and in the gallery not a single
 * `p` or `li` changes; they stand at 16px/15px on both sides. That the instance does not follow
 * the footer step is a finding of its own (F17) and not this one.
 *
 * The same mistake as E11 and from the same source: a value read from `assets/merged.css`
 * instead of measured on the rendered document. The other thing the 450px boundary moves is the
 * partner grid of the footer (footer.css, measured: two columns at 451px, one at 450px) — that
 * step stays.
 */