:root{
  --acc-gap: 24px;
  --acc-card-radius: 16px;
  --acc-card-border: #e6e6e6;
  --acc-ink: #1f2937;
  --acc-muted: #4b5563;
}

/* layout */
.edb-acc{ margin: 24px 0; }
.edb-acc__wrap{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: var(--acc-gap);
}
@media (max-width: 980px){
  .edb-acc__wrap{ grid-template-columns: 1fr; }
}

/* left column (accordion) */
.edb-acc__item{
  background: #fff; border:2px solid var(--acc-card-border); border-radius: var(--acc-card-radius);
  margin-bottom: 14px; overflow: hidden;
}
.edb-acc__btn{
  width:100%; text-align:left; border:0;
  font-family: 'Poppins';
  font-size: 22px;
  font-weight: 600;
  padding: 18px 18px; display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; color:var(--acc-ink);
  background-color: #fff;
}
.edb-acc__btn:hover{ filter: brightness(.98); }
.edb-acc__chev{ transition: transform .2s ease; content:"";                             /* remove ▾ text */
  display:inline-block;
  width:18px; height:10px;
  background:url('./img/arrow-down.png') no-repeat center/contain;
  margin-right: 10px;
}
.edb-acc__btn[aria-expanded="true"] .edb-acc__chev{ transform: rotate(180deg); }

@media (max-width:640px){
    .edb-acc__btn {
        font-size: 18px;
    }
}

.edb-acc__panel[hidden]{ display:none; }
.edb-acc__content{ padding: 18px 18px 20px; color:var(--acc-muted);  font-family: 'Poppins', sans-serif;
    line-height: 32px;
    font-size: 16px; }

.edb-acc__panel{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition: max-height .28s ease, opacity .2s ease;
  will-change: max-height, opacity;
  background:#fff;
}
.edb-acc__panel.is-open{
  /* max-height is set inline to content height by JS; class just flips opacity */
  opacity:1;
}

/* Right column container */
.edb-acc__col--right{ transition: background-color .28s ease; min-height: 615px; position: relative; border-radius:18px; padding:18px; }

@media (max-width:640px){
    .edb-acc__col--right{
        min-height: 390px;
    }
}
/* Mobile: image column goes above accordion by default */
@media (max-width:980px){
  .edb-acc__col--right{ order:-1; }
  /* Give the right column a reasonable height so the absolute figures have room */
  .edb-acc__col--right{ min-height: 390px; }
}
/* The img itself is responsive */
.edb-acc__img{
  display:block; width:100%; height:auto; /* fluid */
}

.edb-acc__figure{
  position:absolute; inset:18px; margin:0; border-radius:24px; overflow:hidden;
  opacity:0; transform:scale(.98);
  transition: opacity .28s ease, transform .28s ease;
}
.edb-acc__figure.is-active{ opacity:1; transform:scale(1); }


/* Mobile: (optional) make figures non-absolute so height is driven by image */
@media (max-width:980px){
  .edb-acc__col--right{ order:-1; }
  .edb-acc__figure{ position:absolute; inset:auto; }
}