/* ============================================================
   css/patient-profile.css — стили страницы истории пациента
   Использует переменные main.css. Подключать после
   main.css / effects.css.
   ============================================================ */

/* ---------- HERO с фото пациента в круге + хлебные крошки ---------- */
.patient-hero {
    position: relative;
    min-height: 46vh;
    display: flex;
    align-items: center;
    padding-bottom: 60px; /* было 40px */
    overflow: hidden;
    color: var(--color-white);
}
.patient-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--gradient-plum);
}
.patient-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, rgba(250,160,194,.12), transparent 55%);
}

.patient-hero .container { position: relative; z-index: 2; }

.breadcrumbs {
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    z-index: 3;
    padding: 0;
}
.breadcrumbs .container { text-align: left; }
.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.breadcrumbs__item { display: flex; align-items: center; gap: 6px; }
.breadcrumbs__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, .68);
    transition: color .25s ease;
}
.breadcrumbs__link:hover { color: var(--color-white); }
.breadcrumbs__icon { width: 14px; height: 14px; }
.breadcrumbs__separator { color: rgba(255, 255, 255, .35); }
.breadcrumbs__current { color: rgba(255, 255, 255, .92); font-weight: 600; }

.patient-hero__content {
    display: flex;
    align-items: center;
    gap: 36px;
    margin-top: 46px;
}

/* Фото пациента — верхний слой, заливка hero его не касается:
   круг вынесен из общего потока заливки за счёт собственного
   белого кольца + тени, визуально "лежит" поверх фона. */
.patient-hero__avatar {
    flex: 0 0 auto;
    width: 168px;
    height: 168px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid rgba(255, 255, 255, .9);
    box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .45), 0 0 0 10px rgba(255, 255, 255, .06);
    position: relative;
    z-index: 3;
}
.patient-hero__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.patient-hero__intro {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.patient-hero__name {
    font-family: var(--font-display), var(--font-main);
    font-size: clamp(28px, 3.6vw, 40px);
    color: var(--color-white);
    font-weight: 800;
}
.patient-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.patient-hero__age,
.patient-hero__diagnosis {
    font-size: 13px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}
.patient-hero__age {
    background: rgba(255, 255, 255, .14);
    color: var(--color-white);
}
.patient-hero__diagnosis {
    background: rgba(250, 160, 194, .22);
    color: var(--color-white);
}
.patient-hero__tagline {
    font-style: italic;
    color: rgba(255, 255, 255, .82);
    font-size: 15px;
    max-width: 480px;
    margin-top: 2px;
}

/* ---------- Профиль пациента: раскладка ---------- */
.patient-profile { padding: 56px 0 90px; background: var(--color-cream); }

.patient-profile__layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 40px;
    align-items: start;
}

.patient-profile__main {
    display: flex;
    flex-direction: column;
    gap: 44px;
}

/* ---------- Общий заголовок секции ---------- */
.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    color: var(--color-plum-dark);
    font-family: var(--font-display), var(--font-main);
    margin-bottom: 20px;
}
.section-title__icon {
    width: 22px; height: 22px;
    color: var(--color-plum);
    flex: 0 0 auto;
}

/* ---------- История ---------- */
.patient-profile__story-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.75;
}
.patient-profile__quote {
    position: relative;
    background: var(--color-plum-soft);
    border-left: 3px solid var(--color-plum);
    border-radius: var(--radius-sm);
    padding: 20px 24px;
    font-style: italic;
    color: var(--color-plum-dark);
}
.patient-profile__quote cite {
    display: block;
    margin-top: 10px;
    font-style: normal;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-plum);
}

/* ---------- Медицинская информация ---------- */
.medical-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    padding: 24px 26px;
}
.medical-info__item { display: flex; flex-direction: column; gap: 4px; }
.medical-info__label { font-size: 12.5px; font-weight: 700; color: var(--color-plum); text-transform: uppercase; letter-spacing: .03em; }
.medical-info__value { font-size: 14.5px; color: var(--color-text); }

/* ---------- Сворачиваемая секция документов ---------- */
.documents-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 18px 22px;
    box-shadow: var(--shadow-soft);
}
.documents-section__title-wrapper { display: flex; align-items: center; gap: 10px; }
.documents-section__toggle {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-plum);
    transition: transform .3s ease;
}
.documents-section__toggle.rotated { transform: rotate(180deg); }

.documents-section__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
}
.documents-section__content.expanded { max-height: 2000px; margin-top: 16px; }

.documents-accordion { display: flex; flex-direction: column; gap: 12px; }

.document-accordion-item {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}
.document-accordion-item__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    cursor: pointer;
}
.document-accordion-item__title-wrapper { display: flex; align-items: center; gap: 10px; }
.document-accordion-item__icon { width: 20px; height: 20px; color: var(--color-plum); flex: 0 0 auto; }
.document-accordion-item__title { font-size: 14.5px; font-weight: 600; color: var(--color-plum-dark); }
.document-accordion-item__toggle {
    width: 22px; height: 22px;
    color: var(--color-plum);
    display: flex; align-items: center; justify-content: center;
    transition: transform .3s ease;
}
.document-accordion-item.active .document-accordion-item__toggle { transform: rotate(180deg); }

.document-accordion-item__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
}
.document-accordion-item.active .document-accordion-item__content { max-height: 600px; }

.document-accordion-item__image-wrapper {
    padding: 0 20px;
    margin-top: 12px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: zoom-in;
}
.document-accordion-item__image { width: 100%; display: block; border-radius: var(--radius-sm); }

.document-accordion-item__actions { padding: 14px 20px 20px; }
.document-accordion-item__action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1.5px solid var(--color-border);
    background: transparent;
    color: var(--color-plum);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .25s ease;
}
.document-accordion-item__action-btn svg { width: 15px; height: 15px; }
.document-accordion-item__action-btn:hover {
    border-color: var(--color-plum);
    background: var(--color-plum-soft);
}

/* ---------- Фотогалерея ---------- */
.photo-gallery { position: relative; }
.photo-gallery__wrapper {
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
.photo-gallery__track {
    display: flex;
    transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
/*.photo-gallery__item {*/
/*    flex: 0 0 100%;*/
/*    aspect-ratio: 16 / 9;*/
/*}*/
/*.photo-gallery__item img { width: 100%; height: 100%; object-fit: cover; }*/

.photo-gallery__item {
    position: relative;
    flex: 0 0 100%;
    height: clamp(280px, 60vw, 560px);   /* фиксированная высота рамки, ширина 100% */
    background: var(--color-plum-dark);
    overflow: hidden;
}
/* размытый фон из самого фото */
.photo-gallery__item::before {
    content: '';
    position: absolute;
    inset: -20px;
    background: var(--bg) center / cover no-repeat;
    filter: blur(24px) brightness(.7);
}
.photo-gallery__item img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;   /* фото целиком, без обрезки */
    display: block;
}

.photo-gallery__navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 18px;
}
.photo-gallery__btn {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-plum);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all .3s ease;
}
.photo-gallery__btn:hover:not(:disabled) { background: var(--color-plum); border-color: var(--color-plum); color: var(--color-white); }
.photo-gallery__btn:disabled { opacity: .35; cursor: not-allowed; }

.photo-gallery__dots { display: flex; gap: 8px; }
.photo-gallery__dot {
    width: 7px; height: 7px;
    border-radius: 999px;
    background: var(--color-border);
    border: none;
    cursor: pointer;
    transition: all .3s ease;
    padding: 0;
}
.photo-gallery__dot.active { width: 22px; background: var(--color-plum); }

/* ---------- Видео ---------- */
.video-player__wrapper {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    background: var(--color-plum-dark);
}
.video-player__placeholder { position: relative; width: 100%; height: 100%; }
.video-player__thumbnail { width: 100%; height: 100%; object-fit: cover; }
.video-player__play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: none; border: none; cursor: pointer;
    transition: transform .3s ease;
}
.video-player__play-btn:hover { transform: translate(-50%, -50%) scale(1.06); }
.video-player__play-btn circle { fill: rgba(92, 48, 74, .85) !important; }
.video-player__iframe, .video-player__iframe iframe {
    width: 100%; height: 100%; border: none;
}
.video-player__caption {
    margin-top: 14px;
    font-size: 13.5px;
    color: var(--color-text-muted);
    text-align: center;
}

/* ---------- Виджет пожертвования (сайдбар) ---------- */
.patient-profile__sidebar { position: sticky; top: 108px; }

.donation-widget {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.donation-widget__header { text-align: center; }
.donation-widget__title {
    font-size: 19px;
    color: var(--color-plum-dark);
    font-family: var(--font-display), var(--font-main);
}

.donation-widget__progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.progress-circle { position: relative; width: 140px; height: 140px; }
.progress-circle__svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-circle__bg {
    fill: none;
    stroke: var(--color-plum-soft);
    stroke-width: 10;
}
.progress-circle__fill {
    fill: none;
    stroke: var(--color-plum);
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 339.292;
    stroke-dashoffset: 339.292;
    transition: stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1);
}
.progress-circle__content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.progress-circle__percent {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-plum-dark);
}

.donation-widget__stats {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.donation-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--color-cream);
}
.donation-stat__value { font-weight: 700; color: var(--color-plum-dark); font-size: 14.5px; }
.donation-stat__label { font-size: 13px; color: var(--color-text-muted); }
.donation-stat--highlight { background: var(--color-plum-soft); }
.donation-stat--highlight .donation-stat__value { color: var(--color-plum); }

.donation-widget__info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
    border-top: 1px dashed var(--color-border);
}
.donation-widget__text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--color-text-muted);
}
.donation-widget__icon { width: 16px; height: 16px; color: var(--color-plum); flex: 0 0 auto; }

.donation-widget__share {
    padding-top: 16px;
    border-top: 1px dashed var(--color-border);
}
.donation-widget__share-title {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-bottom: 10px;
}
.share-buttons { display: flex; gap: 10px; }
.share-btn {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    background: transparent;
    color: var(--color-plum);
    font-size: 11px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all .3s ease;
}
.share-btn svg { width: 16px; height: 16px; }
.share-btn:hover { background: var(--color-plum); border-color: var(--color-plum); color: var(--color-white); }

/* ---------- Модалка документов ---------- */
.document-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
}
.document-modal.active { display: flex; }
.document-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(62, 31, 50, .82);
    backdrop-filter: blur(4px);
}
.document-modal__content {
    position: relative;
    z-index: 1;
    max-width: 880px;
    width: 90%;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.document-modal__close {
    position: absolute;
    top: -46px; right: 0;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .12);
    color: var(--color-white);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .25s ease;
}
.document-modal__close:hover { background: rgba(255, 255, 255, .22); }
.document-modal__close svg { width: 18px; height: 18px; }

.document-modal__image-wrapper {
    max-height: 78vh;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 30px 70px -20px rgba(0,0,0,.5);
}
.document-modal__image { max-width: 100%; max-height: 78vh; display: block; }

.document-modal__navigation {
    position: absolute;
    top: 50%;
    left: -60px; right: -60px;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
}
.document-modal__nav {
    pointer-events: auto;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .12);
    color: var(--color-white);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .25s ease;
}
.document-modal__nav:hover { background: rgba(255, 255, 255, .25); }
.document-modal__nav svg { width: 20px; height: 20px; }

/* ---------- Адаптив ---------- */
@media (max-width: 992px) {
    .patient-profile__layout { grid-template-columns: 1fr; }
    .patient-profile__sidebar { position: static; }
    .document-modal__navigation { left: -8px; right: -8px; }
}

@media (max-width: 640px) {
    .patient-hero { min-height: 48vh; padding-bottom: 70px; }

    .breadcrumbs { top: 16px; }
    .breadcrumbs .container { text-align: center; }
    .breadcrumbs__list { justify-content: center; }

    .patient-hero__content {
        flex-direction: column;
        text-align: center;
        margin-top: 64px;
        gap: 20px;
    }
    .patient-hero__avatar { width: 130px; height: 130px; }
    .patient-hero__meta { justify-content: center; }
    .patient-hero__tagline { margin-left: auto; margin-right: auto; }

    .donation-widget { padding: 24px 20px; }
}
/* ===== Видео: окно подстраивается под пропорции ролика ===== */
.video-player__wrapper {
    --video-ratio: 1.7778;   /* JS подставит реальное значение */
    position: relative;
    display: block;
    width: 100%;
    max-width: calc(80vh * var(--video-ratio));  /* вертикальные ролики не выше 80% экрана */
    margin: 0 auto;
    height: auto;
    padding: 0;
    aspect-ratio: var(--video-ratio);
    overflow: hidden;
    background: linear-gradient(135deg, #5C304A 0%, #3E1F32 100%);
}

.video-player__placeholder,
.video-player__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.video-player__thumbnail {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-player__play-btn { z-index: 2; }

.video-player__iframe video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

/* после правила .video-player__thumbnail, иначе display:block его перебьёт */
.video-player__thumbnail:not([src]) { display: none; }

@media (max-width: 600px) {
    .video-player__wrapper.is-portrait {
        max-width: 100%;
        max-height: 80vh;
    }
}