/* Certification page — brand-matched styling for the Elementor container tree.
   Colours come from the site tokens; the mockup's blue block is rendered in
   brand purple so the page stays in sync with the rest of the site. */

.gt-cert-hero-inner { text-align: left; }
.gt-cert-crumb p { margin: 0; letter-spacing: .02em; }
.gt-cert-crumb a { color: #fff; text-decoration: none; opacity: .85; }
.gt-cert-crumb a:hover { opacity: 1; text-decoration: underline; }
.gt-cert-sub p { margin: 0; max-width: 46ch; }

/* --- certificate --------------------------------------------------------- */
.gt-cert-doc .gt-cert-scan img {
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 18px 44px -18px rgba(17, 17, 17, .38);
}
.gt-cert-doc-h .elementor-heading-title { letter-spacing: -.01em; }
/* The mockup's solid colour block behind "CERTIFICATION" */
.gt-cert-badge .elementor-heading-title {
  display: block;
  background: var(--gt-purple, #7B4FF4);
  color: #fff;
  padding: 10px 22px;
  letter-spacing: .01em;
}

/* --- awards -------------------------------------------------------------- */
.gt-awards-eyebrow p {
  margin: 0;
  display: inline-block;
  border: 1px solid rgba(123, 79, 244, .35);
  border-radius: 999px;
  padding: 5px 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
}
.gt-awards-head { text-align: left; }
.gt-awards-intro p { margin: 0; max-width: 62ch; }

/* Uniform 4-up grid. minmax(0,1fr) so a long caption can never force an
   overflow, and a fixed aspect ratio so every tile is the same height
   regardless of the source photo's proportions. */
.gt-awards-grid > .e-con-inner,
.gt-awards-grid.e-con > .e-con-inner,
.gt-awards-grid:not(:has(> .e-con-inner)) {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 22px;
  align-items: start;
}
.gt-award-tile { margin: 0; }
.gt-award-tile figure,
.gt-award-tile .elementor-image { margin: 0; }
.gt-award-tile img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;          /* never distort — crop instead */
  display: block;
  border-radius: 3px;
  background: #e9e9ee;
}
.gt-award-tile figcaption,
.gt-award-tile .widget-image-caption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--gt-body, #767676);
  text-align: left;
}

@media (max-width: 1024px) {
  .gt-awards-grid > .e-con-inner,
  .gt-awards-grid:not(:has(> .e-con-inner)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .gt-awards-grid > .e-con-inner,
  .gt-awards-grid:not(:has(> .e-con-inner)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .gt-cert-doc { flex-direction: column !important; }
  .gt-cert-doc-img,
  .gt-cert-doc-copy { width: 100% !important; }
  .gt-cert-doc-img { max-width: 340px; margin: 0 auto; }
  .gt-cert-badge .elementor-heading-title { padding: 8px 16px; }
}
@media (max-width: 420px) {
  .gt-awards-grid > .e-con-inner,
  .gt-awards-grid:not(:has(> .e-con-inner)) { grid-template-columns: minmax(0, 1fr); }
}

/* GT: awards grid responsive override -------------------------------------
   The base grid rule includes `.gt-awards-grid.e-con > .e-con-inner` (three
   classes). The earlier media queries used only two, so they LOST on
   specificity and the grid stayed 4-up on phones -- 68px tiles at 375px.
   These repeat the full selector so the breakpoints actually win.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .gt-awards-grid.e-con > .e-con-inner,
  .gt-awards-grid > .e-con-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .gt-awards-grid.e-con > .e-con-inner,
  .gt-awards-grid > .e-con-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 14px;
  }
}
/* GT: end awards grid responsive override */