/* Общие стили карточек ситуаций, предпросмотра и подробных статей. */
.service.service-entry { position: relative; border-color: var(--accent); transition: transform .2s, box-shadow .2s; }
.service-entry:hover, .service-entry:focus-within { transform: translateY(-4px); box-shadow: 0 12px 32px #0002; }
.service-entry .service-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 22px; color: var(--accent); font-size: 14px; font-weight: 750; text-decoration: underline; text-underline-offset: 4px; }
.service-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.service-link:focus-visible { outline: none; }
.service-entry:has(.service-link:focus-visible) { outline: 3px solid var(--accent); outline-offset: 5px; }
.service-link span { font-size: 25px; text-decoration: none; }
.service-preview { position: fixed; inset: 0; margin: auto; width: min(920px, calc(100% - 32px)); max-width: none; height: calc(100dvh - 48px); max-height: none; padding: 0; border: 1px solid var(--line); border-radius: 26px; background: var(--bg); color: var(--text); overflow: auto; transform-origin: top left; box-shadow: 0 28px 100px #0006; }
.service-preview::backdrop { background: #0009; }
body:has(.service-preview[open]) { overflow: hidden; }
.preview-bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 16px; justify-content: space-between; padding: 14px 24px; background: var(--panel); border-bottom: 1px solid var(--line); }
.preview-bar p { margin: 0; font-size: 12px; color: var(--muted); }
.preview-close { flex: 0 0 40px; height: 40px; border-radius: 50%; background: var(--panel2); color: var(--text); font-size: 24px; }
.service-preview a:focus-visible, .preview-close:focus-visible, .detail-nav a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.detail-nav { max-width: 1000px; margin: auto; display: flex; justify-content: space-between; gap: 20px; padding: 24px; font-size: 14px; }
.detail-nav a { text-decoration: underline; text-underline-offset: 4px; }
.service-detail { max-width: 820px; margin: auto; padding: 48px 32px; }
.detail-eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 750; }
.service-detail h1 { max-width: none; font-size: clamp(34px, 5vw, 64px); line-height: 1.05; margin: 20px 0 24px; }
.detail-lead { font-size: clamp(18px, 2.5vw, 23px); color: var(--muted); }
.detail-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0; }
.detail-facts span { padding: 8px 12px; border: 1px solid var(--line); border-radius: 30px; font-size: 12px; }
.service-detail section { padding: 28px 0; border-top: 1px solid var(--line); }
.service-detail h2 { font-size: clamp(23px, 3vw, 30px); letter-spacing: -.025em; line-height: 1.2; margin: 0 0 16px; }
.service-detail section p { color: var(--muted); line-height: 1.75; }
.service-detail .detail-next { margin-top: 20px; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.detail-next h2 { margin-top: 16px; }
@media(max-width:620px) { .service-preview { width: calc(100% - 16px); height: calc(100dvh - 16px); border-radius: 18px; } .service-detail { padding: 30px 20px; } .preview-bar { padding: 10px 16px; } .detail-nav { padding: 20px; flex-wrap: wrap; } .service-detail .detail-next { padding: 22px; } }
@media(prefers-reduced-motion:reduce) { .service-entry, .service-entry:hover, .service-entry:focus-within { transition: none; transform: none; } }
/* Ситуации: общие строки удерживают ссылки на одной высоте без фиксированной высоты текста. */
#services .service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
#services .service-entry { display: grid; grid-template-rows: auto auto 1fr auto; gap: 0; min-width: 0; padding: 26px 22px; border-color: var(--line); border-radius: 0; background: transparent; box-shadow: none; }
#services .service-entry:hover, #services .service-entry:focus-within { transform: none; background: var(--panel); }
#services .service-entry .num { font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: .12em; }
#services .service-entry h3 { margin: 22px 0 12px; font-size: 20px; line-height: 1.25; text-wrap: balance; }
#services .service-entry p { font-size: 15px; line-height: 1.65; }
#services .service-entry .service-link { margin-top: 0; padding-top: 24px; text-decoration: none; font-size: 13px; color: var(--text); }
#services .service-link span { display: inline-block; color: var(--accent); }
#services .service-link:hover { color: var(--accent); }
#services .service-entry:has(.service-link:focus-visible) { outline-offset: -3px; }
@supports (grid-template-rows: subgrid) {
  #services .service-entry { grid-row: span 4; grid-template-rows: subgrid; }
}
/* Короткий заголовок слева, связный текст справа; на телефоне порядок остаётся линейным. */
.service-detail { max-width: 1060px; padding: 56px 32px 64px; }
.service-detail h1 { max-width: 900px; text-wrap: balance; }
.service-detail .detail-lead { max-width: 760px; line-height: 1.6; }
.service-detail > section:not(.detail-next) { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.45fr); column-gap: 56px; padding: 36px 0; }
.service-detail > section:not(.detail-next) h2 { grid-column: 1; grid-row: 1 / span 8; max-width: 24ch; font-size: clamp(22px, 2.4vw, 28px); }
.service-detail > section:not(.detail-next) p { grid-column: 2; margin: 0 0 16px; font-size: 16px; }
.service-detail > section:not(.detail-next) p:last-child { margin-bottom: 0; }
/* Несколько подзаголовков в одной секции читаются последовательно, без общей ячейки grid. */
.service-detail > section:not(.detail-next):has(> h2 ~ h2) { display: block; }
.service-detail > section:not(.detail-next):has(> h2 ~ h2) h2 { max-width: none; margin-top: 32px; }
.service-detail > section:not(.detail-next):has(> h2 ~ h2) h2:first-child { margin-top: 0; }
.service-detail .detail-next { padding: 32px; border-radius: 16px; }
.detail-next .btn { max-width: 100%; white-space: normal; text-align: center; }
@media(max-width:1050px) { #services .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(max-width:620px) {
  #services .service-grid { grid-template-columns: minmax(0, 1fr); }
  #services .service-entry { padding: 24px 20px; }
  #services .service-entry h3 { margin-top: 14px; }
  #services .service-entry .service-link { padding-top: 18px; }
  .service-detail { padding: 32px 20px 44px; }
  .service-detail > section:not(.detail-next) { display: block; padding: 26px 0; }
  .service-detail > section:not(.detail-next) h2 { max-width: none; margin-bottom: 16px; }
  .service-detail .detail-next { padding: 22px; }
  .detail-facts { gap: 8px; margin-block: 24px; }
}