/* ============================================================
   Partners — proposed components (FEAT-010)

   Layered AFTER components.css. Everything here is new; nothing in
   tokens.css / base.css / components.css is modified, so this file
   ports to the theme as one `assets/css/partners.css` enqueue.

   Design constraints this file answers:
   - Third-party logos are full-colour artwork on white or transparent
     grounds (Save the Children red-on-white, mWell navy, MWO black
     outline). On --ink-900 they lose their edges, so every logo sits on
     a white plate. No greyscale-until-hover: partner recognition is the
     entire point of the section, and a hover-only reveal is unusable on
     touch.
   - Plates are a fixed optical height so a row reads as one baseline
     despite five different aspect ratios (--plate-h + per-logo --logo-h).
   - Every img carries width/height so the wall reserves its space (CLS).
   ============================================================ */

/* ------------------------------------------------------------
   1 · Logo plate — shared primitive
   ------------------------------------------------------------ */
.logo-plate {
  --plate-h: 132px;
  --logo-h: 74px;

  display: grid;
  place-items: center;
  min-height: var(--plate-h);
  padding: var(--space-md);
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.logo-plate img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: var(--logo-h);
  object-fit: contain;
}

/* Per-logo optical balance. A round seal, a stacked lockup and a
   wordmark do not read as the same size at the same pixel height:
   - mwo-riyadh is a circular seal with type on the rim, so it needs the
     most height before the rim text is legible;
   - mwell is two stacked lockups in one file (mWell over KonsultaMD),
     so it needs extra height for its second row to survive. */
.logo-plate[data-logo="save-the-children"] { --logo-h: 86px; }
.logo-plate[data-logo="achieve"]           { --logo-h: 84px; }
.logo-plate[data-logo="aid-mena"]          { --logo-h: 80px; }
.logo-plate[data-logo="mwell"]             { --logo-h: 88px; }
.logo-plate[data-logo="mwo-riyadh"]        { --logo-h: 86px; }

/* deped-mindyou is a PAIR plate — DepEd seal + Mind You mark side by
   side in one plate, not one logo. It overrides the shared .logo-plate
   grid with a centred flex row so both marks share the content width
   instead of stacking on top of each other. --logo-h is sized so both
   marks plus the gap and divider still fit the narrowest column (the
   1080px breakpoint, where a plate's content width is ~120-140px) —
   52px x2 + 4px gap + 1px divider = 109px, comfortably inside that. */
.logo-plate[data-logo="deped-mindyou"] {
  --logo-h: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
}

.logo-plate[data-logo="deped-mindyou"] .logo-plate__sep {
  align-self: stretch;
  width: 1px;
  background: rgba(0, 0, 0, 0.12);
}

/* Mind You's mark is a full-bleed square with a colour gradient to its
   edges, unlike the other logos (artwork on white) — round its corners
   so it reads as a mark on the plate rather than a bleeding square. */
.logo-plate[data-logo="deped-mindyou"] img:last-of-type {
  border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------
   2 · Home partner wall
   Replaces the four identical checkmarks of .trust-strip with the
   five real, signed partners. Each plate is a link to its entry on
   the Partners page, so the section is a route, not a dead end.
   ------------------------------------------------------------ */
.partner-wall {
  padding-block: var(--section-pad);
  border-block: 1px solid var(--border-soft);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(95, 201, 172, 0.06), transparent 60%),
    var(--ink-850);
}

.partner-wall__head {
  display: grid;
  gap: var(--space-sm);
  max-width: 60ch;
  margin-bottom: var(--space-xl);
}

.partner-wall__head h2 { font-size: var(--step-2); margin: 0; }
.partner-wall__head p { color: var(--text-300); margin: 0; max-width: 52ch; }

/* The "see all" link sits with the heading on wide screens and drops
   below it on narrow — it is a peer of the heading, not a footnote. */
@media (min-width: 900px) {
  .partner-wall__head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    max-width: none;
  }
  .partner-wall__head .eyebrow { grid-column: 1; }
  .partner-wall__head h2 { grid-column: 1; }
  .partner-wall__head p { grid-column: 1; }
  .partner-wall__see-all { grid-column: 2; grid-row: 2 / span 2; justify-self: end; }
}

/* 140px, not 180px: at a 390px viewport the container is ~342px, so a
   180px floor resolves to ONE column and the wall becomes a five-high
   stack that buries the "also" row and the rest of the page. 140px
   holds two columns (2 x 140 + 16 = 296 <= 342) on the narrowest
   phones we support. */
.partner-wall__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-md);
}

/* 6 partners: an auto-fit row of 6 on desktop, 3+3 on tablet, 2 on phone.
   Explicit at the top breakpoint so the row never leaves one orphan. */
@media (min-width: 1080px) {
  .partner-wall__grid { grid-template-columns: repeat(6, 1fr); }
}

/* Two rows, not a plain block: the grid stretches every item to the
   tallest in its row, and a plate at `height:100%` of a stretched
   *block* takes the whole box and pushes the name out of it. Giving the
   item its own `1fr auto` track keeps the plates equal-height AND keeps
   the name inside. */
.partner-wall__item {
  display: grid;
  grid-template-rows: 1fr auto;
  color: inherit;
  text-decoration: none;
}

.partner-wall__item:hover .logo-plate,
.partner-wall__item:focus-visible .logo-plate {
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow);
}

/* Design A — "Sans Caption". Client-approved 2026-08-08 from the three
   options in variants.html.

   Inter, not JetBrains Mono: mono's uniform widths and narrow apertures
   are a real legibility tax on long proper nouns at small size, and
   these labels are the primary read of the section. Sentence case, not
   the tracked caps used elsewhere, because mixed-case word shapes are
   what an older reader recognises fastest.

   The underline is permanent, not a hover state. A colour shift on
   hover is invisible on touch, and these plates ARE links. */
.partner-wall__name {
  display: block;
  /* min-height reserves the second line so a wrapping name does not
     shove one column's baseline out of line with the other four. */
  min-height: 2.7em;
  margin-top: var(--space-sm);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);   /* 16 - 18px */
  letter-spacing: normal;
  line-height: 1.35;
  color: var(--text-100);                              /* 14.73:1 */
  text-decoration: underline;
  text-decoration-color: var(--text-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}

.partner-wall__item:hover .partner-wall__name,
.partner-wall__item:focus-visible .partner-wall__name {
  color: var(--jade-300);
  text-decoration-color: var(--jade-300);
}

/* "See all partners" — the arrow link pattern already used by the
   trending section, restated here so the file is theme-portable. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 0;              /* 44px touch target with the line-height */
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step-0);
  color: var(--jade-300);
  text-decoration: none;
  white-space: nowrap;
}

.link-arrow svg { width: 18px; height: 18px; flex: none; transition: transform var(--dur-fast) var(--ease-out); }
.link-arrow:hover { color: var(--text-100); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ------------------------------------------------------------
   3 · Partners page — jump index
   Five long-form entries is more than one screen, so the page opens
   with its own contents. Plates double as the anchor nav.
   ------------------------------------------------------------ */
.partner-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

/* The hero owns the index, so it should not also pay a full section's
   bottom padding before the roster starts. */
.partners-hero { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }

@media (min-width: 1080px) {
  .partner-index { grid-template-columns: repeat(5, 1fr); }
}

.partner-index__item {
  display: grid;
  grid-template-rows: 1fr auto;   /* see .partner-wall__item */
  gap: var(--space-xs);
  text-decoration: none;
  color: inherit;
}

/* Smaller than the home wall, but not so small the marks stop being
   recognisable — this row is how a reader picks a partner, so the logo
   still has to do the identifying. Overrides the per-logo values above
   (same specificity, later in the file). */
.partner-index__item .logo-plate {
  --plate-h: 108px;
  --logo-h: 62px;
}

.partner-index__item:hover .logo-plate,
.partner-index__item:focus-visible .logo-plate {
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow);
}

/* Same label, same treatment — design A applies here too. These name the
   same five organisations as the home wall, so they cannot be set in a
   different face without the two pages looking like different sites. */
.partner-index__label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.35;
  color: var(--text-100);
  text-align: center;
  text-decoration: underline;
  text-decoration-color: var(--text-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}

.partner-index__item:hover .partner-index__label,
.partner-index__item:focus-visible .partner-index__label {
  color: var(--jade-300);
  text-decoration-color: var(--jade-300);
}

/* ------------------------------------------------------------
   4 · Partners page — long-form entries
   ------------------------------------------------------------ */
.partner-list {
  display: grid;
  gap: var(--space-xl);
}

.partner-entry {
  display: grid;
  gap: var(--space-lg);
  padding: var(--space-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  /* Offsets the sticky header when a jump link lands here. */
  scroll-margin-top: 6rem;
}

@media (min-width: 860px) {
  .partner-entry {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
  }
}

.partner-entry__aside {
  display: grid;
  gap: var(--space-md);
  align-content: start;
}

@media (min-width: 860px) {
  .partner-entry__aside { position: sticky; top: 6rem; }
}

/* The entry plate is the largest instance of the logo on the site — it
   is the reader's confirmation they landed on the right partner, so it
   carries the logo close to the plate's full inner height. */
.partner-entry__plate { --plate-h: 176px; --logo-h: 116px; }
.partner-entry__plate[data-logo="mwell"]      { --logo-h: 128px; }
.partner-entry__plate[data-logo="mwo-riyadh"] { --logo-h: 126px; }

.partner-entry__meta {
  display: grid;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

.partner-entry__meta dt {
  color: var(--text-500);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.partner-entry__meta dd { margin: 0 0 var(--space-xs); color: var(--text-300); }
.partner-entry__meta dd:last-child { margin-bottom: 0; }

.partner-entry__tag {
  justify-self: start;
  display: inline-block;
  padding: 0.35em 0.85em;
  background: var(--jade-900);
  color: var(--jade-300);
  border: 1px solid var(--jade-700);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

.partner-entry__body h3 {
  font-size: var(--step-2);
  color: var(--text-100);
  margin: 0 0 var(--space-xs);
  line-height: 1.2;
}

.partner-entry__full {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-500);
  margin: 0 0 var(--space-md);
}

/* The one-line takeaway. Serif + larger, so a scanning reader gets the
   partnership without reading the paragraph underneath it. */
.partner-entry__summary {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--text-100);
  margin: 0 0 var(--space-md);
  padding-left: var(--space-md);
  border-left: 2px solid var(--jade-400);
}

.partner-entry__body p { color: var(--text-300); margin: 0 0 var(--space-md); }
.partner-entry__body p:last-child { margin-bottom: 0; }

.partner-entry__focus {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}

.partner-entry__focus li {
  padding: 0.4em 0.9em;
  background: var(--ink-750);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  color: var(--text-300);
}

/* ------------------------------------------------------------
   5 · Sectors we work with
   ------------------------------------------------------------ */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sector {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-100);
  font-size: var(--step-0);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.sector:hover { border-color: var(--jade-700); background: var(--ink-750); }

.sector__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  background: var(--jade-900);
  color: var(--jade-300);
}

.sector__icon svg { width: 20px; height: 20px; }

/* ------------------------------------------------------------
   6 · How we partner — numbered principles
   ------------------------------------------------------------ */
.principle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: principle;
}

.principle {
  counter-increment: principle;
  padding: var(--space-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.principle::before {
  content: counter(principle, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--step-1);
  color: var(--jade-400);
}

.principle p { margin: 0; color: var(--text-300); font-size: var(--step-0); }

/* ------------------------------------------------------------
   7 · Reduced motion — neutralise every transform added above
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .partner-wall__item:hover .logo-plate,
  .partner-wall__item:focus-visible .logo-plate,
  .partner-index__item:hover .logo-plate,
  .partner-index__item:focus-visible .logo-plate { transform: none; }
  .link-arrow:hover svg { transform: none; }
  .partner-entry__aside { position: static; }
}