/* /podrostki — страница для родителей подростков (08.10.2026).
   Подключается только на ней, поверх igra4.css. Макет одобрен Галиной:
   _КЛОД/черновик подростки 08.10. Шрифты как на страницах игр. */

.podrostki .h1 { text-transform: none; }

/* Плашка ближайшей игры на первом экране */
.podrostki .blizh-plashka { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.podrostki .blizh-plashka .usl-ryad { margin: 0; }
.podrostki .blizh-mesto { margin-top: 8px; font-size: 15px; color: var(--meta); }
.podrostki .blizh-net p { margin: 0; font-size: 17px; color: var(--text); }
.podrostki .blizh-net b { color: var(--ink); font-weight: 500; }

/* «Как всё устроено» */
.podrostki .ustroeno { list-style: none; padding: 0; margin: 8px 0 0; gap: 14px; }
.podrostki .ustroeno li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; font-size: 17px; line-height: 1.45; color: var(--text); }
.podrostki .ustroeno svg { width: 26px; height: 26px; color: var(--red); margin-top: 1px; }
.podrostki .ustroeno b { color: var(--ink); font-weight: 500; }

/* Ведущая: имя ссылкой, текст в две строки, без кнопки */
.podrostki .blok-sred .vedushchiy .kto p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.podrostki .vedushchiy .kto h3 a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }

/* «Не знаете, захочет ли он пойти?» */
.podrostki .pokazhite { margin-top: 28px; padding: 18px 20px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
.podrostki .pokazhite p { font-size: 16.5px; line-height: 1.5; color: var(--text); margin: 0; }
.podrostki .pokazhite b { color: var(--ink); font-weight: 500; }
.podrostki .pokazhite a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.podrostki .pokazhite .k4 { margin-top: 14px; }

/* Ближайшие игры: карточки расписания без обложки и описания */
.podrostki .blizh-kartochki { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 8px; }
.podrostki .blizh-kartochki .rk-opisanie, .podrostki .blizh-kartochki .rk-verh { display: none; }

/* Для класса: одна строка */
.podrostki .klass-stroka { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; padding-bottom: 48px; }
.podrostki .klass-stroka p { font-size: 17px; color: var(--ink); margin: 0; }
.podrostki .klass-ssylka { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }

/* Узкая плашка куки, одна строка снизу (задание Поиска: не на четверть экрана) */
.cookie-bar { padding: 8px 12px !important; gap: 10px !important; font-size: 13px !important; flex-wrap: nowrap !important; align-items: center !important; }
.cookie-bar .knopki { flex-wrap: nowrap !important; gap: 6px !important; }
.cookie-bar .btn-sm { padding: 6px 10px !important; min-height: 32px !important; font-size: 13px !important; }

/* Телефон: заголовок, плашка и кнопка на первом экране 390×844 */
@media (max-width: 760px) {
  .podrostki .oblozhka, .podrostki .oblozhka img { max-height: 20vh; height: 20vh; overflow: hidden; }
  .podrostki .oblozhka img { width: 100%; object-fit: cover; }
  .podrostki .usloviya { padding-top: 16px; }
  .podrostki .usloviya .h1 { font-size: 27px; line-height: 1.12; margin-top: 0; }
  .podrostki .usloviya .podzag { font-size: 15.5px; line-height: 1.4; margin-top: 10px; }
  .podrostki .blizh-plashka { margin-top: 14px; padding: 10px 12px; }
  .podrostki .blizh-plashka .data { font-size: 26px; }
  .podrostki .blizh-plashka .usl-ryad { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
  .podrostki .blizh-plashka .info { gap: 2px 12px; font-size: 14px; }
  .podrostki .blizh-mesto { margin-top: 4px; font-size: 14px; }
  .podrostki #pervaya-knopka { margin-top: 14px; }
  .podrostki .ustroeno li { font-size: 16px; }
  .podrostki .blok-sred { padding-top: 8px; padding-bottom: 8px; }
  .podrostki .pokazhite .k4 { width: 100%; }
  .cookie-bar { display: flex !important; flex-direction: row !important; justify-content: space-between !important; text-align: left !important; }
  .cookie-bar > div:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
  .cookie-bar .cookie-podrobno { display: none; }
}

/* Компьютер: ширина как у всего сайта (1180), блоки в две колонки */
.podrostki { --podl: 1180px; --col: 1180px; }
@media (min-width: 761px) and (max-width: 1000px) {
  .podrostki .oblozhka { max-height: 240px; overflow: hidden; }
  .podrostki .oblozhka img { height: 240px; width: 100%; object-fit: cover; }
  .podrostki .blizh-plashka { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
}
@media (min-width: 1001px) {
  /* Первый экран: текст слева, фото справа */
  .podrostki .p-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: stretch; }
  .podrostki .p-hero > .oblozhka { order: 2; margin: calc(var(--podl-pole) * -1) calc(var(--podl-pole) * -1) calc(var(--podl-pole) * -1) 0 !important; }
  .podrostki .p-hero > .oblozhka picture, .podrostki .p-hero > .oblozhka img { display: block; height: 100% !important; width: 100%; object-fit: cover; border-radius: 0 20px 20px 0; }
  .podrostki .p-hero .usloviya { order: 1; margin-top: 0; padding: 8px 0; }

  /* «Что подросток делает» | «Как всё устроено» + ведущая */
  .podrostki .p-dva { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
  .podrostki .p-dva > .blok, .podrostki .p-prava > .blok { margin-top: 0; }
  .podrostki .p-prava .blok-sred { margin-top: 40px; }

  /* Четыре карточки в один ряд, без листалки */
  .podrostki .lenta-upr, .podrostki .lenta-polzunok { display: none; }
  .podrostki .lenta-obertka { margin-top: 32px; }
  .podrostki .lenta-kart { overflow: visible; -webkit-mask-image: none; mask-image: none; max-width: calc(var(--podl) + 80px); margin: 0 auto; padding: 0 40px; }
  .podrostki .lenta-kart .lenta-ryad { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px; padding: 0; width: auto !important; transform: none !important; }
  .podrostki .lenta-kart .lenta-el { width: auto !important; min-width: 0 !important; max-width: none !important; flex: none !important; cursor: default; }
  .podrostki .lenta-kart .lenta-ryad > .lenta-el:nth-child(n+5) { display: none; }
  .podrostki .pokazhite { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
  .podrostki .pokazhite .k4 { margin-top: 0; flex: none; }

  /* Вопросы: заголовок и «для класса» слева, список справа */
  .podrostki .p-voprosy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: auto 1fr; column-gap: 64px; }
  .podrostki .p-voprosy #voprosy { display: contents; }
  .podrostki .p-voprosy .shapka-bloka { grid-column: 1; grid-row: 1; }
  .podrostki .p-voprosy .voprosy { grid-column: 2; grid-row: 1 / span 2; }
  .podrostki .p-voprosy .klass-stroka { grid-column: 1; grid-row: 2; align-self: start; flex-direction: column; align-items: flex-start; margin-top: 32px; padding: 0; }
}