/* Custom CSS to control the width of the link wrapper */
.image-link-wrapper {
  max-width: 400px; /* Adjust this value (e.g., 250px, 400px) to your desired visual size */
}

/* Ensure the image fills its container (the <a> tag) up to the max-width */
.image-link-wrapper img {
  width: 100%; /* Important: Makes the image fill the controlled width of its parent <a> */
  height: auto; /* Maintains aspect ratio */
}

.center {
  text-align: center;
  margin-top: 0.5rem; /* Optional: Adds a small space between the image and the text */
}

/* Protect for SVG */
.protect {
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Verified Contributor Program (community/vcp/index.html)

   The program page lists four credential cards and two ordered step lists.
   These classes live here, next to the profile helpers, because the whole
   /community/vcp/ folder shares this stylesheet; keeping them out of a page
   level <style> block means one place to change and no duplicated rules.
   Colors follow the site dark theme: near-black panels, light text, a thin
   translucent border, and the accent color only on icons and links.
--------------------------------------------------------------------------- */

/* Responsive card grid: auto-fit lets the four credential cards reflow to
   2 columns on tablets and 1 column on phones without media queries. */
.contributor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

/* One credential card. The gradient is subtle so the border stays visible
   against the page background in the dark theme. */
.contributor-card {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 1rem;
  padding: 1.25rem;
  background: linear-gradient(160deg, rgba(26, 26, 26, 0.95), rgba(10, 10, 10, 0.98));
}

/* Card titles are <h3 class="h5">, so they inherit heading color; the glyph
   before each title is what marks the card as part of a set. */
.contributor-card h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.contributor-card h3 i {
  color: var(--bs-primary);
}

/* The last paragraph of a card is the visual bottom edge; drop its margin so
   cards of unequal text length still line up on their padding box. */
.contributor-card p:last-child {
  margin-bottom: 0;
}

/* Ordered step lists (prerequisite path, application flow). A left border and
   indent keep the numbers visually attached to their own step. */
.contributor-steps {
  margin: 0;
  padding-left: 1.35rem;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.contributor-steps li {
  margin: 0.75rem 0;
  padding-left: 0.35rem;
}

/* The <strong> lead-in of each step acts as its title. */
.contributor-steps li > strong {
  color: var(--bs-body-color);
}

/* Narrow screens: the card padding would otherwise dominate the viewport. */
@media screen and (max-width: 576px) {
  .contributor-card {
    padding: 1rem;
  }

  .contributor-steps {
    padding-left: 1.1rem;
  }
}