/* =========================================================
   INSIGHTS PAGE
   ========================================================= */


/* =========================================================
   HERO
   ========================================================= */

.insights-hero {
  background: var(--aegean);
  color: var(--ink);
}

.insights-hero .page-kicker {
  margin: 0 0 18px;

  color: var(--midnight);

  font-size: .78rem;
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.insights-hero .display {
  color: var(--midnight);
}

.insights-hero .lead {
  color: var(--ink);
}


/* =========================================================
   INSIGHTS LAYOUT
   ========================================================= */

.insights-list {
  padding-top: 86px;
  padding-bottom: 86px;

  background: var(--canvas);
  color: var(--ink);
}

.insights-list .insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 22px;
}

/*
  The two smaller cards divide the same height occupied
  by the featured card.
*/

.insight-secondary-grid {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 22px;
}


/* =========================================================
   SHARED CARD DESIGN
   ========================================================= */

.insights-list .insight-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  min-width: 0;
  min-height: 0;
  padding: 30px;

  background: var(--paper);
  border: 1px solid rgba(1, 136, 159, .25);
  border-radius: var(--radius);
  color: var(--ink);

  box-shadow: none;
}


/* Informational cards should not move on hover */

.insights-list .insight-card:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(1, 136, 159, .25);
}

.insight-card-content {
  min-width: 0;
}


/* Plain category label with no decorative dash */

.insights-list .insight-label {
  margin: 0 0 18px;

  color: var(--midnight);

  font-size: .78rem;
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.insights-list .insight-card h3 {
  margin: 0;

  color: var(--midnight);

  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.24;
}

.insights-list .insight-status {
  display: inline-flex;

  width: fit-content;
  margin-top: 24px;

  color: var(--midnight);

  font-size: .88rem;
  font-weight: 700;
  line-height: 1.3;

  transform: none;
  transition: none;
}


/* =========================================================
   SECONDARY CARDS
   ========================================================= */

.insights-list .insight-card--strategy,
.insights-list .insight-card--sales {
  position: relative;

  background: var(--paper);
  border-color: rgba(1, 136, 159, .25);
}

/*
  A small colour accent separates the cards without covering
  the entire reading surface in bright blue.
*/

.insights-list .insight-card--strategy::before,
.insights-list .insight-card--sales::before {
  content: "";

  position: absolute;
  top: 0;
  right: 0;
  left: 0;

  height: 4px;

  background: var(--teal);
  border-radius: var(--radius) var(--radius) 0 0;
}

.insights-list .insight-card--strategy .insight-label,
.insights-list .insight-card--sales .insight-label {
  color: var(--midnight);
}


/* =========================================================
   FEATURED CARD
   ========================================================= */

.insights-list .insight-card.featured {
  min-height: 460px;

  background: var(--ocean);
  border-color: var(--ocean);
  color: var(--paper);

  box-shadow:
    0 18px 46px rgba(15, 77, 92, .14);
}

.insights-list .insight-card.featured .insight-label {
  color: var(--paper);
  opacity: .86;
}

.insights-list .insight-card.featured .heading {
  margin: 0;

  color: var(--paper);

  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  line-height: 1.08;
}

.insights-list .insight-card.featured .insight-summary {
  max-width: 620px;
  margin: 20px 0 0;

  color: var(--paper);

  font-size: 1rem;
  line-height: 1.6;
}

.insights-list .insight-card.featured .insight-status {
  color: var(--paper);
}


/* Preserve card colours on hover */

.insights-list .insight-card.featured:hover {
  border-color: var(--ocean);
}

.insights-list .insight-card:hover .insight-status {
  color: var(--midnight);
  transform: none;
}

.insights-list .insight-card.featured:hover .insight-status {
  color: var(--paper);
  transform: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .insights-list {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .insights-list .insight-grid {
    grid-template-columns: 1fr;
  }

  .insights-list .insight-card.featured {
    min-height: 360px;
  }

  .insight-secondary-grid {
    grid-template-rows: none;
  }

  .insights-list .insight-secondary-grid .insight-card {
    min-height: 210px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {
  .insights-hero .page-kicker {
    margin-bottom: 12px;

    font-size: .68rem;
    letter-spacing: .075em;
  }

  .insights-list {
    padding-top: 54px;
    padding-bottom: 54px;
  }

  .insights-list .insight-grid,
  .insight-secondary-grid {
    gap: 16px;
  }

  .insights-list .insight-card {
    padding: 22px;
  }

  .insights-list .insight-card.featured {
    min-height: 320px;
  }

  .insights-list .insight-secondary-grid .insight-card {
    min-height: 180px;
  }

  .insights-list .insight-label {
    margin-bottom: 14px;

    font-size: .7rem;
    letter-spacing: .065em;
  }

  .insights-list .insight-status {
    margin-top: 18px;
  }
}