/* ============================================================
   SECTION: INFRA — small model-card grid (Higgsfield "Nano
   Banana Pro" pattern) + wide cyan staking promo.
   Every rule scoped under .sec-infra.
   ============================================================ */

/* ---------- Grid ---------- */
.sec-infra .infra-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  gap: var(--grid-gap);
}

/* ---------- Small tool card ---------- */
.sec-infra .infra-card {
  min-height: 120px;
  padding: 14px;
  transition: background-color var(--dur-fast) var(--ease-ui);
}
.sec-infra .infra-card:hover { background-color: var(--bg-elevated); }
/* Seven cards on a four-column grid: the first (Trade Terminal) takes two
   columns so both rows are full. Reset below where the grid is one column. */
.sec-infra .infra-card-wide { grid-column: span 2; }

.sec-infra .infra-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.sec-infra .infra-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-btn);
  background-color: var(--bg-card);
  background-image: var(--card-glass-sheen);
  box-shadow: var(--inset-highlight-soft);
  color: var(--text-primary);
  transition: color var(--dur-fast) var(--ease-ui);
}
.sec-infra .infra-icon svg { width: 18px; height: 18px; }

/* An uploaded icon (CMS "infra" block) replaces the inline svg inside the same
   36px tile. It fills the tile rather than sitting at the svg's 18px, because
   an uploaded image is usually artwork with its own padding, not a line icon. */
.sec-infra .infra-icon.has-img {
  background-image: none;
  overflow: hidden;
}
.sec-infra .infra-icon img.inf-cms-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sec-infra .infra-card:hover .infra-icon { color: var(--accent); }

.sec-infra .infra-meta {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sec-infra .infra-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: var(--radius-badge);
  background: var(--bg-white-5);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

.sec-infra .infra-name {
  margin-top: 12px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

.sec-infra .infra-desc {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}
/* The one card that leads somewhere: the whole card is the hit area. */
.sec-infra .infra-name a { color: inherit; }
.sec-infra .infra-name a::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.sec-infra .infra-name a:hover { color: var(--accent); }
.sec-infra .infra-name a:focus-visible { outline: none; }
.sec-infra .infra-card:has(.infra-name a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Wide cyan promo (Higgsfield discount-banner pattern) ---------- */
.sec-infra .infra-promo {
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  min-height: 140px;
  padding: 20px 24px;
  border-radius: var(--radius-card-lg);
  background-color: var(--bg-base);
  background-image: linear-gradient(rgba(24, 220, 255, 0.03), rgba(24, 220, 255, 0.3));
  box-shadow: var(--inset-highlight);
  display: flex;
  align-items: center;
}

.sec-infra .infra-promo-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 720px;
}

.sec-infra .infra-promo-badge { transform: skewX(-10deg); }

.sec-infra .infra-promo-title {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  color: var(--text-primary);
}
.sec-infra .infra-boost { color: #18DCFF; } /* brief-mandated cyan */

.sec-infra .infra-promo-sub {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.sec-infra .infra-apy {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-primary);
}

.sec-infra .infra-cta {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  border-radius: var(--radius-prompt); /* 24px, white CTA per promo pattern */
  background: #fff;
  color: var(--accent-text-on);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: filter var(--dur-fast) var(--ease-ui),
              transform var(--dur-fast) var(--ease-pop);
}
/* CTA is display-only now (section is intentionally non-interactive):
   no hover/active affordance. */

/* Ghost leaf art, oversized, right side */
.sec-infra .infra-leaf {
  position: absolute;
  right: -24px;
  top: 50%;
  width: 240px;
  height: 240px;
  transform: translateY(-46%) rotate(12deg);
  color: rgba(24, 220, 255, 0.16); /* ghost stroke inside cyan art */
  pointer-events: none;
  animation: infra-leaf-drift 12s ease-in-out infinite;
}
@keyframes infra-leaf-drift {
  0%, 100% { transform: translateY(-46%) rotate(12deg); }
  50%      { transform: translateY(-52%) rotate(9deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sec-infra .infra-leaf { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .sec-infra .infra-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .sec-infra .infra-grid { grid-template-columns: 1fr; }
  .sec-infra .infra-card { min-height: 0; }
  .sec-infra .infra-card-wide { grid-column: auto; }
  .sec-infra .infra-promo { padding: 18px 16px; }
  .sec-infra .infra-promo-title { font-size: 20px; }
  .sec-infra .infra-leaf {
    width: 180px;
    height: 180px;
    right: -60px;
    color: rgba(24, 220, 255, 0.10);
  }
}

/* ---------- admin background photos on the product cards ----------
   Set per card in admin (Infrastructure -> "Background photo"). The photo
   covers the card under a dark gradient so the copy stays readable; empty
   field = the plain dark card as designed. */
.sec-infra .infra-card { position: relative; overflow: hidden; }
.inf-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}
.inf-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 10, 8, 0.28) 0%, rgba(8, 10, 8, 0.88) 82%);
}
.sec-infra .infra-card.has-bg .infra-top,
.sec-infra .infra-card.has-bg .infra-name,
.sec-infra .infra-card.has-bg .infra-desc { position: relative; z-index: 1; }

/* Preserve original animated scenes; shift decorative green light into blue. */
.inf-bg { filter: hue-rotate(86deg) saturate(.65); }