/* ==========================================================================
   _accordion.css - canonical Accordion component styles
   Split from _components.css in phase 2 (see scripts/split-components.mjs).
   Loaded once in _document.tsx after base/layout files and before
   page-specific CSS.
   ========================================================================== */

.acc-Accordion {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content 0fr;
  justify-content: start;
  border: 1px solid #cccccc;
  border-radius: 15px;
  overflow: hidden;
  transition: grid-template-rows 0.3s;
}

.acc-Accordion.active {
  grid-template-rows: min-content 1fr;
}

.acc-Accordion_Toggle {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  font-family: AvenirNext-Regular;
  font-size: clamp(1rem, 0.7143rem + 1.4286vw, 1.5625rem);
  min-height: 70px;
  padding: 20px;
  color: #444444;
  cursor: pointer;
  user-select: none;
}

.acc-Accordion_Toggle:after {
  content: '';
  width: 15px;
  height: 9px;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  background-image: url('../Assets/Icons/icon-ChevronDown2.svg');
  background-repeat: no-repeat;
  background-size: 15px 9px;
  background-position: center;
  transition: 0.3s;
}

.active .acc-Accordion_Toggle:after {
  transform: translateY(-50%) scaleY(-1);
}

.acc-Accordion_Toggle span {
  max-width: 600px;
}

.acc-Accordion_Panel {
  overflow: hidden;
}

.acc-Accordion_Body {
  padding: 20px;
}

/* ---- Accordions container (moved from styles.css / NewHomepage.css / Early-Careers.css, identical in all three) ---- */

.acc-Accordions {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 10px;
}

@media (min-width: 950px) {
  .acc-Accordions {
    gap: 20px;
  }
}