/* ================================================================
   CRIS LANDING — LATEST INSIGHTS
   Loaded after landing-base.css (shared tokens).
   Rules: no inline styles, no !important, no media queries.
          Responsive values are custom properties set per range in
          responsive.css under ".plx-ins":
            xs ≤575.98 | sm 576-767.98 | md 768-991.98
            lg 992-1199.98 | xl 1200-1399.98 | xxl ≥1400

   Variables set per range (responsive.css):
     --ins-py --ins-head-mb --ins-head-gap --ins-fs-h2 --ins-cols
     --ins-gap --ins-thumb-w --ins-body-p
   Thumbnails are CSS gradients; replace with real images when available.
   ================================================================ */

/* ── 1. TOKENS (non-responsive) ── */

/* ── 2. SECTION + HEAD ── */
.plx-ins {
  overflow: hidden;
  padding: var(--sp-64) 0;
  position: relative;
}
.plx-ins::before {
  background: radial-gradient(ellipse 60% 50% at 50% 60%, var(--cyan-a10), transparent 70%);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.plx-ins .container-xl { position: relative; z-index: var(--z-1); }
.plx-ins-head {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-24);
  margin-bottom: var(--sp-40);
}
.plx-ins-eyebrow {
  color: var(--lime);
  font-size: var(--fs-10);
  font-weight: 700;
  letter-spacing: .2em;
  margin-bottom: var(--sp-14);
  text-transform: uppercase;
}
.plx-ins-title {
  color: var(--t1);
  font-size: var(--fs-36);
  font-weight: 800;
  letter-spacing: -.02em;

  margin: 0;
}
.plx-ins-sub {
  color: var(--t3);
  flex: 1 1 260px;
  font-size: var(--fs-14);

  margin: 0;
}
.plx-ins-all {
  align-items: center;
  background: var(--black-a65);
  border: 1.5px solid var(--lime-a60);
  border-radius: var(--br-inner);
  box-shadow: 0 0 16px var(--lime-a15);
  color: var(--t1);
  display: inline-flex;
  font-size: var(--fs-12);
  font-weight: 700;
  gap: var(--sp-12);
  padding: var(--sp-14) var(--sp-28);
  transition: background var(--t-default), box-shadow var(--t-default), color var(--t-default) ease;
}
.plx-ins-all:hover { background: var(--bg-mid); box-shadow: 0 0 26px var(--lime-a15); color: var(--t1); }
.plx-ins-all i { font-size: var(--fs-12); }

/* ── 3. CARDS ── */
.plx-ins-grid {
  display: grid;
  gap: var(--sp-20);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.plx-ins-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--br-inner);
  display: flex;
  min-width: 0;
  overflow: hidden;
  transition: border-color var(--t-default), transform var(--t-default);
}
.plx-ins-card:hover { border-color: var(--cyan-bd); transform: translateY(-3px); }
.plx-ins-thumb { flex: 0 0 var(--size-140); min-height: var(--size-120); }
.plx-ins-thumb-city   { background: linear-gradient(180deg, var(--purple) 0%, var(--slate-300) 55%, var(--dark-navy) 100%); }
.plx-ins-thumb-forest { background: linear-gradient(180deg, var(--slate-400) 0%, var(--green) 60%, var(--dark-navy) 100%); }
.plx-ins-thumb-dusk   { background: linear-gradient(180deg, var(--slate-500) 0%, var(--amber) 55%, var(--dark-navy) 100%); }
.plx-ins-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  justify-content: center;
  min-width: 0;
  padding: var(--sp-20);
}
.plx-ins-name { color: var(--t1); font-size: var(--fs-14); font-weight: 700;margin: 0; }
.plx-ins-desc { color: var(--t3); font-size: var(--fs-14);margin: 0; }
.plx-ins-link {
  align-items: center;
  color: var(--cyan);
  display: inline-flex;
  font-size: var(--fs-14);
  font-weight: 600;
  gap: var(--sp-6);
  margin-top: var(--sp-6);
  transition: color var(--t-default) ease;
}
.plx-ins-link:hover { color: var(--t1); }