/* «Для родителей», блок «Первый экран» (templates/public/parents/hero.html).
   Каркас — первый экран главной из site.css (.hero, .hero-mosaic, .hero-in,
   .signup, .facts, .chip, .h-grad); здесь только своё: крошки внутри
   первого экрана и лента «Сегодня у детей» на матовом стекле. */

.ph .crumbs ol { margin: 0 0 18px; }
.ph .crumbs a { color: var(--muted); }
.ph .facts { margin-top: 26px; }

/* Лента — карточки на матовом стекле поверх мозаики. */
.ph-feed { position: relative; display: grid; gap: 12px; width: min(470px, 100%); margin-inline: auto; }
.ph-feed-hd,
.ph-ev {
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.ph-feed-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px 12px 18px; border-radius: 20px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 24px 40px -26px rgba(25, 30, 80, .4);
}
.ph-feed-hd b { display: block; font-size: 16px; font-weight: 800; line-height: 1.3; }
.ph-feed-hd small { display: block; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.ph-kids { display: flex; }
.ph-av {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid #fff; font-size: 14px; font-weight: 800; color: #fff; background: var(--av);
}
.ph-av + .ph-av { margin-left: -8px; }
.ph-av-m { --av: linear-gradient(135deg, #ff7a8a, #ffb36b); }
.ph-av-p { --av: linear-gradient(135deg, #4d97ff, #33d0ec); }

.ph-ev {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 14px 16px 14px 14px; border-radius: 22px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .8), 0 30px 50px -30px rgba(25, 30, 80, .45);
}
.ph-ev.ph-warn { background: rgba(255, 246, 225, .92); }
.ph-vis { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; overflow: hidden; }
.ph-cov img { width: 100%; height: 100%; object-fit: cover; }
.ph-ic { background: #fff; }
.ph-ic img { width: 42px; height: 42px; object-fit: contain; }
.ph-ic-bio { background: #e3f7e6; }

/* Кольцо цели дня — как в кабинете. */
.ph-ring {
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: conic-gradient(#22c997 100%, #e2def0 0);
}
.ph-ring > span { display: grid; place-content: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; }
.ph-ring b { font-size: 15px; font-weight: 800; line-height: 1; }

.ph-who { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--muted); }
.ph-who i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--av); }
.ph-t { display: block; font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--ink); }
.ph-s { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.ph-warn .ph-s { color: #7a5200; }
.ph-ev time { align-self: start; font-size: 12px; font-weight: 600; color: #a3a6bd; }

.ph-ex {
  display: inline-flex; align-items: center; gap: 7px; width: max-content; max-width: 100%;
  margin: 4px 0 0 auto; padding: 5px 12px 5px 9px; border-radius: var(--pill);
  font-size: 12.5px; font-weight: 500; line-height: 1.4; color: var(--muted);
  background: rgba(255, 255, 255, .92); box-shadow: inset 0 0 0 1px var(--border);
}
.ph-ex::before {
  content: "i"; flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  font-size: 10.5px; font-weight: 800; font-style: italic; color: #fff; background: #a3a6bd;
}

@media (min-width: 1100px) {
  /* Вуаль чуть плотнее, чем на главной: справа не окно приложения, а стекло. */
  .ph::after { background: linear-gradient(90deg, rgba(246, 247, 251, .98) 0, rgba(246, 247, 251, .93) 42%, rgba(246, 247, 251, .45) 70%, rgba(246, 247, 251, .25) 100%); }
  .ph .hero-in { min-height: 600px; }
  .ph-feed { margin-right: 30px; margin-left: auto; }
  /* Карточки вразбежку, как стопка уведомлений. */
  .ph-ev:nth-of-type(2) { transform: translateX(-34px); }
  .ph-ev:nth-of-type(3) { transform: translateX(18px); }
  .ph-ev:nth-of-type(4) { transform: translateX(-12px); }
  .ph-ev:nth-of-type(5) { transform: translateX(26px); }
}

@media (max-width: 720px) {
  .ph-ev { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .ph-vis, .ph-ring { width: 48px; height: 48px; }
  .ph-ic img { width: 36px; height: 36px; }
  .ph-ring > span { width: 38px; height: 38px; }
  .ph-ring b { font-size: 13px; }
  .ph-ev time { display: none; }
  .ph-t { font-size: 14px; }
}