/* Technical Education page
   Loaded after styles.css. It preserves the visual language of the reference
   index while adding only Grade 10 and Grade 11 specific details. */

.technical-page .grade-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 190px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.92) 0 7%, transparent 8%),
    linear-gradient(135deg, rgba(13, 110, 253, 0.10), rgba(13, 202, 240, 0.22));
}

.technical-page .grade-visual::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 34px rgba(12, 44, 88, 0.16);
  z-index: -1;
}

.technical-page .grade-visual::after {
  font-weight: 800;
  font-size: clamp(4.25rem, 8vw, 6.5rem);
  line-height: 1;
  letter-spacing: -0.08em;
  color: var(--bs-primary, #0d6efd);
  text-shadow: 0 4px 0 rgba(13, 110, 253, 0.08);
}

.technical-page .grade-10-visual::after { content: "10"; }
.technical-page .grade-11-visual::after { content: "11"; }

/* The cards and buttons intentionally inherit the same classes used by the
   second index: level-card, level-link-kindergarten and level-link-transition. */
.technical-page .level-link {
  min-height: 100%;
}

.technical-page .level-link .badge {
  white-space: normal;
  text-align: left;
  line-height: 1.3;
}

@media (max-width: 767.98px) {
  .technical-page .grade-visual {
    min-height: 145px;
  }
}