/* assets/css/components/front-insights.css
 * @layer components — Homepage Insights Hub
 * ════════════════════════════════════════════════════════════════════
 *
 * Layout: featured card (large left) + 3 stacked cards (right).
 * Token sources: §2 semantics, §5 spacing, §13 radii, §14 shadows
 * ════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ── Section header — split: title left, view-all right ── */
  .front-insights__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-block-end: var(--space-2xl);
  }

  .front-insights__header-left {
    max-inline-size: 36rem;
  }

  .front-insights__view-all {
    font-size: var(--text-s);
    font-weight: var(--weight-medium);
    color: var(--text-accent);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    letter-spacing: 0.02em;
    transition: gap var(--duration-normal) var(--ease-default);
    flex-shrink: 0;
    padding-block-end: var(--space-2xs);
    text-decoration: none;
  }

  .front-insights__view-all:hover {
    gap: var(--space-xs);
  }

  .front-insights__view-all svg {
    stroke: var(--icon-color);
  }

  /* ── Main grid: featured left, stack right ── */
  .front-insights__grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--grid-gap);
  }

  /* ════════════════════════════════════════════════════════════════════
     Featured card (large left)
     ════════════════════════════════════════════════════════════════════ */
  .front-insights__featured {
    position: relative;
    border-radius: var(--radius-l);
    overflow: hidden;
    min-block-size: 28rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-xl);
    background: var(--primary-dark, var(--surface-dark));
    cursor: pointer;
    text-decoration: none;
    transition:
      transform var(--duration-normal) cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow var(--duration-normal) var(--ease-default);
    box-shadow: var(--shadow-l);
  }

  .front-insights__featured:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl, 0 20px 56px oklch(0% 0 0 / 18%));
  }

  /* Gradient overlay */
  .front-insights__featured::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      var(--surface-dark) 0%,
      color-mix(in oklch, var(--surface-dark) 60%, transparent) 40%,
      transparent 70%
    );
    z-index: 1;
  }

  /* Dot texture */
  .front-insights__featured::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.06;
    pointer-events: none;
    background-image: radial-gradient(
      circle,
      color-mix(in oklch, var(--white) 50%, transparent) 1px,
      transparent 1px
    );
    background-size: 1rem 1rem;
    z-index: 0;
  }

  .front-insights__featured-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .front-insights__featured:hover .front-insights__featured-image {
    transform: scale(1.03);
  }

  .front-insights__featured-content {
    position: relative;
    z-index: 3;
  }

  .front-insights__featured-tag {
    display: inline-block;
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-main);
    background: var(--accent);
    padding: var(--space-3xs) var(--space-s);
    border-radius: var(--radius-xs);
    margin-block-end: var(--space-m);
    box-shadow: var(--shadow-s);
  }

  .front-insights__featured-title {
    font-family: var(--font-heading);
    font-size: var(--heading-xs);
    font-weight: var(--weight-bold);
    color: var(--text-on-dark);
    line-height: var(--leading-tight);
    margin-block-end: var(--space-xs);
    max-inline-size: 30rem;
  }

  .front-insights__featured-excerpt {
    font-size: var(--text-s);
    font-weight: var(--weight-light, 300);
    color: color-mix(in oklch, var(--white) 55%, transparent);
    line-height: var(--leading-relaxed);
    max-inline-size: 28rem;
    margin-block-end: var(--space-m);
  }

  .front-insights__featured-meta {
    font-size: var(--text-xs);
    color: color-mix(in oklch, var(--white) 35%, transparent);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }

  .front-insights__meta-dot {
    width: 3px;
    height: 3px;
    border-radius: var(--radius-full);
    background: color-mix(in oklch, var(--white) 25%, transparent);
  }

  /* ════════════════════════════════════════════════════════════════════
     Stacked cards (right column)
     ════════════════════════════════════════════════════════════════════ */
  .front-insights__stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
  }

  .front-insights__card {
    background: var(--surface-raised);
    border-radius: var(--radius-m);
    border: 1px solid var(--border-subtle);
    padding: var(--space-l) var(--space-l) var(--space-l) var(--space-xl);
    display: flex;
    gap: var(--space-m);
    align-items: flex-start;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition:
      transform var(--duration-normal) cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow var(--duration-normal) var(--ease-default),
      border-color var(--duration-normal) var(--ease-default);
    flex: 1;
    box-shadow: var(--shadow-s);
    position: relative;
    overflow: hidden;
  }

  /* Left accent bar */
  .front-insights__card::before {
    content: '';
    position: absolute;
    top: var(--space-m);
    bottom: var(--space-m);
    left: 0;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--border-subtle);
    transition: background var(--duration-normal) var(--ease-default);
  }

  .front-insights__card:hover::before {
    background: var(--text-accent);
  }

  .front-insights__card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-m);
    border-color: var(--border-default);
  }

  /* Icon wrap */
  .front-insights__card-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-s);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--surface-tinted);
    border: 1px solid var(--border-subtle);
    transition:
      background var(--duration-normal) var(--ease-default),
      border-color var(--duration-normal) var(--ease-default);
  }

  .front-insights__card:hover .front-insights__card-icon {
    background: color-mix(in oklch, var(--primary) 10%, var(--surface-tinted));
    border-color: var(--border-default);
  }

  .front-insights__card-icon svg {
    stroke: var(--icon-color);
  }

  .front-insights__card-content {
    flex: 1;
    min-width: 0;
  }

  /* Tag badges */
  .front-insights__card-tag {
    display: inline-block;
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: var(--space-3xs) var(--space-xs);
    border-radius: var(--radius-xs);
    margin-block-end: var(--space-xs);
    white-space: nowrap;
  }

  .front-insights__card-tag--case-study {
    color: var(--text-accent);
    background: var(--surface-tinted);
    border: 1px solid var(--border-subtle);
  }

  .front-insights__card-tag--whitepaper {
    color: var(--neutral-semi-dark, oklch(40% 0.08 260));
    background: oklch(96% 0.015 260);
    border: 1px solid oklch(90% 0.025 260);
  }

  .front-insights__card-tag--event {
    color: var(--accent-dark, oklch(42% 0.1 65));
    background: oklch(96% 0.02 65);
    border: 1px solid oklch(90% 0.035 65);
  }

  .front-insights__card-title {
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    color: var(--text-main);
    line-height: var(--leading-snug, 1.4);
    margin-block-end: var(--space-3xs);
  }

  .front-insights__card-meta {
    font-size: var(--text-xs);
    font-weight: var(--weight-light, 300);
    color: var(--text-subtle);
  }

  /* ── Responsive ── */
  @media (max-width: 48em) {
    .front-insights__header {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-m);
    }

    .front-insights__grid {
      grid-template-columns: 1fr;
      gap: var(--space-xl);
    }

    .front-insights__featured {
      min-block-size: 20rem;
    }
  }

} /* end @layer components */