/* Konverta.ai: Insights listing, uniform editorial card grid (replaces the old lead-story feed).
   Loaded on /insights/ AFTER article.css, which still supplies .ins-hero, .ins-bar, .ins-chip, .ins-count, .ins-meta, .ins-empty, .ins-nl.
   Grid: 1 column on mobile, 2 at >=700px, 3 at >=1100px. Every card is the same size (equal heights, 16:10 image, 2-line dek). */

.ins-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 1.75rem);
  margin: 0; padding: 0; list-style: none;
}
@media (min-width: 700px) { .ins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ins-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ins-grid > li { display: flex; min-width: 0; margin: 0; padding: 0; }
.ins-grid > li[hidden] { display: none; }

.ins-tile {
  position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0; overflow: hidden;
  border-radius: 16px; background: linear-gradient(180deg, rgba(233,239,244,.045), rgba(233,239,244,.02));
  box-shadow: 0 0 0 1px var(--line, rgba(233,239,244,.10));
  transition: transform .35s var(--ease, ease), box-shadow .35s var(--ease, ease), background .35s ease;
}
/* gradient hairline: sits on the top edge, lights up on hover / focus */
.ins-tile::before {
  content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 2px; pointer-events: none;
  background: var(--grad, linear-gradient(120deg, #0FB4C3, #0F87D2)); opacity: 0; transition: opacity .35s ease;
}
.ins-tile:hover, .ins-tile:focus-within {
  transform: translateY(-4px);
  background: linear-gradient(180deg, rgba(233,239,244,.07), rgba(233,239,244,.03));
  box-shadow: 0 0 0 1px rgba(15,180,195,.35), 0 28px 56px -28px rgba(0,0,0,.85), 0 0 40px -18px rgba(15,180,195,.35);
}
.ins-tile:hover::before, .ins-tile:focus-within::before { opacity: 1; }

.it-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-2, #0A1828); border-bottom: 1px solid var(--line, rgba(233,239,244,.10)); }
@supports not (aspect-ratio: 16 / 10) { .it-media { height: 0; padding-top: 62.5%; } .it-media img { position: absolute; inset: 0; } }
.it-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 1.1s var(--ease, ease); }
.ins-tile:hover .it-media img { transform: scale(1.035); }

/* typographic fallback for posts without a real thumbnail: <div class="it-media it-type" aria-hidden="true">
   <p class="it-latest">Latest</p><p class="it-type-cat">Category</p><p class="it-type-word">Word</p></div> */
.it-type {
  display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1rem, 2.2vw, 1.4rem) clamp(1.1rem, 2.2vw, 1.5rem);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(15,180,195,.22), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(15,135,210,.18), transparent 60%),
    linear-gradient(160deg, #0B1E30 0%, #081522 100%);
}
.it-type::after { /* faint hairline grid for texture */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(233,239,244,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(233,239,244,.05) 1px, transparent 1px);
  background-size: 28px 28px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%); mask-image: linear-gradient(180deg, transparent, #000 70%);
}
.it-type-cat { position: relative; z-index: 1; margin: 0; font-size: .6875rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--accent, #7EE6EE); }
.it-type-word { position: relative; z-index: 1; margin: 0; font-family: var(--serif, Georgia, serif); font-style: italic; font-weight: 400;
  font-size: clamp(3rem, 5vw, 4.25rem); line-height: .95; letter-spacing: -.02em; padding-right: .08em;
  color: transparent; background: linear-gradient(100deg, #E9EFF4 0%, #7EE6EE 55%, #3AA6EC 100%); -webkit-background-clip: text; background-clip: text;
  transition: transform 1.1s var(--ease, ease); transform-origin: left bottom; }
.ins-tile:hover .it-type-word { transform: scale(1.04); }

/* slim "Latest" tag (newest card only; set by the page script) */
.it-latest { position: absolute; z-index: 2; right: 12px; top: 12px; display: none; align-items: center; gap: 7px; margin: 0; padding: 5px 10px 5px 9px;
  border-radius: 99px; background: rgba(6,15,26,.86); box-shadow: 0 0 0 1px rgba(233,239,244,.16);
  font-size: .625rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; line-height: 1; color: var(--text, #E9EFF4); }
.it-latest::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan, #0FB4C3); box-shadow: 0 0 10px rgba(15,180,195,.9); }
.ins-grid > li.is-latest .it-latest { display: inline-flex; }

.it-body { display: flex; flex-direction: column; gap: .75rem; flex: 1 1 auto; padding: clamp(1.1rem, 2.2vw, 1.4rem) clamp(1.1rem, 2.2vw, 1.5rem) clamp(1.25rem, 2.4vw, 1.6rem); }
.it-top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .85rem; position: relative; z-index: 2; }
.it-chip { display: inline-flex; align-items: center; margin: 0; padding: 4px 10px; border-radius: 99px; background: var(--tint, rgba(15,180,195,.12));
  box-shadow: inset 0 0 0 1px rgba(15,180,195,.35); font-size: .6875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; color: var(--accent, #7EE6EE); }
.it-top .ins-meta { font-size: .75rem; color: var(--muted, #8FA1B5); gap: .35rem .6rem; }
.it-top .ins-meta li { gap: .6rem; }

.it-title { margin: 0; font-family: var(--font, "Outfit", sans-serif); font-weight: 500; font-size: clamp(1.2rem, 1.1vw + .9rem, 1.45rem); line-height: 1.18; letter-spacing: -.02em; text-wrap: balance;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; min-height: calc(1.18em * 3); }.it-title a { color: var(--text, #E9EFF4); text-decoration: none; }
.it-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 16px; } /* whole card is the link */
.it-title a:focus-visible { outline: none; }
.it-title a:focus-visible::after { outline: 2px solid var(--accent, #7EE6EE); outline-offset: -2px; }
.ins-tile:hover .it-title a { color: #BFF0F4; }

.it-dek {
  margin: 0; font-family: var(--serif, Georgia, serif); font-style: italic; font-size: 1.125rem; line-height: 1.35; color: var(--soft, #B7C4D2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  min-height: calc(1.35em * 2);
}
.it-more { margin-top: auto; padding-top: .35rem; font-size: .875rem; font-weight: 500; color: var(--accent, #7EE6EE); }
.it-more::after { content: " \2192"; display: inline-block; transition: transform .25s ease; }
.ins-tile:hover .it-more::after { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .ins-tile, .ins-tile::before, .it-media img, .it-more::after { transition: none; }
  .ins-tile:hover, .ins-tile:focus-within { transform: none; }
  .ins-tile:hover .it-media img, .ins-tile:hover .it-type-word { transform: none; }
  .it-type-word { transition: none; }
}

@media print {
  .ins-grid { grid-template-columns: 1fr 1fr; }
  .ins-tile { box-shadow: none; border: 1px solid #bbb; background: none; break-inside: avoid; }
  .it-title a, .it-dek, .it-chip, .it-more { color: #000 !important; }
}

/* dark-only rule: selected filter chip uses the cyan accent, not cream */
.ins-chip[aria-pressed="true"] { background: rgba(15,180,195,.16); border-color: #0FB4C3; color: #E9F7F9; font-weight: 500; }

/* topic tags on cards (plain text) + topic filter row (tools/sync-tags.cjs) */
.it-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.it-tags li { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line-2, rgba(233,239,244,.18));
  font-size: .75rem; line-height: 1.3; letter-spacing: .01em; color: var(--soft, #B7C4D2); background: rgba(233,239,244,.03); }
.ins-topics { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.ins-topics-h { margin: 0; font-size: .6875rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted, #8FA1B5); }
.ins-chip-sm { min-height: 36px; padding: .35rem .9rem; font-size: .8125rem; }
@media print { .it-tags li { color: #000; border-color: #999; } }
@media (max-width: 899px) { .ins-bar .ins-topics { order: 1; } .ins-bar .ins-count { order: 2; } } /* phones: count under both filter rows */