/* ============================================================
   Content blocks — shared styles for the flexible content page
   (Allgemeine Inhaltsseite).
   These are the building blocks an editor composes: prose, images and galleries.
   Ported from the mockup (Jugendwerk + Allgemeine Inhaltsseite pages).
   The chrome, container and .section-h come from design.css.
   ============================================================ */

/* Top spacing shared by all stacked content blocks (see \Awo\Blocks\top_spacing_class).
 *
 * The selectors name both classes on purpose, the same way the section rhythm does in
 * sections.css. On its own `.awo-top-section` ties with `.container{padding:0}` in design.css --
 * equal specificity -- and a tie is settled by whichever file loads last, which this file cannot
 * rely on: it is enqueued explicitly on some pages and pulled in by the prose block's own style
 * handle on others, and in the second case it is printed before design.css. Measured, the
 * consequence was two published pages carrying no top spacing at all: the offers and the news
 * listing opened 8px under the breadcrumb where the facilities overview opened at 113, with the
 * same classes on the same element. Naming both classes wins on specificity whatever the order.
 * Every block that emits these classes emits container with them. */
.container.awo-top-section{padding-top:var(--section-gap)}  /* a new section */
.container.awo-top-small{padding-top:1.4rem}                /* a lead close under the breadcrumb */

/* Prose block: optional heading + body text in the single content column. */
.awo-prose__title{font-size:var(--fs-h1); line-height:1.09; margin:.5rem 0 40px; max-width:var(--content-col)}
.awo-prose .section-h{margin-top:0}
.prose{max-width:var(--content-col); color:var(--ink2); line-height:var(--lh-lead)}  /* XD body copy: 16px/22px */
.prose p{margin:0 0 1.1rem}
.prose p:last-child{margin-bottom:0}

/* Image block: a single image cropped to the content column, with optional credit.
   (XD: 480x285 render = 720x427.) */
.awo-figure{max-width:var(--content-col); margin:0}
.awo-figure img{width:100%; height:427px; object-fit:cover; display:block}

/* Gallery block: a three-column grid running the full content width (wider than the
   text column, per the XD). (XD: 230x151 render = 345x227.) */
.awo-gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--grid-gap)}
.awo-gallery img{width:100%; height:227px; object-fit:cover; display:block}
/* Each cell is a figure so the image can carry its credit; the browser default figure
   margin would otherwise widen the grid gap. */
.awo-gallery__item{margin:0}

/* Kontakt block: reuses the shared .split (design.css); this sizes it to the content
   page's artboard and makes the contact person bold. */
.kontakt .split{min-height:426px}
.kontakt .split__img{width:var(--content-col)}
.kontakt .split__img img{height:426px}
.kontakt .split__box{min-height:298px}
/* .kontakt__name and the link styling moved to design.css: they are needed by the Jugendwerk
   page too, which does not load this stylesheet. */

@media(max-width:860px){
  .awo-figure{max-width:none}
  .awo-figure img{height:220px}
  .awo-gallery{grid-template-columns:repeat(2,1fr); gap:16px}
  .awo-gallery img{height:150px}
  .kontakt .split{min-height:0}
  .kontakt .split__img{width:100%}
  .kontakt .split__img img{height:220px}
  .kontakt .split__box{position:static; transform:none; width:auto; min-height:0; padding:2rem 1.6rem}
}