/* ==========================================================================
   Where WordPress and the design meet

   style.css is shared, byte for byte, with the static build of this site and
   must stay that way. Everything here exists only because WordPress wraps a
   picture in <figure> and gives its blocks classes of their own. Each rule
   below hands the layout back to the stylesheet; none of them introduces a
   look that is not already there.

   Nothing in this file crops an image.
   ========================================================================== */

/* --- Pictures -------------------------------------------------------------
   A core image block is <figure class="wp-block-image"><img></figure>. The
   stylesheet addresses the img through its container, so the figure simply has
   to disappear: no margin of its own, and the same box the img used to have. */

.wp-block-image { margin: 0; }
.wp-block-image img { display: block; }

/* The card plate is a grid of a fixed height, and the picture used to be the
   grid item itself — which is how max-height:100% knew what 100% meant. Put a
   figure in between and the picture is drawn at its natural height inside a
   245px plate, with the rest clipped away: Churchill loses a third of himself.

   display:contents removes the figure's box, so the picture is the grid item
   again and the plate behaves as it did before WordPress was involved.

   It costs one thing: an element with no box cannot be clicked, so in the
   editor a click on the photograph lands on the plate instead. That is put
   right in editor.css, which only the editing canvas loads — the published
   page keeps the arrangement that renders correctly. */
.card__media .wp-block-image { display: contents; }

/* The timeline's plate has no fixed height — there the picture simply fills
   the width, so the figure only has to stop being a figure-shaped box. */
.tl-card__media .wp-block-image { display: block; width: 100%; }

.feature__media .wp-block-image { margin: 0; width: 100%; }

/* The faint map behind the mission statement. The class now sits on the figure,
   which carries the placement; the picture inside simply fills it. */
.mission__map { margin: 0; }
.mission__map img { width: 100%; height: auto; }

/* --- Lists and headings ----------------------------------------------------
   Nothing here either, deliberately.

   style.css already says `ul { margin: 0; padding: 0 }` and
   `h1,h2,h3,h4 { margin: 0 }`, so a list or a heading arriving as a block has
   the design's own spacing from the start. Two rules were added here to pin
   that down and one of them did real damage: `h3.wp-block-heading { margin-top:
   0 }` has the same weight as `.prose h3 { margin: 2em 0 .6em }` and loads
   after it, so every sub-heading inside a prose column lost the space above it.

   A block carries extra classes; it is still the same element. Style the
   element the design knows about, never the block's class. */

/* --- Groups ---------------------------------------------------------------
   Nothing is declared for .wp-block-group, and nothing should be.

   A blanket `.wp-block-group { margin: 0 }` was here as a guard against some
   future WordPress release adding spacing between the bands. It did far more
   than that: every container in this design is now also a group block, and
   .wrap, .hero__inner, .mission__inner and .pullquote all centre themselves
   with `margin-inline: auto`. The guard has the same specificity and loads
   later, so it won zeroed those margins and pushed the whole page against the
   left edge — while the masthead and the footer, which are templates rather
   than blocks, stayed centred and hid how wrong it looked.

   If spacing between sections ever does appear, name the section that has it
   and fix that one. Never style .wp-block-group as a whole. */

/* --- The admin bar --------------------------------------------------------
   Only ever seen by whoever is signed in. Without this the sticky masthead
   hides behind WordPress's own bar. */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

/* --- The timeline's second picture ----------------------------------------
   Two inline styles from the static build, moved to classes so the markup
   stays valid block markup. The values are unchanged. */
.tl-card__extra { margin-top: 20px; }
.tl-card__media--extra { border-radius: 2px; }

/* The scan of the American law sits below the text that describes it. */
.feature__media--inset { margin-top: 26px; }

/* --- Contact --------------------------------------------------------------
   Two inline styles from the static build, as classes. Same values. */
.coordinator--single { grid-template-columns: 1fr; }
.contact-block__text { color: var(--ink-2); }
.coordinator__note { margin: 18px 0 0; font-size: .9rem; color: var(--muted); }