/* ==========================================================================
   ELEVARE111 — Insights
   Additive only. Loaded exclusively by /insights/ pages, alongside — never
   instead of — styles.css, from which every token, the chrome, the buttons
   and the fade-in behaviour are inherited unchanged.
   ========================================================================== */

/* --- Shared page frame — mirrors the Access page composition --- */
.insights-page,
.insight-page {
  min-height: 100vh;
  background: var(--dark);
  padding: 140px 24px 100px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.insights-bg-accent {
  position: absolute;
  top: 0;
  right: -200px;
  width: 500px;
  height: 500px;
  background: radial-gradient(ellipse at center, rgba(20, 60, 180, 0.06) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}

.insights-content {
  max-width: 760px;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* --- Index header --- */
.insights-intro {
  text-align: center;
  margin-bottom: 72px;
}

.insights-title {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 24px;
}

.insights-divider {
  width: 40px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--cobalt-light), transparent);
  margin: 0 auto;
}

/* ==========================================================================
   Index — article list
   ========================================================================== */
.insight-list-wrap {
  display: flex;
  flex-direction: column;
}

.insight-card {
  border-top: 1px solid var(--border-subtle);
}

.insight-card:last-child {
  border-bottom: 1px solid var(--border-subtle);
}

.insight-card-link {
  display: block;
  padding: 40px 4px;
  transition: background 0.5s ease, padding-left 0.5s ease;
}

.insight-card-link:hover {
  background: rgba(255, 255, 255, 0.015);
  padding-left: 16px;
}

.insight-card-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.insight-card-date,
.insight-card-category {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.insight-card-category {
  padding-left: 16px;
  position: relative;
  color: rgba(160, 190, 255, 0.34);
}

.insight-card-category::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 1px;
  background: rgba(160, 190, 255, 0.28);
}

.insight-card-title {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.88);
  transition: color 0.4s ease;
}

.insight-card-link:hover .insight-card-title {
  color: #fff;
}

.insight-card-excerpt {
  font-family: var(--serif);
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  font-weight: 300;
  line-height: 1.85;
  color: var(--text-secondary);
  margin-top: 14px;
  max-width: 60ch;
}

.insight-card-more {
  display: inline-block;
  margin-top: 22px;
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(160, 190, 255, 0.4);
  transition: color 0.4s ease;
}

.insight-card-more::after {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-left: 12px;
  transition: width 0.4s ease;
}

.insight-card-link:hover .insight-card-more {
  color: rgba(200, 220, 255, 0.75);
}

.insight-card-link:hover .insight-card-more::after {
  width: 34px;
}

/* --- Empty state, until the first insight is published --- */
.insight-empty {
  text-align: center;
  padding: 40px 0 20px;
}

.insight-empty-line {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.8vw, 1.6rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 28px;
}

/* ==========================================================================
   Article template
   ========================================================================== */
.insight-article {
  max-width: 680px;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* --- The reveal, for the two parts of the page that are already on screen ---
   An article's title and body are at the top of the page: they are meant to
   rise into place as the page arrives, not to wait for a scroll that never
   comes. Driving those two from an animation rather than from the scroll
   observer keeps that one second rise identical while making it unconditional,
   so neither can be left at opacity 0 — a body several screens tall can never
   be 15% in view, and an article whose script has not loaded still reads. The
   footer keeps its scroll-triggered reveal, unchanged. */
.insight-header.fade-in,
.insight-body.fade-in {
  opacity: 1;
  transform: none;
  animation: insight-rise 1s ease both;
}

@keyframes insight-rise {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .insight-header.fade-in,
  .insight-body.fade-in {
    animation: none;
  }
}

.insight-header {
  text-align: center;
  margin-bottom: 72px;
}

.insight-kicker {
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(160, 190, 255, 0.36);
  margin-bottom: 22px;
}

.insight-title {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  font-weight: 300;
  line-height: 1.24;
  letter-spacing: 0.04em;
  color: #fff;
  margin-bottom: 26px;
}

.insight-meta {
  margin-top: 24px;
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.insight-meta-sep {
  margin: 0 6px;
  color: rgba(255, 255, 255, 0.14);
}

/* --- Body copy — the reading experience --- */
.insight-body {
  font-family: var(--serif);
  font-size: clamp(1.02rem, 1.9vw, 1.16rem);
  font-weight: 300;
  line-height: 1.95;
  letter-spacing: 0.012em;
  color: rgba(220, 230, 250, 0.72);
}

.insight-p {
  margin-bottom: 32px;
}

.insight-body > :last-child {
  margin-bottom: 0;
}

.insight-h2,
.insight-h3,
.insight-h4,
.insight-h5,
.insight-h6 {
  font-family: var(--serif);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.06em;
  margin: 64px 0 24px;
}

.insight-h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.65rem);
}

.insight-h3 {
  font-size: clamp(0.86rem, 1.6vw, 0.98rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(200, 215, 240, 0.75);
}

.insight-h4,
.insight-h5,
.insight-h6 {
  font-size: clamp(1rem, 1.8vw, 1.12rem);
}

.insight-body a {
  color: rgba(170, 200, 255, 0.85);
  border-bottom: 1px solid rgba(20, 60, 180, 0.45);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.insight-body a:hover {
  color: #fff;
  border-bottom-color: rgba(60, 110, 230, 0.8);
}

.insight-body strong {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.insight-body em {
  font-style: italic;
  color: rgba(230, 238, 255, 0.8);
}

.insight-body code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.86em;
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  color: rgba(220, 232, 255, 0.85);
}

.insight-list {
  margin: 0 0 32px 0;
  padding-left: 22px;
  list-style: none;
}

.insight-list li {
  position: relative;
  margin-bottom: 14px;
}

.insight-list li::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 0.95em;
  width: 9px;
  height: 1px;
  background: rgba(160, 190, 255, 0.35);
}

ol.insight-list {
  counter-reset: insight-counter;
}

ol.insight-list li {
  counter-increment: insight-counter;
}

ol.insight-list li::before {
  content: counter(insight-counter);
  top: 0;
  left: -26px;
  width: auto;
  height: auto;
  background: none;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: rgba(160, 190, 255, 0.4);
}

.insight-quote {
  margin: 48px 0;
  padding-left: 28px;
  border-left: 1px solid rgba(20, 60, 180, 0.5);
  font-family: var(--serif-elegant);
  font-style: italic;
  font-size: clamp(1.05rem, 2.1vw, 1.25rem);
  line-height: 1.85;
  color: rgba(200, 218, 250, 0.62);
}

.insight-rule {
  border: 0;
  height: 1px;
  width: 60px;
  margin: 56px auto;
  background: linear-gradient(to right, transparent, rgba(160, 190, 255, 0.22), transparent);
}

/* --- Photography inside an article ---
   Full measure, never wider, and the aspect ratio the file itself carries. */
.insight-body figure {
  margin: 0 0 48px;
}

.insight-body img {
  max-width: 100%;
  height: auto;
}

.insight-body figcaption {
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--text-muted);
  text-align: center;
}

/* The lead image sits directly beneath the title and reads as the hero. It is
   held to part of the screen so a tall portrait photograph introduces the
   article rather than filling it, and it is never cropped to do so. */
.insight-body > figure:first-child,
.insight-body > img:first-child {
  margin-bottom: 56px;
}

.insight-body > figure:first-child img,
.insight-body > img:first-child {
  max-height: 78vh;
  margin-left: auto;
  margin-right: auto;
}

/* --- Article close --- */
.insight-footer {
  margin-top: 96px;
  text-align: center;
}

.insight-footer .riviera-accent {
  margin-top: 40px;
}

.insight-back {
  display: block;
  margin-top: 40px;
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  transition: color 0.3s ease;
}

.insight-back:hover {
  color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
  .insights-page,
  .insight-page {
    padding: 120px 20px 80px;
  }

  .insights-intro {
    margin-bottom: 52px;
  }

  .insight-card-link {
    padding: 32px 2px;
  }

  .insight-card-link:hover {
    padding-left: 2px;
  }

  .insight-header {
    margin-bottom: 52px;
  }

  .insight-h2,
  .insight-h3,
  .insight-h4 {
    margin-top: 48px;
  }

  .insight-footer {
    margin-top: 72px;
  }
}

@media (max-width: 480px) {
  .insights-page,
  .insight-page {
    padding: 108px 18px 72px;
  }

  .insight-card-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .insight-card-category {
    padding-left: 0;
  }

  .insight-card-category::before {
    display: none;
  }

  .insight-quote {
    margin: 36px 0;
    padding-left: 20px;
  }
}