/* 2026-08-17: "Areas of focus" + "Our Impact" editorial redesign.
   Scoped entirely under .aurum-focus- and .aurum-impact- — new class
   names, so nothing here touches any other section's CSS. Colours pull
   from the site's real design tokens (design-tokens.css) rather than
   one-off hex values so this stays in sync if the palette ever changes.
   Focus areas reuse the site's existing .focus-pill/.focus-pills
   component (defined in home-rebuild.css, minus its old arrow) instead of
   a new button language, per direct instruction — not redefined here. */

.aurum-focus-section{
  position:relative;
  overflow:hidden;
  background:#fff;
  padding:54px 0 50px;
}

.aurum-focus-container{
  position:relative;
  z-index:2;
  width:min(calc(100% - 100px),1500px);
  margin-inline:auto;
}

/* 2026-08-17b: map + curve moved from being children of .aurum-focus-container
   (which spans the WHOLE section, impact strip included) to children of
   .aurum-focus-layout (the upper composition only) — .aurum-focus-layout
   is their sole positioning context now, so neither can ever reach far
   enough down to overlap .aurum-impact regardless of exact height. */
/* 2026-08-17d: the content column's own text (a short 2-col link list) never
   used anywhere near its full 46% share, leaving a wide dead gap before the
   photo — client feedback was the photo needed to sit closer/protrude
   further left, not just get a wider gap. Shifting more of the column
   split to the image (and tightening the gap) pulls it left without
   touching the content side's own sizing. */
.aurum-focus-layout{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,38%) minmax(0,62%);
  gap:clamp(20px,2.2vw,36px);
  align-items:center;
}

/* Reuses the existing gold dotted-world-map asset (also used by the "Why
   Aurum" section) — enlarged and shifted right/up so it reads as a broad
   global backdrop rather than a small circle sitting behind the heading. */
.aurum-focus-map{
  position:absolute;
  z-index:0;
  width:1050px;
  height:600px;
  left:27%;
  top:-65px;
  opacity:.2;
  background-image:url("../maps/ChatGPT Image Aug 11, 2026, 10_18_30 AM.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  pointer-events:none;
}

.aurum-focus-content{position:relative;z-index:3}

.aurum-focus-eyebrow{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
  color:var(--aurum-red);
  font-size:15px;
  line-height:1;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.aurum-focus-eyebrow::before{
  content:"";
  width:38px;
  height:2px;
  flex:0 0 auto;
  background:var(--aurum-gold);
}

.aurum-focus-title{
  margin:0 0 24px;
  max-width:700px;
  color:var(--aurum-ink);
  font-size:clamp(64px,5.5vw,88px);
  line-height:.93;
  font-weight:700;
  letter-spacing:-.055em;
}

.aurum-focus-intro{
  margin:0 0 24px;
  max-width:560px;
  color:var(--aurum-slate);
  font-size:clamp(16px,1.2vw,19px);
  line-height:1.5;
}

/* 2026-08-17c: reverted from pill buttons back to editorial rows per
   direct feedback — the pill request itself was really about the raw "→"
   Unicode arrow rendering as a colour emoji on iOS, not the row layout.
   That's fixed at the source now (aurum_arrow_icon() in functions.php,
   used below instead of a literal arrow character), so the rows can keep
   their arrow. */
.aurum-focus-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(24px,3vw,40px);
}
.aurum-focus-link{
  display:grid;
  grid-template-columns:28px minmax(0,1fr) 16px;
  align-items:center;
  gap:10px;
  min-height:48px;
  color:var(--aurum-ink);
  text-decoration:none;
  border-bottom:1px solid rgba(25,22,19,.15);
  transition:color .18s ease,border-color .18s ease;
}
.aurum-focus-link__icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px}
.aurum-focus-link__icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.aurum-focus-link__icon--red{color:var(--aurum-red)}
.aurum-focus-link__icon--gold{color:var(--aurum-gold)}
.aurum-focus-link__icon--teal{color:var(--aurum-teal)}
.aurum-focus-link__icon--green{color:var(--aurum-green)}
.aurum-focus-link__label{font-size:clamp(13px,1vw,15px);font-weight:600;line-height:1.3}
.aurum-focus-link__arrow{color:var(--aurum-gold);transition:transform .18s ease,color .18s ease}
.aurum-focus-link:hover{color:var(--aurum-red);border-color:rgba(205,32,38,.45)}
.aurum-focus-link:hover .aurum-focus-link__arrow{color:var(--aurum-red);transform:translateX(3px)}
.aurum-focus-link:focus-visible{outline:2px solid var(--aurum-gold);outline-offset:3px}
@media(max-width:760px){.aurum-focus-links{grid-template-columns:1fr}}

/* Restores the original design's curved left edge (ellipse clip-path) that
   the section had before this rebuild — a plain rounded-rect read as a
   generic floating card instead. Ellipse centred on the box's right edge
   with a vertical radius larger than the box's own half-height keeps the
   curve gentle and roughly even top-to-bottom instead of pinching the
   corners to a point. */
.aurum-focus-media{
  position:relative;
  z-index:2;
  width:100%;
  height:clamp(390px,31vw,460px);
  margin:0;
  overflow:hidden;
  clip-path:ellipse(70% 130% at 100% 50%);
}
.aurum-focus-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.aurum-focus-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,.16) 8%,rgba(255,255,255,0) 23%);
}

/* ---- Our Impact ---- */
.aurum-impact{
  position:relative;
  z-index:2;
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid rgba(224,172,38,.6);
}
.aurum-impact__heading{
  margin-bottom:22px;
  color:var(--aurum-red);
  font-size:15px;
  line-height:1;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.aurum-impact__grid{
  display:grid;
  grid-template-columns:1.35fr 1.2fr 1.3fr 1.15fr .6fr;
  align-items:stretch;
}
.aurum-impact-stat{
  position:relative;
  min-width:0;
  padding:4px clamp(18px,2.2vw,34px);
}
.aurum-impact-stat:first-child{padding-left:0}
.aurum-impact-stat:last-child{padding-right:0}
.aurum-impact-stat:not(:first-child)::before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  bottom:2px;
  width:1px;
  background:rgba(224,172,38,.82);
}
/* display:flex is load-bearing, not decoration: the ticker's thousands
   grouping (script.js buildTicker()) is a zero-width .stat-digit-gap span
   between digit groups whose CSS width (home-rebuild.css) only applies
   inside a flex container — the original .stat-ticker wrapper had
   display:flex for exactly this reason. Without it here, the gaps
   collapsed to nothing and every stat rendered as one run-together number
   (reported live 2026-08-17: "1471665" instead of "1,471,665"). */
.aurum-impact-stat__value{
  display:flex;
  align-items:baseline;
  margin:0 0 10px;
  font-size:clamp(40px,3.4vw,58px);
  line-height:.95;
  font-weight:700;
  letter-spacing:-.04em;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
/* The digit-ticker JS (script.js) rebuilds this element's contents into
   .stat-digit spans on scroll-into-view — those carry their own fixed
   font-size/colour from home-rebuild.css (sized for the old .stat-card
   design), so they need to explicitly inherit this section's size/colour
   instead or the animated number renders small and off-palette. */
.aurum-impact-stat__value .stat-digit{
  font-size:inherit;
  color:inherit;
  font-family:inherit;
  font-weight:inherit;
  letter-spacing:inherit;
  width:.58em;
}
/* Red / teal / gold / teal / red rhythm across the 5 stats, by position —
   independent of each Impact Stat post's own colour field, which drives a
   different (icon-card) display elsewhere and doesn't need to match this
   section's specific rhythm. */
/* The headline stat's value is a phrase ("Over 13 million"), not a bare
   number — at the same size/nowrap treatment as the pure-number stats it
   overflowed its column and visually collided with the next one (reported
   live 2026-08-17). Smaller size + normal wrapping fixes it without
   hardcoding a shorter value in place of the real dynamic field. */
.aurum-impact-stat--headline .aurum-impact-stat__value{
  font-size:clamp(30px,2.5vw,42px);
  white-space:normal;
}
.aurum-impact-stat:nth-child(1) .aurum-impact-stat__value{color:var(--aurum-red)}
.aurum-impact-stat:nth-child(2) .aurum-impact-stat__value{color:var(--aurum-teal)}
.aurum-impact-stat:nth-child(3) .aurum-impact-stat__value{color:var(--aurum-gold)}
.aurum-impact-stat:nth-child(4) .aurum-impact-stat__value{color:var(--aurum-teal)}
.aurum-impact-stat:nth-child(5) .aurum-impact-stat__value{color:var(--aurum-red)}
.aurum-impact-stat__description{
  margin:0;
  max-width:245px;
  color:var(--aurum-ink);
  font-size:14px;
  line-height:1.4;
  font-weight:400;
}

@media(max-width:1100px){
  .aurum-focus-layout{
    grid-template-columns:minmax(0,1fr) minmax(400px,.9fr);
    gap:44px;
  }
  .aurum-focus-title{white-space:normal}
  .aurum-impact__grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    row-gap:38px;
  }
  .aurum-impact-stat:nth-child(4)::before{display:none}
}

@media(max-width:760px){
  .aurum-focus-section{padding:64px 0 68px}
  .aurum-focus-container{width:calc(100% - 40px)}
  .aurum-focus-layout{display:flex;flex-direction:column;gap:34px}
  .aurum-focus-title{order:2;margin-top:-12px;font-size:clamp(46px,14vw,64px);white-space:normal}
  .aurum-focus-eyebrow{order:1}
  .aurum-focus-content{order:3;display:contents}
  .aurum-focus-intro{margin-top:-14px;font-size:17px}
  /* 2026-08-17: mobile-only — "this should just be a full image on
     mobile." The desktop semi-circle clip-path cut (a confirmed, wanted
     design choice — see the long comment above .aurum-focus-media) plus
     object-fit:cover was cropping real photo content out of frame at
     mobile's shorter box. Dropped both here: plain rounded rect, no clip,
     and object-fit:contain so the whole photo is always visible — desktop
     keeps its shaped-card treatment untouched. */
  .aurum-focus-media{order:4;height:340px;border-radius:10px;clip-path:none;background:#171412}
  .aurum-focus-media img{object-fit:contain}
  .aurum-focus-links{order:5;width:100%;margin-top:2px}
  .aurum-focus-map{opacity:.16;left:auto;right:-10%;top:-20px;width:700px;height:420px}
  .aurum-impact{margin-top:44px;padding-top:24px}
  .aurum-impact__grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
  .aurum-impact-stat{padding:0 18px}
  .aurum-impact-stat:nth-child(odd){padding-left:0}
  .aurum-impact-stat:nth-child(odd)::before{display:none}
  .aurum-impact-stat__value{font-size:clamp(34px,9.5vw,47px);white-space:normal}
}

@media(max-width:480px){
  .aurum-impact__grid{grid-template-columns:1fr}
  .aurum-impact-stat{padding:24px 0;border-bottom:1px solid rgba(25,22,19,.1)}
  .aurum-impact-stat:first-child{padding-top:0}
  .aurum-impact-stat::before{display:none!important}
  .aurum-impact-stat__value{font-size:46px}
  .aurum-impact-stat__description{max-width:310px;font-size:15px}
}

@media(prefers-reduced-motion:reduce){
  .focus-pill{transition:none}
}