/* ==========================================================================
   KOBIL — Secure Messenger & Documents — Section: From Conversation to Signature
   Figma: desktop 6015:101576 (1360x922 — pt 80, title row 1239 wide, tabs at
   y=286: list 578 + gap 115 + visual 527x430) · mobile 6151:73449 (369x758 —
   title 337, then a 248-wide card carousel, cards 370 tall with their artwork
   bottom-aligned, and a 5-segment progress bar).

   Each row owns its visual. Above 768px the figures are lifted out of the
   flow into the fixed right-hand slot and cross-faded, so only the active
   row's artwork is on screen; on the phone frame each figure sits at the
   bottom of its card and the bloom is drawn once behind the whole carousel.
   ========================================================================== */

.sec-smd-channel {
  display: flex;
  flex-direction: column;
  gap: var(--w60);
  width: 100%;
  padding: var(--w80) var(--w40);
}

/* ---- Title row ---- */

.smd-channel__head {
  display: flex;
  align-items: flex-start;
  gap: var(--w20);
  width: var(--w1239);
  max-width: 100%;
}

.smd-channel__title {
  flex: none;
  width: var(--w632);
  font-family: var(--font-serif);
  font-size: var(--w56);
  font-weight: 400;
  line-height: 1.3;
  color: var(--navy);
}

.smd-channel__lead {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: var(--w18);
  font-weight: 400;
  line-height: var(--w26);
  color: var(--navy-70);
}

/* ---- Rows + visual ---- */

.smd-channel__body {
  position: relative;
  width: var(--w1220);
  max-width: 100%;
  min-height: var(--w430);
  display: flex;
  align-items: center;
}

/* The bloom is baked into each desktop variant's artwork, so the standalone
   layer is a phone-frame-only thing. */
.smd-channel__glow { display: none; }

.smd-channel__list {
  display: flex;
  flex-direction: column;
  gap: var(--w24);
  width: var(--w578);
  margin: 0;
  padding: 0;
  list-style: none;
}

.smd-channel__row {
  display: flex;
  align-items: flex-start;
  gap: var(--w24);
  padding-bottom: var(--w20);
  border-bottom: 1px solid var(--navy-40);
  cursor: pointer;
}

.smd-channel__row-copy {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--w8);
}

.smd-channel__row-title {
  font-family: var(--font-sans);
  font-size: var(--w20);
  font-weight: 500;
  line-height: var(--w26);
  color: var(--navy);
  transition: color var(--dur) var(--ease);
}

.smd-channel__row--active .smd-channel__row-title { color: #1046cf; }

.smd-channel__row-desc {
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy-70);
}

/* Both arrow states are in the markup and cross-faded, so becoming the active
   tab never waits on a network request (Figma: the idle mark is System/100%,
   the active one Primary/Dark Blue). */
.smd-channel__row-icon {
  position: relative;
  flex: none;
  width: var(--w24);
  height: var(--w24);
  transition: transform var(--dur) var(--ease);
}

.smd-channel__row-icon img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity var(--dur) var(--ease);
}

.smd-channel__row-icon-on { opacity: 0; }
.smd-channel__row--active .smd-channel__row-icon-idle { opacity: 0; }
.smd-channel__row--active .smd-channel__row-icon-on { opacity: 1; }

.smd-channel__row:hover .smd-channel__row-icon,
.smd-channel__row--active .smd-channel__row-icon { transform: translateX(var(--w4)); }

.smd-channel__row-figure { margin: 0; }
.smd-channel__row-figure picture { display: contents; }

/* The five variant stages, stacked in the right-hand slot (list 578 + gap
   115 = 693) and cross-faded on tab change. Scoped to the desktop range so
   the phone rules below don't have to undo the stacking — the `--active`
   selector would otherwise outrank them. */
@media (min-width: 769px) {
  .smd-channel__row-figure {
    position: absolute;
    top: 50%;
    left: var(--w693);
    width: var(--w527);
    height: var(--w430);
    opacity: 0;
    transform: translateY(-50%) scale(0.98);
    transition: opacity 320ms var(--ease), transform 320ms var(--ease);
    pointer-events: none;
  }

  /* Variant 5 is a 473x399 frame in Figma (491x430 with its shadow bleed),
     sitting flush with the slot's left edge rather than filling it. */
  .smd-channel__row:nth-child(5) .smd-channel__row-figure {
    left: calc(var(--w693) - var(--w9));
    width: var(--w491);
  }

  .smd-channel__row--active .smd-channel__row-figure {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

.smd-channel__row-visual {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

/* ---- Progress bar: phone frame only (Figma pagination/mobile) ---- */

.smd-channel__pagination { display: none; }

/* ==========================================================================
   Phone (Figma 6151:73449)
   ========================================================================== */

@media (max-width: 768px) {
  .sec-smd-channel {
    gap: var(--m24);
    /* The carousel bleeds into the page gutter, so the section only pads the
       top/bottom and the head keeps its own 16px inset. */
    padding: var(--m40) 0 var(--m58);
    overflow: hidden;
  }

  .smd-channel__head {
    flex-direction: column;
    gap: var(--m12);
    width: 100%;
    padding: 0 var(--m16);
  }
  .smd-channel__title { width: 100%; font-size: var(--m34); line-height: 1.2; }
  .smd-channel__lead { font-size: var(--m16); line-height: var(--m23); }

  .smd-channel__body {
    display: block;
    width: 100%;
    min-height: 0;
  }

  /* Figma 6151:73450: one soft bloom behind the whole carousel rather than
     one per card. Centred on the first card's artwork. */
  .smd-channel__glow {
    display: block;
    position: absolute;
    top: 55%;
    left: var(--m175);
    z-index: 0;
    width: var(--m500);
    height: auto;
    max-width: none;
    transform: translate(-50%, -50%) rotate(-44.66deg);
    pointer-events: none;
  }

  .smd-channel__list {
    position: relative;
    z-index: 1;
    flex-direction: row;
    gap: var(--m10);
    width: 100%;
    padding: 0 var(--m16);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--m16);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .smd-channel__list::-webkit-scrollbar { display: none; }

  .smd-channel__row {
    flex: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: var(--m248);
    height: var(--m370);
    padding: var(--m16) 0 0;
    border-bottom: 0;
    scroll-snap-align: start;
    cursor: default;
  }

  .smd-channel__row-copy {
    flex: none;
    gap: var(--m6);
    width: var(--m240);
  }
  .smd-channel__row-title {
    font-size: var(--m18);
    font-weight: 600;
    line-height: var(--m24);
    color: var(--navy);
  }
  .smd-channel__row--active .smd-channel__row-title { color: var(--navy); }
  .smd-channel__row-desc { font-size: var(--m14); line-height: var(--m20); }

  .smd-channel__row-icon { display: none; }

  /* Figma bottom-aligns every card's artwork inside the 370-tall card; each
     one has its own box height (222/222/222/202/208). */
  .smd-channel__row-figure {
    position: relative;
    width: 100%;
    height: var(--m222);
    margin-top: auto;
    overflow: hidden;
  }
  .smd-channel__row:nth-child(4) .smd-channel__row-figure { height: var(--m202); }
  .smd-channel__row:nth-child(5) .smd-channel__row-figure { height: var(--m208); }

  /* The phone group is the same artwork as on desktop but Figma draws it
     ~1.4x larger relative to the card, so each one is placed by matching the
     phone body's Figma box (card 1: 133.5 wide at x=52.8/y=33 of a 244x222
     window) instead of just fitting the image to the box. */
  .smd-channel__row-visual {
    position: absolute;
    height: auto;
    object-fit: contain;
  }
  .smd-channel__row:nth-child(1) .smd-channel__row-visual { left: 4.7%; top: -5.7%; width: 83.5%; }
  .smd-channel__row:nth-child(2) .smd-channel__row-visual { left: 8.9%; top: -12%; width: 82%; }
  .smd-channel__row:nth-child(3) .smd-channel__row-visual { left: 9.8%; top: -14.8%; width: 82%; }
  .smd-channel__row:nth-child(4) .smd-channel__row-visual { left: -2.6%; top: -13.3%; width: 87.4%; }
  .smd-channel__row:nth-child(5) .smd-channel__row-visual { left: -3.9%; top: -0.3%; width: 99.6%; }

  .smd-channel__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--m2);
    /* Figma puts 60 between the cards and the bar; 24 of that is the
       section's own flex gap. */
    margin-top: var(--m36);
  }

  .smd-channel__dot {
    width: var(--m19);
    height: var(--m2);
    padding: 0;
    border: 0;
    border-radius: var(--m2);
    background: var(--navy-40);
    cursor: pointer;
    transition: background var(--dur) var(--ease);
  }

  .smd-channel__dot--active { background: var(--navy); }
}

@media (prefers-reduced-motion: reduce) {
  .smd-channel__row-figure,
  .smd-channel__row-title,
  .smd-channel__row-icon { transition: none; }
}