/* ==========================================================================
   Tech4TIME — pages/certifications.css
   Resource Certifications: four role groups, each opening to its list.

   The live site builds this as a scripted accordion. Here it is <details> and
   <summary>, which the browser already implements — so it opens and closes
   with no JavaScript at all, is reachable by keyboard without a roving
   tabindex, and is announced correctly by screen readers without a single
   aria- attribute. The only thing left to write is how it looks.
   ========================================================================== */

.cert-group {
  background-color: var(--bg-elevated);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration) var(--ease-out);
}

.cert-group + .cert-group {
  margin-block-start: var(--space-md);
}

.cert-group:hover,
.cert-group[open] {
  border-color: var(--silver-accent-mid);
}

/* --------------------------------------------------------------- summary */

/* Two selectors, not one. Blink and WebKit expose the disclosure triangle as
   a ::-webkit-details-marker pseudo-element; Gecko and current WebKit render
   it as the summary's own list marker. Removing only one leaves the triangle
   showing in the other. */
.cert-group__summary {
  list-style: none;
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
}

/* The heading is the grid, not the summary. summary is allowed to contain
   heading content, and a real <h3> is what lets a screen reader user jump
   between the four roles instead of arrowing through 54 list items to find
   the next one. The h3 carries no size of its own — the role names below set
   it — so the outline gains a level without the page gaining a type step. */
.cert-group__heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.cert-group__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3xs) var(--space-sm);
}

.cert-group__summary::-webkit-details-marker {
  display: none;
}

/* The summary is the interactive element, so the focus ring belongs on it —
   and it has to be visible against both the closed and open states. */
.cert-group__summary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -3px;
  border-radius: var(--radius-lg);
}

.cert-group__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  color: var(--on-accent);
  background-image: var(--silver-gradient-fill);
  border-radius: 50%;
}

.cert-group__glyph {
  width: 1.35rem;
  height: 1.35rem;
  fill: currentColor;
}

.cert-group__roles {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3xs) var(--space-2xs);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

/* The live site separates these role names with a pipe typed into the
   heading. A real element instead, so the separator is never read out as
   punctuation and can be styled down out of the way. */
.cert-group__role-sep {
  color: var(--border-strong);
}

.cert-group__count {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-muted);
}

.cert-group__marker {
  width: 1rem;
  height: 1rem;
  fill: var(--text-muted);
  transition: transform var(--duration) var(--ease-out);
}

.cert-group[open] .cert-group__marker {
  transform: rotate(90deg);
}

/* ----------------------------------------------------------------- panel */

.cert-group__panel {
  padding: 0 var(--space-lg) var(--space-lg);
  border-block-start: var(--border-width) solid var(--border-subtle);
  /* The rule sits under the summary's padding, so the panel needs its own
     space above rather than inheriting the gap from the summary. */
  padding-block-start: var(--space-md);
  margin-block-start: calc(var(--space-2xs) * -1);
}

.cert-group__blurb {
  max-width: 60ch;
  margin-block-end: var(--space-md);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.cert-list {
  display: grid;
  gap: var(--space-2xs);
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  padding: 0;
  margin: 0;
  list-style: none;
}

/* auto-fill rather than auto-fit: with 5 entries in the last group, auto-fit
   would collapse the empty tracks and stretch those five across the full
   width, so one group's chips would be three times the width of another's. */

/* Grid items stretch to the height of the tallest chip in their row, so a
   one-line entry sitting beside a two-line one gets a two-line box. Centring
   is therefore about the BOX, not about the text: align-items: center keeps
   the icon on the chip's middle whatever height the row settles at, and takes
   the label with it so the two stay on the same line as each other. */
.cert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  background-color: var(--bg-surface);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius);
  transition:
    border-color var(--duration) var(--ease-out),
    background-color var(--duration) var(--ease-out);
}

.cert:hover {
  background-color: var(--bg-base);
  border-color: var(--silver-accent-mid);
}

/* A plain square, centred by the grid above. No margin nudge: --text-sm is a
   clamp(), so any fixed offset is only correct at one viewport width. */
.cert__icon {
  width: 0.9rem;
  height: 0.9rem;
  fill: var(--accent-text);
}

.cert__name {
  color: var(--text-secondary);
}

@media (min-width: 48em) {
  .cert-group__summary {
    padding-inline: var(--space-xl);
  }

  .cert-group__panel {
    padding-inline: var(--space-xl);
  }

  .cert-group__roles {
    font-size: var(--text-xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cert-group__marker {
    transition: none;
  }
}