.featured-projects {
    padding: 94px max(24px, calc((100vw - 1180px) / 2));
    background: #fff;
}

.featured-projects__heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 32px;
}

.featured-projects__heading h2 {
    max-width: none;
    font-size: clamp(34px, 3.3vw, 46px);
}

.featured-projects__heading > div > p:not(.eyebrow) {
    max-width: 510px;
    margin: 15px 0 0;
    color: #657a7e;
    font-size: 16px;
    line-height: 1.55;
}

.featured-projects__all {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    padding: 12px 16px;
    border: 1px solid #d7e1dc;
    border-radius: 10px;
    color: #274952;
    font-size: 14px;
    font-weight: 800;
    transition: border-color .2s ease, background-color .2s ease;
}

.featured-projects__all:hover { border-color: #ff7148; background: #fff5f1; }
.featured-projects__all i { color: #ff7148; }

.featured-projects__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 43px;
}

.featured-projects__skeleton {
    height: 395px;
    border: 1px solid #e0e7e2;
    border-radius: 17px;
    background: linear-gradient(105deg, #f1f3f0 8%, #fafbf9 18%, #f1f3f0 33%);
    background-size: 200% 100%;
    animation: featured-projects-loading 1.35s linear infinite;
}

@keyframes featured-projects-loading { to { background-position-x: -200%; } }

.featured-card {
    position: relative;
    display: flex;
    min-height: 395px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #d7e1dc;
    border-radius: 17px;
    background: #fff;
    color: #274952;
    box-shadow: 0 10px 24px rgba(39, 73, 82, .06);
    transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}

.featured-card:hover { transform: translateY(-4px); border-color: #9eb4af; box-shadow: 0 17px 30px rgba(39, 73, 82, .13); }
.featured-card:focus-visible { outline: 3px solid rgba(255, 113, 72, .4); outline-offset: 3px; }

.featured-card__visual {
    position: relative;
    display: grid;
    height: 194px;
    place-items: center;
    overflow: hidden;
    padding: 35px;
    background: #f7f5f0;
}

.featured-card__visual::after {
    position: absolute;
    right: -45px;
    bottom: -62px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255, 113, 72, .1);
    content: "";
}

.featured-card__visual img { position: relative; z-index: 1; width: 150px; max-height: 110px; object-fit: contain; }
.featured-card__visual img.featured-card__photo { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; object-fit: cover; }
.featured-card__visual:has(.featured-card__photo)::before { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(22, 47, 54, .22)); content: ""; }

.featured-card__badges { position: absolute; z-index: 2; top: 13px; right: 13px; left: 13px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.featured-card__badge { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 10px; border-radius: 999px; background: #ff7148; color: #fff; font-size: 11px; font-weight: 800; box-shadow: 0 5px 12px rgba(255, 113, 72, .22); }
.featured-card__badge--status { background: #eef5f3; color: #2d515c; box-shadow: 0 3px 10px rgba(39, 73, 82, .1); }

.featured-card__body { display: flex; flex: 1; flex-direction: column; padding: 21px 21px 20px; }
.featured-card__body h3 { margin: 0; color: #274952; font-size: 21px; line-height: 1.22; }
.featured-card__location { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; color: #687d80; font-size: 13px; }
.featured-card__location i { color: #ff7148; }
.featured-card__price { margin: auto 0 0; padding-top: 20px; color: #274952; font-size: 13px; font-weight: 700; }
.featured-card__price strong { display: block; margin-top: 3px; color: #ff7148; font-size: 22px; line-height: 1.1; }
.featured-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 15px; border-top: 1px solid #e6ece8; color: #527077; font-size: 13px; font-weight: 700; }
.featured-card__footer span:last-child { color: #ff7148; white-space: nowrap; }

@media (max-width: 800px) {
    .featured-projects { padding-top: 64px; padding-bottom: 64px; }
    .featured-projects__heading { align-items: flex-start; flex-direction: column; gap: 20px; }
    .featured-projects__grid { grid-template-columns: 1fr; margin-top: 31px; }
    .featured-card, .featured-projects__skeleton { min-height: 0; height: auto; }
    .featured-projects__skeleton { height: 370px; }
}

@media (max-width: 500px) {
    .featured-projects { padding-right: 16px; padding-left: 16px; }
    .featured-card__visual { height: 177px; }
}