/*
 * Homepage sections: "What we do", "Our Impact" and "Our Valued Partners" (index.php).
 * Every class is hm-* and scoped under .hm-home; tokens (--hm-navy, --hm-gold, --hm-ease ...) and the shared pieces
 * (.hm-eyebrow, .hm-title, .hm-lead, .hm-more, .hm-btn) come from css/home.css. Light page, so no dark palette; the Impact
 * band sets its own colours. Motion is transform / opacity only and is switched off for prefers-reduced-motion.
 */

/* ====================================================================================================================
   What we do
   A two-part header (heading left, sentence right) over three ruled columns: no cards, no panel, no box. Each column is an icon,
   a heading and one sentence; the heading is its ONE link and the link's ::after stretches over the whole column, so the column
   is clickable while a screen reader hears a short, plain link ("Creative Expression"). On hover a short gold tick on the rule
   draws across the column (clip-path only), the icon fills navy and the arrow steps forward.
   ==================================================================================================================== */

/* style.css still carries ID rules for #highlights (centred text, off-white, 5rem padding, 3rem h2 margin);
   an ID outranks any class, so this one section is matched with an ID too. */
.hm-home #highlights.hm-what {
  padding-block: clamp(2.5rem, 1.6rem + 2.8vw, 4rem);
  background: #fff;
  text-align: left;
}
.hm-home #highlights .hm-title { margin: 0; }

.hm-home .hm-what__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  align-items: end;
  gap: 1rem clamp(2rem, 0.5rem + 5vw, 5rem);
}
.hm-home .hm-what__head .hm-lead { margin: 0; max-width: 35rem; }

.hm-home .hm-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 0.5rem + 2.4vw, 2.75rem);
  margin: clamp(1.75rem, 1.1rem + 2vw, 2.75rem) 0 0;
  padding: 0;
  list-style: none;
}
.hm-home .hm-pillar {
  position: relative;                    /* the containing block of the link's stretched ::after */
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "icon  .     arrow"
    "title title title"
    "text  text  text";
  align-items: center;
  row-gap: 0.55rem;
  margin: 0;
  padding: 1.35rem 0 0;
  border-top: 1px solid var(--hm-line);
}
.hm-home .hm-pillar::before {            /* a short gold tick on the rule; on hover it draws across the whole column */
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #f2cb7e, #d4a24a);
  clip-path: inset(0 calc(100% - 3rem) 0 0);
  transition: clip-path 0.5s var(--hm-ease);
}

.hm-home .hm-pillar__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.25rem;
  border: 1px solid rgba(10, 35, 66, 0.14);
  border-radius: 50%;
  background: var(--hm-cream);
  color: var(--hm-gold-ink);
  font-size: 1rem;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.hm-home .hm-pillar__arrow {
  grid-area: arrow;
  align-self: start;
  margin-top: 0.8rem;
  color: var(--hm-navy);
  font-size: 0.95rem;
  transition: transform 0.3s var(--hm-ease);
}
.hm-home .hm-pillar__title {
  grid-area: title;
  margin: 0;
  font: 700 clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem) / 1.2 var(--hm-serif);
}
.hm-home a.hm-pillar__link {
  color: var(--hm-navy);
  text-decoration: none;
}
.hm-home a.hm-pillar__link::after {      /* the link covers the whole column */
  content: "";
  position: absolute;
  inset: 0;
}
.hm-home .hm-pillar__text {
  grid-area: text;
  max-width: 38ch;
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--hm-muted);
}

.hm-home .hm-pillar:hover::before,
.hm-home .hm-pillar:focus-within::before { clip-path: inset(0 0 0 0); }
.hm-home .hm-pillar:hover .hm-pillar__icon,
.hm-home .hm-pillar:focus-within .hm-pillar__icon {
  background: var(--hm-navy);
  border-color: var(--hm-navy);
  color: var(--hm-gold-soft);
}
.hm-home .hm-pillar:hover .hm-pillar__arrow,
.hm-home .hm-pillar:focus-within .hm-pillar__arrow { transform: translateX(4px); }

/* with :has() the keyboard ring goes round the whole column instead of the heading text */
@supports selector(:has(*)) {
  .hm-home a.hm-pillar__link:focus-visible { outline: none; }
  .hm-home .hm-pillar:has(a.hm-pillar__link:focus-visible) {
    outline: 3px solid var(--hm-gold-ink);
    outline-offset: 0.6rem;
    border-radius: 6px;
  }
}

/* ====================================================================================================================
   Our Impact
   A navy band with four glass tiles. The numbers are in the HTML; js/home-impact.js counts them up when they scroll into view.
   ==================================================================================================================== */

/* The two dark/light bands under the team ("Our Impact", "Our Valued Partners") are deliberately slimmer than a normal section. */
.hm-home { --hm-band-y: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem); }

.hm-home #impact-stats.hm-impact {
  padding-block: var(--hm-band-y);
  background:
    radial-gradient(60rem 28rem at 88% -12%, rgba(201, 164, 107, 0.24), transparent 62%),
    radial-gradient(40rem 22rem at -6% 112%, rgba(201, 164, 107, 0.12), transparent 62%),
    var(--hm-navy);
  color: #fff;
}
.hm-home .hm-impact .hm-eyebrow { color: var(--hm-gold); }
.hm-home .hm-impact .hm-title { color: #fff; text-shadow: none; }
.hm-home .hm-impact .hm-lead { color: #c3d0dc; }
.hm-home .hm-impact .hm-head,
.hm-home .hm-partners .hm-head { margin-bottom: clamp(1.1rem, 0.8rem + 1.2vw, 1.6rem); }
.hm-home .hm-impact .hm-lead,
.hm-home .hm-partners .hm-lead { margin-top: 0.55rem; }
.hm-home .hm-impact a:focus-visible { outline-color: #fff; }

.hm-home .hm-impact__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));      /* two figures: side by side */
  gap: clamp(0.75rem, 0.4rem + 1.2vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hm-home .hm-impact__item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);       /* the icon sits beside the figure and its label (stacked again on phones) */
  grid-template-areas: "icon num" "icon label";
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.1rem;
  min-width: 0;
  margin: 0;
  padding: clamp(1rem, 0.8rem + 0.8vw, 1.3rem) clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.hm-home .hm-impact__item::before {      /* a gold bar on the top edge */
  content: "";
  position: absolute;
  top: 0;
  left: clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
  width: 3rem;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, #f2cb7e, #d4a24a);
}
.hm-home .hm-impact__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid rgba(201, 164, 107, 0.55);
  border-radius: 50%;
  color: var(--hm-gold);
  font-size: 1rem;
}
.hm-home .hm-impact__num {
  grid-area: num;
  display: block;
  font: 700 clamp(2rem, 1.5rem + 2vw, 3rem) / 1.05 var(--hm-serif);
  font-variant-numeric: lining-nums tabular-nums;
  color: #fff;
}
.hm-home .hm-impact__label {
  grid-area: label;
  font: 700 0.78rem / 1.35 var(--hm-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c3d0dc;
}

.hm-home .hm-impact__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.75rem;
  margin-top: clamp(1.25rem, 0.9rem + 1.2vw, 1.75rem);
  text-align: center;
}
.hm-home .hm-impact__cta p {
  margin: 0;
  font: italic 500 1.12rem / 1.5 var(--hm-serif);
  color: #e6edf5;
}

/* ====================================================================================================================
   Our Valued Partners
   Logos in white tiles, in full colour. One logo sits still; two or more scroll in an endless strip that runs edge to edge
   and stops while the pointer or the keyboard is on it (there is no pause button: the owner asked for it to go).
   ==================================================================================================================== */

.hm-home #sponsors-showcase.hm-partners { padding-block: var(--hm-band-y); }

.hm-home .hm-logos__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.85rem, 0.6rem + 1vw, 1.4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hm-home .hm-logos__list > li { margin: 0; padding: 0; }

.hm-home .hm-logo {
  /* The logo is limited with calc() from these numbers, not with percentages: a percentage max-height does not
     resolve inside an auto-sized grid track, and the logo would spill out of the tile. */
  --hm-logo-w: clamp(8rem, 24vw, 11rem);
  --hm-logo-h: clamp(5rem, 15vw, 6.25rem);
  --hm-logo-pad-x: 1rem;
  --hm-logo-pad-y: 0.7rem;
  position: relative;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  box-sizing: border-box;
  width: var(--hm-logo-w);
  height: var(--hm-logo-h);
  padding: var(--hm-logo-pad-y) var(--hm-logo-pad-x);
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-radius);
  background: #fff;
  color: var(--hm-navy);
  text-align: center;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(10, 35, 66, 0.05), 0 12px 24px -18px rgba(10, 35, 66, 0.3);
  transition: transform 0.3s var(--hm-ease), box-shadow 0.3s var(--hm-ease), border-color 0.3s;
}
.hm-home .hm-logo img {
  display: block;
  width: auto;                       /* never both a width and a height: the real aspect ratio decides */
  height: auto;
  max-width: calc(var(--hm-logo-w) - 2 * var(--hm-logo-pad-x) - 2px);
  max-height: calc(var(--hm-logo-h) - 2 * var(--hm-logo-pad-y) - 2px);
  object-fit: contain;
  mix-blend-mode: multiply;          /* a logo saved on a white background melts into its white tile instead of showing a pale box */
  transition: filter 0.3s, opacity 0.3s;
}
.hm-home .hm-logo__name { font: 700 1rem / 1.25 var(--hm-serif); overflow-wrap: anywhere; }

/* a link says so: an arrow appears in the corner (decorative, so it has an empty alternative text) */
.hm-home a.hm-logo::after {
  content: "\2197";
  content: "\2197" / "";
  position: absolute;
  top: 0.55rem;
  right: 0.8rem;
  font: 700 0.95rem / 1 var(--hm-sans);
  color: var(--hm-gold-ink);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 0.25s, transform 0.25s var(--hm-ease);
}
.hm-home a.hm-logo:hover,
.hm-home a.hm-logo:focus-visible {
  border-color: rgba(201, 164, 107, 0.7);
  box-shadow: 0 18px 32px -16px rgba(10, 35, 66, 0.4);
}
.hm-home a.hm-logo:hover::after,
.hm-home a.hm-logo:focus-visible::after { opacity: 1; transform: none; }
@media (hover: hover) {
  .hm-home a.hm-logo:hover,
  .hm-home a.hm-logo:focus-visible { transform: translateY(-4px); }
}
@media (hover: none) {
  .hm-home a.hm-logo::after { opacity: 1; transform: none; }   /* no hover on a touch screen: always show it */
}

/* two or more logos: an endless, full-width strip. The track holds the set of logos several times over, twice (index.php works out
   how many times, so one half is wider than any screen); it slides left by exactly one half and starts again, which cannot be
   seen. Every list has the same width (the gap is padding on its right), so -50% lands exactly on the start of the second half. */
.hm-home .hm-logos--marquee {
  overflow: hidden;
  overflow: clip;                    /* unlike hidden, clip cannot be scrolled: tabbing to a logo outside the strip never shifts it */
  padding-block: 0.7rem 1.1rem;      /* room for the hover lift and its shadow */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hm-home .hm-logos--marquee .hm-logos__track {
  display: flex;
  width: max-content;
  animation: hm-marquee calc(var(--hm-count, 6) * 6s) linear infinite;   /* a fixed time per logo: about the same speed whatever the set */
}
.hm-home .hm-logos--marquee .hm-logos__list {
  flex: none;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding-right: clamp(0.85rem, 0.6rem + 1vw, 1.4rem);
}
/* it rests while the pointer or the keyboard is on it, and while it is scrolled out of view */
.hm-home .hm-logos--marquee:hover .hm-logos__track,
.hm-home .hm-logos--marquee:focus-within .hm-logos__track,
.hm-home .hm-logos--marquee.is-offscreen .hm-logos__track { animation-play-state: paused; }
@keyframes hm-marquee { to { transform: translateX(-50%); } }

.hm-home .hm-partners__cta {
  margin: clamp(0.1rem, 0rem + 0.5vw, 0.5rem) 0 0;
  text-align: center;
  color: var(--hm-muted);
}
.hm-home .hm-partners__cta a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  margin-left: 0.35rem;
  color: var(--hm-navy);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--hm-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.hm-home .hm-partners__cta a:hover { text-decoration-color: var(--hm-navy); }
.hm-home .hm-partners__cta a i { font-size: 0.8em; transition: transform 0.25s var(--hm-ease); }
.hm-home .hm-partners__cta a:hover i { transform: translateX(3px); }

/* ====================================================================================================================
   Narrower screens
   ==================================================================================================================== */

/* The columns follow the number of figures, so a row is never left with one orphan tile. */
.hm-home .hm-impact__grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hm-home .hm-impact__grid[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .hm-home .hm-impact__grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-home .hm-what__head { grid-template-columns: minmax(0, 1fr); }
  /* the columns become slim rows: the icon on the left, the heading and sentence beside it */
  .hm-home .hm-pillars { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 1.5rem; }
  .hm-home .hm-pillar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "icon title arrow"
      "icon text  arrow";
    column-gap: 1.1rem;
    row-gap: 0.2rem;
    align-items: start;
    padding: 1.2rem 0;
  }
  .hm-home .hm-pillar:last-child { border-bottom: 1px solid var(--hm-line); }
  .hm-home .hm-pillar__icon { margin: 0; grid-row: 1 / span 2; }
  .hm-home .hm-pillar__arrow { align-self: center; margin: 0; }
  .hm-home .hm-pillar__text { max-width: none; }
}
@media (max-width: 760px) {
  /* narrow tiles: the label drops under the icon + figure pair, which keeps a tile short */
  .hm-home .hm-impact__item {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icon num" "label label";
    column-gap: 0.7rem;
    row-gap: 0.45rem;
    padding: 0.95rem 1rem;
  }
  .hm-home .hm-impact__icon { width: 2.1rem; height: 2.1rem; font-size: 0.85rem; }
  .hm-home .hm-impact__num { font-size: clamp(1.75rem, 1.2rem + 3vw, 2.3rem); }
}
@media (max-width: 560px) {
  .hm-home .hm-impact__grid,
  .hm-home .hm-impact__grid[data-count] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-home .hm-impact__item:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* an odd tile out takes the whole last row */
  .hm-home .hm-impact__cta { flex-direction: column; }
  .hm-home .hm-impact__cta .hm-btn { width: 100%; }
}
@media (max-width: 560px) {
  .hm-home .hm-pillar { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon title" "icon text"; column-gap: 0.9rem; }
  .hm-home .hm-pillar__icon { width: 2.5rem; height: 2.5rem; font-size: 0.9rem; }
  .hm-home .hm-pillar__arrow { display: none; }     /* the whole row is the link */
}

/* ====================================================================================================================
   Reduced motion: no marquee loop, no lift, no slide
   ==================================================================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hm-home .hm-logos--marquee .hm-logos__track { animation: none; }

  .hm-home .hm-logo,
  .hm-home .hm-logo img,
  .hm-home a.hm-logo::after,
  .hm-home .hm-pillar::before,
  .hm-home .hm-pillar__icon,
  .hm-home .hm-pillar__arrow,
  .hm-home .hm-partners__cta a i { transition: none; }

  .hm-home a.hm-logo:hover,
  .hm-home .hm-pillar:hover .hm-pillar__arrow,
  .hm-home .hm-pillar:focus-within .hm-pillar__arrow,
  .hm-home .hm-partners__cta a:hover i { transform: none; }

  .hm-home .hm-logos--marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hm-home .hm-logos--marquee .hm-logos__track { width: auto; }
  .hm-home .hm-logos--marquee .hm-logos__list { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .hm-home .hm-logos--marquee .hm-logos__list[aria-hidden="true"] { display: none; }
}

/* ====================================================================================================================
   Print: browsers drop backgrounds by default, so the navy band would print white text on white paper
   ==================================================================================================================== */

@media print {
  .hm-home #impact-stats.hm-impact { background: #fff; color: var(--hm-ink); }
  .hm-home .hm-impact .hm-eyebrow { color: var(--hm-gold-ink); }
  .hm-home .hm-impact .hm-title,
  .hm-home .hm-impact__num { color: var(--hm-navy); }
  .hm-home .hm-impact .hm-lead,
  .hm-home .hm-impact__label,
  .hm-home .hm-impact__cta p { color: var(--hm-muted); }
  .hm-home .hm-impact__item { background: none; border-color: #bbb; box-shadow: none; }
  .hm-home .hm-impact__cta { display: none; }
  .hm-home .hm-logos--marquee { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .hm-home .hm-logos--marquee .hm-logos__track { width: auto; animation: none; }
  .hm-home .hm-logos--marquee .hm-logos__list { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .hm-home .hm-logos--marquee .hm-logos__list[aria-hidden="true"] { display: none; }
}