/* === Шрифты и типографика === */
.char-meta li, .key-title, .post-title, .slovo-meta li, .breadcrumbs, body {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.hanzi-card-pinyin, .hanzi-card-pinyin *, .slovo-card-pinyin, .slovo-card-pinyin * {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-feature-settings: "kern" 1, "liga" 1;
    text-rendering: optimizeLegibility;
}



/* === Ключ Канси (общие стили для страниц ключей) === */
.radical-key-image { text-align: center; margin-bottom: 24px; position: relative; display: inline-block; left: 50%; transform: translateX(-50%); padding: 8px; background: rgba(0,0,0,0.03); border-radius: 4px; }
.radical-key-img { max-width: 180px; height: auto; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08)); }
.radical-description { background: #f5f1e8; border-left: 3px double #b85450; padding: 22px 26px; margin: 0 0 28px 0; font-size: 16px; line-height: 1.8; color: #3e3a34; border-radius: 0 6px 6px 0; box-shadow: inset 0 0 30px rgba(255,255,240,0.6), 0 4px 12px rgba(0,0,0,0.06); position: relative; font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.radical-description::after { content: ""; position: absolute; bottom: 0; right: 0; width: 20px; height: 20px; background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.05) 50%); border-radius: 0 0 6px 0; }
.radical-description p { margin: 0 0 10px; }
.radical-description p:last-child { margin-bottom: 0; }
.radical-description strong { font-weight: 600; color: #5d4037; }
.radical-posts-title { font-size: 22px; font-weight: 500; margin: 0 0 24px 0; padding-bottom: 10px; border-bottom: 1px solid #d9d0c0; color: #4a3f35; letter-spacing: 0.5px; font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

/* === Футер === */
.footer-legal-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; font-size: 14px; }
.footer-legal-links a { color: #c73e3a; text-decoration: none; transition: color 0.2s; }
.footer-legal-links a:hover { color: #b85450; text-decoration: underline; }
.footer-legal-links .separator { color: #999; font-size: 12px; }

/* === 404 === */
.error404 .gridmode-posts-wrapper ul { list-style: none; padding-left: 0; }
.error404 .gridmode-posts-wrapper ul li { margin-bottom: 8px; }
.error404 .gridmode-posts-wrapper ul li a { color: #c73e3a; text-decoration: none; font-weight: 600; }
.error404 .gridmode-posts-wrapper ul li a:hover { text-decoration: underline; }
.table-responsive { overflow-x: auto; }

/* === Аудио-плееры === */
.word-audio { text-align: left; margin-bottom: 15px; }
.word-audio audio, .audio-play audio { width: 100%; max-width: 400px; height: 36px; border-radius: 6px; border: 1px solid #C73E3A; background-color: #FCF9F2; outline: none; }
.word-audio audio::-webkit-media-controls-panel, .audio-play audio::-webkit-media-controls-panel { background-color: #FCF9F2; }
.word-audio audio::-webkit-media-controls-play-button, .audio-play audio::-webkit-media-controls-play-button { color: #C73E3A; }
.word-audio audio::-webkit-media-controls-current-time-display, .word-audio audio::-webkit-media-controls-time-remaining-display, .audio-play audio::-webkit-media-controls-current-time-display, .audio-play audio::-webkit-media-controls-time-remaining-display { color: #1C1814; font-size: 12px; }
.audio-play { margin: 10px 0; }

/* === Мобильное меню фикс === */
@media (hover: none) and (pointer: coarse) {
    .gridmode-primary-nav-menu li a, .gridmode-primary-responsive-menu-icon { touch-action: manipulation; }
}

/* ============ ОБЩЕЕ ДЛЯ КАРТОЧЕК ============ */
.hanzi-card-inner,
.slovo-card-inner {
    container-type: inline-size;
}

/* Обёртка */
.hanzi-card-wrapper {
    max-width: 360px;
    width: 100%;
    aspect-ratio: 360 / 270;
    position: relative;
    display: block;
}

.hanzi-card-inner {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #f7f2e7;
    border: 2px solid #c73e3a;
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
}

/* Ключ номер и иероглиф ключа */
.hanzi-card-key-area {
    position: absolute;
    top: 10px;
    left: 12px;
    text-align: left;
    z-index: 2;
}
.hanzi-card-key-number {
    font-size: clamp(12px, 2.8cqi, 14px);
    color: #5c4b3a;
    line-height: 0.5;
    font-family: sans-serif;
}
.hanzi-card-key-char {
    font-size: clamp(12px, 10cqi, 24px);
    color: #5c4b3a;
    font-family: 'Noto Serif SC', serif;
    text-align: center;
    margin-top: 2px;
}

/* Основной иероглиф — размер от ширины карточки */
.hanzi-card-main-char {
    position: absolute;
    top: 40%;
    left: 53%;
    transform: translate(-50%, -50%);
    font-size: clamp(30px, 46cqi, 165px);
    line-height: 1;
    color: #1c1814;
    font-family: 'Ma Shan Zheng', cursive;
    white-space: nowrap;
    max-width: 96%;
    overflow: hidden;
    z-index: 1;
}

/* Нижний блок: пиньинь и перевод */
.hanzi-card-bottom {
    position: absolute;
    bottom: 9px;
    left: 12px;
    right: 12px;
    text-align: left;
    z-index: 2;
}
.hanzi-card-pinyin {
    font-size: clamp(16px, 6.5cqi, 22px);
    color: #5c4b3a;
    font-family: 'Noto Serif SC', serif;
    line-height: 1.2;
    margin-bottom: 4px;
    text-align: left;
    word-break: normal;
}
.hanzi-card-trans {
    font-size: clamp(10px, 4.8cqi, 15px);
    color: #5c4b3a;
    font-family: sans-serif;
    line-height: 1.25;
    text-align: left;
    overflow: hidden;
}

/* = АВТОМАТИЧЕСКАЯ КАРТОЧКА СЛОВА = */
.slovo-card-wrapper {
    max-width: 360px;
    width: 100%;
    aspect-ratio: 360 / 270;
    position: relative;
    display: block;
}

.slovo-card-inner {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #f7f2e7;
    border: 2px solid #c73e3a;
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
}

.slovo-card-main-word {
    position: absolute;
    top: 33%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(24px, 36cqi, 130px);
    line-height: 1;
    color: #1c1814;
    font-family: 'Ma Shan Zheng', cursive;
    white-space: nowrap;
    max-width: 96%;
    overflow: hidden;
    z-index: 1;
}
.slovo-card-main-word--len-3 { font-size: clamp(20px, 29cqi, 110px); }
.slovo-card-main-word--len-4 { font-size: clamp(16px, 22cqi, 88px); }
.slovo-card-main-word--len-5 { font-size: clamp(12px, 16cqi, 64px); }

.slovo-card-bottom {
    position: absolute;
    bottom: 10px;
    left: 12px;
    right: 12px;
    text-align: left;
    z-index: 2;
}
.slovo-card-pinyin {
    font-size: clamp(11px, 6.2cqi, 22px);
    color: #5c4b3a;
    font-family: 'Noto Serif SC', serif;
    line-height: 1.2;
    margin-bottom: 4px;
}
.slovo-card-trans {
    font-size: clamp(9px, 4.6cqi, 15px);
    color: #5c4b3a;
    font-family: sans-serif;
    line-height: 1.25;
    overflow: hidden;
}

/* ============ ФОЛБЭК ДЛЯ СТАРЫХ БРАУЗЕРОВ (без container queries) ============ */
@supports not (container-type: inline-size) {
    .hanzi-card-main-char { font-size: 60px; }
    .slovo-card-main-word { font-size: 48px; }
    .slovo-card-main-word--len-3 { font-size: 40px; }
    .slovo-card-main-word--len-4 { font-size: 32px; }
    .slovo-card-main-word--len-5 { font-size: 24px; }
    .hanzi-card-pinyin, .slovo-card-pinyin { font-size: 14px; }
    .hanzi-card-trans, .slovo-card-trans { font-size: 11px; }
    .hanzi-card-key-number { font-size: 10px; }
    .hanzi-card-key-char { font-size: 18px; }
}

/* ========== Общие стили для примеров (используются везде) ========== */
.sentence-pinyin {
    font-size: 1.1em;
    color: #5C4B3A;
    margin-bottom: 2px;
    font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
.sentence-translation {
    font-size: 0.95em;
    color: #333;
}

/* ========== Общие метки (используются в разных шаблонах) ========== */
.post-tags {
    margin-top: 40px;
    padding: 20px;
    background-color: #FCF9F2;
    border-radius: 8px;
}
.post-tags h2 {
    margin-bottom: 15px;
    font-size: 1.2em;
    color: #5C4B3A;
}
.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.tag-link {
    display: inline-block;
    padding: 6px 14px;
    background-color: #fff;
    border: 1px solid #C73E3A;
    border-radius: 20px;
    color: #C73E3A;
    font-size: 0.9em;
    text-decoration: none;
    transition: all 0.2s;
}
.tag-link:hover {
    background-color: #C73E3A;
    color: #fff;
}

/* ========== Кнопки и картинки-миниатюры ========== */
.btn.download-pdf {
    display: inline-block;
    background-color: #C73E3A;
    color: #fff;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    transition: background-color 0.2s;
    margin-top: 10px;
}
.btn.download-pdf:hover {
    background-color: #a32e2a;
    color: #fff;
    text-decoration: none;
}
.hanzi-card {
    text-align: center;
    margin-bottom: 30px;
}
.hanzi-card-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}