/*
 * Global Risk Clinic brand tokens.
 * Source of truth: "GRC Design Guidelines.pptx".
 *
 * Standing rules baked in here:
 *   Colours   #A02122 red, #0C2430 navy, #FFFFFF white, grayscale accents only
 *   Type      Montserrat only. Arial is a fallback, never a choice.
 *   Canvas    1080 x 1080 square unless a post opts into portrait
 *   Surfaces  Solid fills only. No gradients, grids, checks, dots or textures.
 */

/* Montserrat, self hosted. These are the same subset files and the same
   unicode ranges the Next.js studio serves, so every glyph the studio can
   render is available here too. Shipping only the latin subset made arrows
   such as U+2192 fall back to Arial, which changed line heights. */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-italic-0.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-italic-1.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-italic-2.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-italic-3.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-italic-4.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-normal-5.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-normal-6.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-normal-7.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-normal-8.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-normal-9.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Metric adjusted fallback, copied from what the studio generates. Any glyph
   Montserrat does not carry is drawn by Arial, and without these overrides
   Arial's own metrics change the line box, which shifted text by a few pixels
   against the studio's render. */
@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial");
  ascent-override: 85.79%;
  descent-override: 22.25%;
  line-gap-override: 0.0%;
  size-adjust: 112.83%;
}

:root {
  --grc-red: #a02122;
  --grc-red-dark: #8a1c1d;
  --grc-navy: #0c2430;
  --grc-navy-soft: #132f3d;
  --grc-white: #ffffff;
  --grc-ink: #1b2a33;

  --grc-gray-900: #212b31;
  --grc-gray-700: #3f4a50;
  --grc-gray-500: #6b7379;
  --grc-gray-300: #c9cdcf;
  --grc-gray-200: #e2e4e5;
  --grc-gray-100: #eef0f1;

  --grc-gold: #c79a2e;

  --grc-font: "Montserrat", "Montserrat Fallback", Arial, sans-serif;
  /* Posts exported from the studio carry inline styles that reference this
     variable by the name the Next.js app uses. Aliasing it here means that
     markup renders with the same face without being rewritten. */
  --font-montserrat: "Montserrat", "Montserrat Fallback";
  --grc-canvas: 1080px;
}

/* ------------------------------------------------------------------ *
 * Artboard
 * ------------------------------------------------------------------ */

.grc-slide {
  position: relative;
  box-sizing: border-box;
  width: var(--grc-canvas);
  height: var(--grc-canvas);
  overflow: hidden;
  /* Solid only. A slide never carries a gradient or a pattern. */
  background: var(--grc-white);
  color: var(--grc-ink);
  font-family: var(--grc-font);
  font-weight: 500;
  line-height: 1.219; /* Montserrat's own normal metric, stated so exports match */
  padding: 64px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Portrait posts keep the 1080 width and grow taller. */
.grc-slide.is-portrait {
  height: 1620px;
}

.grc-slide *,
.grc-slide *::before,
.grc-slide *::after {
  box-sizing: border-box;
}

/* Theme modifiers set the one background colour the slide is allowed. */
.grc-slide.theme-navy {
  background: var(--grc-navy);
  color: var(--grc-white);
}

.grc-slide.theme-red {
  background: var(--grc-red);
  color: var(--grc-white);
}

.grc-slide.theme-light {
  background: var(--grc-gray-100);
  color: var(--grc-ink);
}

/* ------------------------------------------------------------------ *
 * Building blocks. Hand written post files compose these class names.
 * ------------------------------------------------------------------ */

.grc-lockup {
  display: flex;
  align-items: center;
  gap: 16px;
}

.grc-lockup img {
  height: 44px;
  width: auto;
  display: block;
}

.grc-lockup-text {
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.grc-eyebrow {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grc-red);
}

.theme-navy .grc-eyebrow,
.theme-red .grc-eyebrow {
  color: var(--grc-white);
}

.grc-headline {
  font-weight: 800;
  font-size: 68px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
}

.grc-headline.is-uppercase {
  text-transform: uppercase;
}

.grc-subhead {
  font-weight: 700;
  font-size: 40px;
  line-height: 1.16;
  margin: 0;
}

.grc-body {
  font-weight: 500;
  font-size: 28px;
  line-height: 1.45;
  margin: 0;
  color: var(--grc-gray-700);
}

.theme-navy .grc-body,
.theme-red .grc-body {
  color: rgba(255, 255, 255, 0.88);
}

.grc-accent {
  color: var(--grc-red);
}

.theme-navy .grc-accent {
  color: var(--grc-white);
}

/* A short solid rule used under headlines. */
.grc-rule {
  width: 120px;
  height: 8px;
  background: var(--grc-red);
  border: 0;
  margin: 0;
}

.grc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.grc-list li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.3;
}

/* Numbered and ticked markers are solid discs, never icons with texture. */
.grc-marker {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--grc-red);
  color: var(--grc-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 22px;
}

.theme-red .grc-marker {
  background: var(--grc-navy);
}

.grc-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 28px;
  border-radius: 12px;
  background: var(--grc-red);
  color: var(--grc-white);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.grc-pill.is-navy {
  background: var(--grc-navy);
}

.grc-panel {
  background: var(--grc-gray-100);
  border-radius: 16px;
  padding: 32px;
}

.theme-navy .grc-panel {
  background: var(--grc-navy-soft);
}

.grc-stat {
  font-weight: 900;
  font-size: 120px;
  line-height: 1;
  color: var(--grc-red);
}

.theme-navy .grc-stat,
.theme-red .grc-stat {
  color: var(--grc-white);
}

.grc-spacer {
  flex: 1 1 auto;
}

/* Footer band sits flush to the slide edges. */
.grc-footer {
  margin: auto -64px -64px;
  padding: 28px 64px;
  background: var(--grc-navy);
  color: var(--grc-white);
  font-weight: 700;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.grc-footer.is-red {
  background: var(--grc-red);
}

.grc-figure {
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
}

.grc-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grc-row {
  display: flex;
  gap: 28px;
  align-items: center;
}

.grc-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1 1 0;
  min-width: 0;
}

.grc-page-number {
  position: absolute;
  right: 64px;
  bottom: 64px;
  font-weight: 800;
  font-size: 22px;
  color: var(--grc-gray-500);
}

.theme-navy .grc-page-number,
.theme-red .grc-page-number {
  color: rgba(255, 255, 255, 0.7);
}