/* Mineral City AI - custom Elementor widgets
   Widget A: .mcai-timeline  (process timeline, 8 overlapping cards)
   Widget B: .mcai-industries (horizontal expanding accordion)
   Colours: pink #FF00FF | black #11110F | molecule #F7F6F4 | grey #EBEAE8 */

/* ============================================================
   A. PROCESS TIMELINE
   ============================================================ */
.mcai-timeline {
  --mcai-pink: #FF00FF;
  --mcai-ink: #11110F;
  --mcai-card-w: 156px;
  --mcai-card-h: 215px;
  --mcai-overlap: 20px;
  --mcai-label: #11110F;
  --mcai-scale: 1.18;
  --mcai-turn: 10deg;
  --mcai-icon-h: 62px;
  --mcai-label-size: 12px;
  /* Distance from the top of the card to the connector line. It sits in the
     gap between the icon and the label, so every label clears it no matter how
     many lines it runs to. */
  --mcai-line-y: 93px;
  width: 100%;
}

/* The horizontal padding is not decoration: an active card scales to 1.18, so
   it grows ~14px past each end of the row. A scroll container can only be
   scrolled towards its end — anything overflowing the START edge is
   unreachable and simply clipped — so without this the first and last cards
   lose an edge the moment they become active. */
.mcai-timeline__scroll {
  padding: 40px 16px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Only once there is room to spare: negative margin plus equal padding keeps
   the row exactly as wide as its container, so the enlarged card and its glow
   can bleed without producing a scrollbar. Narrower than this the row simply
   scrolls, and the negative margin must not apply or it pushes content past
   the viewport edge. */
@media (min-width: 1200px) {
  .mcai-timeline__scroll {
    margin: 0 -40px;
    padding: 48px 40px;
  }
}

/* Cancel the section's own 16px gutter so the strip still meets the edge of the
   content column, while the scroller keeps its 16px of clipping headroom. */
@media (max-width: 767px) {
  .mcai-timeline__scroll { margin: 0 -16px; }
  .mcai-step__card { padding-bottom: 16px; }
}

.mcai-timeline__track {
  position: relative;
  width: max-content;
  min-width: 100%;
  margin: 0 auto;
}

.mcai-timeline__steps {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Every card carries a z-index at rest, so hovering only changes its VALUE and
   never creates or destroys a stacking context. That is the whole fix for the
   flash: promoting an element to a stacking context mid-transition makes the
   browser re-layer, and for a frame or two the neighbouring cards' borders draw
   over the card that is growing. It is only safe to pin these because the
   connector no longer lives inside the cards — see .mcai-timeline__joints. */
.mcai-step {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: var(--mcai-card-w);
  outline: none;
}

.mcai-step + .mcai-step { margin-left: calc(var(--mcai-overlap) * -1); }

.mcai-step:hover,
.mcai-step:focus-within,
.mcai-step.is-active { z-index: 40; }

/* The right --mcai-overlap of every card but the last is covered by its
   neighbour, so the card's CONTENT is centred on the visible part of the plate
   rather than on the plate itself. Without this the longest labels run on under
   the next card and read as cut off, which is exactly what they did. The dot
   moves with the content so the connector still meets each icon dead centre;
   the joints overlay below compensates for the shift. */
.mcai-step:not(:last-child) .mcai-step__card {
  padding-right: calc(6px + var(--mcai-overlap));
}
.mcai-step:not(:last-child) .mcai-step__dot {
  left: calc(50% - var(--mcai-overlap) / 2);
}

/* --- the card ---
   The plate is Figma's own vector art, exported verbatim: a trapezoid that
   leans away to the right. Both the resting and the highlighted plate are
   trapezoids in the design — highlighting swaps the grey plate for the pink
   one with its magenta glow and scales the card up. The icon and label sit on
   top of the plate and are not distorted, exactly as in the file. */
.mcai-step__card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: var(--mcai-card-h);
  padding: 18px 6px 30px;
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* The plate is turned away from the viewer at rest, which is what produces
   Figma's trapezoid (left edge taller than the right). perspective(200px) +
   10deg reproduces that silhouette almost exactly while staying a real 3D
   rotation, so hovering can turn it flat to face the viewer. Only the plate
   rotates — the icon and label stay undistorted, as in the file. */
.mcai-step__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border: 1px solid #11110F;
  border-radius: 8px;
  background: linear-gradient(90deg, #F0F0F3 0%, #FFFFFF 91%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.38);
  transform: perspective(200px) rotateY(var(--mcai-turn));
  transform-origin: 50% 50%;
  transition:
    transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    background 0.35s ease,
    box-shadow 0.45s ease;
  backface-visibility: hidden;
}

.mcai-step.is-active .mcai-step__card { transform: scale(var(--mcai-scale)); }

.mcai-step.is-active .mcai-step__card::before {
  transform: perspective(200px) rotateY(0deg);
  background: #FFF8FD;
  box-shadow:
    0 0 0 1px rgba(255, 0, 255, 0.35),
    0 0 26px 8px rgba(255, 0, 255, 0.45),
    0 12px 30px rgba(0, 0, 0, 0.45);
}

.mcai-step:focus-visible .mcai-step__card,
.mcai-step__card:focus-visible {
  outline: 2px solid var(--mcai-pink);
  outline-offset: 3px;
}

/* browser chrome dots */
.mcai-step__chrome {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  gap: 3px;
}
.mcai-step__chrome i {
  width: 4.5px;
  height: 4.5px;
  border-radius: 50%;
  background: #C9C7C2;
}

/* icon */
.mcai-step__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--mcai-icon-h);
  margin-top: 0;
  flex: 0 0 auto;
}
.mcai-step__icon img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
}

/* label — rotated -1deg as it is in the file. NOT margin-top:auto: the labels
   are anchored to a fixed offset below the icon so every card's first line sits
   on the same baseline regardless of how many lines it wraps to. */
.mcai-step__label {
  margin-top: var(--mcai-label-gap, 27px);
  width: 100%;
  flex-shrink: 0;
  overflow-wrap: break-word;
  font-size: var(--mcai-label-size);
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: -0.24px;
  text-align: center;
  text-transform: uppercase;
  color: var(--mcai-label);
  transform: rotate(-1deg);
  transition: color 0.22s ease;
}
.mcai-step.is-active .mcai-step__label { color: var(--mcai-pink); }
.mcai-step__label a { color: inherit; text-decoration: none; }

/* the two little rules bottom-left */
.mcai-step__rules {
  position: absolute;
  left: 8px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 2.5px;
}
.mcai-step__rules i { display: block; background: #D9D7D3; border-radius: 2px; }
.mcai-step__rules i:first-child { width: 36px; height: 3.5px; }
.mcai-step__rules i:last-child  { width: 24px; height: 2.5px; }

/* --- connector: dot on each card, line + arrowhead in each gap --- */
.mcai-step__dot {
  position: absolute;
  top: var(--mcai-line-y);
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--mcai-ink);
  z-index: 4;
  transition: background 0.22s ease, box-shadow 0.22s ease;
}
.mcai-step.is-active .mcai-step__dot {
  background: var(--mcai-pink);
  box-shadow: 0 0 0 4px rgba(255, 0, 255, 0.22);
}

/* One overlay strip carrying every line segment and arrowhead, sitting above
   all the cards. One segment per gap, each spanning card centre to card centre. */
.mcai-timeline__joints {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  z-index: 45;
  display: flex;
  /* Every dot except the last one's is shifted left by half the overlap (see
     .mcai-step__dot above), so the whole strip starts half an overlap earlier
     and only the final segment has to make the difference up. */
  padding-left: calc(var(--mcai-card-w) / 2 - var(--mcai-overlap) / 2);
  pointer-events: none;
}

.mcai-timeline__joints span {
  position: relative;
  flex: 0 0 calc(var(--mcai-card-w) - var(--mcai-overlap));
  height: 0;
}

.mcai-timeline__joints span:last-child {
  flex-basis: calc(var(--mcai-card-w) - var(--mcai-overlap) / 2);
}

.mcai-timeline__joints span::before {
  content: "";
  position: absolute;
  top: var(--mcai-line-y);
  left: 9px;
  width: calc(100% - 24px);
  height: 1.5px;
  margin-top: -0.75px;
  background: var(--mcai-pink);
}

.mcai-timeline__joints span::after {
  content: "";
  position: absolute;
  top: var(--mcai-line-y);
  left: calc(100% - 15px);
  width: 0;
  height: 0;
  margin-top: -4px;
  border-left: 7px solid var(--mcai-pink);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

@media (max-width: 1024px) {
  .mcai-timeline__track { margin: 0; min-width: 0; }
  .mcai-timeline__steps { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .mcai-step__card,
  .mcai-step__card::before,
  .mcai-step__card::after { transition: none; }
}

/* ============================================================
   B. INDUSTRIES ACCORDION
   ============================================================ */
.mcai-industries {
  --mcai-pink: #FF00FF;
  --mcai-ink: #11110F;
  --mcai-panel-w: 150px;
  --mcai-panel-h: 390px;
  --mcai-gap: 32px;
  --mcai-body-w: 248px;
  --mcai-ind-title-size: 20px;
  --mcai-ind-text-size: 18px;
  --mcai-radius: 8px;
  width: 100%;
}

.mcai-industries__row {
  display: flex;
  align-items: center;
  gap: var(--mcai-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mcai-ind {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Scoped with two classes on purpose. The Elementor kit styles every bare
   <button> via `.elementor-kit-5 button` — background, padding, border and
   radius — and that selector outranks a single class, which is how the panels
   ended up purple with padding. Everything the kit sets is reset explicitly
   here, for the resting and the hover/focus state. */
.mcai-industries .mcai-ind__panel {
  display: block;
  flex: 0 0 auto;
  width: var(--mcai-panel-w);
  height: var(--mcai-panel-h);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--mcai-radius);
  overflow: hidden;
  background: none;
  background-color: transparent;
  box-shadow: none;
  font: inherit;
  color: inherit;
  line-height: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.mcai-industries .mcai-ind__panel:hover,
.mcai-industries .mcai-ind__panel:focus,
.mcai-industries .mcai-ind__panel:active {
  background: none;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
}

.mcai-industries .mcai-ind__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.mcai-industries .mcai-ind__panel:focus-visible {
  outline: 2px solid var(--mcai-pink);
  outline-offset: 3px;
}

/* `overflow: hidden` is doing double duty here: it clips the copy, and it also
   drops the flex item's automatic minimum size to 0, which is the only reason
   the closed state can actually measure 0 with a full-width child inside. */
.mcai-ind__body {
  width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  transition: width 0.38s ease, margin 0.38s ease, opacity 0.24s ease;
}

/* Pinned to the OPEN width at all times so the text is typeset once and never
   re-wraps while the panel animates — the body just uncovers it. Animating the
   width with the copy as a direct child re-laid it out on every frame, which is
   what read as the headlines jittering and being cut off mid-open. */
.mcai-ind__inner {
  width: var(--mcai-body-w);
}
.mcai-ind.is-active .mcai-ind__body {
  width: var(--mcai-body-w);
  margin-left: 44px;
  margin-right: 12px;
  opacity: 1;
}

/* NOT `white-space: nowrap`. The open panel cannot grow — one open item already
   makes the row exactly as wide as its container — so a title longer than
   --mcai-body-w had nowhere to go and was simply clipped. Wrapping is safe now
   that .mcai-ind__inner holds a constant width: the line breaks are decided
   once and do not move while the panel opens. */
.mcai-ind__title {
  margin: 0 0 12px;
  font-size: var(--mcai-ind-title-size, 20px);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--mcai-ind-title, #11110F);
  white-space: normal;
}
.mcai-ind__text {
  margin: 0 0 12px;
  font-size: var(--mcai-ind-text-size, 18px);
  line-height: 1.3;
  color: var(--mcai-ind-text, #11110F);
}
.mcai-ind__btn {
  display: inline-flex;
  border: 0;
  align-items: center;
  justify-content: center;
  min-width: 184px;
  height: 42px;
  padding: 0 32px;
  border-radius: 20px;
  background: var(--mcai-pink);
  color: #F7F6F4;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.2s ease;
}
.mcai-ind__btn:hover,
.mcai-ind__btn:focus { color: #F7F6F4; filter: brightness(0.88); }
.mcai-ind__btn:focus-visible { outline: 2px solid var(--mcai-ink); outline-offset: 3px; }

/* mobile / tablet: full cards in a horizontal snap strip */
@media (max-width: 1024px) {
  .mcai-industries .mcai-industries__row {
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    align-items: stretch;
  }
  .mcai-industries .mcai-ind {
    flex: 0 0 300px;
    width: 300px;
    flex-direction: column;
    align-items: stretch;
    scroll-snap-align: start;
  }
  .mcai-industries .mcai-ind .mcai-ind__panel {
    width: 100%;
    height: 195px;
    flex: 0 0 auto;
    cursor: default;
  }
  /* The row stretches every card to the tallest, the body then fills whatever
     height is left and the button is pushed to its foot — so the buttons line
     up across cards no matter how long each description runs. */
  .mcai-industries .mcai-ind.is-active .mcai-ind__body,
  .mcai-industries .mcai-ind .mcai-ind__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    margin: 24px 0 0;
    opacity: 1;
    overflow: visible;
    transition: none;
  }
  /* The inner takes over as the flex column here, so .mcai-ind__btn's
     `margin-top: auto` still has a stretched parent to push against. Leaving it
     as a plain block would trap the button at its natural height and the
     buttons would stop lining up across cards. */
  .mcai-industries .mcai-ind__inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }
  .mcai-industries .mcai-ind__text { margin-bottom: 20px; }
  .mcai-industries .mcai-ind__btn {
    width: 100%;
    margin-top: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mcai-ind__body { transition: none; }
}