/* ================================================================
   READYLAYER — insights.css
   Page-specific styles for /insights only.
   Load order: after main.css, services.css
   All classes prefixed ins- to avoid collision.

   Reused from main.css (no new CSS needed):
     rl-eyebrow, rl-btn-primary, rl-btn-ghost,
     rl-footer-*, rl-header / nav, reveal, all CSS variables

   Reused from services.css (no new CSS needed):
     svc-hero (dark hero shell), svc-page-cta / svc-page-cta-inner /
     svc-cta-row (bottom CTA)

   Promotion candidate:
     ins-cat-pill and its modifiers use --rl-l1 through --rl-l4
     exactly. If category pills appear on article detail pages or
     elsewhere, promote to main.css as .rl-cat-pill.
   ================================================================ */


/* ----------------------------------------------------------------
   HERO INNER  (single-col width cap inside svc-hero shell)
   ---------------------------------------------------------------- */
.ins-hero-inner {
  max-width: 700px;
}

.ins-hero-h1 {
  font-family:    var(--rl-font-display);
  font-size:      clamp(2.4rem, 4.5vw, 3.4rem);
  font-weight:    800;
  color:          var(--rl-off-white);
  line-height:    1.12;
  letter-spacing: -0.02em;
  margin-bottom:  1.25rem;
  animation:      rl-fadeUp 0.8s ease forwards;
}
.ins-hero-h1 em { font-style: italic; color: var(--rl-accent); }

.ins-hero-sub {
  font-size:   1.05rem;
  color:       rgba(245,242,236,.55);
  line-height: 1.75;
  font-weight: 300;
  animation:   rl-fadeUp 0.8s 0.15s ease forwards;
}


/* ----------------------------------------------------------------
   CATEGORY PILLS
   Promotion candidate — move to main.css as .rl-cat-pill if used
   on article detail pages or other pages.
   ---------------------------------------------------------------- */
.ins-cat-pill {
  display:        inline-flex;
  align-items:    center;
  padding:        0.25rem 0.75rem;
  border-radius:  2px;
  font-family:    var(--rl-font-mono);
  font-size:      0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight:    500;
}

/* Light-bg variants */
.ins-cat-pill--perspective { background: rgba(200,80,42,.1);  color: var(--rl-l1); border: 1px solid rgba(200,80,42,.2); }
.ins-cat-pill--framework   { background: rgba(42,92,139,.1);  color: var(--rl-l2); border: 1px solid rgba(42,92,139,.2); }
.ins-cat-pill--research    { background: rgba(42,107,74,.1);  color: var(--rl-l3); border: 1px solid rgba(42,107,74,.2); }
.ins-cat-pill--guide       { background: rgba(107,63,139,.1); color: var(--rl-l4); border: 1px solid rgba(107,63,139,.2); }

/* Dark-bg override (featured card image panel) */
.ins-cat-pill--light.ins-cat-pill--perspective {
  background:   rgba(200,80,42,.15);
  color:        #e8855c;
  border-color: rgba(200,80,42,.3);
}


/* ----------------------------------------------------------------
   FEATURED ARTICLE
   ---------------------------------------------------------------- */
.ins-featured {
  background:  var(--rl-off-white);
  padding:     80px 0 0;
}

.ins-featured-label {
  font-family:    var(--rl-font-mono);
  font-size:      0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--rl-mid);
  display:        flex;
  align-items:    center;
  gap:            0.75rem;
  margin-bottom:  2rem;
}
.ins-featured-label::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--rl-border);
}

.ins-featured-card {
  display:         grid;
  grid-template-columns: 1fr 1fr;
  border:          1px solid var(--rl-border);
  background:      var(--rl-warm);
  overflow:        hidden;
  transition:      box-shadow 0.25s;
  text-decoration: none;
  color:           inherit;
}
.ins-featured-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.08); }

/* Left panel — dark with word watermark */
.ins-fc-image {
  background: var(--rl-near-black);
  min-height: 340px;
  position:   relative;
  overflow:   hidden;
  display:    flex;
  align-items: flex-end;
  padding:    2.5rem;
}
.ins-fc-image::before {
  content:    '';
  position:   absolute;
  top:        0;
  right:      -100px;
  width:      500px;
  height:     500px;
  background: radial-gradient(ellipse, rgba(200,80,42,.12) 0%, transparent 65%);
  pointer-events: none;
}

.ins-fc-image-word {
  font-family:    var(--rl-font-display);
  font-size:      6rem;
  font-weight:    900;
  color:          rgba(255,255,255,.04);
  line-height:    1;
  position:       absolute;
  top:            50%;
  left:           50%;
  transform:      translate(-50%, -50%);
  white-space:    nowrap;
  pointer-events: none;
  user-select:    none;
}

.ins-fc-meta {
  display:  flex;
  align-items: center;
  gap:      0.75rem;
  position: relative;
  z-index:  1;
}

.ins-fc-date {
  font-family: var(--rl-font-mono);
  font-size:   0.62rem;
  color:       rgba(245,242,236,.35);
}

/* Right panel — content */
.ins-fc-body {
  padding:        2.5rem;
  display:        flex;
  flex-direction: column;
  justify-content: space-between;
  gap:            1.5rem;
}

.ins-fc-top {
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
}

.ins-fc-body h2 {
  font-size:   clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
}

.ins-fc-body p {
  font-size:   0.92rem;
  color:       var(--rl-mid);
  line-height: 1.75;
}

.ins-fc-bottom {
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  padding-top:    1.5rem;
  border-top:     1px solid var(--rl-border);
}

.ins-fc-read {
  font-size:   0.85rem;
  font-weight: 600;
  color:       var(--rl-accent);
  display:     flex;
  align-items: center;
  gap:         0.4rem;
}

.ins-fc-stats {
  display: flex;
  gap:     1.25rem;
}

.ins-fc-stat {
  font-family: var(--rl-font-mono);
  font-size:   0.65rem;
  color:       var(--rl-mid);
  display:     flex;
  align-items: center;
  gap:         0.35rem;
}

@media (max-width: 767.98px) {
  .ins-featured-card { grid-template-columns: 1fr; }
  .ins-fc-image { min-height: 180px; }
}


/* ----------------------------------------------------------------
   STICKY FILTER BAR
   top: 64px — matches rl-header height
   ---------------------------------------------------------------- */
.ins-filter-bar-wrap {
  background:    var(--rl-off-white);
  position:      sticky;
  top:           64px;
  z-index:       50;
  border-bottom: 1px solid var(--rl-border);
}

.ins-filter-bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          56px;
  gap:             1rem;
}

.ins-filter-tabs {
  display:     flex;
  align-items: center;
  gap:         0;
}

.ins-filter-tab {
  font-family:     var(--rl-font-mono);
  font-size:       0.65rem;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  padding:         0.45rem 1.1rem;
  border:          none;
  background:      transparent;
  cursor:          pointer;
  color:           var(--rl-mid);
  border-bottom:   2px solid transparent;
  transition:      all 0.2s;
  height:          56px;
}
.ins-filter-tab:hover { color: var(--rl-black); }
.ins-filter-tab.is-active {
  color:        var(--rl-accent);
  border-bottom-color: var(--rl-accent);
}

.ins-sort-control {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
}

.ins-sort-label {
  font-family:    var(--rl-font-mono);
  font-size:      0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--rl-mid);
}

.ins-sort-select {
  font-family:        var(--rl-font-mono);
  font-size:          0.65rem;
  background-color:   transparent;
  border:             1px solid var(--rl-border);
  color:              var(--rl-black);
  padding:            0.3rem 1.75rem 0.3rem 0.65rem;
  cursor:             pointer;
  appearance:         none;
  -webkit-appearance: none;
  background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b6560' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:  no-repeat;
  background-position: right 0.5rem center;
}
.ins-sort-select:focus { outline: none; border-color: var(--rl-accent); }

.ins-article-count {
  font-family: var(--rl-font-mono);
  font-size:   0.62rem;
  color:       var(--rl-mid);
}

@media (max-width: 575.98px) {
  .ins-filter-tab { padding: 0.45rem 0.65rem; }
}


/* ----------------------------------------------------------------
   ARTICLES GRID
   ---------------------------------------------------------------- */
.ins-articles-section {
  background: var(--rl-off-white);
  padding:    48px 0 100px;
}

.ins-articles-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   2px;
}

/* Hidden state — toggled by insights.js */
.ins-article-card.is-hidden { display: none; }

/* Base card */
.ins-article-card {
  background:      var(--rl-warm);
  border:          1px solid var(--rl-border);
  display:         flex;
  flex-direction:  column;
  text-decoration: none;
  color:           inherit;
  transition:      all 0.25s;
  position:        relative;
  overflow:        hidden;
}
.ins-article-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.07); transform: translateY(-2px); }

/* Wide variant — spans 2 cols */
.ins-article-card--wide {
  grid-column:    span 2;
  flex-direction: row;
}

/* Internal link wrapper that fills the card */
.ins-ac-link {
  text-decoration: none;
  color:           inherit;
  flex:            1;
  display:         flex;
  flex-direction:  column;
}

.ins-ac-top { padding: 1.75rem 1.75rem 0; }

/* Wide card top — left column only, no right padding */
.ins-article-card--wide .ins-ac-top {
  padding:   1.75rem 0 1.75rem 1.75rem;
  min-width: 200px;
}

.ins-ac-meta {
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  margin-bottom:  1.1rem;
}

.ins-ac-date {
  font-family: var(--rl-font-mono);
  font-size:   0.62rem;
  color:       var(--rl-mid);
}

.ins-ac-body {
  padding: 0 1.75rem;
  flex:    1;
}

/* Wide card body — has left border to separate from date column */
.ins-article-card--wide .ins-ac-body {
  padding:     1.75rem 1.75rem 0 1.75rem;
  border-left: 1px solid var(--rl-border);
}

.ins-ac-body h3 {
  font-family:   var(--rl-font-display);
  font-size:     1.1rem;
  font-weight:   700;
  line-height:   1.3;
  margin-bottom: 0.65rem;
  color:         var(--rl-black);
}

.ins-article-card--wide .ins-ac-body h3 { font-size: 1.3rem; }

.ins-ac-body p {
  font-size:   0.83rem;
  color:       var(--rl-mid);
  line-height: 1.65;
}

.ins-ac-footer {
  padding:        1.25rem 1.75rem;
  margin-top:     1.25rem;
  border-top:     1px solid var(--rl-border);
  display:        flex;
  align-items:    center;
  justify-content: space-between;
}

/* Wide card footer — attached to body column */
.ins-article-card--wide .ins-ac-footer {
  padding:     0 1.75rem 1.75rem;
  border-top:  none;
  border-left: 1px solid var(--rl-border);
  margin-top:  auto;
}

.ins-ac-read-time {
  font-family: var(--rl-font-mono);
  font-size:   0.62rem;
  color:       var(--rl-mid);
}

.ins-ac-arrow {
  font-size:  0.8rem;
  color:      var(--rl-border);
  transition: color 0.2s;
}
.ins-article-card:hover .ins-ac-arrow { color: var(--rl-accent); }

/* No-results empty state */
.ins-no-results {
  grid-column: 1 / -1;
  padding:     4rem;
  text-align:  center;
  color:       var(--rl-mid);
  font-size:   0.97rem;
  display:     none;
}
.ins-no-results.is-visible { display: block; }

/* Responsive grid */
@media (max-width: 991.98px) {
  .ins-articles-grid { grid-template-columns: repeat(2, 1fr); }
  .ins-article-card--wide { grid-column: span 2; }
}

@media (max-width: 575.98px) {
  .ins-articles-grid { grid-template-columns: 1fr; }
  .ins-article-card--wide {
    grid-column:    span 1;
    flex-direction: column;
  }
  .ins-article-card--wide .ins-ac-top {
    padding:   1.75rem;
    min-width: unset;
  }
  .ins-article-card--wide .ins-ac-body,
  .ins-article-card--wide .ins-ac-footer {
    border-left: none;
  }
  .ins-article-card--wide .ins-ac-footer {
    border-top: 1px solid var(--rl-border);
  }
}


/* ----------------------------------------------------------------
   TOPIC CLUSTERS  (dark, 4-col)
   ---------------------------------------------------------------- */
.ins-clusters {
  background: var(--rl-near-black);
  padding:    80px 0;
}

.ins-clusters-header {
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  margin-bottom:   3rem;
  gap:             2rem;
}

.ins-clusters-header h2 {
  font-family:    var(--rl-font-display);
  font-size:      clamp(1.6rem, 2.5vw, 2rem);
  font-weight:    800;
  letter-spacing: -0.02em;
  color:          var(--rl-off-white);
}

.ins-clusters-header p {
  font-size:   0.88rem;
  color:       rgba(245,242,236,.4);
  max-width:   360px;
  text-align:  right;
  line-height: 1.6;
}

.ins-clusters-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   2px;
}

.ins-cluster-card {
  background:      rgba(255,255,255,.03);
  border:          1px solid rgba(255,255,255,.06);
  padding:         1.75rem;
  text-decoration: none;
  transition:      all 0.2s;
  display:         block;
}
.ins-cluster-card:hover {
  background:    rgba(255,255,255,.055);
  border-color:  rgba(255,255,255,.1);
}

.ins-cc-layer {
  font-family:    var(--rl-font-mono);
  font-size:      0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom:  0.65rem;
  display:        block;
}
.ins-cc-layer--l1 { color: rgba(200,80,42,.7); }
.ins-cc-layer--l2 { color: rgba(106,172,222,.6); }
.ins-cc-layer--l3 { color: rgba(90,174,128,.6); }
.ins-cc-layer--l4 { color: rgba(176,126,212,.6); }

.ins-cluster-card h3 {
  font-family:   var(--rl-font-display);
  font-size:     1rem;
  font-weight:   700;
  color:         var(--rl-off-white);
  margin-bottom: 0.5rem;
}

.ins-cluster-card p {
  font-size:   0.78rem;
  color:       rgba(245,242,236,.35);
  line-height: 1.6;
}

.ins-cc-count {
  margin-top:  1rem;
  font-family: var(--rl-font-mono);
  font-size:   0.62rem;
  color:       rgba(245,242,236,.2);
}

@media (max-width: 991.98px) {
  .ins-clusters-grid { grid-template-columns: repeat(2, 1fr); }
  .ins-clusters-header { flex-direction: column; align-items: flex-start; }
  .ins-clusters-header p { text-align: left; max-width: 100%; }
}


/* ----------------------------------------------------------------
   NEWSLETTER
   ---------------------------------------------------------------- */
.ins-newsletter {
  background:    var(--rl-warm);
  padding:       80px 0;
  border-top:    1px solid var(--rl-border);
  border-bottom: 1px solid var(--rl-border);
}

.ins-nl-inner {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   80px;
  align-items:           center;
}

.ins-nl-left h2 {
  font-family:    var(--rl-font-display);
  font-size:      clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight:    800;
  letter-spacing: -0.02em;
  margin-bottom:  0.75rem;
}
.ins-nl-left h2 em { font-style: italic; color: var(--rl-accent); }

.ins-nl-left p {
  font-size:   0.92rem;
  color:       var(--rl-mid);
  line-height: 1.75;
}

.ins-nl-form {
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
}

.ins-nl-row {
  display: flex;
  gap:     0;
}

.ins-nl-input {
  flex:        1;
  padding:     0.9rem 1.1rem;
  border:      1.5px solid var(--rl-border);
  border-right: none;
  background:  var(--rl-off-white);
  font-family: var(--rl-font-body);
  font-size:   0.9rem;
  color:       var(--rl-black);
  outline:     none;
  transition:  border-color 0.2s;
  /* no border-radius — sharp corners match site style */
}
.ins-nl-input:focus { border-color: var(--rl-accent); }
.ins-nl-input::placeholder { color: var(--rl-mid); }

.ins-nl-btn {
  padding:     0.9rem 1.5rem;
  background:  var(--rl-accent);
  color:       #fff;
  border:      none;
  font-family: var(--rl-font-body);
  font-size:   0.88rem;
  font-weight: 600;
  cursor:      pointer;
  transition:  background 0.2s;
  white-space: nowrap;
}
.ins-nl-btn:hover { background: var(--rl-accent-d); }

.ins-nl-note {
  font-size:   0.75rem;
  color:       var(--rl-mid);
  line-height: 1.5;
}

.ins-nl-confirm {
  padding:    1.25rem 1.5rem;
  background: rgba(42,107,74,.08);
  border:     1px solid rgba(42,107,74,.2);
  font-size:  0.88rem;
  color:      #2a5a3a;
  margin-top: 0.75rem;
}

@media (max-width: 767.98px) {
  .ins-nl-inner { grid-template-columns: 1fr; gap: 2rem; }
  .ins-nl-row   { flex-direction: column; gap: 0.5rem; }
  .ins-nl-input { border-right: 1.5px solid var(--rl-border); }
}