/* why-running — the homepage "Why I'm Running" section (modular/why-running.html.twig).

   Its own block file rather than an append to brand.css: after the task-15 regression (a rewrite
   of the Meet Ivan rules there also swallowed the adjacent .priority-hero block), unrelated
   sections no longer share a file. Registered in templates/base.html.twig's block list.

   Markup it styles, all new: .why-grid / .why-grid-photo (wraps the existing, unchanged
   .short-copy so a portrait can sit beside it) and .why-photo. With no `photo:` in the page
   frontmatter the template emits a bare .why-grid, which stays a plain single column — the
   section then renders exactly as it did before this file existed.
   --------------------------------------------------------------------------------------- */

/* 2026-09-10 (client): grid replaced by a float on desktop. With the second photo slot gone the
   portrait column ended after two paragraphs and the rest of the copy sat beside empty space;
   now the text wraps under the photo and the last headings take the full width. The grid rules
   below are kept as the record of what this was; `display:flow-root` overrides them and also
   contains the float. .why-media precedes .short-copy in the template for this to work. */
.why-grid-photo{
  display:grid;
  /* Photo left, copy right (2026-09-09, client). The portrait column is fixed so it never grows
     into a poster on wide screens; the copy takes the rest and keeps a comfortable ~68ch measure.
     1160px is the widest the pair needs — the .wrap is 1224px at 1280, so this stays inside it
     and centres. The figure is second in the DOM (the copy is the section's substance, and that
     is the order a screen reader should get), so `order` does the visual swap — see .why-photo. */
  grid-template-columns:372px minmax(0,1fr);
  gap:52px;
  align-items:start;
  max-width:1160px;
  margin:0 auto;
}

/* style.css caps .short-copy at 880px and centres it with auto margins — correct when it is the
   only thing in the section, but inside the grid the track already sets the width, and the auto
   margins would push the text off its own column. */
.why-grid-photo .short-copy{max-width:none;margin:0}

/* Headings left-aligned (2026-09-10, client). style.css centres .short-copy h2, which read fine
   while the copy spanned the whole section — the headings sat on the same axis as the section
   title above them. Beside a photo they no longer do: the column's centre is ~210px right of the
   section's, so every heading floated off-axis above a hard left-aligned paragraph. Scoped to
   .why-grid so /contact and the other .short-copy pages (templates/simple.html.twig) keep the
   centred original. */
.why-grid .short-copy h2{text-align:left}

/* Closing quote: the campaign divider replaces style.css's plain red bar (2026-09-10, client).
   The bar is a ::before on .quote, so it has to be switched off explicitly — the partial is an
   extra element, it does not overwrite anything. Narrower than under a section title: this rule
   sits inside a card, not across the page. */
.quote-ruled::before{display:none}
.quote-ruled .title-rule{max-width:190px;margin:0 auto 16px}
@media(max-width:780px){
  .quote-ruled .title-rule{max-width:150px;margin-bottom:13px}
}

/* .why-media is the left track: the portrait plus the second slot under it (2026-09-10, client).
   It replaced a single sticky <figure>. Sticky is gone with it, and deliberately: the stack is
   ~795px against ~837px of copy, so the two columns now end within 40px of each other and there
   is no dead space for a sticky photo to travel through. */
.why-media{
  order:-1;          /* into the left track, ahead of .short-copy — see grid comment above */
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:20px;
}
/* Desktop float (2026-09-10) — see the note on .why-grid-photo. */
@media(min-width:901px){
  .why-grid-photo{display:flow-root}
  .why-media{float:left;width:372px;margin:6px 48px 18px 0}
  .why-grid-photo .short-copy{max-width:none;margin:0}
}
@media(min-width:901px) and (max-width:1080px){
  .why-media{width:300px;margin-right:36px}
}
.why-photo{margin:0;min-width:0}
.why-photo img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--radius-lg,28px);
  box-shadow:var(--shadow,0 10px 34px rgba(0,0,0,.07));
}

/* Second slot. 4:3 for both the real photo and the placeholder, so swapping one for the other
   cannot shift the layout — a real image is cropped into the frame with object-fit. */
.why-photo-second{aspect-ratio:4/3}
.why-photo-second img{height:100%;object-fit:cover}

/* Placeholder — an empty frame, not a broken image. Dashed outline and the campaign's own
   mountain mark at low opacity: obviously a slot waiting to be filled, without looking like
   something failed to load. Disappears the moment `photo2:` is set in the frontmatter. */
.why-photo-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:2px dashed #d3d3ce;
  border-radius:var(--radius-lg,28px);
  background:rgba(255,255,255,.5);
  color:var(--muted,#666);
}
.why-photo-empty-mark{width:52px;height:32px;color:var(--red);opacity:.32}
.why-photo-empty-mark svg{width:100%;height:100%;fill:currentColor}
.why-photo-empty-label{
  font-family:var(--font-head,Arial,Helvetica,sans-serif);
  font-size:12px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;
}

/* Tablet: keep the two columns but let the portrait give width back to the text before the
   layout has to break, otherwise the copy hits a cramped ~45ch measure around 1000px. */
@media(max-width:1080px){
  .why-grid-photo{grid-template-columns:300px minmax(0,1fr);gap:38px}
}

/* Below the tablet breakpoint the section stacks. The order:-1 set above keeps working here, so
   the photo lands ABOVE the copy — it introduces the section right under the subtitle instead of
   being stranded after ~800px of text. Capped and centred so a 3:4 portrait does not fill a phone
   screen on its own. */
@media(max-width:900px){
  .why-grid-photo{grid-template-columns:1fr;gap:0;max-width:none}
  .why-media{margin:0 auto 30px;width:min(340px,78%);gap:16px}
  .why-photo img{border-radius:var(--radius,18px)}
  .why-photo-empty{border-radius:var(--radius,18px)}
}
@media(max-width:470px){
  .why-media{width:min(290px,82%);margin-bottom:24px}
  .why-photo-empty-mark{width:44px;height:27px}
}