/* ==================================================
   СТРАНИЦА РАЗБОРА
   ================================================== */

.reading-page {
    width: 100%;

    padding: 36px 48px 70px;

    box-sizing: border-box;

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


.reading-container {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
}


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

.reading-hero {
    display: grid;

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

    gap: 48px;

    align-items: center;

    padding-bottom: 42px;

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


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

.reading-photo {
    width: 430px;

    overflow: hidden;

    border-radius: 8px;

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


.reading-photo img {
    display: block;

    width: 100%;
    height: auto;
}


/* ==================================================
   HERO — ТЕКСТ
   ================================================== */

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


.reading-title {
    margin: 0;

    font-size: 46px;
    font-weight: 500;
    line-height: 1.1;

    color: var(--charcoal);
}


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

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

    color: var(--taupe);
}


/* ==================================================
   ИНТРИГУЮЩЕЕ ОПИСАНИЕ
   ================================================== */

.reading-lead {
    max-width: 620px;

    margin-top: 24px;

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

    color: var(--charcoal);
}


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

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

    gap: 8px 22px;

    margin-top: 25px;
}


.reading-category {
    position: relative;

    display: block;

    padding-bottom: 3px;

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

    color: var(--taupe);

    text-decoration: none;

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


.reading-category:hover {
    color: var(--charcoal);
}


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

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

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

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


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

    color: var(--charcoal);
}


/* ==================================================
   ИНФОРМАЦИЯ О РАЗБОРЕ
   ================================================== */

.reading-info {
    display: grid;

    grid-template-columns:
        1.25fr 0.75fr;

    margin-top: 42px;

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


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

    padding: 0 36px 38px;

    border-right:
        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 17px;

    font-size: 20px;
    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: 4px;
}


.reading-audio audio {
    display: block;

    width: 100%;
    height: 42px;
}


.reading-audio-note,
.reading-chart-text {
    margin-top: 14px;

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

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


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

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

    margin: 0 auto;

    padding: 40px 0 48px;

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


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

    text-align: center;
}


.reading-chart {
    width: 100%;
}


.reading-chart img {
    display: block;

    width: 100%;
    height: auto;
}


/* ==================================================
   ПОКУПКА
   ================================================== */

.reading-buy {
    width: 720px;
    max-width: 100%;

    margin: 0 auto;

    padding-top: 40px;
}


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

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

    color: var(--charcoal);
}


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

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

    margin-bottom: 28px;

    padding: 16px 20px 17px;

    box-sizing: border-box;

    background: var(--cream-200);

    border-left:
        3px solid var(--sand-500);
}


.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-current-access-active {
    border-left-color: var(--sage-500);
}


/* только отдельная покупка */

.reading-current-access-single {
    border-left-color: var(--sand-gold);
}


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

.reading-access-info {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    width: 100%;

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

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


.reading-access-item {
    min-width: 0;

    padding: 20px 28px 21px 0;

    box-sizing: border-box;

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


.reading-access-item:last-child {
    padding-right: 0;
    padding-left: 28px;

    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: 8px;
    padding: 3px 8px;

    border-radius: 3px;

    background: var(--orange-100);

    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;

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

    vertical-align: 2px;

    color: var(--white);
}


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

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

    margin-top: 34px;
}


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

    display: block;

    margin-bottom: 5px;

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

    color: var(--charcoal);
}


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

.reading-buy-option {
    display: grid;

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

    gap: 30px;

    align-items: center;

    width: 100%;

    padding: 19px 0 20px;

    box-sizing: border-box;

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


.reading-buy-option-text {
    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: 430px;

    margin: 6px 0 0;

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

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


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

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

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

    min-height: 40px;

    padding: 0 20px;

    box-sizing: border-box;

    border-radius: 4px;

    background: var(--charcoal);

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

    white-space: nowrap;

    color: var(--white);

    text-decoration: none;
}


.reading-buy-button:hover,
.reading-subscription-button:hover {
    background: var(--coal);
}


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


.reading-buy-button-light:hover {
    background: var(--gray-700);
}


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

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

    margin: 52px auto 0;

    padding-top: 36px;

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


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

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

    color: var(--charcoal);
}


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

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 24px;
}


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

    min-width: 0;

    color: inherit;

    text-decoration: none;
}


.reading-subscription-list-image {
    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 6px;

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


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

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.reading-subscription-list-text {
    margin-top: 11px;
}


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

    font-size: 15px;
    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);
}


.reading-subscription-list-item:hover
.reading-subscription-list-text strong {
    color: var(--taupe);
}