/* The Guides index (1 Nov 2026).
   Adrien: "the page before, how we get to it is very dull and not appealing
   at all. Nothing on this page incites me to click on the Regulatory Watch
   link." The newest Regulatory Watch issue leads on the navy stage with its
   own raised pills; every other guide is a card with a raised icon.
   Same language as /assets/regulatory-watch.css. Only the index links this
   file; site.css is not touched. */

.gx {
  --gx-navy: #0F1A33;
  --gx-ivory: #FAF7F0;
  --gx-gold: #E6C870;
  /* Wider than the reading column, never wider than the screen. */
  --gx-w: min(1000px, calc(100vw - 2rem));
  position: relative;
  left: 50%;
  width: var(--gx-w);
  margin: 0.5rem 0 0 calc(var(--gx-w) / -2);
  font-family: var(--sans);
}
/* One color per source or topic, as on the issue itself. */
.gx .rw-fda  { --c: #E8A08C; }
.gx .rw-eu   { --c: #86B6E0; }
.gx .rw-vet  { --c: #8FCB9F; }
.gx-watch      { --c: #E6C870; }
.gx-cost       { --c: #E6C870; }
.gx-validation { --c: #8FCB9F; }
.gx-part11     { --c: #86B6E0; }
.gx-choose     { --c: #E8A08C; }

/* site.css draws every .guide-card as a ruled list row; the cards here are
   objects, so that rule is reset inside .gx only. */
.gx .guide-card { padding: 0; border: 0; }
.gx .guide-card h2 { font-variant-numeric: lining-nums; }

/* ── The raised icon tile ── */
.gx-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff) 0%, var(--c) 60%, color-mix(in srgb, var(--c) 80%, #000) 100%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 0 rgba(0, 0, 0, 0.12), 0 10px 20px -10px var(--c);
}
.gx-icon svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: #0C162C;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── The lead: the newest Regulatory Watch issue on the navy stage ── */
.gx .gx-lead {
  position: relative;
  padding: 2.2rem 2.2rem 2rem;
  border: 1px solid rgba(250, 247, 240, 0.09);
  border-radius: 24px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(230, 200, 112, 0.16) 0%, transparent 55%),
    linear-gradient(160deg, #172848 0%, var(--gx-navy) 100%);
  box-shadow: 0 34px 70px -36px rgba(0, 0, 0, 0.75);
  color: rgba(250, 247, 240, 0.8);
}
.gx-sticker {
  position: absolute;
  top: -0.9rem;
  right: 1.6rem;
  padding: 0.35rem 0.9rem 0.4rem;
  border: 2.5px solid #fff;
  border-radius: 10px;
  background: var(--gx-gold);
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.45);
  color: #0C162C;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(4deg);
}
.gx-lead-head {
  display: flex;
  gap: 1.1rem;
  align-items: center;
  margin-bottom: 1rem;
}
.gx .gx-kicker {
  margin: 0 0 0.3rem;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gx-gold);
}
.gx .gx-lead h2 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  line-height: 1.15;
}
.gx .gx-lead h2 a { color: var(--gx-ivory); }
.gx .gx-lead h2 a:hover { color: var(--gx-gold); }
.gx .gx-lead-text {
  max-width: 44rem;
  margin: 0 0 1.4rem;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(250, 247, 240, 0.75);
}

/* The issue's five headlines as raised pills; each opens the issue there. */
.gx .gx-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0 0 1.7rem;
  padding: 0;
  list-style: none;
}
.gx .gx-pills li { margin: 0; }
.gx a.gx-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1.1rem 0.5rem 0.45rem;
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 72%, #fff) 0%, var(--c) 55%, color-mix(in srgb, var(--c) 82%, #000) 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 0 rgba(0, 0, 0, 0.14),
    0 10px 22px -10px var(--c);
  color: #0C162C;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.gx a.gx-pill:hover, .gx a.gx-pill:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 0 rgba(0, 0, 0, 0.14),
    0 16px 28px -10px var(--c);
}
.gx-pill-num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  background: #0C162C;
  color: var(--c);
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: lining-nums;
}

.gx .gx-lead-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.4rem;
  margin: 0;
}
.gx .gx-lead-foot .guide-card-meta { color: rgba(250, 247, 240, 0.55); }
/* The call to action: a gold raised button. */
.gx a.gx-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem 0.8rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #F3DE9A 0%, var(--gx-gold) 55%, #C9A84C 100%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(0, 0, 0, 0.15), 0 14px 26px -12px var(--gx-gold);
  color: #0C162C;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.2s;
}
.gx a.gx-cta:hover, .gx a.gx-cta:focus-visible { transform: translateY(-2px); }
.gx a.gx-cta span { transition: transform 0.2s; }
.gx a.gx-cta:hover span { transform: translateX(3px); }

/* ── The other guides: cards with a raised icon ── */
.gx .gx-section {
  margin: 3.2rem 0 1.3rem;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.gx-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.3rem;
}
.gx .gx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.6rem 1.4rem;
  border: 1px solid var(--cream-dark);
  border-radius: 20px;
  background: linear-gradient(170deg, color-mix(in srgb, var(--c) 10%, #fff) 0%, #fff 55%);
  box-shadow: 0 18px 36px -30px rgba(26, 22, 18, 0.45);
  transition: transform 0.2s, box-shadow 0.2s;
}
.gx-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 44px -28px rgba(26, 22, 18, 0.5);
}
.gx-card .gx-icon { margin-bottom: 1rem; }
.gx .gx-topic {
  margin: 0 0 0.35rem;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c) 55%, #000);
}
.gx .gx-card h2 { font-size: 1.45rem; margin-bottom: 0.55rem; }
/* The whole card is the link; the heading's link stretches over it. */
.gx .gx-card h2 a::after { content: ''; position: absolute; inset: 0; border-radius: 20px; }
.gx .gx-card .guide-card-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: auto 0 0;
  padding-top: 0.6rem;
}
.gx-read {
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--gold);
}

@media (max-width: 720px) {
  .gx-grid { grid-template-columns: minmax(0, 1fr); }
  .gx .gx-lead { padding: 1.9rem 1.3rem 1.6rem; }
  .gx-sticker { right: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gx a.gx-pill, .gx a.gx-cta, .gx a.gx-cta span, .gx-card { transition: none; }
  .gx a.gx-pill:hover, .gx a.gx-cta:hover, .gx-card:hover { transform: none; }
}