/* War Feather (/programs/war-feather/). Loads after /css/interior.css and only adjusts this page (.x-page--war-feather).
   Breakpoints match interior.css: 1100 tablet, 700 phone (below 700 every phase is shown in order, as before). */

/* Stacked intros: headline, then copy under it across the full content width (How it works; What participants can expect) */
.x-page--war-feather .x-head{display:block}
.x-page--war-feather .x-head .x-h2{max-width:none;text-wrap:balance}
.x-page--war-feather .x-head .x-lead{margin-top:var(--u-s5);max-width:none}

/* How it works: one reading order. The six phases sit in a row under the intro; the selected phase shows its photograph
   on the left and its name and copy on the right. The photograph takes the height of the copy (with a floor), so the two
   columns start and end on the same lines. Tab labels sit in the middle of each tab, whatever their length. */
.x-page--war-feather .x-phases{grid-template-columns:minmax(0,1fr)}
.x-page--war-feather .x-phases__list{
  position:static;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:clamp(28px,3.4vw,48px);
}
.x-page--war-feather .x-phases__list .x-tab{
  display:flex;align-items:center;justify-content:center;min-height:88px;padding:14px 16px;text-align:center;border-radius:18px;
  background:rgba(14,13,11,.07);color:var(--u-ink);
  font-family:var(--u-ff-label);font-size:15px;line-height:1.25;letter-spacing:.05em;text-wrap:balance;
  transition:background .2s ease,color .2s ease;
}
.x-page--war-feather .x-phases__list .x-tab::before{display:none}
@media (hover:hover){.x-page--war-feather .x-phases__list .x-tab:hover{background:rgba(14,13,11,.14);color:var(--u-ink)}}
.x-page--war-feather .x-phases__list .x-tab[aria-selected="true"]{background:var(--u-ink);color:var(--u-bone)}
.x-page--war-feather .x-phase:not([hidden]){display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto 1fr;column-gap:var(--u-gap);align-items:start}
.x-page--war-feather .x-phase .u-photo{grid-column:1;grid-row:1 / 3;position:relative;align-self:stretch;aspect-ratio:auto;min-height:clamp(260px,18vw,300px);border-radius:24px;overflow:hidden}
.x-page--war-feather .x-phase .u-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.x-page--war-feather .x-phase__mobile-title{display:block;grid-column:2;grid-row:1;margin:0 0 var(--u-s5)}
.x-page--war-feather .x-phase__text{grid-column:2;grid-row:2;display:block;margin-top:0}
.x-page--war-feather .x-phase__text .x-deck{max-width:none}
.x-page--war-feather .x-phase__text .x-lead{margin-top:var(--u-s5)}

/* Real Science, Real Help, Real Outcomes: every title on two lines so the three read as a set */
.x-page--war-feather .x-real .x-h2 span{display:block}

/* Help fund a participant: the headline starts level with the first paragraph and travels down with the scroll until its
   last line sits level with the buttons (wf.js sets --wf-travel). Static under reduced motion and on phones. */
.x-page--war-feather .x-wf-fund .x-split{align-items:start}
.x-page--war-feather .x-wf-fund .x-h2{transform:translateY(var(--wf-travel,0px));will-change:transform}

@media (max-width:1100px){
  .x-page--war-feather .x-phases__list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .x-page--war-feather .x-phases__list .x-tab{min-height:72px}
}
@media (min-width:700px) and (max-width:1100px){
  .x-page--war-feather .x-phase:not([hidden]){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .x-page--war-feather .x-phase .u-photo{min-height:260px}
}
@media (max-width:699px){
  .x-page--war-feather .x-phases__list{display:none}
  .x-page--war-feather .x-phase:not([hidden]){display:block}
  .x-page--war-feather .x-phase .u-photo{aspect-ratio:3 / 2;min-height:0}
  .x-page--war-feather .x-phase .u-photo img{position:static}
  .x-page--war-feather .x-phase__mobile-title{margin:0 0 var(--u-s4)}
  .x-page--war-feather .x-phase__text{margin-top:var(--u-s5)}
  .x-page--war-feather .x-wf-fund .x-h2{transform:none}
  .x-page--war-feather .x-real .x-h2 span{display:inline}
  .x-page--war-feather .x-wf-facts .u-facts{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--u-s6)}
  .x-page--war-feather .x-wf-facts .u-fact{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:var(--u-s2);padding:0;border:0}
  .x-page--war-feather .x-wf-facts .u-fact > *{grid-row:auto}
  .x-page--war-feather .x-wf-facts .u-fact dt{max-width:none}
}
@media (prefers-reduced-motion:reduce){.x-page--war-feather .x-wf-fund .x-h2{transform:none}}