/* Arco Accordion — process block (MIT, Emanuel Bento), scoped to DiyorSoft */

.process-arco {
  --arco-ink: #0d0d0d;
  --arco-ink-muted: rgba(16, 18, 17, 0.48);
  --arco-ochre: #d6a64f;
  --arco-lilac: #b9b0e3;
  --arco-aqua: #8fc7bd;
  --arco-coral: #ec8f73;
  --arco-max-width: 100%;
  --arco-max-height: 32rem;
  --arco-gap: 0.5rem;
  --arco-pill: 4rem;
  --arco-pill-height: 82%;
  --arco-bar: 3.5rem;
  --arco-radius: 1.125rem;
  --arco-media-radius: 0.75rem;
  margin-top: 2.25rem;
}

.process-arco__stage {
  height: clamp(22rem, 52vh, 32rem);
}

.process-arco__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 0.9rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.process-arco .arco-accordion_component {
  --arco-count: 4;
  --arco-open: calc(100cqw - (var(--arco-count) - 1) * (var(--arco-pill) + var(--arco-gap)));
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--arco-gap);
  width: min(100%, var(--arco-max-width));
  height: min(100%, var(--arco-max-height));
  margin: 0;
  padding: 0;
  list-style: none;
}

.process-arco .arco-accordion_item {
  position: relative;
  flex: none;
  width: var(--arco-pill);
  height: var(--arco-pill-height);
  border-radius: calc(var(--arco-pill) / 2);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--arco-panel, var(--arco-aqua));
  background-image:
    radial-gradient(95% 80% at 8% 0%, rgba(255, 255, 255, 0.46), transparent 58%),
    linear-gradient(155deg, var(--arco-panel-light, #c9ebe4) 0%, var(--arco-panel, var(--arco-aqua)) 48%, var(--arco-panel-deep, #6eaea3) 100%);
  color: var(--arco-ink);
}

.process-arco .arco-accordion_item.is-active {
  width: var(--arco-open);
  height: 100%;
  border-radius: var(--arco-radius);
}

.process-arco .arco-accordion_item[data-panel="ochre"] {
  --arco-panel: var(--arco-ochre);
  --arco-panel-light: #f3d9a4;
  --arco-panel-deep: #c48d34;
}
.process-arco .arco-accordion_item[data-panel="lilac"] {
  --arco-panel: var(--arco-lilac);
  --arco-panel-light: #ddd8f6;
  --arco-panel-deep: #9d91d4;
}
.process-arco .arco-accordion_item[data-panel="aqua"] {
  --arco-panel: var(--arco-aqua);
  --arco-panel-light: #c9ebe4;
  --arco-panel-deep: #6eaea3;
}
.process-arco .arco-accordion_item[data-panel="coral"] {
  --arco-panel: var(--arco-coral);
  --arco-panel-light: #f8c6b4;
  --arco-panel-deep: #e07052;
}

.process-arco .arco-accordion_item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background-color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .process-arco .arco-accordion_item:not(.is-active):hover::after {
    opacity: 0.16;
  }
}

.process-arco .arco-accordion_trigger {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

.process-arco .arco-accordion_trigger:focus-visible {
  outline: 2px solid var(--accent, #00adb6);
  outline-offset: 3px;
}

.process-arco .arco-accordion_item.is-active .arco-accordion_trigger {
  pointer-events: none;
}

.process-arco .arco-accordion_label {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: var(--font, Manrope, system-ui, sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  pointer-events: none;
}

.process-arco .arco-accordion_content {
  container-type: size;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: var(--arco-open);
  height: 100cqh;
  padding: clamp(1.1rem, 2vw, 1.75rem);
}

.process-arco .arco-accordion_item:not(.is-active) .arco-accordion_content {
  visibility: hidden;
}

.process-arco .process-arco__kicker {
  margin: 0 0 0.45rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(13, 13, 13, 0.62);
}

.process-arco .arco-accordion_heading {
  position: relative;
  z-index: 2;
  max-width: 58%;
  margin: 0;
  font-family: var(--font, Manrope, system-ui, sans-serif);
  font-size: min(8.5cqi, 16cqh);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.045em;
}

.process-arco .process-arco__art {
  position: absolute;
  z-index: 1;
  top: 11%;
  right: 3%;
  width: min(40cqi, 72cqh);
  height: min(68cqh, 46cqi);
  object-fit: contain;
  object-position: right center;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 18px 16px rgba(13, 13, 13, 0.16));
}

.process-arco .arco-accordion_line-mask {
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.process-arco .arco-accordion_bottom {
  position: relative;
  z-index: 2;
  grid-row: 3;
  align-self: end;
  display: grid;
  grid-template-columns: min(34cqi, 46cqh) minmax(0, 1fr);
  column-gap: min(4cqi, 2.5rem);
  align-items: end;
}

.process-arco .arco-accordion_media {
  aspect-ratio: 3 / 2;
  border-radius: var(--arco-media-radius);
  overflow: hidden;
  background: rgba(13, 13, 13, 0.08);
  display: grid;
  place-items: center;
}

.process-arco .process-arco__num {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: clamp(2rem, 6cqi, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  color: rgba(13, 13, 13, 0.78);
}

.process-arco .arco-accordion_text {
  max-width: 34ch;
  margin: 0;
  font-size: clamp(0.85rem, 1.55cqi, 1.05rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

@media (max-width: 991px) {
  .process-arco {
    --arco-pill: 3.5rem;
    --arco-radius: 1rem;
  }
}

@media (max-width: 767px), (max-width: 991px) and (orientation: portrait) {
  .process-arco {
    --arco-gap: 0.375rem;
    --arco-radius: 0.875rem;
  }

  .process-arco__stage {
    height: min(36rem, 78vh);
  }

  .process-arco .arco-accordion_component {
    --arco-open: calc(100cqh - (var(--arco-count) - 1) * (var(--arco-bar) + var(--arco-gap)));
    flex-direction: column;
    height: 100%;
  }

  .process-arco .arco-accordion_item {
    width: 100%;
    height: var(--arco-bar);
    border-radius: calc(var(--arco-bar) / 2);
  }

  .process-arco .arco-accordion_item.is-active {
    width: 100%;
    height: var(--arco-open);
  }

  .process-arco .arco-accordion_label {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 0.875rem;
  }

  .process-arco .arco-accordion_content {
    row-gap: clamp(0.75rem, 3cqh, 1.4rem);
    width: 100cqw;
    height: var(--arco-open);
  }

  .process-arco .arco-accordion_heading {
    max-width: none;
    font-size: min(12cqi, 11cqh);
  }

  .process-arco .process-arco__art {
    top: 31%;
    right: 8%;
    left: 8%;
    width: auto;
    height: 38%;
    object-position: center;
  }

  .process-arco .process-arco__num {
    visibility: hidden;
  }

  .process-arco .arco-accordion_bottom {
    display: contents;
  }

  .process-arco .arco-accordion_media {
    grid-row: 3;
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
  }

  .process-arco .arco-accordion_text {
    grid-row: 4;
    max-width: 42ch;
    font-size: 0.9rem;
  }

  .process-arco .arco-accordion_content {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-arco .arco-accordion_item::after {
    transition: none;
  }
}