/* ==========================================================================
   P2P Showcase widget (Phase 2 Rebrand)
   Figma: desktop 6012-11600 ("Cards 21"), mobile 6025-12034.
   Loaded only where the widget is used (get_style_depends).
   Self-carries the Aeonik @font-face so the widget renders correctly on any
   page (browsers dedupe by URL when header-v2/footer-v2 also declare it).
   ========================================================================== */

@font-face {
  font-family: 'Aeonik';
  src: url('../fonts/aeonik-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aeonik';
  src: url('../fonts/aeonik-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

.p2p-showcase {
  display: flex;
  /* stretch: the visual panel fills the full content height (Figma: 636px,
     same as the card's inner height) */
  align-items: stretch;
  justify-content: space-between;
  gap: 40px;
  padding: 40px;
  background: #fff;
  border-radius: 24px;
  font-family: 'Aeonik', 'Lato', sans-serif;
  color: #1e3c74;
  /* self-contained width cap: the card always stays 24px inside the guide
     rails (max(72px, 50vw - 648px) + 24) regardless of container setup */
  max-width: min(1248px, calc(100vw - 192px));
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   Left column: eyebrow / title / subtitle / modules
   -------------------------------------------------------------------------- */
.p2p-showcase__left {
  width: 466px;
  max-width: 100%;
  flex-shrink: 0;
}
.p2p-showcase__eyebrow {
  margin: 0 0 24px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #1e3c74;
}
.p2p-showcase__title {
  margin: 0 0 24px;
  font-family: 'Aeonik', 'Lato', sans-serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 42px;
  letter-spacing: -0.5px;
  color: #1e3c74;
}
.p2p-showcase__subtitle {
  margin: 0 0 48px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #1e3c74;
}

.p2p-showcase__modules {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* Each module is a presentational wrapper so the text CTA can be a real <a>
   next to (not inside) the tab <button>. Figma 10711:18817. */
.p2p-showcase__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.p2p-showcase__module {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.p2p-showcase__module-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border: 1px solid #c0dcfb;
  border-radius: 7px;
  background: #fff;
  color: #7c9ec5;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.p2p-showcase__module-icon svg {
  width: 22px;
  height: 22px;
  /* The Figma glyphs are stroke-based with var()-driven paint (fill="none",
     stroke="var(--stroke-0, ...)"): recolor through the custom properties so
     the active/inactive state follows currentColor WITHOUT filling outlines. */
  --stroke-0: currentColor;
  --fill-0: currentColor;
}
.p2p-showcase__module-icon i {
  font-size: 20px;
}
.p2p-showcase__module-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.p2p-showcase__module-title {
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  color: #7c9ec5;
  transition: color 0.2s ease;
}
.p2p-showcase__module-desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #7c9ec5;
  transition: color 0.2s ease;
}
/* hover (no Figma variant exists): halfway to the active state — text goes
   navy, icon border picks up the accent blue; the filled box stays active-only */
.p2p-showcase__module:hover:not(.is-active) .p2p-showcase__module-title,
.p2p-showcase__module:hover:not(.is-active) .p2p-showcase__module-desc {
  color: #1e3c74;
}
.p2p-showcase__module:hover:not(.is-active) .p2p-showcase__module-icon {
  border-color: #66a5f1;
  color: #0472c3;
}
.p2p-showcase__module.is-active .p2p-showcase__module-icon {
  background: #e8f2fe;
  color: #0472c3;
}
.p2p-showcase__module.is-active .p2p-showcase__module-title {
  color: #1e3c74;
}
.p2p-showcase__module.is-active .p2p-showcase__module-desc {
  color: #1e3c74;
}
.p2p-showcase__module:focus-visible {
  outline: 2px solid #0088f7;
  outline-offset: 4px;
  border-radius: 4px;
}

/* Text CTA (Figma "Tertiary button" 10711:18825): CTA-blue label + trailing
   arrow, indented to the text column (50px icon + 16px gap) and shown on the
   active module only, exactly as the design draws it. The arrow glyph is the
   same data URI the Phase 2 tertiary links use in phase2.css. */
.p2p-showcase__module-cta {
  display: none;
  align-self: flex-start;
  margin-left: 66px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #0088f7;
  text-decoration: none;
  transition: color 0.2s ease;
}
.p2p-showcase__module.is-active ~ .p2p-showcase__module-cta {
  display: inline-flex;
  align-items: center;
}
.p2p-showcase__module-cta::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12.06 12.37' fill='none'%3E%3Cpath d='M11.14 6.19L1.02 6.19M5.66 0.53L11.31 6.19L5.66 11.84' stroke='%230088F7' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.p2p-showcase__module-cta:hover,
.p2p-showcase__module-cta:focus {
  color: #006fd6;
  text-decoration: none;
}
.p2p-showcase__module-cta:focus-visible {
  outline: 2px solid #0088f7;
  outline-offset: 4px;
  border-radius: 4px;
}
/* the module name that gives the CTA a unique accessible name */
.p2p-showcase__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Right column: stacked visuals, fade between them
   -------------------------------------------------------------------------- */
.p2p-showcase__visuals {
  display: grid;
  width: 572px;
  max-width: 100%;
  flex-shrink: 1;
}
.p2p-showcase__visual {
  grid-area: 1 / 1;
  height: 100%;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.p2p-showcase__visual.is-active {
  opacity: 1;
  pointer-events: auto;
}
/* Linked visual: the anchor takes over the panel box so the image keeps its
   height:100% reference, and carries the arrow badge (Figma 10711:18885 —
   44px circle, 20px inset, #eaf5ff on #0088f7). */
.p2p-showcase__visual-link {
  position: relative;
  display: block;
  height: 100%;
  border-radius: 16px;
  text-decoration: none;
}
.p2p-showcase__visual-link:focus-visible {
  outline: 2px solid #0088f7;
  outline-offset: 4px;
}
.p2p-showcase__visual-arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #eaf5ff;
  color: #0088f7;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.p2p-showcase__visual-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}
.p2p-showcase__visual-link:hover .p2p-showcase__visual-arrow,
.p2p-showcase__visual-link:focus-visible .p2p-showcase__visual-arrow {
  background: #d7ebff;
  transform: translateY(-2px);
}

/* img selector included: Elementor's base `.elementor img { height: auto }`
   outranks a lone class */
img.p2p-showcase__visual-img,
.p2p-showcase__visual-img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  border-radius: 16px;
}

/* Optional per-breakpoint visuals (three <img>s per panel, swapped here).
   Selector carries the img tag to outrank the base display: block above. */
img.p2p-showcase__visual-img--tablet,
img.p2p-showcase__visual-img--mobile {
  display: none;
}
@media (max-width: 1024px) {
  img.p2p-showcase__visual-img--desktop,
  img.p2p-showcase__visual-img--mobile {
    display: none;
  }
  img.p2p-showcase__visual-img--tablet {
    display: block;
  }
}
@media (max-width: 767px) {
  img.p2p-showcase__visual-img--tablet {
    display: none;
  }
  img.p2p-showcase__visual-img--mobile {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   Narrow desktop (1025-1360): the card is narrower than the 1440 design, so
   the fixed 466px left column would squeeze the visual into an unreadable
   cover-crop. Share the loss between columns and scale the artwork whole
   (contain) instead of cropping it. The scaled artwork is shorter than the
   stretched panel, so anchor it to the bottom: its base then lines up with
   the end of the module list instead of floating mid-panel.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) and (max-width: 1360px) {
  .p2p-showcase__left {
    width: min(466px, 45%);
  }
  img.p2p-showcase__visual-img,
  .p2p-showcase__visual-img {
    object-fit: contain;
    object-position: 50% 100%;
  }
  /* linked visual: shrink the anchor to the (bottom-anchored) artwork so the
     badge lands on the graphic instead of floating in the letterbox above.
     Scoped with :has() so an unlinked showcase keeps the plain block panel. */
  .p2p-showcase__visual:has(> .p2p-showcase__visual-link) {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .p2p-showcase__visual-link {
    height: auto;
  }
  .p2p-showcase__visual-link .p2p-showcase__visual-img {
    height: auto !important;
    object-fit: initial;
  }
}

/* --------------------------------------------------------------------------
   Mobile (per Figma 6025-12034): horizontal tab strip, no descriptions,
   visual below, full width.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .p2p-showcase {
    flex-direction: column;
    gap: 24px;
    padding: 40px;
    /* Figma 768 frame: card 652 wide on a 768 viewport (58px each side) */
    max-width: calc(100vw - 116px);
  }
  .p2p-showcase__left {
    position: relative;
    width: 100%;
  }
  .p2p-showcase__subtitle {
    margin-bottom: 48px;
  }
  /* scroll hint: fade the strip out at the right edge (Figma 6045:15035) */
  .p2p-showcase__left::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 96px;
    height: 36px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
  }
  .p2p-showcase__modules {
    flex-direction: row;
    gap: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .p2p-showcase__modules::-webkit-scrollbar {
    display: none;
  }
  .p2p-showcase__item {
    flex-shrink: 0;
  }
  /* the tab strip has no descriptions, so no text CTA either (Figma 768/375) */
  .p2p-showcase__module.is-active ~ .p2p-showcase__module-cta {
    display: none;
  }
  .p2p-showcase__module {
    flex-shrink: 0;
    gap: 8px;
  }
  .p2p-showcase__module-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
  }
  .p2p-showcase__module-icon svg {
    width: 18px;
    height: 18px;
  }
  .p2p-showcase__module-icon i {
    font-size: 14px;
  }
  .p2p-showcase__module-title {
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
  }
  .p2p-showcase__module-desc {
    display: none;
  }
  .p2p-showcase__visuals {
    width: 100%;
  }
  /* stacked layout: back to natural image height */
  img.p2p-showcase__visual-img,
  .p2p-showcase__visual-img {
    height: auto !important;
    object-fit: initial;
  }
  .p2p-showcase__visual-link {
    height: auto;
  }
  /* badge 32px, 20px inset (Figma 768: 10711:19166) */
  .p2p-showcase__visual-arrow {
    width: 32px;
    height: 32px;
  }
}
/* Mobile (Figma 375 frame): card at the 16px content margins, padding 24,
   title 24/28, 24px module icons, narrower scroll fade */
@media (max-width: 767px) {
  .p2p-showcase {
    padding: 24px;
    border-radius: 16px;
    max-width: calc(100vw - 32px);
  }
  .p2p-showcase__eyebrow {
    margin-bottom: 16px;
  }
  .p2p-showcase__title {
    font-size: 24px;
    line-height: 28px;
  }
  .p2p-showcase__subtitle {
    margin-bottom: 32px;
  }
  .p2p-showcase__left::after {
    width: 48px;
  }
  .p2p-showcase__module-icon {
    width: 24px;
    height: 24px;
    border-radius: 5px;
  }
  .p2p-showcase__module-icon svg {
    width: 14px;
    height: 14px;
  }
  .p2p-showcase__module-icon i {
    font-size: 12px;
  }
  /* badge keeps 32px but tucks into a 12px inset (Figma 375: 10711:19540) */
  .p2p-showcase__visual-arrow {
    top: 12px;
    right: 12px;
  }
}