/*
 * Interactive Platform Block
 *
 * Displays platform icons in a semi-circular arc with hover/touch interactions.
 * Each item shows a message with heading and description on interaction.
 */

.interactive-platform {
  --message-bg: color-mix(in srgb, var(--digicert-blue) 10%, var(--digicert-white));

  /* Arc item dimensions, expressed as percentages of .diagram. JS reads these
     at decoration time (via getComputedStyle) to center each item on its
     position on the arc. Block CSS may load after the JS, so the JS has
     literal fallbacks (ARC_ITEM_*_PCT_FALLBACK in interactive-platform.js)
     that must stay in sync with these values. */
  --arc-item-width: 19.75%;
  --arc-item-height: 16.83%;

  /* Visual size of the slice icon, expressed as a scale on the .item box.
     <picture> is pegged to .item (FF 151 #1409529 mitigation — see
     .item-image below), so this scale is what makes the icon read larger
     than its hit area and overlap neighboring slices. Was effectively 1.15
     pre-PROTO-447 when the icon overflowed via intrinsic image dimensions. */
  --arc-item-icon-scale: 1.44;

  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.interactive-platform .container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: clip; /* Contain absolutely-positioned/transformed diagram items */
}

.interactive-platform .text {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-inline: auto;
}

.interactive-platform .text p {
  color: var(--text-color);
  text-align: center;
}

.interactive-platform .text p:last-child {
  margin-bottom: 0;
}

.interactive-platform .text a.button {
  margin-top: 8px;
}

.interactive-platform .text h1,
.interactive-platform .text h2,
.interactive-platform .text h3,
.interactive-platform .text h4,
.interactive-platform .text h5,
.interactive-platform .text h6 {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
}

.interactive-platform .text .icon-arrow {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.25em;
  flex-shrink: 0;
  transform: rotate(90deg);
}

/* .diagram aspect ratio (5:3) matches the background SVG viewBox (1500x900),
   so the SVG renders naturally without letterbox or transform scaling, and
   slice positions (computed in viewBox coordinates by the JS) align with
   SVG landmarks at any --diagram-scale.

   Width: scale knob (calc) capped by container (max-width). Height: derived
   from width via aspect-ratio. One sizing strategy across all variants. */
.interactive-platform .diagram {
  position: relative;

  --diagram-scale: 0.55;

  width: calc(600px * var(--diagram-scale));
  max-width: 100%;
  aspect-ratio: 5 / 3;
  height: auto;
}

/* Plain block container, not flex — flex makes the SVG <img> resolve to its
   intrinsic default size (often 300×150 for a dimensionless SVG) instead of
   honoring width/height: 100%. As a block container, the img fills .diagram
   correctly via 100%/100%. */
.interactive-platform .base-image {
  position: absolute;
  inset: 0;
}

.interactive-platform .base-image img {
  max-width: 100%;
  max-height: 100%;

  /* Explicit 100% prevents dimensionless-SVG collapse (PROTO-363 / PROTO-319) */
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block; /* avoid inline-replaced baseline gap with width/height: 100% */
}

/* Image cell within arc items.
   Was `display: contents` originally, but that promotes <picture> to be the
   flex child of .item, and Firefox 151 (Bugzilla #1409529) collapses the
   circular `width: 100%` chain on img → 0×0. Give .item-image and its
   <picture> real boxes pegged to .item. The img then renders 1:1 with .item;
   visual overlap with neighboring slices comes from --arc-item-icon-scale
   on the img below. The picture-sizing half of the fix lives in the shared
   `.item-image picture, .item-image-hover picture` rule below (so the same
   FF 151 mitigation covers the hover-state image too). */
.interactive-platform .item-image {
  width: 100%;
  height: 100%;
}

/* Text cell within arc items - hidden visually, kept in DOM for accessibility */
.interactive-platform .item-text {
  display: none;
}

/* Individual arc items — sized via --arc-item-width/height on .interactive-platform.
   JS reads the same custom properties to center items on the arc. */
.interactive-platform .item {
  position: absolute;
  width: var(--arc-item-width);
  height: var(--arc-item-height);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.6s var(--cubic-bezier-1);
  transform: rotate(var(--rotation));
}

.interactive-platform .item:hover,
.interactive-platform .item.active {
  transform: rotate(var(--rotation)) scale(1.05);
  z-index: 10;
  filter: saturate(500%) hue-rotate(25deg);
}

/* Items with hover images don't use CSS filter - they swap images instead */
.interactive-platform .item.has-hover-image:hover,
.interactive-platform .item.has-hover-image.active {
  filter: none;
}

/* Pin <picture> to its cell (FF 151 #1409529 mitigation — see .item-image
   above). The opacity transition animates the regular image's fade-out on
   `.item-image picture` when an item is hovered/active; the hover wrapper's
   0→1 toggle is not animated by this rule (the toggle targets
   `.item-image-hover` directly, not its picture). Pre-existing asymmetry,
   tracked in deferred-cleanup #16. */
.interactive-platform .item-image picture,
.interactive-platform .item-image-hover picture {
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease;
}

/* Hover image - hidden by default via opacity */
.interactive-platform .item-image-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/* Empty hover image cell - hide it */
.interactive-platform .item-image-empty {
  display: none;
}

/* Show hover image on hover/active, hide normal image - both with opacity transition */
.interactive-platform .item:hover .item-image-hover,
.interactive-platform .item.active .item-image-hover {
  opacity: 1;
}

.interactive-platform .item.has-hover-image:hover .item-image picture,
.interactive-platform .item.has-hover-image.active .item-image picture {
  opacity: 0;
}

/* Animation support - items need special handling due to rotation */
.interactive-platform .item.fade-up,
.interactive-platform .item.fade-in,
.interactive-platform .item.fade-left,
.interactive-platform .item.fade-right {
  opacity: 0;
}

.interactive-platform.in-view .item.fade-up,
.interactive-platform.in-view .item.fade-in,
.interactive-platform.in-view .item.fade-left,
.interactive-platform.in-view .item.fade-right {
  opacity: 1;
}

.interactive-platform .item picture img {
  max-width: 100%;
  max-height: 100%;

  /* Explicit 100% prevents dimensionless-SVG collapse (PROTO-363 / PROTO-319) */
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;

  /* Pre-PROTO-447 this was a fixed scale(1.15) over an img sized by its
     intrinsic dimensions. With <picture> now pegged to .item (see comment
     on .item-image above), the icon size becomes .item × --arc-item-icon-scale. */
  transform: scale(var(--arc-item-icon-scale));
}

.interactive-platform .message {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  width: 100%;
  max-width: 340px;
  padding: 12px 16px;
  background-color: transparent;
  border-radius: 16px;
  border: 2px solid transparent;
  color: var(--text-color);
  min-height: 100px;
  box-sizing: border-box;
  pointer-events: none;
  margin-top: var(--space-s);
}

.interactive-platform .message.active {
  background-color: var(--message-bg);
  border-color: var(--digicert-blue);
}

.interactive-platform .message-heading {
  color: var(--digicert-blue);
  font-weight: var(--font-weight-medium);
  font-size: var(--heading-font-size-s);
  margin: 0;
}

.interactive-platform .message-text {
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-s);
  margin: 0;
  opacity: 0.6; /* de-emphasize description vs heading */
  color: var(--digicert-black);
}

/* Text flip container - flips to show message when slice is hovered/tapped */
.interactive-platform .text-flip-container {
  perspective: 1000px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.interactive-platform .text-flip-inner {
  position: relative;
  width: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  min-height: 180px; /* Ensure back face has room for heading + description */
}

.interactive-platform .text-flip-container.flipped .text-flip-inner {
  transform: rotateX(180deg);
}

.interactive-platform .text-flip-front,
.interactive-platform .text-flip-back {
  backface-visibility: hidden;
}

.interactive-platform .text-flip-front {
  position: relative;
}

.interactive-platform .text-flip-back {
  position: absolute;
  inset: 0;
  transform: rotateX(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: var(--message-bg);
  border-radius: 16px;
  border: 2px solid var(--digicert-blue);
  box-sizing: border-box;
}

.interactive-platform .text-flip-heading {
  color: var(--digicert-blue);
  font-weight: var(--font-weight-medium);
  font-size: var(--heading-font-size-m);
  margin: 0 0 8px;
  text-align: center;
}

.interactive-platform .text-flip-text {
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-m);
  margin: 0;
  color: var(--digicert-black);
  text-align: center;
  opacity: 0.8; /* de-emphasize description vs heading */
}

/* Hide message box when using flip */
.interactive-platform.two-column .message {
  display: none;
}

/* Mobile button container - shown below diagram on mobile */
.interactive-platform .mobile-button-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 8px;
}

/* Responsive adjustments - scale up for larger screens */
@media (width >= 400px) {
  .interactive-platform .diagram {
    --diagram-scale: 0.65;
  }
}

@media (width >= 600px) {
  .interactive-platform .diagram {
    --diagram-scale: 0.85;
  }
}

@media (width >= 900px) {
  .interactive-platform .diagram {
    --diagram-scale: 1.2;
  }

  .interactive-platform .text {
    max-width: 500px;
  }
}

@media (width >= 1200px) {
  .interactive-platform.two-column {
    flex-direction: row;
    align-items: center;
    gap: var(--space-l);
  }

  .interactive-platform .text-flip-container {
    align-items: flex-start;
    flex: 1 1 auto;
  }

  /* Hide the (now-empty) mobile button container at desktop. JS has moved the
     button into .text by this breakpoint. */
  .interactive-platform .mobile-button-container {
    display: none;
  }

  .interactive-platform .text {
    align-items: flex-start;
    text-align: left;
    margin-inline: 0;
  }

  .interactive-platform .container {
    flex: 1 1 50%;
  }

  .interactive-platform .text p {
    text-align: left;
  }

  .interactive-platform .text .icon-arrow {
    transform: rotate(0deg);
  }
}

/* ============================================
   HERO VARIANT
   Full-width hero treatment with generous spacing,
   larger typography, and decorative background.

   Content model: hero text (h3 eyebrow, h1 headline, p subline)
   is authored as section default content BEFORE the block.
   CTA button is default content AFTER the block.
   Section metadata: Style = theme-light

   Usage: "Interactive Platform (Hero)" in authoring
   ============================================ */

/* --- Hero Section: base layout & spacing --- */

main > .section.interactive-platform-container:has(.interactive-platform.hero) {
  position: relative;
  padding: var(--space-2xl) 0 var(--space-5xl);
  gap: var(--space-s);
  background-color: var(--light-color);
  overflow: clip;
}

/* Mobile: center the CTA button; desktop resets via grid placement */
main > .section.interactive-platform-container:has(.interactive-platform.hero) > .default-content-wrapper:last-of-type {
  text-align: center;
}

/* --- Hero Section: default content typography ---
 *
 * The hero block's typography (hero.css) only loads when a hero block is on the
 * page. Since this section uses an interactive-platform block instead, we
 * replicate the hero typography tokens here so the section's default-content
 * (eyebrow, headline, subline, CTA) matches the hero visual language.
 *
 * Source of truth: blocks/hero/hero.css lines 22-26, 60-89
 * TODO: promote --hero-* tokens to tokens.css if more blocks need them.
 */

/* stylelint-disable-next-line no-descending-specificity */
main > .section.interactive-platform-container:has(.interactive-platform.hero) > .default-content-wrapper {
  --hero-eyebrow-size: clamp(1.5rem, 1.4rem + 0.25vw, 1.8rem);
  --hero-headline-size: clamp(3rem, 2.5rem + 2.75vw, 5.25rem);  /* 48px → 84px */
  --hero-element-spacing: var(--space-xl);

  text-align: left;
}

main > .section.interactive-platform-container:has(.interactive-platform.hero) > .default-content-wrapper h3 {
  font-size: var(--hero-eyebrow-size);
  line-height: 1;
  margin-bottom: var(--hero-element-spacing);
}

main > .section.interactive-platform-container:has(.interactive-platform.hero) > .default-content-wrapper h1 {
  font-size: var(--hero-headline-size);
  line-height: 1;
  text-wrap: balance;
  margin-bottom: var(--hero-element-spacing);
}

main > .section.interactive-platform-container:has(.interactive-platform.hero) > .default-content-wrapper p:not(.button-container, .hero-message-text) {
  color: var(--digicert-neutral-700);
  margin-bottom: var(--hero-element-spacing);
}

/* --- Hero Block: mobile base (no media query) --- */

.interactive-platform.hero .container {
  overflow: visible;
}

/* Hero message: hidden on mobile — the external .hero-message in the
   default-content-wrapper handles display so the user's hand doesn't
   cover the message while interacting with the arc slices. */
.interactive-platform.hero .message {
  display: none;
}

/* Hero flip: swaps subheading <-> message via a 3D flip on mobile.
   Same shape as .text-flip-* used by the two-column variant.
   Scoped under the section selector to avoid global class name collisions. */
main > .section.interactive-platform-container:has(.interactive-platform.hero) .hero-flip-container {
  perspective: 1000px;
  width: 100%;
}

main > .section.interactive-platform-container:has(.interactive-platform.hero) .hero-flip-inner {
  position: relative;
  width: 100%;

  /* Reserve space for the taller of front/back faces — otherwise the absolutely-
     positioned back face overflows into the CTA when an item's message is taller
     than the subheading. Tunable per-page via --hero-flip-min-height. */
  min-height: var(--hero-flip-min-height, 8rem);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

main > .section.interactive-platform-container:has(.interactive-platform.hero) .hero-flip-container.flipped .hero-flip-inner {
  transform: rotateX(180deg);
}

main > .section.interactive-platform-container:has(.interactive-platform.hero) .hero-flip-front,
main > .section.interactive-platform-container:has(.interactive-platform.hero) .hero-flip-back {
  backface-visibility: hidden;
}

main > .section.interactive-platform-container:has(.interactive-platform.hero) .hero-flip-front {
  position: relative;
}

main > .section.interactive-platform-container:has(.interactive-platform.hero) .hero-flip-back {
  position: absolute;
  inset: 0;
  transform: rotateX(180deg);
}

main > .section.interactive-platform-container:has(.interactive-platform.hero) .hero-message {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-s) var(--space-m);
  background-color: color-mix(in srgb, var(--digicert-blue) 10%, var(--digicert-white));
  border-radius: var(--border-radius-l);
  border: 2px solid var(--digicert-blue);
  justify-content: center;
}

main > .section.interactive-platform-container:has(.interactive-platform.hero) .hero-message-heading {
  color: var(--digicert-blue);
  font-weight: var(--font-weight-medium);
  font-size: var(--heading-font-size-s);
  margin: 0;
}

main > .section.interactive-platform-container:has(.interactive-platform.hero) .hero-message-text {
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-s);
  margin: 0;
  opacity: 0.6; /* de-emphasize description vs heading */
  color: var(--digicert-black);
}

/* --- Hero Responsive --- */

@media (width >= 400px) {
  .interactive-platform.hero .diagram {
    --diagram-scale: 0.70;
  }
}

@media (width >= 600px) {
  .interactive-platform.hero .diagram {
    --diagram-scale: 1.05;
  }
}

@media (width >= 900px) {
  main > .section.interactive-platform-container:has(.interactive-platform.hero) {
    padding-top: var(--space-4xl);
  }

  /* Desktop: suppress the flip — the in-block .message handles display below
     the diagram, so the hero flip stays on its front face permanently. */
  main > .section.interactive-platform-container:has(.interactive-platform.hero) .hero-flip-container.flipped .hero-flip-inner {
    transform: none;
  }

  /* Desktop: in-block message flips in (rotateX) when an item is active and
     flips back out when deactivated, instead of the default fade transition. */
  .interactive-platform.hero .container {
    perspective: 1000px;
  }

  .interactive-platform.hero .message {
    display: flex;
    align-self: center;
    max-width: 80%;
    min-height: 120px;
    transform: rotateX(90deg);
    transform-origin: center;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      background-color 0.3s ease,
      border-color 0.3s ease;
    backface-visibility: hidden;
  }

  .interactive-platform.hero .message.active {
    transform: rotateX(0deg);
  }

  main > .section.interactive-platform-container:has(.interactive-platform.hero) .hero-message {
    display: none;
  }
}

@media (width >= 1200px) {
  /* Two-column grid: text left, diagram right */
  main > .section.interactive-platform-container:has(.interactive-platform.hero) {
    --content-inset: max(var(--container-padding), calc((100% - var(--container-max-width)) / 2 + var(--container-padding)));

    display: grid;
    grid-template-columns: 45fr 55fr;
    grid-template-rows: 1fr auto auto 1fr;
    gap: 0 var(--space-2xl);
    align-items: stretch;
    padding: var(--space-5xl) 0;
    padding-inline: var(--content-inset);
  }

  /* Remove per-child constraints — grid handles containment */
  main > .section.interactive-platform-container:has(.interactive-platform.hero) > div {
    max-width: none;
    padding-inline: 0;
    margin-inline: 0;
  }

  /* Text content → left column, row 2 (1fr spacer above centers the unit) */
  main > .section.interactive-platform-container:has(.interactive-platform.hero) > .default-content-wrapper:first-child {
    grid-column: 1;
    grid-row: 2;
  }

  /* Block → right column, span all rows */
  main > .section.interactive-platform-container:has(.interactive-platform.hero) > .interactive-platform-wrapper {
    grid-column: 2;
    grid-row: 1 / -1;
    display: flex;
  }

  /* CTA button → left column, row 3, tight below text */
  /* stylelint-disable-next-line no-descending-specificity */
  main > .section.interactive-platform-container:has(.interactive-platform.hero) > .default-content-wrapper:last-of-type {
    grid-column: 1;
    grid-row: 3;
    text-align: left;
  }

  /* Full-width variant — wider content, just container padding at edges */
  main > .section.interactive-platform-container:has(.interactive-platform.hero.full-width) {
    --content-inset: var(--container-padding);
  }

}