/* ==========================================================================
   GM Core — Media / Blogs Archive widget
   Self-sufficient (brand tokens fall back to literals). Scoped to .gm-media.
   Pixel-matched to growth-master-media.html.
   ========================================================================== */
.gm-media{
  --n:var(--navy,#0A1B33); --n3:var(--navy-3,#17375E);
  --gold:var(--gold,#D9A02B); --gold-lt:var(--gold-lt,#E8B33C); --gold-dk:var(--gold-dk,#B97512);
  --gg:var(--gold-grad,linear-gradient(135deg,#E8B33C,#D9A02B 48%,#B97512));
  --grw:var(--growth,linear-gradient(90deg,#1F4FBF,#0E7CC4 34%,#0AA9AC 68%,#0FA37A));
  --b1:var(--bar-1,#1F4FBF); --b2:var(--bar-2,#0E7CC4); --b3:var(--bar-3,#0AA9AC); --b4:var(--bar-4,#0FA37A);
  --b2t:var(--bar-2-t,#0E7BC4);
  --white:#fff; --cream:var(--cream,#FCF9F2); --grey:var(--grey,#F3F6F9);
  --dark:var(--dark,#16202E); --muted:var(--muted,#63738A); --border:var(--border,#E1E7EE);
  --r:var(--r,14px); --rlg:var(--r-lg,22px); --pill:var(--r-pill,100px);
  --sh:var(--sh,0 4px 24px rgba(10,27,51,.07)); --shlg:var(--sh-lg,0 18px 48px rgba(10,27,51,.14));
  --shg:var(--sh-gold,0 12px 32px rgba(217,160,43,.3)); --ease:var(--ease,260ms cubic-bezier(.4,0,.2,1));
  font-family:var(--sans,"Inter",-apple-system,"Segoe UI",Roboto,sans-serif);color:var(--dark);
}

/* ---- width model (matches mockup) ----
   Toolbar bar spans full viewport width; its inner content and the feed are
   both capped at 1240px with 28px side padding (the mockup's .wrap). */
.gm-media__wrap{max-width:var(--wrap,1240px);margin:0 auto;padding:0 28px;box-sizing:border-box}

/* toolbar: full-width white bar with bottom border (mockup .toolbar) */
/* toolbar: white bar with bottom border (mockup .toolbar).
   The bar spans the widget's full width — so set the Elementor CONTAINER holding
   this widget to Full Width with 0 horizontal padding, and the bar goes edge to
   edge. Its inner content and the feed are both capped at 1240px, matching the
   mockup's .wrap. No 100vw hack (which Elementor containers clip). */
/* toolbar: full-width white bar with bottom border (mockup .toolbar).
   Breaks out of a boxed/padded Elementor container to span the full viewport,
   using the standard vw breakout. Inner content + feed stay capped at 1240px. */
/* keep the toolbar breakout from being clipped by the widget's own wrapper */
.gm-media{overflow:visible}
.gm-media__toolbar{
  background:#fff!important;
  border-bottom:1px solid var(--border,#E1E7EE)!important;
  position:sticky;top:82px;z-index:50;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  width:100vw!important;max-width:100vw!important;
}
.gm-media__toolbar-in{
  max-width:var(--wrap,1240px);margin:0 auto;padding:16px 28px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
/* the feed (featured + grid + more) sits in the 1240px wrap with mockup padding */
.gm-media__feed{max-width:var(--wrap,1240px);margin:0 auto;padding:44px 28px 30px;box-sizing:border-box}
.gm-media__filters{display:flex;gap:8px;flex-wrap:wrap}
.gm-media__filters a{font-size:.85rem;font-weight:600;color:var(--muted);background:var(--grey);border:1px solid transparent;padding:8px 16px;border-radius:var(--pill);cursor:pointer;transition:all var(--ease);text-decoration:none;line-height:1.2!important}
.gm-media__filters a:hover{color:var(--n)}
.gm-media__filters a.active{background:var(--n);color:#fff}
.gm-media__search{display:flex;align-items:center;gap:8px;background:var(--grey)!important;border:1px solid var(--border);border-radius:var(--pill);padding:9px 16px;min-width:230px;margin:0}
.gm-media__search svg{width:16px;height:16px;color:var(--muted);flex:none}
.gm-media__search input,
.gm-media__search input[type="search"]{border:0!important;background:none!important;box-shadow:none!important;font-family:inherit;font-size:.9rem;width:100%;outline:none;color:var(--dark);padding:0!important;margin:0!important;height:auto!important;line-height:1.4!important}

/* category tag chip */
.gm-media .tag{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 12px;border-radius:var(--pill);color:#fff;line-height:1.2!important}
.gm-media .tag--equity{background:var(--b1)}
.gm-media .tag--index{background:var(--b2)}
.gm-media .tag--fno{background:var(--b3)}
.gm-media .tag--market{background:var(--b4)}
.gm-media .tag--default{background:var(--n3)}

/* featured */
.gm-media__featured{display:grid;grid-template-columns:1.15fr .85fr;gap:0;border:1px solid var(--border);border-radius:var(--rlg);overflow:hidden;box-shadow:var(--sh);margin-bottom:44px}
.gm-media__fimg{position:relative;min-height:320px;background:linear-gradient(150deg,#17375E,#0A1B33);background-size:cover;background-position:center}
.gm-media__fimg .thumbtag{position:absolute;top:18px;left:18px;z-index:2}
.gm-media__fimg .ph{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.3)}
.gm-media__fimg .ph svg{width:54px;height:54px}
.gm-media__fbody{padding:38px 40px;display:flex;flex-direction:column;justify-content:center}
.gm-media__fbody .flag{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-dk);margin-bottom:14px}
.gm-media__fbody h2{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:800;letter-spacing:-.02em;color:var(--n);line-height:1.16!important;margin-bottom:14px}
.gm-media__fbody h2 a{color:inherit;text-decoration:none}
.gm-media__fbody h2 a:hover{color:var(--gold-dk)}
.gm-media__fbody p{color:var(--muted);font-size:1rem;line-height:1.6!important;margin-bottom:22px}
.gm-media__fmeta{display:flex;align-items:center;gap:14px;margin-bottom:24px;font-size:.85rem;color:var(--muted)}
.gm-media__fmeta .dot{width:4px;height:4px;border-radius:50%;background:var(--border)}

/* buttons */
.gm-media .btn{display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border:2px solid transparent;border-radius:var(--pill);font-size:.9rem;font-weight:700;font-family:inherit;cursor:pointer;transition:all var(--ease);align-self:flex-start;text-decoration:none}
.gm-media .btn--gold{background:var(--gg);color:var(--n);box-shadow:var(--shg)}
.gm-media .btn--gold:hover{transform:translateY(-2px)}
.gm-media .btn svg{width:17px;height:17px}

/* card grid */
.gm-media__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.gm-media__card{background:#fff;border:1px solid var(--border);border-radius:var(--rlg);overflow:hidden;display:flex;flex-direction:column;transition:transform var(--ease),box-shadow var(--ease)}
.gm-media__card:hover{transform:translateY(-5px);box-shadow:var(--shlg)}
.gm-media__cimg{position:relative;aspect-ratio:16/9;background:linear-gradient(150deg,#17375E,#0A1B33);background-size:cover;background-position:center}
.gm-media__cimg .thumbtag{position:absolute;top:14px;left:14px;z-index:2}
.gm-media__cimg .ph{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.28)}
.gm-media__cimg .ph svg{width:38px;height:38px}
.gm-media__cbody{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.gm-media__cbody h3{font-size:1.1rem;font-weight:700;color:var(--n);line-height:1.3!important;letter-spacing:-.01em;margin-bottom:12px}
.gm-media__cbody h3 a{color:inherit;text-decoration:none}
.gm-media__cbody h3 a:hover{color:var(--gold-dk)}
.gm-media__cbody p{color:var(--muted);font-size:.88rem;line-height:1.6!important;margin-bottom:18px;flex:1}
.gm-media__cmeta{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--muted);padding-top:16px;border-top:1px solid var(--border)}
.gm-media__cmeta .av{width:26px;height:26px;border-radius:50%;background:var(--n);color:var(--gold-lt);display:grid;place-items:center;font-size:.7rem;font-weight:800;flex:none}
.gm-media__cmeta .dot{width:3px;height:3px;border-radius:50%;background:var(--border)}
.gm-media__cmeta .rt{margin-left:auto;color:var(--b2t);font-weight:600}

/* load more */
.gm-media__more{text-align:center;padding:44px 0 10px}
.gm-media__more a{font-size:.9rem;font-weight:700;color:var(--n);background:#fff;border:2px solid var(--border);padding:14px 34px;border-radius:var(--pill);cursor:pointer;transition:all var(--ease);text-decoration:none;display:inline-block}
.gm-media__more a:hover{border-color:var(--n);background:var(--n);color:#fff}

/* empty state */
.gm-media__empty{text-align:center;padding:60px 20px;color:var(--muted);border:1px dashed var(--border);border-radius:var(--rlg)}

/* safety: icon SVGs never balloon if a parent rule is missing */
.gm-media svg{max-width:100%;max-height:56px}

@media(max-width:960px){
  .gm-media__featured{grid-template-columns:1fr}
  .gm-media__fimg{min-height:220px}
  .gm-media__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .gm-media__grid{grid-template-columns:1fr}
  .gm-media__toolbar{flex-direction:column;align-items:stretch}
  .gm-media__search{min-width:0}
}