/* Помощ - вътрешна страница (05.10.2026). Представка hp- (не ms-/sub-: заети).
   От 768px: лента с хората + три равни карти (.hp-desk). Под 768px: плейър + списък + тъмна карта (.hp-mob). */
.hp-page { display: flex; flex-direction: column; gap: 22px; padding-bottom: 24px; }
.hp-topbar { display: flex; align-items: center; gap: 14px; }
.hp-title { margin: 0; font-size: 1.5rem; font-weight: 800; color: #1e293b; }
.hp-lead { margin: 2px 0 0; color: #8a7866; font-size: .9rem; }
.hp-back {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; min-height: 0;
    font-size: .9rem; font-weight: 700; color: #3b2d22; background: #fff; border: 1px solid #eadfd2; cursor: pointer;
}
.hp-back:hover { background: #fbf4ec; border-color: #e6d4bf; }

/* ---- общи: плейър, номер, снимка */
.hp-player { position: relative; aspect-ratio: 16 / 9; background: #1c1510; cursor: pointer; overflow: hidden; }
.hp-player img, .hp-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.hp-player.is-playing img, .hp-player.is-playing .hp-play { display: none; }
.hp-play {
    position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; min-height: 0; padding: 0;
    transform: translate(-50%, -50%); border-radius: 50%; border: 0; cursor: pointer;
    background: linear-gradient(135deg, #2b2119, #1c1510); color: #fff; font-size: 1.1rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .4); transition: transform .2s;
}
.hp-player:hover .hp-play { transform: translate(-50%, -50%) scale(1.08); }
.hp-num {
    display: inline-flex; width: 24px; height: 24px; border-radius: 50%; align-items: center; justify-content: center;
    background: #f3e6d6; color: #a8743f; font-size: .76rem; font-weight: 800;
}
.hp-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid rgba(255, 255, 255, .35); }
.hp-avatar--ini { display: flex; align-items: center; justify-content: center; background: #f3e6d6; color: #8a5a22; font-weight: 800; font-size: 1.1rem; }

/* ---- Десктоп и таблет (Б) */
.hp-mob { display: none; }
.hp-hero {
    background: linear-gradient(135deg, #3a2f26, #57432f); border-radius: 18px; padding: 20px 22px; color: #fff;
    display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
}
.hp-hero-txt { flex: 1 1 260px; }
.hp-hero h2 { margin: 0 0 4px; font-size: 1.2rem; color: #fff; }
.hp-hero p { margin: 0; color: #e3d4c2; font-size: .9rem; line-height: 1.45; }
.hp-ppl { display: flex; gap: 12px; flex-wrap: wrap; }
.hp-p {
    display: flex; gap: 12px; align-items: center; background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; padding: 10px 12px 10px 10px;
}
.hp-p .hp-avatar { width: 48px; height: 48px; }
.hp-p-name { font-weight: 800; font-size: .95rem; }
.hp-p-role { font-size: .74rem; color: #f1d3a6; font-weight: 700; }
.hp-p-num { font-size: .8rem; color: #e3d4c2; }
.hp-p-ic { display: flex; gap: 6px; margin-left: 6px; }
.hp-ic {
    width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; text-decoration: none;
    background: rgba(255, 255, 255, .12); color: #f1d3a6;
}
.hp-ic:hover { background: rgba(255, 255, 255, .22); }
.hp-ic--v { background: #7b519d; }
.hp-ic--v img { display: block; width: 24px; height: 24px; }
.hp-ic--v:hover { background: #8d62b0; }
.hp-h2row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.hp-h2 { margin: 0; font-size: 1.1rem; font-weight: 800; color: #1e293b; }
.hp-h2row span { color: #8a7866; font-size: .88rem; }
.hp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
.hp-card { background: #fff; border: 1px solid #efe4d8; border-radius: 16px; overflow: hidden; }
.hp-card-body { padding: 14px 16px 16px; }
.hp-card-body h3 { margin: 8px 0 4px; font-size: 1rem; color: #1e293b; }
.hp-card-body p { margin: 0; font-size: .86rem; color: #8a7866; line-height: 1.45; }

/* ---- Телефон (А) */
@media (max-width: 767px) {
    .hp-desk { display: none; }
    .hp-mob { display: block; }
    .hp-mplayer { border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(43, 35, 29, .18); }
    .hp-mtitle { margin: 14px 0 2px; font-size: 1.1rem; font-weight: 800; color: #1e293b; }
    .hp-mtext { margin: 0; color: #8a7866; font-size: .9rem; }
    .hp-rows { margin-top: 16px; display: grid; gap: 8px; }
    .hp-row {
        display: flex; gap: 12px; align-items: center; padding: 8px; border: 1px solid #efe4d8; border-radius: 14px;
        background: #fff; text-align: left; width: 100%; min-height: 0; cursor: pointer; color: #2b231d;
    }
    .hp-row.is-on { border-color: #d4a574; background: #fbf4ec; }
    .hp-row img { width: 96px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 9px; flex: none; }
    .hp-row b { display: block; font-size: .92rem; }
    .hp-row small { color: #8a7866; font-size: .8rem; line-height: 1.35; display: block; margin-top: 2px; }
    .hp-dark { margin-top: 20px; background: linear-gradient(180deg, #3a2f26, #2b231d); color: #fff; border-radius: 18px; padding: 18px; }
    .hp-dark h2 { margin: 0 0 4px; font-size: 1.05rem; color: #fff; }
    .hp-dark > p { margin: 0 0 10px; color: #d8c9b8; font-size: .86rem; }
    .hp-mp { padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
    .hp-mp-who { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
    .hp-mp-role { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #f1d3a6; }
    .hp-mp-name { font-weight: 800; }
    .hp-mp-num { color: #d8c9b8; font-size: .85rem; }
    .hp-mp-acts { display: flex; gap: 8px; }
    .hp-btn {
        flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
        border-radius: 11px; font-weight: 700; font-size: .9rem; text-decoration: none; border: 1px solid transparent;
    }
    .hp-btn--gold { background: #7b519d; color: #fff; font-size: 1.08rem; font-weight: 800; letter-spacing: .01em; }
    .hp-btn--gold img { display: block; width: 24px; height: 24px; }
    .hp-btn--gold:hover { background: #8d62b0; }
    .hp-btn--ghost { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: #fff; }
}

/* Таблет: картите по две, лентата се пренася */
@media (min-width: 768px) and (max-width: 1023px) {
    .hp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}