/* =====================================================================
   Insights post heroes — replace empty colored blocks with branded art
   Layered honeycomb pattern + soft glow + per-post accent gradient.
   ===================================================================== */

.insights .post__hero{
  position: relative;
  isolation: isolate;
  background: linear-gradient(135deg, #1a1513 0%, #2a1f1a 100%) !important;
  overflow: hidden;
}

/* Honeycomb pattern overlay — repeating SVG hex grid */
.insights .post__hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 64' fill='none' stroke='%23fdb813' stroke-width='1' stroke-opacity='.18'><polygon points='28,2 54,17 54,47 28,62 2,47 2,17'/></svg>");
  background-repeat: repeat;
  background-size: 56px 64px;
  opacity: .8;
  z-index: 0;
}

/* Soft per-post accent glow — feature post = gold, alt-1 = blue, alt-2 = orange/red */
.insights .post__hero::after{
  content: "";
  position: absolute;
  top: -30%; right: -20%;
  width: 80%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(253,184,19,.5) 0%, transparent 65%);
  opacity: .9;
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
  transition: transform .6s ease, opacity .6s ease;
}
.insights .post__hero.alt-1::after{
  background: radial-gradient(circle, rgba(4,146,206,.55) 0%, transparent 65%);
}
.insights .post__hero.alt-2::after{
  background: radial-gradient(circle, rgba(229,62,62,.55) 0%, transparent 65%);
}

/* Big abstract glyph — different per post: a hex (feature), a node graph (alt-1), a bolt (alt-2) */
.insights .post__hero .glyph{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
}
.insights .post__hero .glyph svg{
  width: 55%;
  max-width: 220px;
  height: auto;
  opacity: .9;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.4));
  transition: transform .6s cubic-bezier(.2,.9,.3,1.2);
}
.insights .post:hover .post__hero .glyph svg{
  transform: scale(1.06) rotate(-3deg);
}
.insights .post:hover .post__hero::after{
  transform: scale(1.1);
  opacity: 1;
}

/* Tag pill — keep clean and high-contrast over the new dark hero */
.insights .post__hero .tag{
  z-index: 2;
  background: rgba(255,255,255,.95) !important;
  color: #1a1513 !important;
  backdrop-filter: blur(6px);
  font-weight: 600;
}

/* Feature post: keep aspect generous; the alt cards stay 16:9 */
.insights .post--feature .post__hero{ aspect-ratio: 4/3.2; }

/* Card hover lift + warmer shadow */
.insights .post{
  transition: transform .35s cubic-bezier(.2,.9,.3,1.2), box-shadow .35s ease;
}
.insights .post:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -22px rgba(238,144,2,.32), 0 8px 16px -8px rgba(26,21,19,.1);
}

/* Read link arrow nudge — match migrations cards */
.insights .post__link i{
  display: inline-block;
  transition: transform .35s cubic-bezier(.2,.9,.3,1.5);
}
.insights .post:hover .post__link i{
  transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce){
  .insights .post,
  .insights .post__hero .glyph svg,
  .insights .post__hero::after,
  .insights .post__link i{ transition: none !important; }
  .insights .post:hover{ transform: none; }
  .insights .post:hover .post__link i{ transform: none; }
}

/* =====================================================================
   Principles ("testi") cards — brand accent strips
   ===================================================================== */

.testi__grid{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0;
  border-left: var(--rule);
  border-right: var(--rule);
}
.testi__card{
  position: relative;
  isolation: isolate;
  border-right: var(--rule);
  border-radius: 0 !important;
  padding: 36px 32px !important;
  transition: background .35s ease, transform .35s cubic-bezier(.2,.9,.3,1.2);
  --testi-c1: #fdb813;
  --testi-c2: #f26722;
}
.testi__grid > .testi__card:last-child{ border-right: none; }
.testi__grid > .testi__card:nth-child(1){ --testi-c1:#fdb813; --testi-c2:#f26722; }
.testi__grid > .testi__card:nth-child(2){ --testi-c1:#c1268c; --testi-c2:#7e3fbf; }
.testi__grid > .testi__card:nth-child(3){ --testi-c1:#7e3fbf; --testi-c2:#0492ce; }

/* Top accent bar — visible at rest, animates wider on hover */
.testi__card::before{
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  width: 48px;
  background: linear-gradient(90deg, var(--testi-c1), var(--testi-c2));
  transition: width .55s cubic-bezier(.2,.9,.3,1.2);
  z-index: 1;
}
.testi__card:hover::before{ width: 100%; }

/* Soft accent wash from top-left on hover */
.testi__card::after{
  content: "";
  position: absolute;
  top: -30%; left: -20%;
  width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--testi-c1) 0%, transparent 65%);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .55s ease, transform .7s cubic-bezier(.2,.9,.3,1.2);
  z-index: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.testi__card:hover::after{
  opacity: .12;
  transform: scale(1);
}
.testi__card > *{ position: relative; z-index: 1; }

.testi__card:hover{
  transform: translateY(-3px);
  background: #fffefb !important;
}

/* "strong" label gets a brand color shift */
.testi__card .testi__who strong{
  transition: color .35s ease;
}
.testi__card:hover .testi__who strong{
  color: var(--testi-c2);
}

@media (max-width: 1024px){
  .testi__grid{ grid-template-columns: repeat(2, 1fr) !important; }
  .testi__grid > .testi__card:nth-child(2n){ border-right: none; }
}
@media (max-width: 640px){
  .testi__grid{ grid-template-columns: 1fr !important; }
  .testi__grid > .testi__card{ border-right: none; border-bottom: var(--rule); }
  .testi__grid > .testi__card:last-child{ border-bottom: none; }
}
@media (prefers-reduced-motion: reduce){
  .testi__card,
  .testi__card::before,
  .testi__card::after{ transition: none !important; }
  .testi__card:hover{ transform: none; }
}