/* ==================================================
   СТРАНИЦА
   ================================================== */

.reading-page {
    width: 100%;

    padding: 22px 20px 50px;

    box-sizing: border-box;

    background: var(--cream-50);
}


.reading-container {
    width: 100%;
    max-width: none;

    margin: 0;
}


/* ==================================================
   ПЕРВЫЙ ЭКРАН
   ================================================== */

.reading-hero {
    display: block;

    padding-bottom: 30px;

    border-bottom:
        1px solid var(--cream-500);
}


/* ==================================================
   ФОТО
   ================================================== */

.reading-photo {
    width: 100%;

    overflow: hidden;

    border-radius: 7px;

    background: var(--cream-300);
}


.reading-photo img {
    display: block;

    width: 100%;
    height: auto;
}


/* ==================================================
   ТЕКСТ ПЕРВОГО ЭКРАНА
   ================================================== */

.reading-hero-content {
    min-width: 0;

    margin-top: 24px;
}


.reading-title {
    margin: 0;

    font-size: 31px;
    font-weight: 500;
    line-height: 1.12;

    color: var(--charcoal);
}


.reading-subtitle {
    margin-top: 7px;

    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;

    color: var(--taupe);
}


.reading-lead {
    max-width: none;

    margin-top: 20px;

    font-size: 17px;
    font-weight: 500;
    line-height: 1.55;

    color: var(--charcoal);
}


/* ==================================================
   КАТЕГОРИИ
   ================================================== */

.reading-categories {
    display: flex;
    flex-wrap: wrap;

    gap: 7px 18px;

    margin-top: 21px;
}


.reading-category {
    display: block;

    padding-bottom: 2px;

    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;

    color: var(--taupe);

    text-decoration: none;

    border-bottom:
        1px solid var(--sand-500);
}


/* ==================================================
   ДЛИТЕЛЬНОСТЬ
   ================================================== */

.reading-duration {
    margin-top: 16px;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;

    color: var(--gray-700);
}


.reading-duration strong {
    font-weight: 600;

    color: var(--charcoal);
}


/* ==================================================
   О РАЗБОРЕ + АУДИО
   ================================================== */

.reading-info {
    display: block;

    margin-top: 0;

    border-bottom: 0;
}


.reading-info-block {
    min-width: 0;

    padding: 29px 0;

    border-right: 0;

    border-bottom:
        1px solid var(--cream-500);
}


.reading-info-block:first-child {
    padding-left: 0;
}


.reading-info-block:last-child {
    padding-right: 0;

    border-right: 0;
}


/* ==================================================
   ЗАГОЛОВКИ СЕКЦИЙ
   ================================================== */

.reading-section-title {
    margin: 0 0 16px;

    font-size: 19px;
    font-weight: 500;
    line-height: 1.3;

    color: var(--charcoal);
}


/* ==================================================
   ОПИСАНИЕ
   ================================================== */

.reading-description {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;

    color: var(--gray-700);
}


.reading-description p {
    margin: 0 0 12px;
}


.reading-description p:last-child {
    margin-bottom: 0;
}


/* ==================================================
   АУДИО
   ================================================== */

.reading-audio {
    width: 100%;

    margin-top: 3px;
}


.reading-audio audio {
    display: block;

    width: 100%;
    height: 42px;
}


.reading-audio-note {
    margin-top: 12px;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.55;

    color: var(--gray-700);
}


/* ==================================================
   НАТАЛЬНАЯ КАРТА
   ================================================== */

.reading-chart-section {
    width: 100%;
    max-width: none;

    margin: 0;

    padding: 30px 0 32px;

    border-bottom:
        1px solid var(--cream-500);
}


.reading-chart-section .reading-section-title {
    margin-bottom: 19px;
}


.reading-chart {
    width: 100%;
}


.reading-chart img {
    display: block;

    width: 100%;
    height: auto;
}


/* ==================================================
   КАК ПОЛУЧИТЬ ПОЛНЫЙ РАЗБОР
   ================================================== */

.reading-buy {
    width: 100%;
    max-width: none;

    margin: 0;

    padding-top: 31px;
}


.reading-buy-title {
    margin: 0 0 24px;

    font-size: 23px;
    font-weight: 500;
    line-height: 1.3;

    color: var(--charcoal);
}


/* ==================================================
   ТЕКУЩИЙ ДОСТУП
   ================================================== */

.reading-current-access {
    width: 100%;

    margin-bottom: 25px;

    padding: 15px 16px 16px;

    box-sizing: border-box;
}


.reading-current-access span {
    display: block;

    margin: 0;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;

    color: var(--gray-700);
}


.reading-current-access strong {
    display: inline;

    font-size: inherit;
    font-weight: 600;
    line-height: inherit;

    color: var(--charcoal);
}


/* ==================================================
   УСЛОВИЯ ДОСТУПА
   ================================================== */

.reading-access-info {
    display: block;

    width: 100%;

    border-top:
        1px solid var(--cream-500);

    border-bottom: 0;
}


.reading-access-item {
    width: 100%;

    padding: 19px 0 20px;

    box-sizing: border-box;

    border-right: 0;

    border-bottom:
        1px solid var(--cream-500);
}


.reading-access-item:last-child {
    padding: 19px 0 20px;

    border-right: 0;
}


.reading-access-item h3 {
    margin: 0;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;

    color: var(--charcoal);
}


.reading-access-item p {
    margin: 7px 0 0;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;

    color: var(--gray-700);
}


.reading-access-item strong {
    font-weight: 600;

    color: var(--charcoal);
}


/* ==================================================
   ПЛАШКА ВЫГОДНО
   ================================================== */

.reading-access-badge {
    display: inline-block;

    margin-left: 7px;
    padding: 2px 7px;

    border-radius: 3px;

    background: var(--orange-100);

    font-size: 9px;
    font-weight: 600;
    line-height: 1.4;

    letter-spacing: 0.04em;
    text-transform: uppercase;

    vertical-align: 2px;

    color: var(--white);
}


/* ==================================================
   ВАРИАНТЫ ОПЛАТЫ
   ================================================== */

.reading-buy-options {
    width: 100%;

    margin-top: 30px;
}


.reading-buy-options::before {
    content: "Где смотреть";

    display: block;

    margin-bottom: 5px;

    font-size: 19px;
    font-weight: 500;
    line-height: 1.3;

    color: var(--charcoal);
}


/* ==================================================
   ОДИН ВАРИАНТ ОПЛАТЫ
   ================================================== */

.reading-buy-option {
    display: block;

    width: 100%;

    padding: 19px 0 21px;

    box-sizing: border-box;

    border-bottom:
        1px solid var(--cream-500);
}


.reading-buy-option-text {
    width: 100%;
    min-width: 0;
}


.reading-buy-option-text h3 {
    margin: 0;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;

    color: var(--charcoal);
}


.reading-buy-option-text p {
    max-width: none;

    margin: 7px 0 16px;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;

    color: var(--gray-700);
}


/* ==================================================
   КНОПКИ
   ================================================== */

.reading-buy-button,
.reading-subscription-button {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 44px;

    padding: 10px 16px;

    box-sizing: border-box;

    border-radius: 4px;

    background: var(--charcoal);

    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;

    white-space: normal;

    text-align: center;

    color: var(--white);

    text-decoration: none;
}


.reading-buy-button-light {
    background: var(--charcoal);
}


/* ==================================================
   СЕЙЧАС ДОСТУПНЫ ПО ПОДПИСКЕ
   ================================================== */

.reading-subscription-list {
    width: 100%;
    max-width: none;

    margin: 38px 0 0;

    padding-top: 29px;

    border-top:
        1px solid var(--cream-500);
}


.reading-subscription-list-title {
    margin: 0 0 18px;

    font-size: 21px;
    font-weight: 500;
    line-height: 1.3;

    color: var(--charcoal);
}


.reading-subscription-list-items {
    display: block;

    width: 100%;
}


/* ==================================================
   ОДИН РАЗБОР В СПИСКЕ
   ================================================== */

.reading-subscription-list-item {
    display: grid;

    grid-template-columns:
        78px minmax(0, 1fr);

    gap: 15px;

    align-items: center;

    width: 100%;

    padding: 12px 0;

    box-sizing: border-box;

    color: inherit;

    text-decoration: none;

    border-bottom:
        1px solid var(--cream-500);
}


.reading-subscription-list-item:first-child {
    padding-top: 0;
}


.reading-subscription-list-image {
    width: 78px;
    height: 78px;

    aspect-ratio: auto;

    overflow: hidden;

    border-radius: 5px;

    background: var(--cream-300);
}


.reading-subscription-list-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.reading-subscription-list-text {
    min-width: 0;

    margin-top: 0;
}


.reading-subscription-list-text strong {
    display: block;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;

    color: var(--charcoal);
}


.reading-subscription-list-text span {
    display: block;

    margin-top: 3px;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;

    color: var(--taupe);
}