:root {
    --gap: 20px;
}

/* catalog */

.catalog {
    padding-top: 40px;
    background-color: var(--color-white);
}

.item-wide,
.item-small {
    width: 49%;
}

.course-card {
    background-color: #F2F7FE;
    border-radius: 15px;
    --padding: 20px;
    padding: var(--padding);
}

.catalog-list {
    flex-wrap: wrap;
    gap: var(--gap);
    justify-content: space-around;
    margin-bottom: 40px;
}

.card-wide {
    --course-logo-size: 132px;
    --card-top-right-margin-right: 45px;
}

.card-small {
    --course-logo-size: 80px;
    --card-top-right-margin-right: 35px;
}

.card-top {
    border-bottom: 1px solid #DEE3EA;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.card-bottom {
    gap: 20px;
}

.card-top-right {
    width: calc(100% - var(--padding) * 2 - var(--card-top-right-margin-right) - var(--course-logo-size));
    margin-right: auto;
}

.card-image {
    width: var(--course-logo-size);
    height: var(--course-logo-size);
}

.card-certificate {
    background-color: #2A2F36;
    background-image: url("../../courses/certificate-icon.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-position-x: 10px;
    background-size: 28px 28px;
    border-radius: 10px;
    padding: 11px 10px 11px 48px;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Montserrat-Alternates', 'Montserrat', sans-serif;
    color: #FFF;
    margin-bottom: 20px;
    width: 305px;
}

.card-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    font-family: 'Montserrat-Alternates-Bold', 'Montserrat-Bold', sans-serif;
}

.card-wide {
    --width: 50%;
    --margin-bottom: 0;
}

.card-small {
    --width: 100%;
    --margin-bottom: 30px;
    --border-bottom: 1px solid #DEE3EA;
}

.card-main-info {
    border: 1px solid #01929C;
    border-radius: 20px;
    padding: 20px 27px;
    width: var(--width);
    align-items: center;
    margin-bottom: var(--margin-bottom);
}

.card-main-info-list {
    --offset: 1;
    --gap: 30px;
    gap: var(--gap);
}

.main-info-item {
    gap: 15px;
}

.info-item-title, .info-item-bottom-text {
    padding: 0;
    margin: 0;
}

.info-item-title {
    font-size: 20px;
    font-weight: 700;
    font-family: Montserrat-Alternates-Bold, Montserrat-Bold, sans-serif;
    color: #2A2F36;
    margin-bottom: 5px;
}

.info-item-bottom-text {
    font-size: 14px;
    font-weight: 500;
    color: #B6BBC2;
}

.info-item-icon {
    width: 44px;
    height: 44px;
}

.card-buy-section {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.card-price {
    gap: 30px;
    margin-bottom: 20px;
    align-items: flex-end;
}

.month-price {
    font-size: 28px;
    font-weight: 700;
    font-family: Montserrat-Alternates-Bold, Montserrat-Bold, sans-serif;
    color: #3E434A;
}

.full-price {
    font-size: 16px;
    font-weight: 500;
    color: #B6BBC2;
}

.card-btn-form {
    width: 100%;
}

.card-btn {
    background-color: #EEC690;
    border-radius: 15px;
    padding: 15px 20px;
    width: 100%;
    display: block;
    text-align: center;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

.card-btn:hover {
    cursor: pointer;
    scale: 1.03;
    box-shadow: 0 4px 20px 0 rgba(238, 198, 144, 0.9);
}

.course-mini-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    border: 4px solid var(--color-brandBlue);
    border-radius: 26px;
    background: var(--color-white);
    overflow: visible;
    box-shadow: 0 16px 40px rgba(42, 47, 54, 0.12);
}

.course-mini-card__image {
    height: 190px;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    background: var(--color-g-dark);
}

.course-mini-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* У курса в записи обложка — небольшой квадратный логотип: показываем его целиком,
   а не растягиваем на всю ширину карточки. */
.course-mini-card__image--logo img {
    object-fit: contain;
    padding: 18px;
}

.course-mini-card__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 22px 24px 0;
}

.course-mini-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.course-mini-card__tag {
    min-width: 92px;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--color-brandGold);
    color: var(--color-g-dark);
    font-size: 15px;
    line-height: 1;
    font-weight: 800;
    text-align: center;
}

.course-mini-card__title {
    margin: 0 0 14px;
    font-size: 32px;
    line-height: 1.05;
    font-weight: 900;
    font-family: Montserrat-Alternates-Bold, Montserrat-Bold, sans-serif;
    color: var(--color-g-dark);
}

.course-mini-card__description {
    margin: 0 0 18px;
    font-size: var(--font-md);
    line-height: 1.45;
    font-weight: 500;
    color: var(--color-l-dark);
}

.course-mini-card__author {
    margin-top: auto;
    margin-bottom: 18px;
    padding: 12px 14px;
    border-left: 4px solid var(--color-brandBlue);
    border-radius: 10px;
    background: #f2f7fe;
}

.course-mini-card__label,
.course-mini-card__author-name,
.course-mini-card__author-exp {
    margin: 0;
}

.course-mini-card__label {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #7d8793;
}

.course-mini-card__author-name {
    margin-bottom: 4px;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 800;
    color: var(--color-g-dark);
}

.course-mini-card__author-exp {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-brandBlue);
}

.course-mini-card__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--color-brandBlue);
    border-radius: 15px;
    background: #f2f7fe;
}

.course-mini-card__meta dt,
.course-mini-card__meta dd {
    margin: 0;
}

.course-mini-card__meta dt {
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 600;
    color: #7d8793;
}

.course-mini-card__meta dd {
    font-size: 15px;
    line-height: 1.25;
    font-weight: 800;
    color: var(--color-g-dark);
}

.course-mini-card__bottom {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 18px 24px 24px;
}

.course-mini-card__price {
    display: flex;
    flex-direction: column;
    min-width: 130px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f2f7fe;
}

.course-mini-card__price-value {
    font-size: 24px;
    line-height: 1.1;
    font-weight: 900;
    font-family: Montserrat-Alternates-Bold, Montserrat-Bold, sans-serif;
    color: var(--color-g-dark);
}

.course-mini-card__price-caption {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #7d8793;
}

.course-mini-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    min-height: 58px;
    border-radius: 14px;
    padding: 16px 22px;
    background: var(--color-brandGold);
    color: var(--color-g-dark);
    font-size: 18px;
    line-height: 1;
    font-weight: 900;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(238, 198, 144, 0.55);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.course-mini-card__button:hover,
.course-mini-card__button:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(238, 198, 144, 0.9);
    outline: none;
}

@media screen and (max-width: 768px) {
    .item-wide,
    .item-small {
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .course-mini-card {
        border-width: 3px;
        border-radius: 22px;
    }

    .course-mini-card__image {
        height: 170px;
        border-radius: 18px 18px 0 0;
    }

    .course-mini-card__body {
        padding: 20px 20px 0;
    }

    .course-mini-card__title {
        font-size: 28px;
    }

    .course-mini-card__meta,
    .course-mini-card__bottom {
        grid-template-columns: 1fr;
    }

    .course-mini-card__bottom {
        padding-right: 20px;
        padding-bottom: 24px;
        padding-left: 20px;
    }

    .course-mini-card__button {
        width: 100%;
    }
}

.catalog-paginator {
    flex-direction: column;
    align-items: center;
    margin-bottom: 100px;
}

.paginator-list {
    gap: 25px;
}

.paginator-link {
    padding: 5px 15px;
}

.link-active {
    border: 1px solid #01929C;
    border-radius: 5px;
}

/* Слово «программирования» не помещается в строку телефона при общем размере заголовка. */
@media (max-width: 480px) {
    .hero-container .hero-title {
        font-size: clamp(24px, 7.6vw, 30px);
    }
}