/* ==========================================================================
   ACCREDITED TRAINING / CREDENTIALS, About section slide-down
   Drop-in addition to gb-test-child/style.css. Nothing here overrides an
   existing rule; every selector is new. Paired with credentials-toggle.js.
   ========================================================================== */

/* --- Trigger ------------------------------------------------------------
   Sits directly under About's "Read More". Deliberately NOT class
   .link-arrow: about-toggle.js delegates off .about-copy and swallows every
   .link-arrow click, so reusing that class would make this trigger inert.
   The visual treatment is copied rather than shared for the same reason. */
.about-copy .cred-toggle-wrap { margin: 14px 0 0; }
.about-copy .cred-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  background: none; border: none; padding: 12px 6px; margin: -12px -6px;
  font-family: var(--font-body); font-size: var(--wp--preset--font-size--sm);
  font-weight: 500; color: var(--graphite-mid); line-height: normal;
  cursor: pointer; text-decoration: none;
  transition: color 0.25s ease, transform 0.25s cubic-bezier(.16,.8,.24,1);
}
.about-copy .cred-toggle:hover { color: var(--graphite-ultra-dark); transform: translateY(-2px); }
.about-copy .cred-toggle .u {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: text-decoration-color 0.25s ease, color 0.25s ease;
}
.about-copy .cred-toggle .arrow { display: inline-block; text-decoration: none; transition: transform 0.35s cubic-bezier(.16,.8,.24,1); }
.about-copy .cred-toggle[aria-expanded="true"] .arrow { transform: rotate(180deg); }
.about-copy .cred-toggle .label-less { display: none; }
.about-copy .cred-toggle[aria-expanded="true"] .label-more { display: none; }
.about-copy .cred-toggle[aria-expanded="true"] .label-less { display: inline; }

/* --- Panel --------------------------------------------------------------
   Same 0fr/1fr grid-rows technique the Offerings and About toggles already
   use, so the easing matches the rest of the page. */
.cred-panel {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows 0.6s cubic-bezier(.16,.8,.24,1), opacity 0.45s ease;
}
.cred-panel-inner { overflow: hidden; }
.cred-panel.is-open { grid-template-rows: 1fr; opacity: 1; }

.cred-body { margin-top: 64px; padding-top: 56px; border-top: 1px solid var(--rq-border); }
.cred-intro { max-width: 640px; margin: 0 0 48px; }
.cred-intro .eyebrow { margin-bottom: 20px; }
.cred-intro p {
  font-size: var(--wp--preset--font-size--base); line-height: 1.8;
  color: var(--graphite-mid); margin: 0;
}

.cred-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

.cred-card {
  display: flex; flex-direction: column;
  background: var(--rq-white); border: 1px solid var(--rq-border); border-radius: 6px;
  padding: 32px 26px 26px; text-decoration: none;
  transition: transform 0.35s cubic-bezier(.16,.8,.24,1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.cred-card:hover, .cred-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(36,38,31,0.09);
  border-color: var(--sage);
}

/* Fixed-height logo well so four marks of very different proportion
   (a square seal, two wide wordmarks, one laurel lockup) sit on a shared
   baseline instead of each card setting its own height. */
.cred-logo { height: 88px; display: flex; align-items: center; margin-bottom: 26px; }
.cred-logo img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; object-position: left center; }
.cred-logo.is-seal img { max-height: 88px; }      /* square seal: fills the well */
.cred-logo.is-wordmark img { max-height: 68px; }  /* wide lockups: optically matched to the seal */

/* min-height reserves three lines so the four descriptions start on one
   baseline. Without it the one-line name (CPD) pulls its body copy a full
   two lines above the three-line names and the row reads as misaligned. */
.cred-card h3 {
  font-family: var(--font-heading); font-weight: 500;
  font-size: 17px; line-height: 1.35; letter-spacing: -0.01em; text-wrap: balance;
  color: var(--graphite-ultra-dark); margin: 0 0 14px;
  min-height: calc(1.35em * 3);
}
.cred-card .cred-note {
  font-family: var(--font-body); font-size: 15px; line-height: 1.7;
  color: var(--graphite-mid); margin: 0 0 22px;
}
.cred-card .cred-visit {
  margin-top: auto; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-size: var(--wp--preset--font-size--xxs);
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sage-ultra-dark);
}
.cred-visit .arrow { transition: transform 0.3s cubic-bezier(.16,.8,.24,1); }
.cred-card:hover .cred-visit .arrow { transform: translateX(4px); }

.cred-foot {
  margin: 40px 0 0; font-family: var(--font-body);
  font-size: 14px; line-height: 1.7; color: var(--graphite-light);
}

@media (max-width: 1080px) { .cred-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 900px)  { .cred-body { margin-top: 48px; padding-top: 44px; } }
@media (max-width: 560px)  {
  .cred-grid { grid-template-columns: 1fr; }
  .cred-card { padding: 26px 24px 24px; }
  .cred-logo { height: 72px; margin-bottom: 20px; }
  .cred-logo.is-seal img { max-height: 72px; }
  .cred-logo.is-wordmark img { max-height: 56px; }
  /* Single column, so there is no neighbouring card to align against and the
     reserved third line is just dead space under the shorter names. */
  .cred-card h3 { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cred-panel { transition: none; }
  .cred-card, .cred-card:hover, .about-copy .cred-toggle:hover { transform: none; transition: none; }
}