/* ======================================================
   УЗИ PAGE — only the new "Направления" block + banner tint.
   Everything else is inherited from gastro-styles.css /
   priem-styles.css (structure, visuals, animations).
   ====================================================== */

/* ---------- HERO: same shell/behaviour as Гастроэнтеролог, new tint + image ---------- */
.uzi-hero .priem-hero-wrap {
  background: linear-gradient(135deg, #FBD9D6 0%, #E7DFEC 100%);
}
/* Bigger probe image, blob behaves exactly like the gastro page */
.uzi-hero .priem-hero-doctors {
  max-height: 600px;
  max-width: 92%;
}
.uzi-hero .priem-hero-card {
  background: rgba(255, 255, 255, 0.55);
}

/* УЗИ почек — doctor photo: keep banner the SAME height as the УЗИ page
   (wrap min-height 560px) by slightly shrinking the figure so it fits inside. */
.uzi-pochek-hero .priem-hero-doctors {
  max-height: 510px;
  max-width: 86%;
}

/* ---------- НАПРАВЛЕНИЯ ---------- */
.uzi-napravleniya { padding: var(--section-pad-tight) 0 0; }
.uzi-napravleniya .section-title { margin-bottom: var(--title-gap); }

.uzi-dir-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.uzi-dir-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: 132px;
  padding: 24px 24px 22px;
  border-radius: var(--r-lg);
  background: var(--coral-soft, #FFEBE6);
  color: var(--text);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Violet wash that fades in on hover */
.uzi-dir-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(140deg, #7B69D8 0%, #6054B1 60%, #4F44A0 100%);
  opacity: 0;
  transition: opacity 320ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}
.uzi-dir-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(96, 84, 177, 0.30);
}
.uzi-dir-card:hover::before { opacity: 1; }
.uzi-dir-card:hover .uzi-dir-name { color: #fff; }
.uzi-dir-card:hover .uzi-dir-btn {
  background: rgba(255, 255, 255, 0.92);
  color: var(--violet);
}

.uzi-dir-name {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
  transition: color 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.uzi-dir-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--violet);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  transition: background-color 280ms ease, color 280ms ease;
}

/* Featured / hidden-state helpers */
.uzi-dir-card.is-hidden { display: none; }
.uzi-dir-grid.is-expanded .uzi-dir-card.is-hidden { display: flex; }

/* Автоматически прячем карточки после 8-й (десктоп/планшет), пока не раскрыто —
   правило срабатывает по позиции, без ручной пометки .is-hidden в разметке. */
.uzi-dir-grid:not(.is-expanded) .uzi-dir-card:nth-child(n+9) { display: none; }
.uzi-dir-grid.is-expanded .uzi-dir-card { display: flex; }

.uzi-dir-more {
  text-align: center;
  margin-top: 30px;
}

/* Remove the white gap between the gray Стоимость and Специалисты blocks */
.uzi-specialists { margin-top: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .uzi-dir-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .uzi-dir-grid { grid-template-columns: 1fr; gap: 14px; }
  .uzi-hero .priem-hero-doctors { max-height: 300px; }
  /* На мобильном показываем 4 направления, остальное — под «Развернуть» */
  .uzi-dir-card.is-hidden { display: flex; }
  .uzi-dir-grid:not(.is-expanded) .uzi-dir-card:nth-child(n+5) { display: none; }
  .uzi-dir-grid.is-expanded .uzi-dir-card { display: flex; }
}