/* Home (home-hero.html): the hero with the site search and the live counts, and the doors to every part. */
.rh { margin: 0 0 36px; }
.rh-hero {
  position: relative; overflow: hidden; border-radius: 22px; padding: 44px 44px 36px; color: #fff;
  background: radial-gradient(circle at 12% 0%, rgba(90, 160, 216, .35), transparent 45%), radial-gradient(circle at 90% 110%, rgba(240, 122, 98, .3), transparent 50%), linear-gradient(135deg, #16205b, #1d3a7a 60%, #1d5a8e);
}
.rh-hero-in { position: relative; z-index: 1; max-width: 760px; }
.rh-kicker { margin: 0 0 10px; font-size: .9rem; color: #bcd3f0; }
.rh-title { margin: 0 0 12px; font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.7rem); line-height: 1.45; font-weight: 800; color: #fff; }
.rh-title span { color: #ffb4a3; }
.rh-lead { margin: 0 0 24px; font-size: 1.05rem; line-height: 1.9; color: #dbe6f6; }
.rh-search { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); border-radius: 18px; padding: 10px; backdrop-filter: blur(6px); }
.rh-tabs { display: flex; gap: 6px; margin: 0 0 10px; overflow-x: auto; scrollbar-width: none; }
.rh-tabs::-webkit-scrollbar { display: none; }
.rh-tabs button {
  flex: none; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: #dbe6f6; font: inherit; font-size: .92rem; cursor: pointer;
}
.rh-tabs button:hover { background: rgba(255, 255, 255, .12); }
.rh-tabs button[aria-selected="true"] { background: #fff; color: #16205b; font-weight: 700; }
.rh-tabs button:focus-visible, .rh-go:focus-visible, .rh-door:focus-visible { outline: 3px solid #ffb4a3; outline-offset: 2px; }
.rh-box { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 8px 0 6px; padding-inline-start: 16px; border-radius: 14px; background: #fff; }
.rh-box-icon { flex: none; color: #8a93ad; }
.rh-q { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: #16205b; font: inherit; font-size: 16px; outline: none; }
.rh-go { flex: none; height: 44px; padding: 0 24px; border: 0; border-radius: 10px; background: #e5583f; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.rh-go:hover { background: #c94a33; }
.rh-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px 4px 2px; font-size: .85rem; color: #bcd3f0; }
.rh-popular a { padding: 3px 12px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; color: #fff; }
.rh-popular a:hover { background: rgba(255, 255, 255, .14); text-decoration: none; }
.rh-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 26px 0 0; }
.rh-stats div { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .08); }
.rh-stats dt { font-size: .8rem; color: #bcd3f0; }
.rh-stats dd { margin: 2px 0 0; font-size: 1.45rem; font-weight: 800; color: #fff; }
.rh-atom { position: absolute; z-index: 0; top: 50%; left: -40px; width: 420px; height: 420px; margin-top: -210px; opacity: .55; animation: rh-spin 60s linear infinite; }
@keyframes rh-spin { to { transform: rotate(360deg); } }

/* the doors */
.rh-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0 0; }
.rh-door {
  --c: #1d5a8e; --soft: #e8f0f8;
  display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 14px; align-items: center;
  padding: 18px; border: 1px solid var(--rm-rule, #e6e3da); border-radius: 16px; background: #fff; color: var(--rm-text, #2f3445);
  box-shadow: var(--rm-shadow); transition: transform .18s, box-shadow .18s, border-color .18s;
}
.rh-door:hover { transform: translateY(-3px); border-color: var(--c); box-shadow: 0 12px 28px rgba(22, 32, 91, .12); text-decoration: none; color: var(--rm-text, #2f3445); }
.rh-door svg {
  grid-row: 1 / 4; width: 52px; height: 52px; padding: 12px; border-radius: 14px; background: var(--soft);
  fill: none; stroke: var(--c); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.rh-door strong { font-size: 1.08rem; color: var(--rm-ink, #16205b); }
.rh-n { font-size: .92rem; font-weight: 700; color: var(--c); }
.rh-door small { font-size: .82rem; line-height: 1.7; color: var(--rm-muted, #5d6475); }
.rh-door-library { --c: #8a4b1f; --soft: #f6ede2; }
.rh-door-questions { --c: #1f8a87; --soft: #e2f4f3; }
.rh-door-places { --c: #b8361f; --soft: #fbe9e5; }
.rh-door-tutors { --c: #6a3fa0; --soft: #efe8f8; }
.rh-door-konkur { --c: #1d6b3a; --soft: #e4f2e8; }

@media (max-width: 1000px) {
  .rh-hero { padding: 32px 24px 26px; }
  .rh-atom { width: 300px; height: 300px; margin-top: -150px; left: -90px; opacity: .3; }
  .rh-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .rh-hero { margin-inline: -16px; border-radius: 0 0 22px 22px; padding: 26px 16px 20px; }
  .rh-lead { font-size: .95rem; margin-bottom: 18px; }
  .rh-search { padding: 8px; }
  .rh-box { height: 52px; padding-inline-start: 12px; }
  .rh-go { padding: 0 16px; height: 40px; }
  .rh-box-icon { display: none; }
  .rh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
  .rh-stats dd { font-size: 1.2rem; }
  .rh-doors { gap: 10px; }
  .rh-door { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 4px; padding: 14px; }
  .rh-door svg { grid-row: auto; width: 44px; height: 44px; padding: 10px; margin-bottom: 4px; }
  .rh-door small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rh-atom { animation: none; }
  .rh-door { transition: none; }
}

/* the subjects: colour tiles with an icon */
.rh-subjects { margin: 30px 0 0; }
.rh-h2 { margin: 0 0 14px; font-size: 1.25rem; color: var(--rm-ink, #16205b); }
.rh-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.rh-tile {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 120px; padding: 16px;
  border-radius: 16px; background: linear-gradient(140deg, var(--b), var(--a)); color: #fff; font-weight: 700;
  box-shadow: 0 6px 16px -6px var(--a); transition: transform .18s, box-shadow .18s;
}
.rh-tile::after { content: ""; position: absolute; top: -30px; left: -30px; width: 110px; height: 110px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.rh-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -8px var(--a); color: #fff; text-decoration: none; }
.rh-tile:focus-visible { outline: 3px solid var(--a); outline-offset: 3px; }
.rh-tile svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1000px) { .rh-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .rh-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .rh-tile { min-height: 92px; padding: 12px; gap: 6px; font-size: .88rem; border-radius: 14px; }
  .rh-tile svg { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .rh-tile { transition: none; } }
/* the count: a big faint number behind the tile (its corner), that moves and counts up under the pointer */
.rh-tile-name { position: relative; z-index: 1; }
.rh-tile svg { position: relative; z-index: 1; }
.rh-tile-n { position: absolute; z-index: 0; bottom: -10px; inset-inline-end: 8px; line-height: 1; pointer-events: none; }
.rh-tile-n b { display: block; font-size: 3.6rem; font-weight: 900; color: rgba(255, 255, 255, .22); letter-spacing: -1px; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), color .3s; }
.rh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.rh-tile:hover, .rh-tile:focus-visible { transform: translateY(-4px) scale(1.04); z-index: 1; }
.rh-tile:hover .rh-tile-n b, .rh-tile:focus-visible .rh-tile-n b { color: rgba(255, 255, 255, .38); animation: rh-wiggle .6s ease; transform: translateY(-6px) scale(1.12); }
@keyframes rh-wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -7deg; } 50% { rotate: 5deg; } 75% { rotate: -3deg; } }
@media (max-width: 600px) { .rh-tile-n b { font-size: 2.6rem; } }
@media (prefers-reduced-motion: reduce) { .rh-tile:hover, .rh-tile:focus-visible { transform: none; } .rh-tile-n b { transition: none; animation: none !important; } }