/* =========================
   RPM — SZKOŁY (schools.css)
   Wymaga zmiennych:
   --container, --pad, --border, --text
   opcjonalnie: --text-muted, --text-kicker, --primary
========================= */

.rpm-schools{
  padding: clamp(2.75rem, 5.5vw, 4.5rem) 0;
  background: #fff; /* czyste białe tło */
}

.rpm-schools__inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.rpm-schools__head{ max-width: 58rem; }

.rpm-schools__kicker{
  margin: 0 0 0.65rem;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-kicker, rgba(30,41,59,.62));
}

.rpm-schools__title{
  margin: 0 0 0.85rem;
  font-size: clamp(1.95rem, 3.4vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 750;
  color: var(--text);
}

.rpm-schools__lead{
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.7;
  font-weight: 450;
  color: var(--text-muted, rgba(30,41,59,.78));
}

/* ===== layout 65/35 + obrazek ===== */
.rpm-schools__layout{
  margin-top: clamp(1.25rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: 65% 35%;
  gap: 1.25rem;
  align-items: start;
}

.rpm-schools__image{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1.25rem;
  border: 0.0625rem solid var(--border);
  box-shadow: 0 1.2rem 3rem rgba(2,6,23,.08);
  background: #fff;
}

/* mobile: bez obrazka */
@media (max-width: 53.75rem){
  .rpm-schools__layout{ grid-template-columns: 1fr; }
  .rpm-schools__aside{ display: none; }
}

/* ===== Grid ===== */
.rpm-schools__grid{
  margin: 0;
  padding: 0;
  list-style: none;

  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 70rem){
  .rpm-schools__grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 53.75rem){
  .rpm-schools__grid{
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

/* ===== Card ===== */
.rpm-school{
  position: relative;
}

.rpm-school__hit{
  position: relative;
  overflow: hidden; /* żeby progress nie wychodził poza border-radius */

  display: grid;
  gap: 0.35rem;
  text-decoration: none;

  border: 0.0625rem solid var(--border);
  border-radius: 1.1rem;
  background: #fff;
  padding: 0.85rem 0.9rem;

  box-shadow: 0 0.5rem 1.25rem rgba(2, 6, 23, .06);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.rpm-school__hit:hover{
  transform: translateY(-0.08rem);
  box-shadow: 0 0.85rem 1.9rem rgba(2, 6, 23, .10);
}

.rpm-school__hit:focus-visible{
  outline: 0.1875rem solid rgba(22,64,255,.22);
  outline-offset: 0.1875rem;
}

/* Short + name */
.rpm-school__short{
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(30,41,59,.70);
}

.rpm-school__name{
  font-size: 0.98rem;
  line-height: 1.35;
  font-weight: 650;
  color: var(--text);
  letter-spacing: -0.01em;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ===== Panel (desktop popover) ===== */
.rpm-school__panel{
  position: fixed;

  width: min(28rem, calc(100vw - 2rem));
  border-radius: 1.15rem;

  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(1.25rem);
  border: 0.0625rem solid var(--border);
  box-shadow: 0 1.2rem 3rem rgba(2,6,23,.16);

  overflow: hidden;
  z-index: 200;

  opacity: 0;
  transform: translateY(-0.35rem) scale(0.995);
  pointer-events: none;
  transform-origin: top center;

  transition: opacity 140ms ease, transform 140ms ease;
}

/* otwarte tylko na .is-open (ważne) */
.rpm-school.is-open .rpm-school__panel{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.rpm-school__media{
  aspect-ratio: 16 / 9;
  background: rgba(15,23,42,.05);
}

.rpm-school__media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.rpm-school__meta{
  padding: 0.9rem 0.95rem 1.05rem;
  display: grid;
  gap: 0.45rem;
}

.rpm-school__panelTitle{
  font-size: 1.02rem;
  line-height: 1.25;
  font-weight: 750;
  color: var(--text);
}

.rpm-school__address{
  font-size: 0.95rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted, rgba(30,41,59,.78));
}

.rpm-school__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

.rpm-tag{
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;

  font-size: 0.82rem;
  line-height: 1;
  font-weight: 650;

  padding: 0.45rem 0.55rem;
  border-radius: 0.75rem;
  border: 0.0625rem solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.03);
  color: rgba(30,41,59,.82);
  text-decoration: none;
}

.rpm-tag__icon{
  width: 0.9rem;
  height: 0.9rem;
  display: block;
  opacity: 0.9;
}

.rpm-tag--link{
  border-color: rgba(22,64,255,.22);
  background: rgba(22,64,255,.06);
  color: rgba(22,64,255,.92);
}

.rpm-tag--link:hover{
  background: rgba(22,64,255,.10);
  color: rgba(22,64,255,1);
}

.rpm-tag--link:focus-visible{
  outline: 0.1875rem solid rgba(22,64,255,.22);
  outline-offset: 0.125rem;
  border-radius: 0.75rem;
}

/* ===== progress bar w kafelku (desktop hover hold) ===== */
.rpm-school__progress{
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.55rem;
  height: 0.2rem;
  border-radius: 999px;
  background: rgba(15,23,42,.08);
  overflow: hidden;

  opacity: 0;
  transform: translateY(0.25rem);
  transition: opacity 160ms ease, transform 160ms ease;
}

.rpm-school__progress::before{
  content: "";
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left;
  background: rgba(22,64,255,.75);
}

/* aktywne “ładowanie hovera” */
.rpm-school.is-loading .rpm-school__progress{
  opacity: 1;
  transform: translateY(0);
}

.rpm-school.is-loading .rpm-school__progress::before{
  animation: rpmSchoolHold 900ms linear forwards;
}

@keyframes rpmSchoolHold{
  from{ transform: scaleX(0); }
  to{ transform: scaleX(1); }
}

/* ===== CTA w panelu: zielone + more.svg ===== */
.rpm-school__cta--green{
  margin-top: 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  height: 2.25rem;
  padding: 0 0.95rem;

  border-radius: 0.75rem;
  border: 0.0625rem solid rgba(0,200,83,.28);
  background: rgba(0,200,83,.10);

  color: rgba(0,160,68,1);
  text-decoration: none;
  font-weight: 750;
  font-size: 0.95rem;

  transition: background 160ms ease, color 160ms ease, transform 120ms ease;
}

.rpm-school__cta--green:hover{
  background: rgba(0,200,83,.16);
  color: rgba(0,140,60,1);
}

.rpm-school__cta--green:active{ transform: translateY(0.0625rem); }

.rpm-school__cta--green:focus-visible{
  outline: 0.1875rem solid rgba(0,200,83,.28);
  outline-offset: 0.125rem;
  border-radius: 0.75rem;
}

.rpm-school__ctaIcon{
  width: 1rem;
  height: 1rem;
  display: block;
  opacity: 0.95;
}

/* ===== MOBILE: prosta lista, brak paneli i brak “hover hold” ===== */
@media (max-width: 53.75rem){
  /* klucz: panel nie może zajmować miejsca (to robiło “dziurę”) */
  .rpm-school__panel{ display: none !important; }

  /* progress też wyłączamy, bo hover i tak odpada */
  .rpm-school__progress{ display: none !important; }

  /* mniej “hoverowego” w dotykowych */
  .rpm-school__hit:hover{
    transform: none;
    box-shadow: 0 0.5rem 1.25rem rgba(2, 6, 23, .06);
  }

  .rpm-footer__col{
    margin-top: 1rem;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .rpm-school__hit,
  .rpm-school__panel,
  .rpm-school__progress{ transition: none !important; }
  .rpm-school.is-loading .rpm-school__progress::before{ animation: none !important; }
}