/* SFF 2026 - Card Row. Scoped to .sff26-cards; rules are written as
   ".sff26-cards .sff26-cards__x" so they outrank the theme's element rules
   without !important. The button is the theme's own .cta-button (styled by
   the theme and the forum skin), so only its layout is set here. */

.sff26-cards {
  --sff26-panel: #1e1d1d;
  --sff26-muted: #cfcfcf;
  --sff26-amber: #FCB316;
  --sff26-ease: cubic-bezier(.22, .8, .24, 1);
  --sff26-gut: 20px;
  --sff26-max: var(--forum-content-max, 1416px);
  --sff26-r: 16px;
  box-sizing: border-box;
  position: relative;
  padding: 120px 0 0;
  color: #fff;
  font-family: var(--forum-font, "Open Sans", Arial, sans-serif);
}

/* From tablets up the content lines up with the site header and footer: the
   forum skin's --forum-content-max and --forum-gutter (these fallbacks without it) */
@media (min-width: 768px) {
  .sff26-cards { --sff26-gut: var(--forum-gutter, 40px); }
}
.sff26-cards *,
.sff26-cards *::before,
.sff26-cards *::after { box-sizing: border-box; }

.sff26-cards .sff26-cards__w {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "hd acts" "bd bd";
  column-gap: 48px;
  row-gap: 56px;
  align-items: end;
  max-width: calc(var(--sff26-max) + 2 * var(--sff26-gut));
  margin: 0 auto;
  padding: 0 var(--sff26-gut);
}
.sff26-cards .sff26-cards__hd { grid-area: hd; }
.sff26-cards .sff26-cards__acts { grid-area: acts; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.sff26-cards .sff26-cards__bd { grid-area: bd; min-width: 0; }

/* Heading pattern: H2 (with an optional small lead-in line) and lead on the left */
.sff26-cards .sff26-cards__h2 {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.018em;
  color: #fff;
  text-transform: none;
  text-wrap: balance;
}
.sff26-cards .sff26-cards__pre {
  display: block;
  margin-bottom: 10px;
  font-size: .5em;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -.005em;
  color: #fff;
}
/* Letter spans added by module.js. The theme's legacy SFF stylesheet paints
   every "h2 span" amber, so the spans must inherit the heading's colour. */
.sff26-cards .sff26-cards__h2 .sff26-cards__wd,
.sff26-cards .sff26-cards__h2 .sff26-cards__ch { color: inherit; }
.sff26-cards .sff26-cards__wd { white-space: nowrap; }
.sff26-cards .sff26-cards__ch { display: inline-block; }
.sff26-cards .sff26-cards__lead {
  max-width: 56ch;
  margin: 18px 0 0;
  padding: 0;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--sff26-muted);
  text-wrap: pretty;
}
.sff26-cards .sff26-cards__h2.sff26-cards__h2--amber { color: var(--sff26-amber); }
.sff26-cards .sff26-cards__lead.sff26-cards__lead--2 { margin-top: 10px; }

/* Text link: amber, arrow, an underline that draws in on hover */
.sff26-cards .sff26-cards__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--forum-highlight, var(--sff26-amber));
  text-decoration: none;
}
.sff26-cards .sff26-cards__link::after {
  content: "";
  position: absolute;
  left: 0;
  /* Runs under the text AND the arrow; on hover it draws in over the same
     .3s ease as the arrow stretches (scaleX 1.3 from its left, so the tip
     moves 7.2px past the link box), ending exactly at the stretched tip. */
  right: calc(24px * -0.3);
  bottom: 8px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .3s ease;
}
.sff26-cards .sff26-cards__link:hover,
.sff26-cards .sff26-cards__link:focus-visible { color: var(--forum-highlight, var(--sff26-amber)); text-decoration: none; }
.sff26-cards .sff26-cards__link:hover::after,
.sff26-cards .sff26-cards__link:focus-visible::after { transform: scaleX(1); }
/* Same arrow as the primary CTA (theme .cta-arrow): 24x12, stretches from its
   left edge on hover */
.sff26-cards .sff26-cards__link-ic {
  flex: none;
  display: block;
  width: 24px;
  height: 12px;
  transform-origin: left center;
  transition: transform .3s ease;
}
.sff26-cards .sff26-cards__link:hover .sff26-cards__link-ic,
.sff26-cards .sff26-cards__link:focus-visible .sff26-cards__link-ic { transform: scaleX(1.3); }

.sff26-cards a:focus-visible { outline: 2px solid var(--sff26-amber); outline-offset: 3px; }

/* Cards: one shape (16px radius), one hover (lift, colour flood, arrow slides) */
.sff26-cards .sff26-cards__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sff26-cards .sff26-cards__card {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: normal;
}
.sff26-cards .sff26-cards__card::before,
.sff26-cards .sff26-cards__card::marker { content: none; }

.sff26-cards .sff26-cards__a {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  padding: 26px 22px 22px;
  overflow: hidden;
  border-radius: var(--sff26-r);
  background: var(--sff26-panel);
  color: #fff;
  text-decoration: none;
  transition: transform .35s var(--sff26-ease), box-shadow .35s var(--sff26-ease), color .3s ease;
}
.sff26-cards .sff26-cards__a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sff26-c);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform .45s var(--sff26-ease);
}
.sff26-cards a.sff26-cards__a:hover,
.sff26-cards a.sff26-cards__a:focus-visible {
  transform: translateY(-6px);
  color: var(--sff26-on, #141414);
  text-decoration: none;
  box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .75);
}
.sff26-cards a.sff26-cards__a:hover::before,
.sff26-cards a.sff26-cards__a:focus-visible::before { transform: scaleY(1); }
.sff26-cards a.sff26-cards__a:focus-visible { outline-offset: 4px; }

.sff26-cards .sff26-cards__ic {
  display: block;
  width: 124px;
  height: 124px;
  margin: 0 0 26px -4px;
  transition: transform .5s var(--sff26-ease);
}
.sff26-cards .sff26-cards__ic img { display: block; width: 124px; height: 124px; max-width: none; }
.sff26-cards a.sff26-cards__a:hover .sff26-cards__ic,
.sff26-cards a.sff26-cards__a:focus-visible .sff26-cards__ic { transform: translateY(-6px) rotate(-8deg) scale(1.06); }

.sff26-cards .sff26-cards__t {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.012em;
  color: inherit;
  text-transform: none;
  text-wrap: balance;
}
.sff26-cards .sff26-cards__t span {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  color: inherit;
  opacity: .72;
  transition: opacity .3s ease;
}
.sff26-cards a.sff26-cards__a:hover .sff26-cards__t span,
.sff26-cards a.sff26-cards__a:focus-visible .sff26-cards__t span { opacity: 1; }

.sff26-cards .sff26-cards__p {
  margin: 10px 0 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--sff26-muted);
  transition: color .3s ease;
}
.sff26-cards a.sff26-cards__a:hover .sff26-cards__p,
.sff26-cards a.sff26-cards__a:focus-visible .sff26-cards__p { color: inherit; }

.sff26-cards .sff26-cards__foot { margin-top: auto; padding-top: 22px; }
.sff26-cards .sff26-cards__go {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  color: inherit;
  transition: transform .35s var(--sff26-ease), background-color .3s ease, border-color .3s ease;
}
.sff26-cards .sff26-cards__go svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sff26-cards a.sff26-cards__a:hover .sff26-cards__go,
.sff26-cards a.sff26-cards__a:focus-visible .sff26-cards__go {
  transform: translateX(6px);
  border-color: currentColor;
  background: rgba(20, 20, 20, .08);
}

/* The current page's card (theme pages): filled in its colour, not a link,
   "You are here" at the foot (4px corners, not a pill) */
.sff26-cards .sff26-cards__card--here .sff26-cards__a { background: var(--sff26-c); color: var(--sff26-on, #141414); }
.sff26-cards .sff26-cards__card--here .sff26-cards__a::before { display: none; }
.sff26-cards .sff26-cards__card--here .sff26-cards__p { color: inherit; opacity: .85; }
.sff26-cards .sff26-cards__card--here .sff26-cards__t span { opacity: .8; }
.sff26-cards .sff26-cards__here {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 4px;
  background: rgba(20, 20, 20, .14);
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
  color: inherit;
}
/* When the row is the page's last section: the section rhythm's space below it */
.sff26-cards.sff26-cards--end { padding-bottom: 120px; }

/* Progress bar under the row when it scrolls sideways (tablets) */
.sff26-cards .sff26-cards__bar {
  position: relative;
  height: 3px;
  margin-top: 20px;
  overflow: hidden;
  border-radius: 3px;
  background: #2e2e2e;
}
.sff26-cards .sff26-cards__bar[hidden] { display: none; }
.sff26-cards .sff26-cards__bar span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 25%;
  border-radius: 3px;
  background: var(--sff26-amber);
  transition: transform .15s linear;
}

/* Tablets and small laptops: the five cards scroll sideways, snapping */
@media (max-width: 1199px) {
  .sff26-cards .sff26-cards__list {
    grid-template-columns: repeat(5, minmax(200px, 1fr));
    margin: 0 calc(var(--sff26-gut) * -1);
    padding: 10px var(--sff26-gut) 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--sff26-gut);
    scrollbar-width: none;
  }
  .sff26-cards .sff26-cards__list::-webkit-scrollbar { display: none; }
  .sff26-cards .sff26-cards__card { scroll-snap-align: start; }
}
@media (max-width: 991px) {
  .sff26-cards { padding-top: 96px; }
  .sff26-cards.sff26-cards--end { padding-bottom: 96px; }
}

/* Phones: heading, then the cards as a stacked list, then the actions */
@media (max-width: 767px) {
  .sff26-cards { padding-top: 72px; }
  .sff26-cards .sff26-cards__w {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "hd" "bd" "acts";
    row-gap: 30px;
  }
  .sff26-cards .sff26-cards__h2 { font-size: 32px; line-height: 1.12; }
  .sff26-cards .sff26-cards__lead { margin-top: 12px; font-size: 16px; }
  .sff26-cards .sff26-cards__lead.sff26-cards__lead--2 { margin-top: 10px; }
  .sff26-cards .sff26-cards__acts { gap: 4px 24px; }
  .sff26-cards .sff26-cards__acts .cta-button { flex: 1 1 100%; width: 100%; }

  .sff26-cards .sff26-cards__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .sff26-cards .sff26-cards__bar { display: none; }
  .sff26-cards .sff26-cards__a {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 32px;
    grid-template-areas: "ic t go" "ic p go";
    column-gap: 16px;
    row-gap: 4px;
    align-items: center;
    padding: 14px 14px 14px 12px;
  }
  .sff26-cards .sff26-cards__ic { grid-area: ic; width: 64px; height: 64px; margin: 0; }
  .sff26-cards .sff26-cards__ic img { width: 64px; height: 64px; }
  .sff26-cards .sff26-cards__t { grid-area: t; align-self: end; font-size: 18px; line-height: 1.25; }
  /* A real space (in the markup) separates the two words, so "Rewiring" drops
     to a second line when the title does not fit, instead of running into the
     arrow (mockup r43: Geoeconomics at 320-385px, Technology and Capital at 320px). */
  .sff26-cards .sff26-cards__t { min-width: 0; }
  .sff26-cards .sff26-cards__t span { display: inline; margin: 0; font-size: 18px; opacity: .6; }
  .sff26-cards .sff26-cards__p { grid-area: p; align-self: start; margin: 0; font-size: 14px; line-height: 1.4; }
  .sff26-cards .sff26-cards__foot { grid-area: go; margin: 0; padding: 0; }
  .sff26-cards .sff26-cards__go { width: 32px; height: 32px; }
  .sff26-cards.sff26-cards--end { padding-bottom: 72px; }
  /* the current card: "You are here" goes under the line, not into the 32px arrow column */
  .sff26-cards .sff26-cards__card--here .sff26-cards__a { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "ic t" "ic p" "ic go"; }
  .sff26-cards .sff26-cards__card--here .sff26-cards__foot { justify-self: start; margin-top: 6px; }
  .sff26-cards .sff26-cards__here { height: 26px; padding: 0 10px; font-size: 12px; }
  .sff26-cards .sff26-cards__go svg { width: 15px; height: 15px; }

  /* Phone type. The theme's main.css and the homepage's own head styles set
     h2 / h3 / p sizes and weights on phones with !important, so these must
     be !important too. The only !important in this file (see
     tools/sff-modules.test.mjs: phone typography only). */
  .sff26-cards .sff26-cards__h2 { font-size: 32px !important; line-height: 1.12 !important; font-weight: 600 !important; }
  .sff26-cards .sff26-cards__t { font-size: 18px !important; line-height: 1.25 !important; font-weight: 600 !important; overflow-wrap: normal; word-break: normal; }
  .sff26-cards .sff26-cards__p { font-size: 14px !important; line-height: 1.4 !important; }
  .sff26-cards .sff26-cards__lead { font-size: 16px !important; line-height: 1.5 !important; }
}

/* Entrances, once each. module.js adds --armed only when it can also reveal,
   so without JavaScript or with reduced motion nothing is ever hidden.
   Heading letters rise in; cards rise in a stagger; the woven icons spin in. */
.sff26-cards.sff26-cards--armed .sff26-cards__ch {
  transition: opacity .45s ease, transform .6s var(--sff26-ease);
  transition-delay: calc(var(--sff26-ci, 0) * 16ms);
}
.sff26-cards.sff26-cards--armed .sff26-cards__h2:not(.sff26-cards__h2--in) .sff26-cards__ch {
  opacity: 0;
  transform: translateY(.4em);
}
.sff26-cards.sff26-cards--armed .sff26-cards__card {
  transition: opacity .6s ease, transform .85s cubic-bezier(.2, .9, .25, 1.1);
  transition-delay: calc(var(--sff26-i, 0) * 80ms);
}
.sff26-cards.sff26-cards--armed .sff26-cards__card:not(.sff26-cards__card--in) {
  opacity: 0;
  transform: translateY(28px) scale(.97);
}
.sff26-cards.sff26-cards--armed .sff26-cards__card:not(.sff26-cards__card--in) .sff26-cards__ic {
  transform: rotate(-40deg) scale(.55);
}
.sff26-cards.sff26-cards--armed .sff26-cards__card--in:not(.sff26-cards__card--settled) .sff26-cards__ic {
  transition: transform 1s cubic-bezier(.2, .9, .25, 1.25) calc(var(--sff26-i, 0) * 90ms + 150ms);
}
.sff26-cards.sff26-cards--armed .sff26-cards__card--settled { transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .sff26-cards .sff26-cards__a,
  .sff26-cards .sff26-cards__a::before,
  .sff26-cards .sff26-cards__ic,
  .sff26-cards .sff26-cards__go,
  .sff26-cards .sff26-cards__link-ic,
  .sff26-cards .sff26-cards__link::after,
  .sff26-cards.sff26-cards--armed .sff26-cards__card,
  .sff26-cards.sff26-cards--armed .sff26-cards__ch { transition: none; }
  .sff26-cards.sff26-cards--armed .sff26-cards__card:not(.sff26-cards__card--in),
  .sff26-cards.sff26-cards--armed .sff26-cards__card:not(.sff26-cards__card--in) .sff26-cards__ic,
  .sff26-cards.sff26-cards--armed .sff26-cards__h2:not(.sff26-cards__h2--in) .sff26-cards__ch { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Other forums (12 Oct, user: "globalise the new modules to be used on other forums"). Everything below applies only
   OFF SFF (".sff26-cards:not(.skin-sff *)"), so SFF keeps exactly the values above. The module reads the forum skin's tokens
   (the bss.css contract: --forum-text, --forum-text-body, --forum-text-muted, --forum-text-faint, --forum-surface,
   --forum-surface-raised, --forum-line, --forum-highlight, --forum-dark, the brand palette --forum-gold / -accent /
   -orchid / -teal) and the BSS layout (--bss-max, --bss-gutter), each falling back to SFF's value. A light edition
   (BSS Cambodia) sets --forum-highlight-text to its text colour: brand colours never as small text on a light page.
   BSS forces p / li to var(--forum-text-body) !important, so each text role sets that token to its own colour.
   --------------------------------------------------------------------------------------------------------------- */
.sff26-cards:not(.skin-sff *) {
  --sff26-gut: 15px; /* BSS's phone gutter (from 768px: --bss-gutter, below) */
  --sff26-max: var(--forum-content-max, var(--bss-max, 1416px));
  --sff26-amber: var(--forum-highlight, #FCB316);
  --sff26-hl-text: var(--forum-highlight-text, var(--forum-highlight, #FCB316));
  --sff26-fg: var(--forum-text, #fff);
  --sff26-pal-amber: var(--forum-gold, var(--forum-highlight, #FCB316));
  --sff26-pal-red: var(--forum-highlight, #E53935);
  --sff26-pal-blue: var(--forum-accent, #3399FF);
  --sff26-pal-pink: var(--forum-orchid, #FF88A2);
  --sff26-pal-green: var(--forum-teal, #76C893);
  --sff26-pal-amber-ink: var(--forum-dark, #141414); /* fallback for browsers without relative colours */
  --sff26-pal-red-ink: var(--forum-dark, #141414);
  --sff26-pal-blue-ink: var(--forum-dark, #141414);
  --sff26-pal-pink-ink: var(--forum-dark, #141414);
  --sff26-pal-green-ink: var(--forum-dark, #141414);
  --sff26-muted: var(--forum-text-muted, #cfcfcf);
  --sff26-panel: var(--forum-surface, #1e1d1d);
  --forum-text-body: var(--sff26-muted);
  color: var(--sff26-fg);
}
@supports (color: oklch(from red l c h)) {
  .sff26-cards:not(.skin-sff *) {
    /* ink on a palette fill: white on a dark fill, a near-black on a light one (River Stone's oklch) */
    --sff26-pal-amber-ink: oklch(from var(--sff26-pal-amber) clamp(0.245, (0.62 - l) * 1000, 1) clamp(0, (l - 0.62) * 1000, 0.017) 248);
    --sff26-pal-red-ink: oklch(from var(--sff26-pal-red) clamp(0.245, (0.62 - l) * 1000, 1) clamp(0, (l - 0.62) * 1000, 0.017) 248);
    --sff26-pal-blue-ink: oklch(from var(--sff26-pal-blue) clamp(0.245, (0.62 - l) * 1000, 1) clamp(0, (l - 0.62) * 1000, 0.017) 248);
    --sff26-pal-pink-ink: oklch(from var(--sff26-pal-pink) clamp(0.245, (0.62 - l) * 1000, 1) clamp(0, (l - 0.62) * 1000, 0.017) 248);
    --sff26-pal-green-ink: oklch(from var(--sff26-pal-green) clamp(0.245, (0.62 - l) * 1000, 1) clamp(0, (l - 0.62) * 1000, 0.017) 248);
  }
}
@media (min-width: 768px) {
  .sff26-cards:not(.skin-sff *) { --sff26-gut: var(--forum-gutter, var(--bss-gutter, 40px)); }
}
.sff26-cards:not(.skin-sff *) .sff26-cards__h2,
.sff26-cards:not(.skin-sff *) .sff26-cards__pre,
.sff26-cards:not(.skin-sff *) .sff26-cards__a { color: var(--sff26-fg); }
/* the amber heading option: the highlight as large text, River Stone where the edition keeps brand colours off text */
.sff26-cards:not(.skin-sff *) .sff26-cards__h2.sff26-cards__h2--amber { color: var(--sff26-hl-text); }
.sff26-cards:not(.skin-sff *) .sff26-cards__link,
.sff26-cards:not(.skin-sff *) .sff26-cards__link:hover,
.sff26-cards:not(.skin-sff *) .sff26-cards__link:focus-visible { color: var(--sff26-hl-text); }
/* a card on the page: the forum's card surface with its hairline (a white card on a light page needs an edge) */
.sff26-cards:not(.skin-sff *) .sff26-cards__a { box-shadow: inset 0 0 0 1px var(--forum-line, transparent); }
.sff26-cards:not(.skin-sff *) a.sff26-cards__a:hover,
.sff26-cards:not(.skin-sff *) a.sff26-cards__a:focus-visible { color: var(--sff26-on, var(--forum-dark, #141414)); }
.sff26-cards:not(.skin-sff *) a.sff26-cards__a:hover .sff26-cards__p,
.sff26-cards:not(.skin-sff *) a.sff26-cards__a:focus-visible .sff26-cards__p { --forum-text-body: var(--sff26-on, var(--forum-dark, #141414)); }
.sff26-cards:not(.skin-sff *) .sff26-cards__go { border-color: var(--forum-line, rgba(255, 255, 255, .28)); }
.sff26-cards:not(.skin-sff *) a.sff26-cards__a:hover .sff26-cards__go,
.sff26-cards:not(.skin-sff *) a.sff26-cards__a:focus-visible .sff26-cards__go { border-color: currentColor; }
/* the current page's card: filled in its colour, the text in that colour's ink */
.sff26-cards:not(.skin-sff *) .sff26-cards__card--here .sff26-cards__a { color: var(--sff26-on, var(--forum-dark, #141414)); box-shadow: none; }
.sff26-cards:not(.skin-sff *) .sff26-cards__card--here .sff26-cards__p { --forum-text-body: var(--sff26-on, var(--forum-dark, #141414)); }
/* its "You are here" chip: a hairline pill in the ink, not SFF's 14% dark wash, which pulled the ink below 4.5:1 on a
   mid-tone fill (BSS India's orange: 4.23) */
.sff26-cards:not(.skin-sff *) .sff26-cards__here { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 40%, transparent); }
.sff26-cards:not(.skin-sff *) .sff26-cards__bar { background: var(--forum-line, #2e2e2e); }