/* ================================================================
   tools-accordion.css  -  Shared Tools/Resources image accordion
   ----------------------------------------------------------------
   Desktop (>800px): hover-expand accordion. One panel is expanded
   (is-active) with its glass card visible, the other is collapsed
   with a vertical label. Hovering any panel takes over — the
   hovered one expands, the other collapses. The glass card uses
   ASYMMETRIC opacity transitions: it fades OUT fast (0.15s, no
   delay) on the collapsing panel and fades IN slowly (0.25s, with
   0.5s delay) on the expanding panel — so the card is invisible
   the entire time the panel width is animating. This kills the
   "the card changes shape" feel: the user only ever sees a card
   fully formed at its final size, never mid-resize.

   Mobile (≤800px): both tiles always open, equal-height, both
   showing their glass card. No expand/collapse, no vertical label.
   ================================================================ */

.ma-tools-accordion {
  display: flex;
  height: 265px;
  border-radius: 12px;
  overflow: hidden;
  gap: 0;
  background: #012928;
  position: relative;
}

/* ── Panel ── */
.ma-tools-panel {
  position: relative;
  overflow: hidden;
  flex: 1;
  transition: flex 0.55s cubic-bezier(0.77, 0, 0.18, 1);
  cursor: pointer;
}

/* Resting: is-active is the expanded one */
.ma-tools-panel.is-active { flex: 3.2; }

/* Hover takes complete control: any hovered panel expands, the
   other collapses, regardless of which had is-active. */
.ma-tools-accordion:hover .ma-tools-panel       { flex: 0.45; }
.ma-tools-accordion:hover .ma-tools-panel:hover { flex: 3.2;  }

/* ── Clip container (bg + scrim) ── */
.ma-tools-panel__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

/* ── Background photo ── */
.ma-tools-panel__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.65s cubic-bezier(0.77, 0, 0.18, 1);
  will-change: transform;
}
.ma-tools-panel:hover .ma-tools-panel__bg { transform: scale(1.04); }

/* ── Dark gradient scrim ── */
.ma-tools-panel__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(1, 41, 40, 0.82) 0%,
    rgba(1, 41, 40, 0.44) 55%,
    rgba(0, 0, 0, 0.18) 100%
  );
  transition: opacity 0.45s ease;
  opacity: 0.90;
}
.ma-tools-panel.is-active .ma-tools-panel__scrim { opacity: 0.62; }
.ma-tools-accordion:hover .ma-tools-panel       .ma-tools-panel__scrim { opacity: 0.90; }
.ma-tools-accordion:hover .ma-tools-panel:hover .ma-tools-panel__scrim { opacity: 0.62; }

/* ── Frosted glass info card ─────────────────────────────────────
   Width is calc(100% - 48px) so it adapts to the panel width, but
   the asymmetric opacity transitions below mean the user never SEES
   the card while its width is animating. Fast-out / slow-in with a
   delay on the in-side completes the illusion: the card on the
   collapsing panel disappears INSTANTLY, the card on the expanding
   panel doesn't appear until panel has finished growing.           */
.ma-tools-panel__glass {
  position: absolute;
  bottom: 28px;
  left: 24px;
  width: 380px;
  max-width: calc(100% - 48px);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(18px) brightness(1.05);
  -webkit-backdrop-filter: blur(18px) brightness(1.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 18px 22px;
  z-index: 3;
  transform: translateY(12px);
  opacity: 0;
  pointer-events: none;
  /* Default = fade-OUT path: fast, no delay (used when a panel loses
     its card, whether by losing is-active or by being de-hovered).  */
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Resting active panel: fade in (a bit slow, with a small delay so
   the panel finishes its flex transition first). */
.ma-tools-panel.is-active .ma-tools-panel__glass {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.25s ease 0.5s, transform 0.25s ease 0.5s;
}

/* Hover state — overrides resting. The non-hovered panel's glass
   uses the default (fast-out) transition; the hovered one uses the
   delayed-in transition so it ONLY appears after the panel finished
   expanding.                                                       */
.ma-tools-accordion:hover .ma-tools-panel .ma-tools-panel__glass {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.ma-tools-accordion:hover .ma-tools-panel:hover .ma-tools-panel__glass {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.25s ease 0.5s, transform 0.25s ease 0.5s;
}

/* ── Vertical label (shown on the collapsed panel) ── */
.ma-tools-panel__label-vert {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-family: 'Anton', sans-serif;
  font-size: 13px;
  letter-spacing: 0.10em;
  color: #ffffff;
  text-transform: uppercase;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.3s ease;
  white-space: nowrap;
  opacity: 1;
}
.ma-tools-panel.is-active .ma-tools-panel__label-vert { opacity: 0; }
.ma-tools-accordion:hover .ma-tools-panel       .ma-tools-panel__label-vert { opacity: 1; }
.ma-tools-accordion:hover .ma-tools-panel:hover .ma-tools-panel__label-vert { opacity: 0; }

/* ── Card typography ── */
.ma-tools-panel__title {
  font-family: 'Anton', sans-serif !important;
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #fff;
  margin: 0 0 7px;
  line-height: 1.15;
  text-decoration: none;
  display: block;
}
.ma-tools-panel__title:hover { color: var(--brand-secondary) !important; }

.ma-tools-panel__desc {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 16px;
  line-height: 1.5;
}

.ma-tools-panel__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Outfit', sans-serif;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-secondary) !important;
  text-decoration: none;
  transition: gap 0.2s ease;
}
.ma-tools-panel__cta::after {
  content: '→';
  font-size: 14px;
  display: inline-block;
  transition: transform 0.2s ease;
}
.ma-tools-panel__cta:hover { gap: 11px; color: var(--brand-secondary) !important; }
.ma-tools-panel__cta:hover::after { transform: translateX(3px); }

/* ── Panel corner radii ── */
.ma-tools-panel:first-child                       { border-radius: 12px 0 0 12px; }
.ma-tools-panel:last-child                        { border-radius: 0 12px 12px 0; }
.ma-tools-panel:first-child .ma-tools-panel__clip { border-radius: 12px 0 0 12px; }
.ma-tools-panel:last-child  .ma-tools-panel__clip { border-radius: 0 12px 12px 0; }
.ma-tools-panel + .ma-tools-panel { border-left: 2px solid rgba(255, 255, 255, 0.35); }

/* ═══════════════════════════════════════════════════════════════
   MOBILE: both tiles always open, equal-height, stacked vertically
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 800px) {
  .ma-tools-accordion { flex-direction: column; height: auto; gap: 0; }

  /* Kill all desktop flex/hover-flex behaviour. Each tile is its own
     fixed-height row showing its bg + glass card. */
  .ma-tools-panel,
  .ma-tools-panel.is-active,
  .ma-tools-accordion:hover .ma-tools-panel,
  .ma-tools-accordion:hover .ma-tools-panel:hover {
    flex: none !important;
    height: 200px;
  }

  /* Both glass cards always visible, full transition just for polish */
  .ma-tools-panel__glass,
  .ma-tools-panel.is-active .ma-tools-panel__glass,
  .ma-tools-accordion:hover .ma-tools-panel .ma-tools-panel__glass,
  .ma-tools-accordion:hover .ma-tools-panel:hover .ma-tools-panel__glass {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    transition: none !important;
    width: calc(100% - 36px);
    max-width: none;
    left: 18px;
    bottom: 18px;
    padding: 14px 18px 16px;
  }

  /* Hide the vertical label on mobile (no collapsed state to label) */
  .ma-tools-panel__label-vert,
  .ma-tools-panel.is-active .ma-tools-panel__label-vert,
  .ma-tools-accordion:hover .ma-tools-panel       .ma-tools-panel__label-vert,
  .ma-tools-accordion:hover .ma-tools-panel:hover .ma-tools-panel__label-vert {
    display: none !important;
  }

  /* Scrim: same dim level on both tiles so the cards read well */
  .ma-tools-panel__scrim,
  .ma-tools-panel.is-active .ma-tools-panel__scrim,
  .ma-tools-accordion:hover .ma-tools-panel       .ma-tools-panel__scrim,
  .ma-tools-accordion:hover .ma-tools-panel:hover .ma-tools-panel__scrim {
    opacity: 0.62 !important;
  }

  /* Stacked corners + dividers */
  .ma-tools-panel + .ma-tools-panel { border-left: 0; border-top: 2px solid rgba(255, 255, 255, 0.35); }
  .ma-tools-panel:first-child                       { border-radius: 12px 12px 0 0; }
  .ma-tools-panel:last-child                        { border-radius: 0 0 12px 12px; }
  .ma-tools-panel:first-child .ma-tools-panel__clip { border-radius: 12px 12px 0 0; }
  .ma-tools-panel:last-child  .ma-tools-panel__clip { border-radius: 0 0 12px 12px; }

  /* Card title typography slightly smaller on mobile */
  .ma-tools-panel__title { font-size: 19px; }
  .ma-tools-panel__desc  { font-size: 12.5px; margin-bottom: 12px; }
}