/* ============================================================
   H/3 FOUNDATION — iPad OVERRIDE LAYER  (v2, component-aware)
   Loaded after each page's inline styles; final-override only.

   Component classification:
     .team-grid / .team-member ... compact portrait cards
                                   → 5-across in landscape, 3+2 portrait
                                   (NOT a generic card grid)
     .bio-grid / .bio-photo ...... biography image-and-text pages
                                   → scaled 2-column, photo never cropped
     .member-grid / .bio-para .... leadership stacked bios → scaled type
     editorial cards (News, Partnerships, Initiatives)
                                   → unchanged pending audit; no generic
                                     .card-grid / .grid / section rules here
     phone (<768px) and desktop (>1366px or fine pointer) → untouched

   Rules: single-property overrides of existing selectors only.
   No !important, no renamed classes, no broad selectors.
   ============================================================ */


/* ============================================================
   A. SHARED HEADER — all pages, any iPad orientation
   ============================================================ */
@media (min-width: 768px) and (max-width: 1366px) and (pointer: coarse) {

  /* Logo optically low vs. menu row (reported at 1180×820) */
  .corner-logo img { transform: translateY(-3px); }  /* interior pages */
  .site-logo img   { transform: translateY(-3px); }  /* home pages */
}


/* ============================================================
   A2. HOME PAGES — hero tagline (.hero-sub) is display text,
   not body copy. Inline shallow-viewport rules shrink it to
   15–16px inside the iPad range; floor it at 18px here.
   Italic Cormorant, weight 500, cream color are inherited
   untouched. Headline and init-cards are not touched.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1366px) and (pointer: coarse) {

  .hero-sub {
    font-size: clamp(18px, 1.8vw, 24px);
    line-height: 1.45;
    max-width: 560px;
    margin-top: 20px;
  }
}

/* Landscape: ~two lines, as on desktop (inline rule narrowed the
   container to 520px and dropped size to 16px at ≤820px height) */
@media (min-width: 1024px) and (max-width: 1366px)
       and (orientation: landscape)
       and (pointer: coarse) {

  .hero-sub {
    width: min(100%, 560px);
    max-width: 560px;
    font-size: clamp(18px, 1.65vw, 22px);
  }
}

/* Portrait: slightly narrower measure */
@media (min-width: 768px) and (max-width: 1023px)
       and (orientation: portrait)
       and (pointer: coarse) {

  .hero-sub {
    width: min(100%, 520px);
    max-width: 520px;
    font-size: clamp(18px, 2.2vw, 22px);
  }
}


/* ============================================================
   B. OUR TEAM — iPad, both orientations: tighten vertical space
   Source of the blank band: inline tablet rule sets
   .team-section padding 80px top on ≤1100px, plus 60px
   .team-intro margin, on top of the 108px fixed-header offset.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1366px) and (pointer: coarse) {

  .team-section { padding-top: clamp(22px, 3.5vh, 36px); }
  .team-intro   { margin-bottom: clamp(28px, 4vh, 44px); }
}


/* ============================================================
   C. OUR TEAM — iPad LANDSCAPE: all 5 portraits in one row,
   desktop composition at reduced scale.
   .team-grid is flex on desktop; converted to a 5-col grid here
   so the row cannot wrap. Children are <a.team-link> wrappers.
   ============================================================ */
@media (min-width: 1024px) and (max-width: 1366px)
       and (orientation: landscape)
       and (pointer: coarse) {

  .team-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
    width: 100%;
    max-width: none;
  }
  a.team-link  { width: 100%; min-width: 0; }
  .team-member { width: 100%; min-width: 0; }   /* desktop fixes 320px / 260px */

  /* Portraits keep the desktop 4/5 crop, just smaller (aspect-ratio
     already on .team-photo). Names/roles scale down to match. */
  .team-name { font-size: clamp(11px, 1.15vw, 15px); margin-bottom: 5px; }
  .team-role { font-size: clamp(13px, 1.35vw, 16px); }
}


/* ============================================================
   D. OUR TEAM — iPad PORTRAIT (768–1023): five 320px cards can't
   stay readable in one row, so 3 across + 2 centered beneath.
   Landscape is excluded by the orientation condition.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px)
       and (orientation: portrait)
       and (pointer: coarse) {

  .team-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px;
  }
  .team-grid > * { grid-column: span 2; width: 100%; min-width: 0; }
  .team-member  { width: 100%; min-width: 0; }
  .team-grid > *:nth-child(4) { grid-column: 2 / span 2; }
  .team-grid > *:nth-child(5) { grid-column: 4 / span 2; }
}


/* ============================================================
   E. BIO PAGES (Spencer, Jessica, Alyssa, Aaron, Elisa) —
   iPad, both orientations: heading block starts higher.
   Source of the gap: inline ≤1100px rule sets .bio-hero
   padding-top 130px on top of the 108px fixed-header offset.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1366px) and (pointer: coarse) {

  .bio-hero    { padding-top: clamp(18px, 3vh, 40px); padding-bottom: 14px; }
  .bio-eyebrow { margin-bottom: 14px; }
  .bio-name    { margin-bottom: 12px; }
}


/* ============================================================
   F. BIO PAGES — iPad LANDSCAPE: keep photo-left / text-right,
   scaled down. Overrides the inline ≤1100px stacking rule for
   1024–1100 landscape. Photo keeps height:auto (never cropped).
   ============================================================ */
@media (min-width: 1024px) and (max-width: 1366px)
       and (orientation: landscape)
       and (pointer: coarse) {

  .bio-grid {
    grid-template-columns: minmax(230px, 27%) minmax(0, 1fr);
    gap: clamp(30px, 3.5vw, 48px);
    max-width: min(100%, 1120px);
  }
  .bio-photo { max-width: 330px; margin: 0; }   /* undo ≤1100 centering */

  .bio-name    { font-size: clamp(20px, 2.1vw, 28px); }
  .bio-role    { font-size: clamp(17px, 1.6vw, 22px); }
  .bio-eyebrow { font-size: clamp(14px, 1.3vw, 18px); }
  .bio-text p  { font-size: 14.5px; line-height: 1.55; margin-bottom: 11px; }
}


/* ============================================================
   G. BIO PAGES — iPad PORTRAIT ≥820px: two columns still readable.
   ============================================================ */
@media (min-width: 820px) and (max-width: 1023px)
       and (orientation: portrait)
       and (pointer: coarse) {

  .bio-grid {
    grid-template-columns: minmax(220px, 34%) minmax(0, 1fr);
    gap: 30px;
  }
  .bio-photo  { max-width: 330px; margin: 0; }
  .bio-text p { font-size: 14.5px; line-height: 1.55; }
}

/* Narrow tablet portrait (768–819): stacking (from the inline
   ≤1100px rule) is kept — text would be too narrow beside the
   photo. Only cap the centered photo slightly smaller. */
@media (min-width: 768px) and (max-width: 819px)
       and (orientation: portrait)
       and (pointer: coarse) {

  .bio-photo { max-width: 360px; }
}


/* ============================================================
   H. OUR LEADERSHIP — iPad: tighten heading space, scale type.
   .member-grid keeps its stretch alignment (photo edges match
   text block by design) — scaling the text scales the photo.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1366px) and (pointer: coarse) {

  .leadership-section { padding-top: clamp(22px, 3.5vh, 36px); }
  .leadership-intro   { margin-bottom: clamp(28px, 4vh, 44px); }
}

@media (min-width: 1024px) and (max-width: 1366px)
       and (orientation: landscape)
       and (pointer: coarse) {

  .member-grid { gap: clamp(24px, 3vw, 36px); }
  .member-text p.bio-para { font-size: 14.5px; line-height: 1.55; }
}


/* ============================================================
   Z. EMULATOR FALLBACK — desktop DevTools responsive mode may
   not report pointer: coarse. Duplicates ONLY the rules above,
   capped at 1180px so real desktops (1280+, 1366×768 non-touch)
   are never affected. iPad-preset emulation (which does report
   coarse) covers 1194–1366 widths.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1180px) {

  .corner-logo img { transform: translateY(-3px); }
  .site-logo img   { transform: translateY(-3px); }

  .hero-sub {
    font-size: clamp(18px, 1.8vw, 24px);
    line-height: 1.45;
    max-width: 560px;
    margin-top: 20px;
  }

  .team-section { padding-top: clamp(22px, 3.5vh, 36px); }
  .team-intro   { margin-bottom: clamp(28px, 4vh, 44px); }

  .bio-hero    { padding-top: clamp(18px, 3vh, 40px); padding-bottom: 14px; }
  .bio-eyebrow { margin-bottom: 14px; }
  .bio-name    { margin-bottom: 12px; }

  .leadership-section { padding-top: clamp(22px, 3.5vh, 36px); }
  .leadership-intro   { margin-bottom: clamp(28px, 4vh, 44px); }
}

@media (min-width: 1024px) and (max-width: 1180px) and (orientation: landscape) {

  .hero-sub {
    width: min(100%, 560px);
    max-width: 560px;
    font-size: clamp(18px, 1.65vw, 22px);
  }

  .team-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
    width: 100%;
    max-width: none;
  }
  a.team-link  { width: 100%; min-width: 0; }
  .team-member { width: 100%; min-width: 0; }
  .team-name { font-size: clamp(11px, 1.15vw, 15px); margin-bottom: 5px; }
  .team-role { font-size: clamp(13px, 1.35vw, 16px); }

  .bio-grid {
    grid-template-columns: minmax(230px, 27%) minmax(0, 1fr);
    gap: clamp(30px, 3.5vw, 48px);
    max-width: min(100%, 1120px);
  }
  .bio-photo { max-width: 330px; margin: 0; }
  .bio-name    { font-size: clamp(20px, 2.1vw, 28px); }
  .bio-role    { font-size: clamp(17px, 1.6vw, 22px); }
  .bio-eyebrow { font-size: clamp(14px, 1.3vw, 18px); }
  .bio-text p  { font-size: 14.5px; line-height: 1.55; margin-bottom: 11px; }

  .member-grid { gap: clamp(24px, 3vw, 36px); }
  .member-text p.bio-para { font-size: 14.5px; line-height: 1.55; }
}

@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {

  .hero-sub {
    width: min(100%, 520px);
    max-width: 520px;
    font-size: clamp(18px, 2.2vw, 22px);
  }

  .team-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px;
  }
  .team-grid > * { grid-column: span 2; width: 100%; min-width: 0; }
  .team-member  { width: 100%; min-width: 0; }
  .team-grid > *:nth-child(4) { grid-column: 2 / span 2; }
  .team-grid > *:nth-child(5) { grid-column: 4 / span 2; }
}

@media (min-width: 820px) and (max-width: 1023px) and (orientation: portrait) {

  .bio-grid {
    grid-template-columns: minmax(220px, 34%) minmax(0, 1fr);
    gap: 30px;
  }
  .bio-photo  { max-width: 330px; margin: 0; }
  .bio-text p { font-size: 14.5px; line-height: 1.55; }
}

@media (min-width: 768px) and (max-width: 819px) and (orientation: portrait) {

  .bio-photo { max-width: 360px; }
}


/* ============================================================
   DA. DIRECT ACTION — tablet override. MUST STAY LAST.
   Cascade diagnosis: inline (901–1399px) rule builds a 6-col
   grid with per-card `grid-column: N / span 2` placements (3+2),
   and the inline (1000–1200 landscape) block re-asserts it with
   fixed card heights (clamp(200px,30vh,240px)) and fixed photo
   heights — a viewport-height fit. No prior tablet override for
   this page existed in this file, so nothing was being applied.
   These rules beat both via the body-class prefix (higher
   specificity) + last-loaded position.
   Scoped to body.direct-action-page because .project-grid is
   shared with Media Projects, which must not change.
   Real iPads (incl. 1366×1024) match the coarse query below;
   the width-only emulator fallback is capped at 1200px so it
   catches 1194×834 iPad emulation but can never touch 1280×720,
   1366×768 or larger non-touch desktops.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1366px) and (pointer: coarse) and (orientation: portrait),
       (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {

  body.direct-action-page .project-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 22px;
    width: min(100%, 900px);
    max-width: none;
    margin-inline: auto;
  }

  /* Neutralize the inline 6-col span placements (cards 1–5) */
  body.direct-action-page .project-grid > .project-card {
    grid-column: auto;
  }
  /* Odd card count: last card spans the row, sized like its siblings */
  body.direct-action-page .project-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - 11px);
    justify-self: center;
  }

  /* Undo viewport-height card fitting — natural height, page scrolls */
  body.direct-action-page .project-card {
    width: 100%;
    height: auto;
    min-height: 0;
  }
  body.direct-action-page .project-card .card-photo {
    height: auto;
    aspect-ratio: 16 / 6;
    overflow: hidden;
  }
  body.direct-action-page .project-card .card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  body.direct-action-page .project-card .card-body {
    padding: 14px 16px 18px;
  }
  body.direct-action-page .project-card .card-blurb {
    font-size: 14px;
    line-height: 1.45;
  }
}


/* ============================================================
   FINAL: Direct Action iPad LANDSCAPE — 3 cards + 2 centered.
   Must remain the last block in this file. The portrait-only
   2-col rule above no longer matches landscape; this block
   out-specifies the inline (901–1399px) and (1000–1200
   landscape) 6-col placements AND replaces their fixed
   viewport-fit card heights with natural heights.
   ============================================================ */
@media (min-width: 1024px) and (max-width: 1366px)
       and (orientation: landscape) {

  body.direct-action-page .project-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: clamp(14px, 1.5vw, 20px);
    row-gap: 10px;
    width: min(calc(100% - 64px), 1120px);
    max-width: none;
    margin-inline: auto;
  }

  body.direct-action-page .project-grid > .project-card {
    grid-column: span 2;
    width: 100%;
    min-width: 0;
    height: auto;
  }
  body.direct-action-page .project-grid > .project-card:nth-child(4) {
    grid-column: 2 / span 2;
  }
  body.direct-action-page .project-grid > .project-card:nth-child(5) {
    grid-column: 4 / span 2;
  }

  /* --- Heading: close the gap below the header. The 108px body
     offset (fixed-header clearance) is preserved; only the hero's
     own padding and margins are reduced. No negative margins. --- */
  body.direct-action-page .page-hero {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    min-height: 0;
  }
  body.direct-action-page .page-hero-inner .eyebrow {
    margin-top: 0;
    margin-bottom: 4px;
  }
  body.direct-action-page .page-hero-inner h1 {
    margin: 0;
  }

  /* --- Photos: fill the frame with the full prepared landscape
     thumbnail (all five sources verified 1.6:1 with baked-in
     blurred side extensions). cover keeps the full width — the
     blurred extensions stay visible; only vertical excess crops.
     Wrapper height unchanged so the page still fits. --- */
  body.direct-action-page .project-card .card-photo {
    height: clamp(105px, 14vh, 122px);
    aspect-ratio: auto;
    overflow: hidden;
    background: transparent;
  }
  /* Default for prepared wide thumbnails */
  body.direct-action-page .project-card .card-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  /* Per-card focal points — heads and animals stay in frame.
     Card order in .project-grid: 1 BVI, 2 Frankie's Friends,
     3 NMWC, 4 Operation Ark, 5 SUU (no per-card classes exist,
     so nth-child, matching the existing placement rules). */
  body.direct-action-page .project-card:nth-child(1) .card-photo img {
    object-position: center 18%;   /* BVI — rescuer's full cap + dog */
  }
  body.direct-action-page .project-card:nth-child(2) .card-photo img {
    object-position: center 38%;   /* Frankie's Friends — Bond */
  }
  body.direct-action-page .project-card:nth-child(3) .card-photo img {
    object-position: center 35%;   /* NMWC — handler + hawk */
  }
  body.direct-action-page .project-card:nth-child(4) .card-photo img {
    object-position: center 16%;   /* Operation Ark — woman's full head + headroom */
  }
  body.direct-action-page .project-card:nth-child(5) .card-photo img {
    object-position: center 45%;   /* SUU — Yeti + prosthetic */
  }

  /* --- Recover remaining vertical pixels (body copy stays ≥12px) --- */
  body.direct-action-page .project-card .card-body {
    padding: 8px 13px 9px;
  }
  body.direct-action-page .project-card .card-blurb {
    font-size: clamp(12px, 1vw, 14px);
    line-height: 1.25;
    margin-bottom: 0;
  }
  body.direct-action-page .project-card h3 {
    font-size: clamp(14px, 1.2vw, 17px);
    line-height: 1.15;
    margin: 2px 0 4px;
  }
  body.direct-action-page .project-card .explore-link {
    min-height: 32px;
    margin-top: 7px;
    padding: 7px 13px;
  }
  body.direct-action-page .site-footer {
    position: static;
    margin-top: 8px;
  }
}



/* ============================================================
   HOMEPAGE — iPad LANDSCAPE, narrow correction only.
   Hero keeps position:absolute, its animation, and the
   animation's final translateY(-50%). Only the vertical
   anchor moves (50% → 46%; tune 44–47% after visual test)
   plus internal hero spacing. No .stage grid, no changes to
   .initiatives-row or card geometry.
   Width-only emulator arm capped at 1200px so 1280×720 /
   1366×768 desktops are unaffected.
   ============================================================ */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) and (pointer: coarse),
       (min-width: 1024px) and (max-width: 1200px) and (orientation: landscape) {

  body.home-page .hero {
    top: 46%;
  }
  body.home-page .hero-headline {
    margin-bottom: 18px;
  }
  body.home-page .hero-sub {
    margin-top: 0;
    max-width: 570px;
  }
}