.com-quick-links {
  --com-quick-links-gap: 12px;
}

.com-quick-links {
  margin-left: auto;
  margin-right: auto;
}

.com-quick-links-layout {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.com-quick-link {
  width: 25%; min-width: 300px;
  padding: var(--com-quick-links-gap);
  @media (width <= 800px) {
    padding-left: 0; padding-right: 0;
    width: 100% !important; max-width: 100% !important;
  }
}

.com-quick-link-content {
  display: block;
  text-decoration: none;
  color: hsl(0 0% 0% / 1);
  transition: filter ease-out 200ms;
}

.com-quick-link a:hover { filter: brightness(0.95); }
.com-quick-link a:hover .fa,
.com-quick-link a:hover .w-icon { transform: scale(0.85); }

.com-quick-link-icon {
  display: flex; justify-content: center; align-items: center;
  width: 100%; height: 160px;
  /* --ql-icon-bg is set inline by index.php from the editor's color choice.
     Falls back to primary blue if unset (e.g. older posts with no saved value). */
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ql-icon-bg, var(--color-primary-blue)) 70%, black), var(--ql-icon-bg, var(--color-primary-blue)));
  border-radius: 14px 14px 0 0;
  overflow: hidden;
}

/* .fa covers legacy Font Awesome glyphs; .w-icon covers the Tabler inline
   SVGs from w_icon(). The SVG is sized via width/height="1em", so the same
   font-size rule controls both. SVG strokes use currentColor. */
.com-quick-link-icon .fa,
.com-quick-link-icon .w-icon {
  margin-top: 2px;
  font-size: 4.5rem;
  color: hsl(0 0% 100% / 1);
  transition: transform ease-out 200ms;
}

/* "Black → Purple Gradient" background choice (.is-gradient-bg is set on the
   component wrapper by index.php). Black at the bottom fading to the brand
   purple at the top. Overrides the radial gradient used for solid colors.
   Icon glyphs stay white (see rule above) — contrast against both black and
   --color-primary-purple (hsl(269 53% 27%)) comfortably exceeds WCAG AA. */
.com-quick-links.is-gradient-bg .com-quick-link-icon {
  background: linear-gradient(to top, hsl(0 0% 0% / 1), var(--color-primary-purple));
}

/* Image tiles under the gradient choice: keep the gradient visible in the
   letterbox space when the image uses "Contain" or has transparency.
   (For solid colors .has-image uses background-color; a gradient must be
   applied via background-image, hence this override.) */
.com-quick-links.is-gradient-bg .com-quick-link-icon.has-image {
  background: linear-gradient(to top, hsl(0 0% 0% / 1), var(--color-primary-purple));
}

.com-quick-link-icon.has-image {
  /* Image tiles: drop the radial gradient, but keep honoring the editor's
     "Icon / Image Background Color" preset (--ql-icon-bg, set inline by
     index.php). This color shows through the letterbox space when the
     image uses "Contain", and behind transparent PNGs.
     Previously this was hardcoded to near-black, which silently ignored
     the editor's color choice for image tiles. */
  background: none;
  background-color: var(--ql-icon-bg, var(--color-primary-blue));
}

.com-quick-link-icon.has-image img {
  width: 100%; height: 100%;
  object-fit: cover; /* default; overridden below for contain */
  display: block;
}

/* When the editor picks "Contain", show the full image with letterboxing.
   The dark background from .has-image shows through the empty space. */
.com-quick-link-icon.is-contain img {
  object-fit: contain;
}

.com-quick-link-text {
  padding: 20px 20px;
  background: hsl(0 0% 98% / 1);
  border: 1px solid hsl(0 0% 80% / 1);
  border-radius: 0 0 14px 14px;
}

.com-quick-link-title { text-decoration: underline; }
.com-quick-link-subtitle {}