/* ==========================================================================
   Accreditation accordion
   Border-bottom-only rows · serif company title · italic location
   Uploaded down-arrow (rotates on open) · 4-column certificate grid in panel
   Drop-in for: <link href="css/accreditation-accordion.css" rel="stylesheet">
   Arrow asset expected at: img/accordation-down.svg
   ========================================================================== */

:root {
   --acc-rule: #1c1c1c;      /* bottom border colour */
   --acc-title: #1c1c1c;     /* company name         */
   --acc-sub: #6b6b6b;       /* location line        */
}

/* ---- list ---------------------------------------------------------------- */
.acc-accordion {
   margin-top: 0.625rem;
}

.acc-accordion-column {
   padding: 0;
}

/* each row carries ONLY a bottom rule — no box, no side/top borders */
.acc-accordion-item {
   border: 0;
   border-bottom: 1px solid var(--acc-rule);
   background: transparent;
}

.acc-accordion-header {
   margin: 0;
   padding: 0;
   border: 0;
   background: transparent;
}

/* ---- the clickable row --------------------------------------------------- */
.acc-accordion-button {
   display: flex;
   align-items: center;
   gap: 1.5rem;
   width: 100%;
   padding: 1.625rem 0;
   background: transparent;
   border: 0;
   border-radius: 0;
   box-shadow: none;
   text-align: left;
   cursor: pointer;
}

.acc-accordion-button:hover,
.acc-accordion-button:focus {
   background: transparent;
   box-shadow: none;
   outline: 0;
}

.acc-accordion-button:focus-visible {
   outline: 2px solid var(--acc-title);
   outline-offset: 0.25rem;
}

/* stacked title + location on the left */
.acc-accordion-heading-text {
   display: flex;
   flex-direction: column;
   gap: 0.375rem;
   min-width: 0;
}

.acc-accordion-company {
   font-family: 'Gelasio', serif;
   font-weight: 500;
   font-size: 1.75rem;
   line-height: 1.15;
   color: var(--acc-title);
}

.acc-accordion-location {
   display: block;
   font-family: 'Familjen Grotesk', sans-serif;
   font-style: italic;
   font-size: 0.875rem;
   line-height: 1.3;
   color: var(--acc-sub);
}

/* ---- arrow icon ---------------------------------------------------------- */
/* Uses the uploaded SVG as-is (its own #373737 fill) — no colour override. */
.acc-accordion-icon {
   flex: 0 0 auto;
   width: 0.9375rem;
   height: 1.0625rem;
   margin-left: auto;
   background: url("../img/accordation-down.svg") no-repeat center / contain;
   transition: transform .35s ease;
}

/* Bootstrap toggles aria-expanded — flip the arrow when the row is open */
.acc-accordion-button[aria-expanded="true"] .acc-accordion-icon {
   transform: rotate(180deg);
}

/* ---- panel: 4-column certificate grid ------------------------------------ */
.acc-accordion-body {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 2.125rem 1.5rem;
   padding: 0.625rem 0 2.75rem;
}

/* neutralise any float/width from accreditation.css so cards fill the tracks */
.acc-accordion-body .acc__card {
   width: auto;
   max-width: none;
   margin: 0;
   float: none;
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 991.98px) {
   .acc-accordion-body {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (max-width: 575.98px) {
   .acc-accordion-button {
      gap: 1rem;
      padding: 1.25rem 0;
   }
   .acc-accordion-company {
      font-size: 17px;
   }
   .acc-accordion-body {
      grid-template-columns: 1fr;
      gap: 1.75rem;
   }
   .acc-accordion-icon{
    width:11px;
    height:13px;
   }
}

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
   .acc-accordion-icon {
      transition: none;
   }
}