* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --green:      #1f7a4d;
    --green-dark: #145c39;
    --green-lt:   #e8f5ee;
    --accent:     #2f9e63;
    --bg:         #f6f9f7;
    --card-bg:    #ffffff;
    --border:     #e2e8e3;
    --text:       #182420;
    --muted:      #6b7a72;
    --light:      #eef4f0;
    --shadow:     0 2px 10px rgba(20,60,40,0.06);
    --shadow-hover: 0 10px 28px rgba(20,60,40,0.13);
    --radius: 14px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 20px;
    /* viewport-fit=cover (base.html): на iPhone с вырезом в альбомной
       ориентации текст не заходит под вырез и скруглённые углы экрана */
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
}

a { color: inherit; }

/* ── HEADER ── */
header {
    background: #ffffff;
    color: var(--text);
    box-shadow: 0 1px 0 var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    /* сайт с экрана «Домой» на iPhone: шапка не под строкой состояния */
    padding-top: env(safe-area-inset-top);
}

/* На карточке человека шапка не липнет: она заметно съедает высоту
   (на телефоне название переносится на две строки), а на этой странице
   важно само фото. Видна вверху, при прокрутке уезжает вместе со страницей. */
body.page-person header { position: static; }

.header-top {
    padding: 14px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
}

.brand-mark {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    color: var(--green);
}

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }

.brand-title {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--text);
}

.brand-subtitle {
    font-size: 0.68rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lang-toggle {
    display: inline-flex;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    background: var(--light);
}

.lang-toggle button {
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 7px 14px;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: background 0.15s, color 0.15s;
}

.lang-toggle button.active {
    background: var(--green);
    color: #fff;
}

.menu-wrap { position: relative; }

.menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.menu-toggle:hover, .menu-toggle[aria-expanded="true"] {
    border-color: var(--green);
    background: var(--green-lt);
}

.site-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-hover);
    padding: 8px;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    z-index: 50;
    /* Телефон боком: меню выше экрана, а шапка липкая — прокрутка страницы
       до нижних пунктов не довела бы. Не выше окна, остальное — прокруткой */
    max-height: calc(100vh - 90px);
    max-height: calc(100dvh - 90px - env(safe-area-inset-top, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.site-menu[hidden] { display: none; }

.site-menu a {
    flex-shrink: 0;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    white-space: nowrap;
}

.site-menu a:hover { background: var(--green-lt); color: var(--green-dark); }

/* ── MAIN ── */
main { padding: 0 0 48px; }

/* ── HERO ── */
.hero {
    background: linear-gradient(180deg, var(--green-lt) 0%, var(--bg) 100%);
    padding: 0 0 32px;
    margin-bottom: 32px;
}

.hero-photo {
    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    height: 700px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dfeae3;
    border-radius: 0 0 32px 32px;
}

/* Фоновая мозаика: колонки фото медленно ползут в разные стороны */
/* Перед каждым inset — те же отступы сторонами: inset нет в Safari до 14.1 и
   Chrome до 87, без них слой съезжал или схлопывался */
.mosaic {
    position: absolute;
    top: -90px; right: -80px; bottom: -90px; left: -80px;
    inset: -90px -80px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 14px;
    transform: rotate(-6deg) scale(1.08);
}

.mcol {
    overflow: hidden;
    animation: mosaicIn 0.9s ease both;
    animation-delay: calc(var(--i) * 80ms);
}

.mtrack {
    display: flex;
    flex-direction: column;
    gap: 14px;
    will-change: transform;
    animation: mosaicDrift 90s linear infinite;
    animation-delay: calc(var(--i) * -11s);
}

.mcol:nth-child(even) .mtrack { animation-direction: reverse; animation-duration: 110s; }
.mcol:nth-child(3n) .mtrack { animation-duration: 130s; }
.mcol:nth-child(5n) .mtrack { animation-duration: 75s; }

.mtile {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    flex: none;
    object-fit: cover;
    border-radius: 14px;
    background: #cfe0d6;
    box-shadow: 0 6px 16px rgba(10,40,25,0.18);
}

/* Смещение на половину набора плюс половина зазора — цикл без шва */
@keyframes mosaicDrift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, calc(-50% - 7px), 0); }
}

@keyframes mosaicIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mtrack, .mcol { animation: none; }
}

/* Светлая вуаль: мозаика видна по краям, а в центре читается текст */
.mveil {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    background: radial-gradient(ellipse 50% 60% at 50% 50%,
        rgba(246,249,247,0.985) 0, rgba(246,249,247,0.94) 58%, rgba(246,249,247,0.42) 100%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 1;
    width: min(800px, calc(100% - 40px));
    text-align: center;
}

.hero-eyebrow {
    display: inline-block;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 99px;
    padding: 6px 16px;
    font-size: 0.76rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--green-dark);
    font-weight: 700;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(20,60,40,0.08);
}

.hero-title {
    font-size: 2.85rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
    letter-spacing: -0.7px;
    margin-bottom: 12px;
}

.hero-title span { color: var(--green); }

.hero-subtitle {
    color: var(--muted);
    font-size: 1.1rem;
    margin: 0 auto 26px;
    max-width: 52ch;
}

.hero-search-form {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(20,60,40,0.14);
    padding: 6px;
    margin: 0 auto;
    max-width: 660px;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.hero-search-form:focus-within {
    border-color: var(--green);
    box-shadow: 0 10px 28px rgba(31,122,77,0.2);
}

.hero-search-icon { margin-left: 14px; color: var(--muted); flex: none; }

.hero-search-form input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 15px 14px;
    font-size: 1.05rem;
    color: var(--text);
    min-width: 0;
}

.hero-search-form .btn-search {
    flex-shrink: 0;
    padding: 15px 32px;
    border-radius: 11px;
}

.hero-stats {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}

.hero-stats li {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 99px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(20,60,40,0.08);
    color: var(--green-dark);
    font-size: 0.88rem;
}

.hero-stats b { font-size: 1.1rem; font-weight: 800; color: var(--green-dark); }

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

.hero-actions .btn-advanced-toggle { margin-top: 0; }
a.btn-advanced-toggle { text-decoration: none; }

/* ── КАРТА НА ГЛАВНОЙ ── */
.home-map { padding: 44px 0 4px; scroll-margin-top: 80px; }

.home-map-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 30px;
    align-items: center;
}

.home-map-view .cmap { box-shadow: 0 14px 40px rgba(20,60,40,0.14); border: 1px solid var(--border); }

.home-map-side h2 { font-size: 1.5rem; letter-spacing: -0.3px; margin-bottom: 8px; }
.home-map-lead { color: var(--muted); margin-bottom: 18px; max-width: 46ch; }
.home-map-side .cmap-pills { margin-top: 0; margin-bottom: 22px; }
.home-map-open { text-align: center; }

@media (max-width: 860px) {
    .home-map-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ── КАК ЭТО РАБОТАЕТ ── */
.how { padding: 48px 0 4px; }
.how h2 { font-size: 1.5rem; letter-spacing: -0.3px; margin-bottom: 6px; }
.how-lead { color: var(--muted); margin-bottom: 22px; max-width: 60ch; }

.how-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.how-step {
    display: grid;
    gap: 8px;
    align-content: start;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px;
}

.how-step b { font-size: 1.02rem; }
.how-step > span:last-child { color: var(--muted); font-size: 0.9rem; }

.how-n {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-weight: 800;
    display: grid;
    place-items: center;
}

/* ── SEARCH ── */
.search-section {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px 22px;
    box-shadow: var(--shadow);
    margin-bottom: 0;
}

.search-section h2 {
    font-size: 1rem;
    margin-bottom: 14px;
    color: var(--text);
    font-weight: 700;
}

.search-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.field-group label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.field-group input {
    width: 100%;
    padding: 10px 13px;
    border: 1.5px solid var(--border);
    border-radius: 9px;
    font-size: 0.95rem;
    outline: none;
    background: #fbfdfb;
    color: var(--text);
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}

/* Остальное оформление выбора сектора — в style самого <select> */
.field-group select { font-size: 0.95rem; }

.field-group input:focus {
    border-color: var(--green);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(31,122,77,0.12);
}

.search-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-search {
    background: var(--green);
    color: #fff;
    border: none;
    padding: 11px 32px;
    border-radius: 9px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s, transform 0.1s;
    text-decoration: none;
    display: inline-block;
    letter-spacing: 0.2px;
}

.btn-search:hover { background: var(--green-dark); transform: translateY(-1px); }
.btn-search:active { transform: translateY(0); }

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--green-dark);
    border: 1.5px solid var(--border);
    padding: 9px 18px;
    border-radius: 9px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}

.btn-outline:hover { border-color: var(--green); background: var(--green-lt); }

/* ── ALPHABET ── */
.alphabet-filter {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.filter-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: block;
    margin-bottom: 10px;
}

.letters {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.letter {
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background: var(--light);
    border: 1.5px solid transparent;
    border-radius: 7px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.letter:hover {
    background: var(--green-lt);
    border-color: var(--green);
    color: var(--green-dark);
}

.letter.active {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

.btn-advanced-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    background: #fff;
    color: var(--green-dark);
    border: 1.5px solid var(--green);
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.btn-advanced-toggle:hover { background: var(--green-lt); }

.btn-advanced-toggle .chevron { transition: transform 0.2s; flex-shrink: 0; }

.btn-advanced-toggle[aria-expanded="true"] {
    background: var(--green);
    color: #fff;
}

.btn-advanced-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }


.search-alpha-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
    gap: 20px;
    margin: 28px 0 8px;
}

.search-alpha-grid[hidden] { display: none; }

/* main.js прокручивает к блоку — заголовок не должен уйти под липкую шапку */
#advanced-search { scroll-margin-top: 100px; }

/* ── SECTION HEADER (homepage previews) ── */
.section-block { margin: 36px 0; }

.section-block-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
    flex-wrap: wrap;
}

.section-block-header h2 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
}

.section-block-header .section-sub {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 500;
    margin-left: 8px;
}

/* ── RESULTS ── */
.results-section { background: transparent; padding: 0; }

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}

.results-header h1, .results-header h2 {
    font-size: 1.05rem;
    color: var(--text);
    font-weight: 700;
}

.results-count {
    font-size: 0.8rem;
    color: var(--green-dark);
    background: var(--green-lt);
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 700;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
}

/* Превью на главной — всегда ровно PREVIEW_COUNT карточек, поэтому
   фиксируем колонки, чтобы неполная последняя строка не оставляла
   пустых ячеек (auto-fit не умеет "перетасовывать" карточки между
   строками, только схлопывать полностью пустые колонки). */
.results-grid-preview {
    grid-template-columns: repeat(4, 1fr);
}

/* ── PERSON CARD ── */
.person-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.15s, border-color 0.15s;
    background: var(--card-bg);
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(20,60,40,0.05);
}

.person-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
    border-color: var(--green);
}

.person-photo {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--light);
}

.person-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.3s;
}

.person-card:hover .person-photo img { transform: scale(1.04); }

.no-photo {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #a9b5ae;
    font-size: 0.76rem;
    gap: 6px;
    text-align: center;
}

.no-photo::before {
    content: '';
    width: 30px;
    height: 30px;
    background: #d5e2da;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 2.3-5 5 2.3 5 5 5zm0 2c-3.3 0-10 1.7-10 5v3h20v-3c0-3.3-6.7-5-10-5z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 2.3-5 5 2.3 5 5 5zm0 2c-3.3 0-10 1.7-10 5v3h20v-3c0-3.3-6.7-5-10-5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.person-info {
    padding: 12px 14px 14px;
    border-top: 1px solid var(--border);
}

.person-name {
    font-weight: 700;
    font-size: 0.88rem;
    margin-bottom: 5px;
    color: var(--text);
    line-height: 1.35;
}

.person-dates {
    font-size: 0.78rem;
    color: var(--muted);
}

.person-sector {
    display: inline-block;
    font-size: 0.68rem;
    color: var(--green-dark);
    background: var(--green-lt);
    margin-top: 7px;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* ── NO RESULTS ── */
.no-results {
    text-align: center;
    padding: 48px 20px;
    color: var(--muted);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.no-results a {
    color: var(--green-dark);
    display: inline-block;
    margin-top: 14px;
    font-weight: 700;
}

/* ── PERSON DETAIL PAGE ── */
.breadcrumb {
    font-size: 0.82rem;
    color: var(--muted);
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.breadcrumb a {
    color: var(--green-dark);
    text-decoration: none;
    font-weight: 600;
}

.breadcrumb a:hover { text-decoration: underline; }

.breadcrumb span { color: var(--muted); }

/* ── КАРТОЧКА ЗАХОРОНЕНИЯ ──
   Две колонки: слева фото в арке, справа имя, сектор, даты, место на схеме
   и соседние могилы. На телефоне — одна колонка, фото первым. */
.page-person {
    --g-ink: #143826;
    --g-badge: #0f3a25;
    --g-badge-text: #b9e57f;
    --g-lime: #eef6df;
    --g-lime-text: #5e9130;
    --g-line: #e3eadf;
    --g-pin: #d4452f;
    --g-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

.grave {
    display: grid;
    grid-template-columns: 240px minmax(0, 640px);
    gap: 28px 56px;
    justify-content: center;
    align-items: start;
    padding-top: 6px;
}

.grave-photo-col { position: sticky; top: 24px; }

/* Фото — та же рамка, что была на карточке раньше (дизайн фото не меняем) */
.person-card-photo-wrap {
    width: 240px;
    aspect-ratio: 3 / 4;
    border: 3px solid var(--green);
    margin: 0 auto 24px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(20,60,40,0.15);
}

.person-card-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.person-card-no-photo {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #a9b5ae;
    gap: 8px;
    font-size: 0.9rem;
    background: var(--light);
}

.grave-main { min-width: 0; }

.grave-name {
    font-family: var(--g-serif);
    font-weight: 600;
    font-size: clamp(2.1rem, 1.3rem + 2.3vw, 3.3rem);
    line-height: 1.06;
    color: var(--g-ink);
    margin: 0 0 16px;
    overflow-wrap: break-word;
}

.grave-sector {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    background: var(--g-badge);
    color: var(--g-badge-text);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 8px 18px 7px;
    border-radius: 999px;
}
/* «Сектор Д» / «Д сектор»: пустое слово (до или после буквы) не занимает места */
.grave-sector > span:empty { display: none; }

/* Годы жизни — одной строкой: «ГОДЫ ЖИЗНИ  01.01.1950 – 02.02.2020» */
.grave-dates {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    margin-top: 20px;
    background: #fff;
    border: 1.5px solid var(--g-line);
    border-radius: 16px;
    padding: 12px 20px;
    box-shadow: var(--shadow);
}

.grave-label {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.3;
}

/* Даты — рубленым шрифтом сайта, как плашка сектора: цифры одной высоты читаются лучше */
.grave-date-value {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    font-variant-numeric: lining-nums tabular-nums;
    line-height: 1.2;
    color: var(--g-ink);
}

.grave-h2 {
    font-family: var(--g-serif);
    font-size: 1.65rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--g-ink);
    margin-bottom: 8px;
}

/* Место захоронения: схема, кнопки */
.grave-place {
    margin-top: 22px;
    background: #fff;
    border: 1.5px solid var(--g-line);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.grave-place-head { padding: 18px 24px 16px; }

.grave-coords-none { color: var(--muted); font-size: 0.92rem; }

.grave-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 18px 24px 20px;
}

.grave-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    padding: 13px 26px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.1s;
}

.grave-btn:active { transform: translateY(1px); }
.grave-btn--primary { background: var(--green); color: #fff; }
.grave-btn--primary:hover { background: var(--green-dark); }
.grave-btn--outline { background: #fff; color: var(--green-dark); border-color: var(--green); }
.grave-btn--outline:hover, .grave-btn--outline.active { background: var(--green-lt); }
.grave-btn--small { padding: 9px 18px; font-size: 0.88rem; }

.grave-cleanup { margin-top: 18px; }

/* Схема в карточке. Окно (viewBox) JS подгоняет под пропорции блока */
.gmap-view {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #e3ebe0;
    border-top: 1px solid var(--g-line);
    border-bottom: 1px solid var(--g-line);
}

.gmap-view > .gmap-svg { position: absolute; top: 0; left: 0; inset: 0; width: 100%; height: 100%; }

/* Без aspect-ratio (Safari до 15, Chrome до 88) у блока не было бы высоты —
   схема в карточке пропадала. Высоту даёт отступ в % от ширины */
@supports not (aspect-ratio: 1) {
    .gmap-view { height: 0; padding-top: 66.667%; }
    @media (max-width: 768px) {
        .gmap-view { padding-top: 75%; }
    }
}

.gmap-svg { display: block; -webkit-user-select: none; user-select: none; }

.gmap-svg .gmap-dim { fill: rgba(14, 40, 26, 0.34); pointer-events: none; }
.gmap-svg .gmap-sector-glow,
.gmap-svg .gmap-sector {
    fill: none;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}
.gmap-svg .gmap-sector-glow { stroke: rgba(20, 92, 57, 0.6); stroke-width: 9; }
.gmap-svg .gmap-sector { stroke: #fff; stroke-width: 3; }
/* Буква сектора, перенесённая из-под метки (app.sector_label_spot):
   размер и цвет — как у букв на картинке схемы */
.gmap-svg .gmap-sector-label {
    font: 700 36px Arial, Helvetica, sans-serif; /* высота заглавной ≈ 27 px схемы */
    fill: #221700;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

.gmap-svg .gate rect { fill: #145c39; stroke: #fff; stroke-width: 2; transition: fill 0.15s; }
.gmap-svg .gate text {
    font: 700 21px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    fill: #fff;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}
/* Safari (WebKit) не наследует dominant-baseline в <tspan>: переводимое
   «Вход» вставало выше номера */
.gmap-svg .gate tspan,
.cmap-svg .gate tspan { dominant-baseline: central; }
.gmap-svg .gate .gate-arrow { font-size: 26px; }
.gmap-svg .gmap-gate { cursor: pointer; outline: none; transition: opacity 0.2s, visibility 0.2s; }
/* плашка, которую режет край окна карточки (grave-map.js → clipChips) */
.gmap-svg .gmap-gate.is-clipped { opacity: 0; visibility: hidden; pointer-events: none; }
.gmap-svg .gmap-gate:hover rect,
.gmap-svg .gmap-gate:focus-visible rect { fill: #1f7a4d; }
.gmap-svg .gmap-gate.active rect { fill: var(--g-pin); }

.gmap-svg .gmap-route-casing,
.gmap-svg .gmap-route-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.gmap-svg .gmap-route-casing { stroke: #fff; opacity: 0.9; }
.gmap-svg .gmap-route-line { stroke: var(--g-pin); }
.gmap-svg .gmap-route-start circle { fill: #fff; stroke: var(--g-pin); stroke-width: 3.5; }

/* Метка могилы: «капля» острием в точку, пульсирующий круг под ней */
.gmap-pin-body { fill: var(--g-pin); stroke: #fff; stroke-width: 2.2; }
.gmap-pin-dot { fill: #fff; }
.gmap-pin-shadow { fill: rgba(0, 0, 0, 0.28); }
.gmap-pin-pulse {
    fill: var(--g-pin);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: gmapPulse 2.2s ease-out infinite;
}

@keyframes gmapPulse {
    0%   { opacity: 0.5; transform: scale(0.3); }
    100% { opacity: 0;   transform: scale(1.7); }
}

/* Соседи — в лупе и на полноэкранной схеме */

/* Лупа «Вблизи»: подпись шапкой, под ней квадрат с точками; угол выбирает
   JS, чтобы не закрыть метку могилы */
/* с маршрутом лупе не нашлось угла — прячем (grave-map.js → placeLens) */



/* Выбор входа для маршрута */
.groute { padding: 14px 24px 0; }

.groute-label {
    display: block;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}

.groute-gates { display: flex; flex-wrap: wrap; gap: 8px; }

.groute-gate {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--green-dark);
    background: #fff;
    border: 1.5px solid var(--g-line);
    border-radius: 999px;
    padding: 7px 14px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.groute-gate small { font-size: 0.72rem; font-weight: 600; color: var(--green); }
.groute-gate:hover { border-color: var(--green); background: var(--green-lt); }
.groute-gate.active { background: var(--g-badge); border-color: var(--g-badge); color: #fff; }
.groute-gate.active small { color: var(--g-badge-text); }

.groute-note { margin-top: 10px; font-size: 0.8rem; color: var(--muted); }

/* Соседние могилы */
.grave-nbrs { margin-top: 34px; }
.grave-nbrs .grave-h2 { margin-bottom: 14px; }

/* Две колонки, пока карточка шире 280px (ФИО тогда ≈ 180px — длинное
   татарское отчество помещается целиком), иначе одна: так и при узкой правой
   колонке чуть шире 1000px ФИО не рвутся посреди слова */
.grave-nbrs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(max(280px, calc((100% - 12px) / 2)), 1fr));
    gap: 12px;
}

.grave-nbr {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 12px;
    background: #fff;
    border: 1.5px solid var(--g-line);
    border-radius: 18px;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

a.grave-nbr:hover, a.grave-nbr.on, a.grave-nbr:focus-visible {
    border-color: var(--green);
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
    outline: none;
}

.grave-nbr-thumb {
    position: relative;
    width: 60px;
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    overflow: hidden;
    background: var(--light);
}

/* Значок «нет фото» лежит под снимком: есть фото — его не видно */
.grave-nbr-thumb::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    margin: auto;
    width: 26px;
    height: 26px;
    background: #d5e2da;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 2.3-5 5 2.3 5 5 5zm0 2c-3.3 0-10 1.7-10 5v3h20v-3c0-3.3-6.7-5-10-5z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 2.3-5 5 2.3 5 5 5zm0 2c-3.3 0-10 1.7-10 5v3h20v-3c0-3.3-6.7-5-10-5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.grave-nbr-thumb img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.grave-nbr-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.grave-nbr .grave-label { color: var(--green); font-weight: 700; font-size: 0.7rem; }
.grave-nbr-name { font-size: 0.95rem; font-weight: 700; line-height: 1.3; color: var(--text); overflow-wrap: break-word; }
.grave-nbr-dates { font-size: 0.8rem; color: var(--muted); }

.grave-nbr-dist {
    align-self: flex-start;
    margin-top: 2px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--green-lt);
    color: var(--green-dark);
    font-size: 0.74rem;
    font-weight: 700;
}

.grave-nbr--empty { background: transparent; border-style: dashed; }
.grave-nbr--empty .grave-nbr-thumb { opacity: 0.55; }
.grave-nbr-none { color: var(--muted); font-size: 0.9rem; }


/* Вся схема на весь экран */
.gmap-full {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background: #e9efe6;
}
.gmap-full[hidden] { display: none; }

.gmap-full-bar,
.gmap-full-foot {
    display: flex;
    align-items: center;
    gap: 10px 16px;
    padding: 10px 16px;
    background: #fff;
}

.gmap-full-bar {
    justify-content: space-between;
    padding-top: max(10px, env(safe-area-inset-top));
    border-bottom: 1px solid var(--border);
}

.gmap-full-foot {
    flex-wrap: wrap;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
}

.gmap-full-title { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.gmap-full-title b { font-family: var(--g-serif); font-size: 1.35rem; font-weight: 600; color: var(--g-ink); }
.gmap-full-title > span { font-size: 0.84rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gmap-full-tools { display: flex; gap: 8px; flex: none; }

.gmap-tool {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--border);
    border-radius: 50%;
    background: #fff;
    color: var(--green-dark);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}
.gmap-tool:hover { border-color: var(--green); background: var(--green-lt); }
.gmap-tool:disabled { opacity: 0.4; cursor: default; }
.gmap-tool--close, .gmap-tool--close:hover { background: var(--g-badge); border-color: var(--g-badge); color: #fff; }

/* Прокручиваемое окно: margin: auto у схемы центрирует её, пока она меньше
   окна, и не обрезает край, когда больше */
.gmap-full-view {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: auto;
    overscroll-behavior: contain;
    cursor: grab;
}
.gmap-full-view.is-dragging { cursor: grabbing; }
.gmap-full-view > .gmap-svg { flex: none; margin: auto; }

.gmap-full-foot .groute:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 0;
}
.gmap-full-foot .groute-label { margin: 0; }

@media (prefers-reduced-motion: reduce) {
    .gmap-pin-pulse { animation: none; }
}

/* Планшет: две колонки ещё помещаются, но правая узкая — фото уже, соседи
   в одну колонку (иначе ФИО рвутся посреди слова), лупа поменьше */
@media (max-width: 1000px) {
    .grave { grid-template-columns: 240px minmax(0, 1fr); gap: 24px 32px; }
    .grave-nbrs-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
    .grave { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 0; }
    .grave-photo-col { position: static; }
    .person-card-photo-wrap { width: min(220px, 78vw); margin-bottom: 0; }
    .grave-name { font-size: 2.25rem; }
    .grave-dates { padding: 10px 16px; margin-top: 16px; }
    .grave-date-value { font-size: 1.1rem; }
    .grave-place-head { padding: 16px 16px 14px; }
    .gmap-view { aspect-ratio: 4 / 3; }
    .groute { padding: 14px 16px 0; }
    .grave-actions { flex-direction: column; align-items: stretch; padding: 16px; }
    .grave-btn { width: 100%; }
    .grave-btn--small { width: auto; }
    .grave-nbrs { margin-top: 28px; }
    .grave-nbrs-grid { grid-template-columns: minmax(0, 1fr); }
    .gmap-full-bar, .gmap-full-foot { padding-left: 12px; padding-right: 12px; }
    /* Входы в нижней панели — одной строкой с прокруткой, чтобы панель не
       съедала полэкрана */
    .gmap-full-foot { gap: 8px 10px; }
    .gmap-full-foot .groute:not([hidden]) { flex-wrap: nowrap; min-width: 0; max-width: 100%; }
    .gmap-full-foot .groute-label { display: none; }
    .gmap-full-foot .groute-gates { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .gmap-full-foot .groute-gates::-webkit-scrollbar { display: none; }
    .gmap-full-foot .groute-gate { flex: none; padding: 6px 12px; font-size: 0.84rem; }
    .gmap-full-title b { font-size: 1.15rem; }
    .gmap-tool { width: 40px; height: 40px; }
}


.back-link { margin-top: 18px; }
.back-link a {
    color: var(--muted);
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 0;
    font-weight: 600;
}
.back-link a:hover { color: var(--green-dark); }

/* ── УСЛУГИ И ЦЕНЫ ── */
.services-prefill-note {
    background: var(--green-lt);
    border: 1px solid var(--green);
    border-radius: 9px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    color: var(--text);
}

.services-prefill-note a { color: var(--green-dark); margin-left: 6px; }

.services-layout {
    display: grid;
    /* minmax(0, …): широкая таблица прокручивается в своей обёртке,
       а не растягивает страницу на телефоне */
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.services-nav {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 90px;
}

.services-nav-link {
    padding: 11px 14px;
    border-radius: 9px;
    text-decoration: none;
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
}

.services-nav-link:hover { background: var(--light); color: var(--green-dark); }

.services-nav-link.active {
    background: var(--green);
    color: #fff;
}

.services-content {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px;
}

.services-heading {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 16px;
}

.services-table-wrap { overflow-x: auto; }

.services-table {
    width: 100%;
    border-collapse: collapse;
}

.services-table th {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--muted);
    padding: 10px 12px;
    background: var(--light);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.services-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    font-size: 0.95rem;
}

.services-table tr:last-child td { border-bottom: none; }
.services-table tbody tr:hover { background: #fbfdfb; }

.services-table .price-col { text-align: right; white-space: nowrap; }
.services-table .unit-col { color: var(--muted); white-space: nowrap; }
/* Цены ещё нет (стартовая заглушка) — «по запросу»; на узком экране
   переносится на две строки, чтобы таблица не вылезала за край */
.services-table .price-ask { color: var(--muted); white-space: normal; }

.services-note {
    font-size: 0.82rem;
    color: var(--muted);
    margin-top: 16px;
    line-height: 1.5;
}

.services-table .pick-col { width: 44px; }
.services-table .unit-inline { display: none; }
.services-table .qty-head, .services-table .qty-cell { width: 92px; text-align: center; }

.qty-input {
    width: 72px;
    padding: 6px 8px;
    border: 1.5px solid var(--border);
    border-radius: 7px;
    font-size: 0.9rem;
    font-family: inherit;
    text-align: center;
    background: #fbfdfb;
    color: var(--text);
    outline: none;
}

.qty-input:focus { border-color: var(--green); background: #fff; }

.service-pick { width: 18px; height: 18px; cursor: pointer; accent-color: var(--green); }
.services-table label { cursor: pointer; }

/* ── ЗАЯВКА НА УСЛУГИ ── */
.order-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    margin-top: 20px;
    margin-bottom: 90px;
    scroll-margin-top: 100px; /* «Оформить заявку»: заголовок не под липкой шапкой */
}

.order-card h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 16px; }

.order-summary {
    background: var(--light);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.order-line {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: 0.9rem;
    padding: 5px 0;
}

.order-total {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 1.02rem;
}

.order-warning {
    font-size: 0.82rem;
    color: var(--muted);
    background: #fdf6e3;
    border: 1px solid #ecdcb0;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 18px;
    line-height: 1.5;
}

.order-card .btn-search { width: 100%; padding: 13px; margin-top: 6px; }

/* Плашка с выбранным — всегда на виду, пока человек листает категории */
.order-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 90;
    width: min(680px, calc(100% - 32px));
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(20,60,40,0.18);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.order-bar[hidden] { display: none; }

/* Промежуток — отступом, не gap: без flex-gap (Safari до 14.1) число услуг
   и сумма слипались — «Выбрано услуг: 11 000 ₽» */
.order-bar-info {
    display: flex;
    align-items: baseline;
    font-size: 0.92rem;
    color: var(--muted);
}

.order-bar-info b { font-size: 1.1rem; color: var(--text); margin-left: 12px; }
.order-bar .btn-search { padding: 11px 24px; }

/* Пока плашка видна, в конце страницы под неё место — иначе она навсегда
   закрывает низ подвала (класс ставит services.html) */
body.has-order-bar footer {
    padding-bottom: 110px;
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
}

@media (max-width: 640px) {
    .order-bar { flex-direction: column; align-items: stretch; gap: 10px; }
    .order-bar-info { justify-content: space-between; }
    .order-bar .btn-search { width: 100%; }
    .order-card { margin-bottom: 130px; }
    body.has-order-bar footer {
        padding-bottom: 150px;
        padding-bottom: calc(150px + env(safe-area-inset-bottom));
    }
    .services-table .qty-head, .services-table .qty-cell { width: 70px; }
    .qty-input { width: 56px; }
}

@media (max-width: 760px) {
    .services-layout { grid-template-columns: minmax(0, 1fr); }
    .services-nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .services-nav::-webkit-scrollbar { display: none; }
    .services-nav-link { white-space: nowrap; }
    .services-content { padding: 16px; }
    .services-table td, .services-table th { padding: 10px 8px; }
}

/* Телефон: таблица услуг должна помещаться в ширину без прокрутки
   (после блока 760px — иначе его отступы перебили бы эти) */
@media (max-width: 640px) {
    .services-table td, .services-table th { padding: 10px 5px; }
    .services-table .pick-col { width: 22px; }
    .services-table .qty-head, .services-table .qty-cell { width: 52px; }
    .qty-input { width: 50px; padding: 6px 4px; }
    .services-table .price-ask { font-size: 0.82rem; }
    .services-table label { overflow-wrap: anywhere; hyphens: auto; }
    /* Колонку «Единица» прячем, единица — мелко под названием услуги */
    .services-table .unit-head, .services-table .unit-col { display: none; }
    .services-table .unit-inline { display: block; margin-top: 2px; font-size: 0.8rem; color: var(--muted); }
}

/* ── УВЕДОМЛЕНИЯ НА САЙТЕ ── */
.site-flash {
    padding: 13px 18px;
    border-radius: 12px;
    margin: 18px 0 0;
    font-size: 0.92rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.site-flash-success {
    background: var(--green-lt);
    color: var(--green-dark);
    border-color: #bfe3cf;
}

.site-flash-error {
    background: #fdecec;
    color: #b23b3b;
    border-color: #f0cccc;
}

/* ── ВКЛАДКИ НА КАРТОЧКЕ ── */
.person-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 4px 0 18px;
}

.person-tab {
    background: var(--card-bg);
    border: 1.5px solid var(--border);
    color: var(--muted);
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.person-tab:hover { border-color: var(--green); color: var(--green-dark); }

.person-tab.active {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

/* ── ФОРМА ОБРАЩЕНИЯ ── */
.message-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    max-width: 560px;
    margin: 0 auto;
}

.message-card h2 {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.message-about {
    font-size: 0.88rem;
    color: var(--muted);
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.message-field { margin-bottom: 14px; }

.message-field label {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 5px;
}

.message-field input,
.message-field select,
.message-field textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1.5px solid var(--border);
    border-radius: 9px;
    font-size: 0.95rem;
    font-family: inherit;
    background: #fbfdfb;
    color: var(--text);
    outline: none;
    resize: vertical;
}

.message-field input:focus,
.message-field select:focus,
.message-field textarea:focus {
    border-color: var(--green);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(31,122,77,0.12);
}

.message-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

.req-star { color: #b23b3b; }

.message-field.has-error input,
.message-field.has-error textarea {
    border-color: #b23b3b;
    background: #fdecec;
}

.message-field.has-error input:focus,
.message-field.has-error textarea:focus {
    border-color: #b23b3b;
    box-shadow: 0 0 0 3px rgba(178,59,59,0.14);
}

.message-field.has-error label { color: #b23b3b; }

.message-error {
    font-size: 0.78rem;
    color: #b23b3b;
    font-weight: 600;
    margin-top: 5px;
}

/* Поле-ловушка: убрано из потока, но остаётся в форме для ботов */
.message-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.message-card .btn-search { width: 100%; padding: 13px; margin-top: 4px; }

.message-note {
    font-size: 0.8rem;
    color: var(--muted);
    margin-top: 14px;
    line-height: 1.5;
}

/* ── EMPTY / PAGE HEADER ── */
.page-header {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.page-header h1, .page-header h2 { font-size: 1.3rem; color: var(--text); margin-bottom: 6px; font-weight: 800; }
.page-header p  { color: var(--muted); font-size: 0.9rem; }

.empty-section {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 60px 40px;
    text-align: center;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.empty-icon { font-size: 3rem; margin-bottom: 16px; }
.empty-section p { color: var(--muted); margin-bottom: 24px; }

/* ── CEMETERY MAP ── */
.map-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px;
    margin-bottom: 8px;
}

.map-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.map-card-head h3 { font-size: 1.05rem; font-weight: 800; color: var(--text); }

.cemetery-map-svg {
    width: 100%;
    height: auto;
    background: #f4f9f5;
    border-radius: 10px;
    border: 1px solid var(--border);
}

.cemetery-map-svg-k { max-width: 260px; display: block; margin: 0 auto; }

.zone { stroke-width: 1.5; stroke-linejoin: round; }
.zone-a { fill: #cdead9; stroke: var(--green); }
.zone-b { fill: #fbe6b0; stroke: #b5862a; }
.zone-k { fill: #f6d2d2; stroke: #b23b3b; }
.zone-forest { fill: #2f6b45; opacity: 0.55; }
.zone-path-line { stroke: #ffffff; stroke-width: 2; opacity: 0.8; stroke-dasharray: 1 5; stroke-linecap: round; }

.entrance-dot { fill: var(--green-dark); stroke: #fff; stroke-width: 1.5; }

.map-label { font-size: 15px; font-weight: 700; fill: var(--text); }
.map-label-small { font-size: 10px; font-weight: 700; fill: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; }
.map-label-forest { fill: #fff; opacity: 0.9; }

.compass-arrow { stroke: var(--green-dark); stroke-width: 2; }
.compass-arrowhead { fill: var(--green-dark); }
.scale-bar { stroke: var(--muted); stroke-width: 1.5; }

.map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
    color: var(--muted);
    font-weight: 600;
}


/* ── КАРТА КЛАДБИЩА: сектора выпрыгивают при наведении ── */
.cmap { position: relative; border-radius: 14px; overflow: hidden; background: #dfe8e2; }

.cmap-svg { display: block; width: 100%; height: auto; }

.cmap-svg .chip rect { fill: #fff; stroke: rgba(20,60,40,0.28); stroke-width: 1.5; }
.cmap-svg .chip text {
    font: 800 27px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    fill: #182420;
    text-anchor: middle;
    dominant-baseline: central;
}

.cmap-svg .gate rect { fill: #145c39; stroke: #fff; stroke-width: 2; }
.cmap-svg .gate text {
    font: 700 21px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    fill: #fff;
    text-anchor: middle;
    dominant-baseline: central;
}
.cmap-svg .gate .gate-arrow { font-size: 26px; }

/* Слой «вынесенных» секторов: копия куска карты, увеличенная над остальной */
.cmap-svg .pop {
    opacity: 0;
    transform: scale(1);
    transform-origin: var(--ox) var(--oy);
    transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.16s ease, filter 0.24s ease;
}

.cmap-svg .pop.on {
    opacity: 1;
    transform: scale(1.055);
    filter: drop-shadow(0 10px 14px rgba(0,0,0,0.5));
}

.cmap-svg .pop-edge { fill: rgba(255,255,255,0.10); stroke: #fff; stroke-width: 3; stroke-linejoin: round; }

.cmap-svg .hit polygon,
.cmap-svg .hit rect { fill: transparent; pointer-events: all; }
.cmap-svg a.hit { cursor: pointer; outline: none; }
.cmap-svg .hit--off { cursor: default; }

.cmap-tip {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    background: rgba(24,36,32,0.92);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 9px;
    white-space: nowrap;
    transform: translate(-50%, calc(-100% - 14px));
}

/* сверху места нет (вход у верхнего края карты) — под точкой (cemetery-map.js) */
.cmap-tip--below { transform: translate(-50%, 14px); }

.cmap-tip--photo {
    padding: 8px 8px 9px;
    background: #fff;
    color: var(--text);
    border-radius: 14px;
    box-shadow: 0 16px 36px rgba(0,0,0,0.35);
    text-align: center;
    white-space: normal;
    width: 236px;
}

.cmap-tip-img {
    display: block;
    width: 220px;
    height: 165px;
    object-fit: cover;
    border-radius: 9px;
    margin-bottom: 7px;
    background: #dfe8e2;
}

.cmap-tip-img[hidden] { display: none; }

.cmap-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.cmap-pills-label {
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
    margin-right: 4px;
}

.cmap-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 58px;
    padding: 7px 10px 6px;
    border: 1.5px solid var(--border);
    border-radius: 13px;
    background: #fbfdfb;
    text-decoration: none;
    color: var(--green-dark);
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.cmap-pill b { font-size: 1.05rem; line-height: 1.1; }
.cmap-pill small { font-size: 0.68rem; color: var(--muted); }
a.cmap-pill:hover, a.cmap-pill.on { border-color: var(--green); background: var(--green-lt); transform: translateY(-2px); }
.cmap-pill--off { opacity: 0.55; }

.cmap-gates { margin-top: 20px; }
.cmap-gates-title { font-size: 0.95rem; font-weight: 800; margin-bottom: 10px; }

.cmap-gates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 14px;
}

.cmap-gate {
    display: block;
    background: #fbfdfb;
    border: 1.5px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.cmap-gate:hover, .cmap-gate:focus-visible {
    border-color: var(--green);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(20,60,40,0.14);
}

.cmap-gate img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #dfe8e2; }
.cmap-gate-text { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px 13px; }
.cmap-gate-text b { font-size: 1rem; }
.cmap-gate-text small { color: var(--green-dark); font-weight: 600; font-size: 0.82rem; }

.cmap-hint { margin-top: 14px; color: var(--muted); font-size: 0.86rem; }

@media (prefers-reduced-motion: reduce) {
    .cmap-svg .pop { transition: opacity 0.01s; transform: none !important; }
}

@media (max-width: 640px) {
    .cmap-pill { min-width: 52px; }
}

.legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    display: inline-block;
    flex-shrink: 0;
}
.legend-a { background: #cdead9; border: 1.5px solid var(--green); }
.legend-b { background: #fbe6b0; border: 1.5px solid #b5862a; }
.legend-k { background: #f6d2d2; border: 1.5px solid #b23b3b; }
.legend-forest { background: #2f6b45; }
.legend-path { background: repeating-linear-gradient(90deg, var(--muted) 0 3px, transparent 3px 6px); }
.legend-entrance { background: var(--green-dark); border-radius: 50%; }

.map-connector {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 22px;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.connector-line { stroke: var(--border); stroke-width: 2; stroke-dasharray: 4 4; }
.connector-arrowhead { fill: var(--border); }

.map-disclaimer {
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--muted);
    text-align: center;
}

/* ── FOOTER ── */
footer {
    background: #ffffff;
    color: var(--muted);
    padding: 24px 0;
    text-align: center;
    font-size: 0.82rem;
    margin-top: 48px;
    border-top: 1px solid var(--border);
}

/* ── MOBILE (≤ 640px) ── */
@media (max-width: 640px) {

    .brand-title { font-size: 1.02rem; }
    .brand-mark { width: 30px; height: 30px; }
    .header-top { padding: 12px 0; gap: 10px; }
    .lang-toggle button { padding: 6px 11px; font-size: 0.72rem; }

    .hero { padding: 0 0 20px; margin-bottom: 20px; }

    .hero-photo {
        height: auto;
        display: block;
        padding-bottom: 26px;
        border-radius: 0 0 24px 24px;
    }
    .mosaic {
        position: relative;
        top: auto; right: auto; bottom: auto; left: auto;
        inset: auto;
        height: 190px;
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
        margin: -20px -40px 0;
        transform: rotate(-5deg) scale(1.06);
    }
    .mcol:nth-child(n+6) { display: none; }
    .mtrack { gap: 8px; }
    .mtile { border-radius: 10px; }
    .mveil { background: linear-gradient(180deg, rgba(246,249,247,0) 0, rgba(246,249,247,0) 22%, rgba(246,249,247,0.97) 36%); }
    .hero-content { width: auto; margin: 0 16px; padding-top: 4px; }
    .hero-title { font-size: 1.8rem; }
    .hero-subtitle { font-size: 0.96rem; margin-bottom: 20px; }
    .hero-eyebrow { font-size: 0.68rem; margin-bottom: 14px; }
    .hero-search-form { padding: 5px; }
    .hero-search-icon { margin-left: 10px; }
    .hero-stats { gap: 8px; margin-top: 18px; }
    .hero-stats li { padding: 7px 12px; font-size: 0.8rem; }
    .hero-stats b { font-size: 1rem; }
    .how { padding-top: 32px; }
    .how-steps { grid-template-columns: 1fr; gap: 12px; }
    .search-alpha-grid { grid-template-columns: 1fr; gap: 16px; }

    main { padding: 0 0 32px; }

    .search-section { padding: 16px 16px 18px; }
    .search-fields  { grid-template-columns: 1fr; gap: 10px; }

    .field-group input { font-size: 16px; padding: 11px 12px; }

    .btn-search { width: 100%; padding: 13px; text-align: center; }
    .search-actions { flex-direction: column; align-items: stretch; }
    .btn-outline { justify-content: center; }

    .hero-search-form { padding: 5px; }
    .hero-search-form input { padding: 13px 10px; font-size: 16px; }
    .hero-search-form .btn-search { width: auto; padding: 11px 18px; font-size: 0.9rem; }

    .letter { width: 34px; height: 38px; line-height: 38px; font-size: 0.86rem; }

    .hero-spacer { height: 20px; }

    .results-section  { padding: 0; }
    .results-grid     { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .results-header   { flex-direction: column; align-items: flex-start; gap: 6px; }
    .results-header h1, .results-header h2 { font-size: 0.95rem; }

    .section-block { margin: 26px 0; }

    .person-name  { font-size: 0.8rem; }
    .person-dates { font-size: 0.74rem; }
    .person-info  { padding: 8px 10px 10px; }


    .breadcrumb { font-size: 0.76rem; }

    .back-link a { padding: 10px 0; font-size: 0.9rem; }


    .empty-section { padding: 40px 20px; }
}

/* ── SMALL PHONES (≤ 375px) ── */
@media (max-width: 375px) {
    .results-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .person-card-photo-wrap { width: 75vw; }
}


/* ── Фото на весь экран в карточке ── */
.person-card-photo-zoomable { cursor: zoom-in; }

.photo-lightbox {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}
.photo-lightbox[hidden] { display: none; }

.photo-lightbox img {
    max-width: 100vw;
    max-height: 100vh;
    max-height: 100dvh;
    object-fit: contain;
    touch-action: pinch-zoom;
}

.photo-lightbox-close {
    position: absolute;
    top: 12px;
    top: max(12px, env(safe-area-inset-top));
    right: 14px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

body.lightbox-open { overflow: hidden; }

/* ── SEO-разметка: H1 на месте прежних eyebrow/h2, вводные тексты, подвал ── */
h1.hero-eyebrow { line-height: 1.4; }
/* Длинный H1 на телефоне переносится: две ровные строки в скруглённой плашке */
@media (max-width: 640px) {
    h1.hero-eyebrow { text-wrap: balance; border-radius: 14px; letter-spacing: 0.06em; padding: 6px 14px; }
}
.page-header h1 { line-height: 1.3; }

.how-lead--facts { margin-bottom: 8px; color: var(--text); }

.page-header .sector-intro { margin-top: 2px; max-width: 80ch; }
.sector-intro-map { color: var(--green-dark); font-weight: 600; text-decoration: none; white-space: nowrap; }
.sector-intro-map:hover { text-decoration: underline; }

.grave-cemetery { color: var(--muted); font-size: .9rem; margin: 6px 0 0; }

/* Миниатюры в списках: атрибуты width/height — только для резерва места,
   размер по-прежнему задаёт CSS. content-visibility на карточках списков не
   ставим: с оценочной высотой браузер при возврате «Назад» без bfcache
   восстанавливает прокрутку не на ту карточку. */
.mtile { height: auto; }

.browse-sectors { display: flex; flex-wrap: wrap; gap: 8px; }
.notfound-section .browse-sectors { margin-top: 18px; justify-content: center; }

.map-sector-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 4px 16px;
    margin: 14px 0 4px;
    font-size: 0.86rem;
}
.map-sector-list a { color: var(--green-dark); text-decoration: none; }
.map-sector-list a:hover { text-decoration: underline; }

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    margin-bottom: 10px;
}
.footer-links a { color: var(--green-dark); text-decoration: none; font-weight: 600; }
.footer-links a:hover { text-decoration: underline; }
.footer-sectors { gap: 4px 14px; }
.footer-sectors a { font-weight: 500; }
.footer-place { margin-top: 2px; }

/* iPhone увеличивает страницу при фокусе на поле со шрифтом мельче 16px.
   На телефоне и на сенсорном экране (телефон боком, планшет) поля — 16px */
@media (max-width: 640px), (pointer: coarse) {
    .field-group input,
    .field-group select,
    .message-field input,
    .message-field select,
    .message-field textarea,
    .qty-input { font-size: 16px; }
}

/* ── СУРЫ (кнопка «Суры для чтения» на карточке) ──
   Список сур и страница суры: крупный арабский текст справа налево,
   номера аятов в кружках, А−/А+ для размера, всегда видно, как вернуться */
.page-quran {
    --q-ink: #143826;
    --q-badge: #0f3a25;
    --q-arabic: 'Amiri Quran', 'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', 'Geeza Pro', 'Traditional Arabic', serif;
}

.quran { max-width: 860px; margin: 0 auto; padding: 22px 0 10px; }

.quran-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-bottom: 18px;
}

.quran-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 9px 16px;
    border: 1.5px solid var(--green);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--green-dark);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
}
.quran-nav-link:hover { background: var(--green-lt); }
.quran-nav-fio { color: var(--muted); font-size: 0.92rem; }

.quran-head h1 { font-size: 1.9rem; font-weight: 800; color: var(--q-ink); line-height: 1.2; }
.quran-lead { color: var(--muted); margin-top: 6px; }

.quran-often, .quran-all {
    margin-top: 22px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 20px 20px;
}
.quran-often h2, .quran-all h2 { font-size: 1.1rem; font-weight: 800; color: var(--q-ink); }

.quran-often-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.quran-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 76px;
    padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: var(--light);
    color: var(--q-ink);
    text-decoration: none;
    text-align: center;
}
.quran-chip:hover { border-color: var(--green); background: var(--green-lt); }
.quran-chip-name { font-weight: 800; font-size: 0.98rem; }
.quran-chip-ar { font-family: var(--q-arabic); font-size: 1.35rem; line-height: 1.5; color: var(--green-dark); }
.quran-chip-sub { color: var(--muted); font-size: 0.85rem; font-weight: 600; }

.quran-all-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
}

.quran-filter {
    flex: 1 1 220px;
    max-width: 320px;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: #fbfdfb;
    font: inherit;
    font-size: 16px;   /* iPhone не увеличивает страницу при вводе */
    color: var(--text);
}
.quran-filter:focus { outline: none; border-color: var(--green); background: #fff; }

.quran-list { list-style: none; margin-top: 12px; }
.quran-list li + li { border-top: 1px solid var(--border); }
.quran-list li[hidden] { display: none; }

.quran-list a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 6px;
    color: var(--text);
    text-decoration: none;
    border-radius: 10px;
}
.quran-list a:hover { background: var(--light); }

.quran-num {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--green-lt);
    color: var(--green-dark);
    font-weight: 800;
    font-size: 0.9rem;
}

.quran-names { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.quran-names b { font-size: 1.02rem; color: var(--q-ink); }
.quran-names small { color: var(--muted); font-size: 0.84rem; }
.quran-ar { flex: 0 0 auto; font-family: var(--q-arabic); font-size: 1.45rem; line-height: 1.4; color: var(--green-dark); }
.quran-empty { color: var(--muted); padding: 14px 6px 4px; }

.quran-source { color: var(--muted); font-size: 0.82rem; margin: 22px 0 10px; text-align: center; }
.quran-source a { color: var(--green-dark); }

/* Страница суры */
.sura-head {
    text-align: center;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 18px 18px;
}
.sura-kicker { color: var(--muted); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.sura-title { font-size: 2rem; font-weight: 800; color: var(--q-ink); line-height: 1.2; margin-top: 4px; }
.sura-title-ar { font-family: var(--q-arabic); font-size: 2.1rem; line-height: 1.6; color: var(--green-dark); margin-top: 2px; }
.sura-meta { color: var(--muted); font-size: 0.92rem; margin-top: 2px; }
.sura-translator { color: var(--muted); font-size: 0.85rem; margin-top: 4px; }

.sura-size { display: inline-flex; gap: 8px; }
.sura-size-btn {
    min-width: 52px;
    min-height: 44px;
    padding: 6px 14px;
    border: 1.5px solid var(--green);
    border-radius: 10px;
    background: #fff;
    color: var(--green-dark);
    font: inherit;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
}
.sura-size-btn:hover { background: var(--green-lt); }
.sura-size-btn:disabled { opacity: 0.4; cursor: default; background: #fff; }

.sura-text {
    --sura-size: 1.9rem;
    margin-top: 18px;
    background: #fffdf7;
    border: 1px solid #ece4cf;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 10px 26px 16px;
}

/* Арабский — крупно, справа налево; транскрипция и перевод — под ним, слева */
.ayah-ar {
    font-family: var(--q-arabic);
    font-size: var(--sura-size);
    line-height: 2.2;
    color: #1d1a12;
    text-align: right;
    overflow-wrap: break-word;
}
.ayah-tr {
    margin-top: 4px;
    font-size: max(1rem, calc(var(--sura-size) * 0.52));
    line-height: 1.55;
    color: #1f6a43;
    font-weight: 600;
}
.ayah-ru {
    margin-top: 6px;
    font-size: max(0.98rem, calc(var(--sura-size) * 0.5));
    line-height: 1.6;
    color: #3b372d;
}
.ayah-ru-n { color: #9a8650; font-weight: 700; margin-right: 2px; }
.sura-text.hide-tr .ayah-tr, .sura-text.hide-ru .ayah-ru { display: none; }

.sura-basmala {
    text-align: center;
    padding: 12px 0 14px;
    border-bottom: 1px solid #ece4cf;
}
.sura-basmala .ayah-ar { text-align: center; color: var(--green-dark); }

.ayah { padding: 14px 0 16px; scroll-margin-top: 90px; }
.ayah + .ayah { border-top: 1px dashed #e6dcc2; }
.ayah:target { background: #f6eccd; border-radius: 10px; box-shadow: 0 0 0 10px #f6eccd; }

.sura-tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
    margin-top: 12px;
}
.sura-show { display: inline-flex; gap: 8px; }
.sura-show-btn {
    min-height: 44px;
    padding: 6px 14px;
    border: 1.5px solid var(--green);
    border-radius: 999px;
    background: #fff;
    color: var(--green-dark);
    font: inherit;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
}
.sura-show-btn[aria-pressed="true"] { background: var(--green); color: #fff; }
.sura-show-btn[aria-pressed="true"]::before { content: '✓ '; }

/* Номер аята — арабскими цифрами в кружке, как в мусхафе */
.ayah-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6em;
    height: 1.6em;
    padding: 0 0.25em;
    margin: 0 0.15em;
    border: 1.5px solid #c9b47a;
    border-radius: 999px;
    color: #7a6326;
    font-size: 0.55em;
    line-height: 1;
    vertical-align: 0.25em;
    font-family: var(--q-arabic);
}

.sura-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 18px 0;
}
.sura-pager-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: var(--card-bg);
    color: var(--q-ink);
    text-decoration: none;
    font-weight: 700;
}
.sura-pager-link small { color: var(--muted); font-weight: 600; font-size: 0.82rem; }
.sura-pager-link:hover { border-color: var(--green); background: var(--green-lt); }
.sura-pager-link--next { text-align: right; grid-column: 2; }

/* Кнопка на карточке */
.grave-cleanup { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.grave-btn--quran svg { flex: 0 0 auto; }

@media (max-width: 640px) {
    .quran { padding-top: 14px; }
    .quran-head h1, .sura-title { font-size: 1.6rem; }
    .quran-often, .quran-all { padding: 14px 14px 16px; }
    .quran-often-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quran-filter { max-width: none; }
    .quran-list a { gap: 10px; padding: 10px 2px; }
    .quran-ar { font-size: 1.25rem; }
    .sura-text { padding: 6px 14px 12px; }
    .ayah-ar { line-height: 2.1; }
    .sura-pager { grid-template-columns: 1fr; }
    .sura-pager-link--next { grid-column: auto; }
}

/* Поиск на телефоне: когда что-то найдено, форма и алфавит свёрнуты в кнопку
   «Изменить поиск» (search.html), чтобы результаты были на первом экране */
.search-edit { display: none; }

@media (max-width: 640px) {
    .search-section--done.is-collapsed { padding: 0; border: 0; background: none; box-shadow: none; }
    .search-section--done.is-collapsed .search-form,
    .search-section--done.is-collapsed .alphabet-filter { display: none; }
    .search-section--done.is-collapsed .search-edit {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-height: 48px;
        padding: 12px 18px;
        background: var(--card-bg);
        color: var(--green-dark);
        border: 1.5px solid var(--green);
        border-radius: var(--radius);
        font: inherit;
        font-size: 0.95rem;
        font-weight: 700;
        cursor: pointer;
    }
}

/* ── Старые браузеры без gap во flex (Safari/iOS до 14.1, Chrome до 84) ──
   Узнаём их по отсутствию inset (появился там же). Без gap кнопки, плашки и
   ссылки слипались, а «Сектор» и буква — отдельные элементы во flex, и
   пробел между ними пропадал («СЕКТОРД»). Отступы — полями */
@supports not (inset: 0) {
    [data-i18n="person.sectorPre"]:not(:empty) { margin-right: 0.3em; }
    [data-i18n="person.sectorPost"]:not(:empty) { margin-left: 0.3em; }
    .hero-actions > *, .hero-stats > *, .search-actions > *, .letters > *,
    .cmap-pills > *, .browse-sectors > *, .footer-links > *, .person-tabs > *,
    .groute-gates > *, .services-nav > *, .map-legend > *, .quran-nav > *,
    .sura-tools > *, .sura-show > *, .sura-size > * { margin: 0 8px 8px 0; }
    .brand > * + *, .header-actions > * + *, .results-header > * + *,
    .section-block-header > * + *, .grave-btn > * + *,
    .btn-outline > * + *, .order-line > * + *, .order-total > * + *,
    .legend-item > * + * { margin-left: 10px; }
    .grave-dates > * + * { margin-left: 14px; }
    .grave-actions > * + *, .grave-cleanup > * + * { margin-left: 12px; }
    .grave-nbr-text > * + * { margin-top: 3px; }
    @media (max-width: 768px) {
        .grave-actions > * + *, .grave-cleanup > * + * { margin-left: 0; margin-top: 10px; }
    }
}