/* ==========================================================================
   PALCOIN — Ecosystem Cards Section
   Converted 1:1 from the Figma export (frame width 1366px, grid 1091px).
   Every number below is measured from the source file, not estimated.
   --------------------------------------------------------------------------
   HOW SCALING WORKS
   The whole section is driven by one unit token, --pc-u (default 1px).
   Every dimension is written as `calc(N * var(--pc-u))` where N is the exact
   Figma value. Changing --pc-u rescales the entire section proportionally,
   so the design never breaks — it only shrinks. At viewports >= 1147px,
   --pc-u resolves to exactly 1px and the render is pixel-identical to Figma.
   ========================================================================== */

.pc-ecosystem {
  /* ---- Scale unit -------------------------------------------------------
     min() caps the unit at 1px so the section never grows past the design
     size. 56px = 2 x 28px page gutter. 1091 = grid width in Figma units.   */
  --pc-u: min(1px, calc((100vw - 56px) / 1091));

  /* ---- Colour tokens (sampled from the export) -------------------------- */
  --pc-color-page:        transparent;  /* section background                    */
  --pc-color-card:        #0a0d19;  /* card fill                             */
  --pc-color-white:       #ffffff;
  --pc-color-yellow:      #ffcc00;
  --pc-color-ghost-fill:  #1d1f2b;  /* "coming soon" button fill             */

  /* Green headline gradient (Stake card + AI card)                          */
  --pc-gradient-green:  linear-gradient(to bottom right, #6bfb03 0%, #00937e 100%);
  /* Button gradient — teal -> blue -> violet, corner to corner              */
  --pc-gradient-button: linear-gradient(to bottom right, #00fcac 0%, #2aabd8 32%, #9a40f6 100%);
  /* Card border — violet at the top, cyan at the bottom, vertical           */
  --pc-gradient-border: linear-gradient(180deg, #bf42ff 0%, #00d1ff 100%);

  /* Ambient glow around each card                                           */
  --pc-glow: 0 0 calc(22 * var(--pc-u)) rgba(150, 76, 255, 0.20),
             0 0 calc(52 * var(--pc-u)) rgba(0,  150, 255, 0.10);

  /* ---- Typography -------------------------------------------------------
     NOTE FOR THE DEVELOPER: the PDF export outlines its text, so the family
     name is not recoverable from the file. Montserrat is the closest free
     match (geometric, double-storey "a", same cap-height ratio of ~0.72em).
     If the Figma file names a different family, swap this ONE line.         */
  --pc-font: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* ---- Section rhythm (not part of the card design — safe to change) ---- */
  --pc-section-padding-block: calc(80 * var(--pc-u));

  box-sizing: border-box;
  padding: var(--pc-section-padding-block) calc(28 * var(--pc-u));
  background: var(--pc-color-page);
  font-family: var(--pc-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.pc-ecosystem *,
.pc-ecosystem *::before,
.pc-ecosystem *::after { box-sizing: border-box; }


/* ==========================================================================
   1. GRID  —  2 columns, 485x453 cards, 121px column gap, 27px row gap
   ========================================================================== */

.pc-ecosystem__grid {
  display: grid;
  grid-template-columns: repeat(2, calc(485 * var(--pc-u)));
  column-gap: calc(121 * var(--pc-u));
  row-gap: calc(27 * var(--pc-u));
  justify-content: center;
  margin: 0 auto;
}


/* ==========================================================================
   2. CARD SHELL
   Gradient border is done with the padding-box / border-box double
   background technique — no pseudo-elements, no mask, works everywhere.
   ========================================================================== */

.pc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: calc(485 * var(--pc-u));
  height: calc(453 * var(--pc-u));
  /* 2px border + 26/22/16px padding == the 28/24/18px insets measured in Figma */
  padding: calc(22 * var(--pc-u)) calc(26 * var(--pc-u)) calc(16 * var(--pc-u));
  overflow: hidden;
  border: calc(2 * var(--pc-u)) solid transparent;
  border-radius: calc(18 * var(--pc-u));
  background:
    linear-gradient(var(--pc-color-card), var(--pc-color-card)) padding-box,
    var(--pc-gradient-border) border-box;
  box-shadow: var(--pc-glow);
}

/* Decorative artwork — absolutely placed at its exact Figma coordinates.
   Offsets are measured from the card's border box.                         */
.pc-card__art {
  position: absolute;
  z-index: 1;
  display: block;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.pc-card__content {
  position: relative;
  z-index: 2;      /* text always sits above the artwork */
  flex: 1 1 auto;
  min-width: 0;
}

.pc-card__title { margin: 0; font-weight: 800; }

/* Each visual line from the design is its own block, and nowrap guarantees the
   Figma line breaks are reproduced exactly and never reflow at any width. */
.pc-card__line { display: block; white-space: nowrap; }

/* Small bold caption under the headline (cards 2 and 4) */
.pc-card__caption {
  display: block;
  margin: 0;
  color: var(--pc-color-white);
  font-size: calc(22 * var(--pc-u));
  line-height: calc(30 * var(--pc-u));
  font-weight: 700;
}


/* ==========================================================================
   3. TEXT COLOUR TREATMENTS
   The green headline is a single gradient painted across the whole title
   block and clipped to the glyphs; white lines simply paint over it.
   ========================================================================== */

.pc-card__title--gradient {
  background-image: var(--pc-gradient-green);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.pc-text--white  { color: var(--pc-color-white); }
.pc-text--yellow { color: var(--pc-color-yellow); }
/* Opts a line back into the parent's clipped gradient */
.pc-text--green  { color: transparent; }


/* ==========================================================================
   4. PER-CARD TYPE SCALE
   Sizes and leading are the measured Figma values. The 2px / 8px / 11px /
   27px margins reproduce the extra space Figma puts between type groups.
   ========================================================================== */

/* Marks the first line of a new type group — reproduces the extra 2px Figma
   leaves when the type size steps down. */
.pc-card__line--group { margin-top: calc(2 * var(--pc-u)); }

/* --- Card 1 : Stake ----------------------------------------------------- */
.pc-card--stake .pc-card__line      { font-size: calc(54 * var(--pc-u)); line-height: calc(58 * var(--pc-u)); }
.pc-card--stake .pc-card__line--sm  { font-size: calc(40 * var(--pc-u)); line-height: calc(52 * var(--pc-u)); }

/* --- Card 2 : AI analysis ----------------------------------------------- */
.pc-card--ai .pc-card__line     { font-size: calc(32 * var(--pc-u)); line-height: calc(48 * var(--pc-u)); }
.pc-card--ai .pc-card__caption  { margin-top: calc(11 * var(--pc-u)); }

/* --- Card 3 : Governance ------------------------------------------------ */
/* This card sits 2px higher in the Figma frame than the other three. */
.pc-card--governance { padding-top: calc(20 * var(--pc-u)); }
.pc-card--governance .pc-card__line      { font-size: calc(52 * var(--pc-u)); line-height: calc(57 * var(--pc-u)); }
.pc-card--governance .pc-card__line--md  { font-size: calc(42 * var(--pc-u)); line-height: calc(54 * var(--pc-u)); }
.pc-card--governance .pc-card__line--sm  { font-size: calc(34 * var(--pc-u)); line-height: calc(52 * var(--pc-u)); }
/* "of Palcoin" mixes two sizes on a single line. line-height:0 stops the larger
   inline word from inflating the line box and pushing the rest of the card down. */
.pc-card--governance .pc-word--lg        { font-size: calc(52 * var(--pc-u)); line-height: 0; }
/* Card 3's headline group needs no extra step-down space */
.pc-card--governance .pc-card__line--md.pc-card__line--group { margin-top: 0; }

/* --- Card 4 : Projects -------------------------------------------------- */
.pc-card--projects .pc-card__line      { font-size: calc(46 * var(--pc-u)); line-height: calc(58 * var(--pc-u)); }
.pc-card--projects .pc-card__line--sm  { font-size: calc(34 * var(--pc-u)); line-height: calc(52 * var(--pc-u)); margin-top: calc(8 * var(--pc-u)); }
.pc-card--projects .pc-card__caption   { margin-top: calc(27 * var(--pc-u));
                                         letter-spacing: calc(1.7 * var(--pc-u)); }


/* ==========================================================================
   5. ARTWORK PLACEMENT  (exact Figma offsets, per card)
   ========================================================================== */

.pc-card--stake      .pc-card__art { top: calc(23 * var(--pc-u));   left: calc(236 * var(--pc-u));   width: calc(265.5 * var(--pc-u)); }
.pc-card--ai         .pc-card__art { top: calc(14 * var(--pc-u));   left: calc(279 * var(--pc-u));   width: calc(178 * var(--pc-u)); }
.pc-card--governance .pc-card__art { top: calc(18 * var(--pc-u));   left: calc(308 * var(--pc-u));   width: calc(162 * var(--pc-u)); }
.pc-card--projects   .pc-card__art { top: calc(24 * var(--pc-u));   left: calc(251 * var(--pc-u));   width: calc(231.3 * var(--pc-u)); }


/* ==========================================================================
   6. BUTTONS  —  429 x 72, 20px radius, pinned to the bottom of the card
   ========================================================================== */

.pc-btn {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--pc-u));
  width: 100%;
  height: calc(72 * var(--pc-u));
  border: 0;
  border-radius: calc(20 * var(--pc-u));
  font-family: inherit;
  font-size: calc(34 * var(--pc-u));
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

/* Filled gradient CTA — "Stake & Earn", "Voting Rewards" */
.pc-btn--primary {
  background-image: var(--pc-gradient-button);
  color: var(--pc-color-white);
  font-weight: 800;
}

.pc-btn--primary:hover,
.pc-btn--primary:focus-visible {
  transform: translateY(calc(-2 * var(--pc-u))); color:#000000 !important;
  box-shadow: 0 calc(10 * var(--pc-u)) calc(28 * var(--pc-u)) rgba(90, 100, 244, 0.35);
}

.pc-btn--primary:active { transform: translateY(0); }

/* Outlined status pill — "Coming Soon". Not a control, so it is inert. */
.pc-btn--ghost {
  border: calc(2 * var(--pc-u)) solid transparent;
  background:
    linear-gradient(var(--pc-color-ghost-fill), var(--pc-color-ghost-fill)) padding-box,
    var(--pc-gradient-button) border-box;
  color: var(--pc-color-white);
  font-weight: 500;
  letter-spacing: calc(2.4 * var(--pc-u));
  /* letter-spacing adds trailing space after the last glyph — pull it back
     so the label stays optically centred */
  text-indent: calc(2.4 * var(--pc-u));
  cursor: default;
}

/* Check icon inside the "Voting Rewards" button */
.pc-btn__icon {
  flex: 0 0 auto;
  width: calc(61 * var(--pc-u));
  height: auto;
  display: block;
}

.pc-btn:focus-visible {
  outline: calc(3 * var(--pc-u)) solid #00d1ff;
  outline-offset: calc(3 * var(--pc-u));
}


/* ==========================================================================
   7. OPTIONAL: whole card clickable (added by palcoin-ecosystem.js)
   ========================================================================== */

.pc-card[data-href] { cursor: pointer; }

.pc-card[data-href]:hover,
.pc-card.is-focused {
  box-shadow: var(--pc-glow),
              0 calc(12 * var(--pc-u)) calc(36 * var(--pc-u)) rgba(0, 0, 0, 0.45);
}


/* ==========================================================================
   8. RESPONSIVE
   Two column layout holds down to 768px, then stacks. Because everything is
   expressed in --pc-u, stacking is the ONLY structural change needed.
   ========================================================================== */

/* Stacks at 900px rather than the usual 768px: below this width a 2-column
   layout would squeeze each card under ~375px, which drops the body copy to
   roughly 26px. Change this one value if you want the columns to hold longer. */
@media (max-width: 899px) {
  .pc-ecosystem {
    --pc-u: min(1px, calc((100vw - 40px) / 485));
    padding: calc(56 * var(--pc-u)) calc(20 * var(--pc-u));
  }

  .pc-ecosystem__grid {
    grid-template-columns: calc(485 * var(--pc-u));
    row-gap: calc(27 * var(--pc-u));
  }
}


/* ==========================================================================
   9. ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .pc-ecosystem * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .pc-btn--primary:hover,
  .pc-btn--primary:focus-visible { transform: none; }
}

/* Fallback if background-clip:text is unsupported — show solid green */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .pc-card__title--gradient { color: inherit; background-image: none; }
  .pc-text--green { color: #3ad86a; }
}