.hot-news {
    padding-top: 55px;
    padding-bottom: 70px;
}

.hot-news-head {
    padding-bottom: 23px;
}

@media (max-width: 991.98px) {
    .hot-news-head {
        padding-bottom: 0;
    }
}

.hot-news__content {
    display: grid;
    grid-template-areas:
        "big smallFirst"
        "big smallSecond";
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: min(.5rem + 1vw, 1.5rem);
}

.hot-card--feature {
    grid-area: big;
}

.hot-card--small-first {
    grid-area: smallFirst;
}

.hot-card--small-second {
    grid-area: smallSecond;
}
@media (max-width: 1199.98px) {
    .hot-news__content {
        grid-template-areas:
            "big big"
            "smallFirst smallSecond";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 2fr 1fr;
    }
}
@media (max-width: 767.98px) {
    .hot-news__content {
        grid-template-areas:
            "big"
            "smallFirst"
            "smallSecond";
        grid-template-columns: auto;
        grid-template-rows: auto;
    }
}
.hot-card {
    position: relative;
    display: block;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
}
.hot-card:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}
.hot-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 9/5;
}
.hot-card--feature .hot-card__img {
    aspect-ratio: 8/5;
}
.hot-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.73) 25%, rgba(0, 0, 0, 0) 75%);
}
.hot-card__date {
    font-size: 12px;
    font-weight: 300;
    display: inline-block;
    padding: 3px 7px;
    background: rgb(0 0 0 / 67%);
    border-radius: 99px;
    margin-bottom: 5px;
}
.hot-card__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: clamp(1rem, 5vw - 1rem,2rem);
    z-index: 2;
}
.hot-card__title {
    font-size: clamp(1rem, .5rem + 1vw, 1.5rem);
    font-weight: 300;
    margin: 0 0 0.9rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}
.hot-card__title:hover {
    text-decoration: underline;
}

.hot-card--feature .hot-card__title {
    font-size: clamp(1.2rem, .8rem + 1vw, 2rem);
    margin-bottom: 0.75rem;
    letter-spacing: 0.0125em;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}
.hot-card__desc {
    font-size: clamp(0.8rem, .5rem + .5vw, 1rem);
    font-weight: 300;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}
.hot-card--feature .hot-card__desc {
    font-size: clamp(0.8rem, .5rem + .8vw, 1rem);
}
@media (max-width: 991.98px) {
    /* МОЖНА ПРИБРАТИ */
    .hot-card__desc {
        /* це для вирівнювання тайтлу згори якщо в сусідній картці дескріпшн має 2 рядка, а тут 1*/
        display: inline-flex;
        align-items: flex-start;
        min-height: 2.5rem;
    }
}
@media (max-width: 767.98px) {
    .hot-card__img {
        aspect-ratio: 6/4;
    }
    .hot-card__desc {
        display: none;
    }
    .hot-card--feature .hot-card__title,
    .hot-card__title {
        -webkit-line-clamp: 5;
        margin-bottom: 0;
        font-size: clamp(14px, .5rem + 1vw, 1.5rem);
    }
}
@media (max-width: 575.98px) {
    .hot-card--feature .hot-card__title,
    .hot-card__title {
        -webkit-line-clamp: 4;
    }
}

 /* aside */
.hot-aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 470px;
}

.hot-aside__search input {
    border-radius: 50px;
    padding-left: 2.5rem;
    background: url('data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2221%22%20viewBox%3D%220%200%2021%2021%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M20.6807%2019.1277L15.5038%2013.9295C16.8349%2012.4018%2017.5642%2010.4797%2017.5642%208.47874C17.5642%203.80364%2013.6245%200%208.7821%200C3.93973%200%200%203.80364%200%208.47874C0%2013.1538%203.93973%2016.9575%208.7821%2016.9575C10.6%2016.9575%2012.3324%2016.4281%2013.8135%2015.4232L19.0297%2020.6609C19.2477%2020.8795%2019.5409%2021%2019.8552%2021C20.1526%2021%2020.4348%2020.8905%2020.649%2020.6914C21.1042%2020.2686%2021.1187%2019.5675%2020.6807%2019.1277ZM8.7821%202.21185C12.3614%202.21185%2015.2732%205.0231%2015.2732%208.47874C15.2732%2011.9344%2012.3614%2014.7456%208.7821%2014.7456C5.20282%2014.7456%202.29098%2011.9344%202.29098%208.47874C2.29098%205.0231%205.20282%202.21185%208.7821%202.21185Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E') no-repeat 1rem center;
    background-size: 1rem;
}

.hot-tags {
    /*font-size: 14px;*/
    font-size: 16px;
    font-weight: 100;
    display: flex;
    align-items: baseline;
    /*gap: .5rem;*/
    gap: .7rem;
    flex-wrap: wrap;
    margin-bottom: 2em;
}

.hot-tags .pill {
    /*padding: 0 10px;*/
    padding: 3px 20px;
    border-radius: 20px;
    line-height: 30px;
    background: var(--theme-light-grey);
}
.hot-tags .pill:hover { background: #DCDCE3; }
.hot-tags .pill:focus-visible {
    outline: 2px solid #5b5aff;   /* доступність */
    outline-offset: 2px;
}

.hot-tag {
    cursor: pointer;
}


/* ===== загальне ===== */
.hot-search,
.hot-subscribe__form,
.hot-input-underline,
.hot-input-underline input,
.hot-search input,
.hot-btn {
    font-family: "e-ukraine", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.hot-subscribe {
    margin: 0 auto;
    /*padding: 50px;*/
    padding: 25px 40px;
    background: var(--theme-light-grey);
}

.hot-subscribe__label {
    /*font-size: 18px;*/
    /*margin-bottom: 1.5rem;*/
    /*font-size: 24px;*/
    margin-bottom: 1.7rem;
    font-weight: 400;
    font-size: 1.3rem;
}

.hot-subscribe__desc {
    /*font-size: 14px;*/
    font-size: 17px;
    font-weight: 300;
    color: #8a8a8a;
    margin-bottom: 2rem;
}

/* ===== пошук (піл-інпут з іконкою) ===== */
.hot-search {
    position: relative;
    /*margin-bottom: 60px;*/
    margin-bottom: 37px;
}

.hot-search input{
    width: 100%;
    /*height: 52px;*/
    height: 70px;
    border-radius: 999px;
    border: 1px solid #d6d6d6;
    /*padding: 0 18px 0 48px;        !* місце під іконку *!*/
    padding: 0 18px 0 70px;        /* місце під іконку */
    /*font-size: 16px;*/
    font-size: 1.1rem;
    font-weight: 100;
    background:
            url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwLjY4MDcgMTkuMTI3N0wxNS41MDM4IDEzLjkyOTVDMTYuODM0OSAxMi40MDE4IDE3LjU2NDIgMTAuNDc5NyAxNy41NjQyIDguNDc4NzRDMTcuNTY0MiAzLjgwMzY0IDEzLjYyNDUgMCA4Ljc4MjEgMEMzLjkzOTczIDAgMCAzLjgwMzY0IDAgOC40Nzg3NEMwIDEzLjE1MzggMy45Mzk3MyAxNi45NTc1IDguNzgyMSAxNi45NTc1QzEwLjYgMTYuOTU3NSAxMi4zMzI0IDE2LjQyODEgMTMuODEzNSAxNS40MjMyTDE5LjAyOTcgMjAuNjYwOUMxOS4yNDc3IDIwLjg3OTUgMTkuNTQwOSAyMSAxOS44NTUyIDIxQzIwLjE1MjYgMjEgMjAuNDM0OCAyMC44OTA1IDIwLjY0OSAyMC42OTE0QzIxLjEwNDIgMjAuMjY4NiAyMS4xMTg3IDE5LjU2NzUgMjAuNjgwNyAxOS4xMjc3Wk04Ljc4MjEgMi4yMTE4NUMxMi4zNjE0IDIuMjExODUgMTUuMjczMiA1LjAyMzEgMTUuMjczMiA4LjQ3ODc0QzE1LjI3MzIgMTEuOTM0NCAxMi4zNjE0IDE0Ljc0NTYgOC43ODIxIDE0Ljc0NTZDNS4yMDI4MiAxNC43NDU2IDIuMjkwOTggMTEuOTM0NCAyLjI5MDk4IDguNDc4NzRDMi4yOTA5OCA1LjAyMzEgNS4yMDI4MiAyLjIxMTg1IDguNzgyMSAyLjIxMTg1WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==")
            no-repeat 16px center #fff;
    background-size: 25px;
    background-position-x: 30px;
    outline: none;
}

.hot-search input::placeholder { color:#8a8a8a; }
.hot-search input:hover       { border-color:#bfbfbf; }
.hot-search input:focus-visible{
    outline: 2px solid #0d6efd;   /* фокус рамкою 2px, як просив */
    outline-offset: 2px;
}

/* ===== підписка: «підкреслений» інпут ===== */
.hot-input-underline { position: relative;
    margin-bottom: 2rem; }
.hot-input-underline input{
    width: 100%;
    height: 48px;
    border: none;
    border-bottom: 2px solid #000;
    background: transparent;
    /*font-size: 16px;*/
    font-size: 22px;
    font-weight: 100;
    padding: 0;
    outline: none;
}
.hot-input-underline input::placeholder{ color:#7b7b7b; }

.hot-input-underline input:focus-visible{
    outline: 2px solid #0d6efd;   /* доступність */
    outline-offset: 2px;
}

/* стани помилки/валідності (опційно, якщо треба) */
.hot-input-underline input:invalid:focus-visible{
    /*outline-color:#dc3545;*/
}

/* ===== велика чорна кнопка-пігулка ===== */
.hot-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /*height: 56px;                 !* як у макеті *!*/
    height: 70px;                 /* як у макеті */
    border-radius: 999px;
    background:#000;
    color:#fff;
    border: 0;
    /*font-size: 16px;*/
    /*font-weight: 400;*/
    font-size: 21px;
    font-weight: 100;
    cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease, transform .02s ease;
}
.hot-btn:hover{ background:#111; }
.hot-btn:active{ transform: translateY(0); }   /* без «підйомів» */
.hot-btn:focus-visible{
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* валідація без js */

/* кнопка вимкнена, поки поле порожнє або невалідне */
.hot-subscribe__form:has(input[type="email"]:invalid),
.hot-subscribe__form:has(input[type="email"]:placeholder-shown) {
    /* контейнер-стан, нічого не малюємо тут */
}

/* стилюємо кнопку у стані "вимкнено" */
.hot-subscribe__form:has(input[type="email"]:invalid) .hot-btn,
.hot-subscribe__form:has(input[type="email"]:placeholder-shown) .hot-btn {
    opacity: .3;
    cursor: not-allowed;
    pointer-events: none;   /* фактично блокує кліки */
}

/* коли email валідний — кнопка активна */
.hot-subscribe__form:has(input[type="email"]:valid) .hot-btn {
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
}

/* кінець валідації без js */


/* примітка під кнопкою */
.hot-form-note{
    /*font-size: 12px;*/
    font-size: 14px;
    margin-top: 2rem;
    line-height: 1.35;
    color:#959595;
    font-weight: 100;
}

/* ===== адаптив ===== */
@media (max-width: 575.98px){
    .hot-search input{ height: 48px; }
    .hot-btn{ height: 50px; }
}


a.hot-card:hover {
    color:#ffffff;
}