/* Masinloc municipal leadership — a portrait record.
   Colour comes from tokens.css. Built on the shared editorial shell.

   The governing rule of this file: there is exactly ONE portrait card, and
   the current mayor gets the same one as everybody else. Nothing below sets a
   different width, ratio, frame, type size, padding, hover or transition for
   any individual. The incumbent is distinguished by where she appears and by
   a small word — never by scale.

   The section leans on what the portraits already share: they are painted in
   one house style, on the same warm ground, with the same flag and municipal
   seal. The page's job is to get out of their way and hold them evenly. */

.crumbs{max-width:1180px;margin:0 auto;padding:104px clamp(20px,5vw,48px) 0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;
  font:500 11.5px/1.4 var(--font-ui);letter-spacing:.06em;text-transform:uppercase}
.crumbs li{display:flex;align-items:center;gap:8px;color:var(--muted)}
.crumbs li+li::before{content:"/";color:var(--line)}
.crumbs a{color:var(--blue);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{color:var(--ink)}

.section-label{
  margin:0 0 14px;font:600 11px/1 var(--font-ui);letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
}

/* --- masthead ------------------------------------------------------------ */

.lead-hero{
  max-width:1180px;margin:0 auto;
  padding:clamp(26px,4vh,44px) clamp(20px,5vw,48px) 0;
  display:grid;gap:8px clamp(28px,4vw,56px);align-items:end;
}
.lead-hero .section-label{grid-column:1/-1}
.lead-hero h1{
  margin:0;max-width:19ch;
  font:400 clamp(30px,4vw,50px)/1.05 var(--font-editorial);
  letter-spacing:-.025em;color:var(--ink);
}
.lead-hero .lead{
  margin:16px 0 0;max-width:54ch;
  font:400 clamp(15.5px,1.2vw,17px)/1.6 var(--font-ui);color:var(--text);
}
@media (min-width:900px){
  .lead-hero{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .lead-hero .lead{margin:0 0 6px}
}

/* --- groups --------------------------------------------------------------- */
/* "Current Municipal Mayor" and "Former Municipal Mayors" are typeset
   identically. One is not a headline and the other a subheading. */

.lead-group{
  max-width:1180px;margin:0 auto;
  padding:clamp(38px,6vh,68px) clamp(20px,5vw,48px) 0;
}
.group-head{
  display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline;
  padding-bottom:16px;border-bottom:1px solid var(--line);
}
.group-head h2{
  margin:0;font:400 clamp(21px,2.4vw,29px)/1.15 var(--font-editorial);
  letter-spacing:-.015em;color:var(--ink);
}
.group-head p{margin:0;font:400 14.5px/1.5 var(--font-ui);color:var(--muted)}

/* --- the one card --------------------------------------------------------- */
/* The track is capped at 460px and the cap is shared. On a wide screen the
   former mayors sit two across at 460 and the incumbent sits alone at 460,
   centred — the same card, not a hero followed by thumbnails. Four across
   would shrink every portrait to fit a single row, which is the opposite of
   treating them as important. */

.leader-grid{
  list-style:none;margin:clamp(26px,4vh,40px) 0 0;padding:0;
  display:grid;gap:clamp(28px,4vw,52px) clamp(24px,3vw,44px);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:760px){
  .leader-grid{grid-template-columns:repeat(2,minmax(0,460px));justify-content:start}
}
/* The incumbent's list gets the SAME two-track template and simply leaves the
   second track empty. Giving it a one-track template instead looks equivalent
   and is not: below about 1050px the two-track grid starts shrinking to fit
   while a lone 460px track does not, and her card silently becomes the widest
   on the page. scripts/leadership-qa.mjs measures for exactly this.
   .is-single therefore changes nothing about sizing — it is a hook for
   anything that genuinely needs to know, and a place to keep this note. */


.leader figure{margin:0}
.leader-frame{
  position:relative;overflow:hidden;
  border:1px solid var(--line);
  /* A hairline in the town's blue along the top edge: a graphic marker rather
     than a frame, and the same one on every portrait. */
  border-top:2px solid var(--blue);
  background:var(--soft);
}
.leader-frame picture{display:block}
.leader-frame img{
  display:block;width:100%;height:auto;
  /* Every derivative is already cut to 4:5, so object-fit never has to crop
     and no face can be trimmed at any viewport. */
  aspect-ratio:4/5;object-fit:cover;
  transform:scale(1);
  transition:transform 620ms var(--ease-out);
}
.leader figure:hover .leader-frame img,
.leader a:focus-visible .leader-frame img{transform:scale(1.018)}

.leader figcaption{padding:18px 2px 0}
.leader-name{
  margin:0;
  font:400 clamp(20px,1.9vw,24px)/1.25 var(--font-editorial);
  letter-spacing:-.01em;color:var(--ink);
}
.leader-office{
  margin:7px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font:500 13.5px/1.4 var(--font-ui);color:var(--text);
  /* Reserved for the tallest thing this line can hold, so the incumbent's
     indicator does not make her card a few pixels taller than the others. */
  min-height:23px;
}
/* The current-office indicator. It is a word first — a screen reader and a
   monochrome print both get "Current" — with colour only reinforcing it. */
.leader-now{
  font:600 10.5px/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);background:rgba(13,59,158,.08);
  border:1px solid rgba(13,59,158,.18);
  padding:5px 9px;border-radius:999px;
}

/* --- women in leadership -------------------------------------------------- */
/* A shared fact about the office, deliberately not attached to any one card.
   The three names are set at one size, in the order supplied, with no ranking
   and no possessive framing. */

.women-lead{
  max-width:1180px;margin:clamp(48px,7vh,88px) auto 0;
  padding:0 clamp(20px,5vw,48px);
}
.women-inner{
  padding:clamp(28px,4vw,52px);
  background:var(--navy);color:var(--white);border-radius:16px;
}
@media (max-width:820px){.women-inner{border-radius:0;margin:0 calc(-1 * clamp(20px,5vw,48px))}}
.women-inner h2{
  margin:0;font:600 11px/1 var(--font-ui);letter-spacing:.18em;
  text-transform:uppercase;color:var(--yellow);
}
.women-fact{
  margin:18px 0 0;max-width:24ch;
  font:400 clamp(24px,3.2vw,40px)/1.15 var(--font-editorial);
  letter-spacing:-.02em;color:var(--white);
}
.women-note{
  margin:16px 0 0;max-width:56ch;
  font:400 15px/1.65 var(--font-ui);color:rgba(255,255,255,.72);
}
.women-names{
  list-style:none;margin:clamp(22px,3vh,32px) 0 0;padding:20px 0 0;
  border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;gap:10px 28px;
}
.women-names li{
  font:400 clamp(16px,1.4vw,18px)/1.4 var(--font-editorial);
  color:rgba(255,255,255,.92);
}

/* --- provenance ----------------------------------------------------------- */

.lead-provenance{
  max-width:1180px;margin:clamp(34px,5vh,56px) auto 0;
  padding:0 clamp(20px,5vw,48px) clamp(64px,10vh,120px);
  font:400 13.5px/1.65 var(--font-ui);color:var(--muted);
}
.lead-provenance a{color:var(--blue)}

/* --- motion --------------------------------------------------------------- */
/* Scroll-driven, so each portrait arrives on the reader's own timing rather
   than firing once and being over. Scrolling the page walks the leaders up
   into place one after another: the portrait settles down into its frame, the
   card lifts, and the name arrives just behind it — the beat a gallery gives
   a picture when you stop in front of it.

   It is a real scroll timeline, not a scroll listener: `animation-timeline:
   view()` runs on the compositor, works with scripts off, and scrubs backwards
   when the reader scrolls back up. Every leader gets the same animation with
   the same range, so nobody makes a bigger entrance than anybody else.

   Three fallbacks, in order:
     - No `animation-timeline` support: leadership.js adds the one-shot reveal
       from site-polish.css instead, and the two never both run.
     - No JavaScript and no support: nothing is hidden in the first place.
     - Reduced motion or print: no animation at all, everything simply there. */

@keyframes leader-arrive{
  from{opacity:0;transform:translateY(46px)}
  to{opacity:1;transform:none}
}
/* The portrait starts a touch large and high in the frame and settles down
   into it. It ends at exactly scale(1), so the finished state is the whole
   painting, uncropped, the same as every other. */
@keyframes portrait-settle{
  from{transform:scale(1.05) translateY(-2.2%)}
  to{transform:none}
}
@keyframes caption-arrive{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    /* The card names its own view timeline so everything inside it can share
       one. An anonymous `view()` on a descendant resolves against its nearest
       scroll container, and .leader-frame is one — `overflow:hidden` makes it
       a scroll container even though nothing scrolls in it. The portrait's
       timeline came out inactive and its animation sat frozen at the end
       state. Naming the timeline on .leader, whose scroller is the page,
       fixes it and keeps all three parts of a card on the same clock. */
    .leader{
      view-timeline-name:--leader-view;
      animation:leader-arrive linear both;
      animation-timeline:--leader-view;
      /* Ranged in `cover`, not `entry`. `entry 100%` means "fully inside the
         viewport", which a card taller than the window can never reach — the
         same trap as a non-zero IntersectionObserver threshold. `cover` is a
         fraction of (viewport + element) and always completes. It finishes
         early, so nothing is still fading while a name is being read. */
      animation-range:cover 0% cover 8%;
    }
    /* On <picture> rather than the <img>, so the hover depth on the image
       still composes instead of being overridden by the running animation. */
    .leader-frame picture{
      animation:portrait-settle linear both;
      animation-timeline:--leader-view;
      animation-range:cover 0% cover 9%;
    }
    .leader figcaption{
      animation:caption-arrive linear both;
      animation-timeline:--leader-view;
      animation-range:cover 1% cover 9%;
    }
    .women-inner{
      animation:leader-arrive linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 9%;
    }
  }
}

@media (prefers-reduced-motion:reduce){
  .leader-frame img{transition:none}
  .leader figure:hover .leader-frame img{transform:none}
}

/* On paper there is no scroll, so a timeline would never advance and could
   leave a leader printed blank. */
@media print{
  .leader,.leader-frame picture,.leader figcaption,.women-inner{
    animation:none!important;opacity:1!important;transform:none!important;
  }
}