/* claude — homepage "News & announcements" band (newsroom/_home-module-claude.blade.php).
   Background = --mk-teal-4 (#146868): lighter than the dark map section above,
   darker than the light FAQ below. Loaded only when the band renders. */

/* The map is a .mk-section.teal: its bottom wedge is painted in the colour of the section
   below it. With this band below, that colour is teal-4. */
.mk-section.teal.mkv2-map::after { background: var(--mk-teal-4); }

.mknh {
  background: var(--mk-teal-4);
  color: #ffffff;
  position: relative;
  overflow: hidden;
  padding-bottom: 150px;           /* 96px + room for the wedge into the FAQ */
}
/* Angled wedge into the light FAQ below — the same shape the teal sections use. */
.mknh::after {
  content: '';
  position: absolute;
  left: -10%; right: -10%; bottom: -2px;
  height: 60px;
  background: var(--mk-bg);
  clip-path: polygon(0 100%, 100% 60%, 100% 100%);
}
.mknh .mk-section-h { color: #ffffff; margin-bottom: 40px; }
.mknh .mk-section-eyebrow { color: rgba(255,255,255,0.72); }
.mknh .mk-section-eyebrow::after { background: var(--mk-orange-h); }

.mknh-grid {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.mknh-card {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  background: #ffffff;
  border-radius: var(--mk-radius);
  box-shadow: 0 18px 40px -24px rgba(7,44,44,0.45);
  text-decoration: none !important;
  color: var(--mk-text) !important;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.mknh-card:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -24px rgba(7,44,44,0.55); }
.mknh-meta {
  display: flex;
  gap: 14px;
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mk-teal-4);
}
.mknh-h {
  font: 500 22px/1.25 var(--font-display);
  color: var(--mk-teal-1);
  text-wrap: pretty;
}
.mknh-read {
  margin-top: auto;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font: 700 14px/1 var(--font-ui);
  color: var(--mk-orange-d);
}
.mknh-all {
  position: relative;
  text-align: center;
  margin-top: 36px;
}
.mknh-all a {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font: 700 15px/1 var(--font-ui);
  color: #ffffff !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.45);
  padding-bottom: 4px;
}
.mknh-all a:hover { border-bottom-color: #ffffff; }

@media (max-width: 960px) {
  .mknh-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .mknh-h { font-size: 20px; }
}