/* BOTH MINIMALIZED AND EXTENDED */
.phantom-modular-content,
.phantom-modular-content-minimalized {
  margin: 0rem 0rem -1px 0rem;
}

.phantom-modular-content picture,
.phantom-modular-content-minimalized picture {
  position: relative;
  img {
    width: 100%;
    height: auto;
  }
}

/* EXTENDED CONTENT — sissa design
   (ported from components-sissa/modular-content: inline "Read more" chevron
   next to the label instead of BI's default ::after at the far right) */
.phantom-modular-content {
  /* media may render a bare <img> without <picture> */
  .modular-content-image img {
    width: 100%;
    height: auto;
  }

  /* hide the default chevron */
  .accordion-header .accordion-button::after {
    display: none !important;
  }

  /* rotate the inline chevron when open */
  .accordion-button .accordion-icon {
    transition: transform 0.2s ease-in-out;
  }
  .accordion-button:not(.collapsed) .accordion-icon {
    transform: rotate(-180deg);
  }
}

.phantom-modular-content-minimalized .accordion-header .accordion-button:hover,
.phantom-modular-content-minimalized:hover .accordion-button {
  color: rgb(0, 0, 0);
}

/* MINIMALIZED CONTENT — sissa design
   (ported from components-sissa/modular-content-minimalized/modular-content-minimalized.css;
   selectors de-qualified: sissa wrote `div.phantom-modular-content-minimalized` but the live
   root is a <section>) */
.accordion.phantom-modular-content-minimalized:first-child {
  margin-top: 2rem;
}
.pt-people-group .accordion.phantom-modular-content-minimalized:first-child{
  margin-top: 0;
}

@media (min-width: 1200px) {
  .accordion.phantom-modular-content-minimalized:first-child {
    margin-top: 2rem;
  }

  .accordion.phantom-modular-content-minimalized:last-child {
    margin-bottom: 3rem;
  }
}
.accordion.phantom-modular-content-minimalized {
  button {
    border: none;
  }
}

.accordion.phantom-modular-content-minimalized {
  border: 1px solid #000;
  border-left: 4px solid var(--accent);
  border-radius: 0;
  transition: 0.2s ease;

  /* media may render a bare <img> without <picture> */
  .accordion-inner-image:empty {
    margin: 0 !important;
  }
  .accordion-inner-image img {
    width: 100%;
    height: auto;
  }

  /* hide the default chevron */
  .accordion-header .accordion-button::after {
    display: none !important;
  }

  /* rotate plus icon when open */
  .accordion-button svg {
    transition: 0.2s ease;
  }
  .accordion-button:not(.collapsed) svg {
    transform: rotate(45deg);
  }

  /* label button */
  .accordion-header .accordion-button {
    display: flex;
    align-items: flex-start;
    padding: 0rem 70px 0rem 28px;
    border-radius: 0;
    text-decoration: none;

    /* title */
    .label-container div {
      font-weight: 400;
      position: relative;
      padding: 24px 10px 24px 0rem;
      font-size: 18px;
    }

    /* plus-icon box, docked right (the button is position:relative via Bootstrap) */
    .icon-container {
      position: absolute;
      right: 0;
      top: 0;
      width: 72px;
      height: 100%;
      background-color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-left: 1px solid #000;
      transition: 0.2s ease;
      svg {
        margin: 0;
        width: auto;
        height: 32px;
        fill: #000000;
      }
    }
  }

  /* content inside */
  .accordion-body {
    border-top: 1px solid rgb(0, 0, 0);
  }
}


@media(min-width:768px){
  .accordion.phantom-modular-content-minimalized {
    & .accordion-header .accordion-button {
        .label-container div {
            font-size: 1.25rem;
        }
    }
}
}



/* icon box changes color on hover / when expanded */
.phantom-modular-content-minimalized:hover .accordion-header .accordion-button,
.phantom-modular-content-minimalized
  .accordion-header
  .accordion-button:not(.collapsed) {
  .icon-container {
    background-color: var(--accent); /* TODO: tie to primary */
    svg {
      fill: var( --plus-color);
    }
  }
}
/* Not qualified with h2: the heading level is a prop (people groups head their
   accordions with h3), and the hover tint belongs to the header either way. */
.phantom-modular-content-minimalized:hover .accordion-header {
  background-color: #f8f8f5;
}

@media (min-width: 1200px) {
  /* text */
  .accordion.phantom-modular-content-minimalized
    .accordion-header
    .accordion-button {
    padding: 0rem 130px 0rem 28px;

    .label-container div {
      font-size: 36px;
      line-height: 45px;
      font-weight: 400;
      padding: 28px 0rem;
    }

    /* plus icon */
    .icon-container {
      width: 100px;
      svg {
        height: 42px;
      }
    }
  }

  .phantom-modular-content-minimalized .accordion-body {
    padding: 42px 24px 42px;
  }
}

body .accordion-header .accordion-button:hover,
body .accordion.phantom-accordion .accordion-header .accordion-button:hover {
  color: #000;
}

body .accordion-header .accordion-button:not(.collapsed),
body
  .accordion.phantom-accordion
  .accordion-header
  .accordion-button:not(.collapsed) {
  color: #000;
}