/* Финальный слой поверх оригинального index.css: данные Django и мобильная версия. */
html { max-width: 100%; overflow-x: hidden; }
body.hi {
    position: relative;
    width: 100%;
    height: max(720px, 100vh);
    min-height: 720px;
    overflow-x: hidden;
    color: #0A4031;
    font-family: Georgia, "Times New Roman", serif;
}

.designer-home-main { min-height: 100%; }
.view, .box-item, .carousel-3d .course-block { overflow: hidden; text-decoration: none; }
.view { box-sizing: border-box; padding: 10px 14px; text-align: center; }
.box-item { box-sizing: border-box; display: flex; align-items: center; padding: 0 12px; color: #B8D9D5; font-size: 14px; line-height: 1.15; }
.box-item:hover { background: rgba(10, 64, 49, .95); }

.border-height-box .back-oval {
    box-sizing: border-box;
    width: max-content;
    min-width: 92px;
    height: 28px;
    padding: 5px 12px;
    color: #0A4031;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    white-space: nowrap;
}
.designer-category-card {
    overflow: visible;
    background-image:
        linear-gradient(180deg, rgba(7, 62, 47, .04), rgba(5, 48, 37, .25)),
        var(--category-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 14px 34px rgba(2,45,32,.18);
}
.designer-category-card .back-oval {
    color: #dff5e6;
    background: rgba(5, 67, 49, .78);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 20px rgba(2,45,32,.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.carousel-3d .course-block {
    aspect-ratio: 16 / 9;
    height: auto;
    color: #B8D9D5;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 24px 65px rgba(0, 35, 26, .28);
    opacity: 0;
    transition: transform .5s ease, opacity .35s ease, filter .35s ease;
    will-change: transform, opacity;
}
.designer-course-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(220, 244, 232, .62); font-size: 88px; font-weight: 800; background: radial-gradient(circle at 50% 35%, rgba(144, 211, 168, .48), transparent 40%); }
.designer-empty-card { background: linear-gradient(135deg, rgba(136,191,155,.58), rgba(10,64,49,.82)); }
.designer-course-description {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    padding: 52px 28px 22px;
    color: #f0fff8;
    background: linear-gradient(180deg, transparent, rgba(3, 34, 26, .92));
    font-size: clamp(13px, 1.15vw, 18px);
    font-weight: 600;
    line-height: 1.42;
    text-align: left;
    text-shadow: 0 2px 10px rgba(0, 22, 16, .8);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}
.carousel-3d .course-block[aria-hidden="false"] .designer-course-description { opacity: 1; }
.carousel-3d nav { position: absolute; z-index: 100; top: 50%; right: 4%; bottom: auto; left: 4%; height: 0; margin: 0; padding: 0 2%; justify-content: space-between; transform: translateY(-50%); pointer-events: none; }
.carousel-3d nav button { pointer-events: auto; }

/* Размер центральной карточки в каждом исходном desktop-диапазоне — всегда 16:9. */
@media (min-width: 761px) and (max-width: 1920px) {
    .carousel-3d { top: calc(48% + 36px); --course-card-half: 126.5625px; }
    .carousel-3d .course-block { width: 450px; height: 253.125px; margin-left: -225px; margin-top: -126.5625px; }
}
@media (min-width: 1921px) and (max-width: 2560px) {
    .carousel-3d { top: calc(48% + 48px); --course-card-half: 208.125px; }
    .carousel-3d .course-block { width: 740px; height: 416.25px; margin-left: -370px; margin-top: -208.125px; }
}
@media (min-width: 2561px) and (max-width: 3840px) {
    .carousel-3d { top: calc(48% + 58px); --course-card-half: 253.125px; }
    .carousel-3d .course-block { width: 900px; height: 506.25px; margin-left: -450px; margin-top: -253.125px; }
}
@media (min-width: 3841px) {
    .carousel-3d { top: calc(48% + 72px); --course-card-half: 323.4375px; }
    .carousel-3d .course-block { width: 1150px; height: 646.875px; margin-left: -575px; margin-top: -323.4375px; }
}

/* Шапка заканчивается на 12.5% высоты страницы; оставляем после неё стабильный зазор. */
@media (min-width: 761px) {
    .carousel-view { top: calc(12.5% + 24px); }
}

@media (max-width: 760px) {
    body.hi { box-sizing: border-box; height: auto; min-height: 100vh; padding: 12px; background-attachment: fixed; }
    .header_index { position: relative; inset: auto; min-height: 142px; border-width: 3px; border-radius: 14px; }
    .menu { min-height: 70px; }
    .burger { top: 7px; left: 14px; }
    .menu-list { top: -3px; left: -3px; padding-top: 74px; }
    .regist { left: auto; right: 14px; top: 12px; bottom: auto; width: 132px; height: 40px; }
    .forym, .help, .info { display: none; }
    .finder { left: 14px; right: 60px; top: 78px; bottom: auto; height: 46px; font-size: 16px; }
    .finder-item { left: auto; right: 14px; top: 78px; bottom: auto; width: 48px; height: 52px; }
    .designer-home-main { display: flex; flex-direction: column; gap: 28px; padding: 26px 0 40px; }
    .carousel-view, .height-space, .carousel-3d, .box-space { position: relative; inset: auto; transform: none; width: 100%; max-width: none; }
    .carousel-view { order: 1; height: 105px; }
    .height-space { order: 2; height: 150px; justify-content: flex-start; }
    .carousel-3d { order: 3; height: 430px; overflow: hidden; perspective: 1200px; mask-image: none; -webkit-mask-image: none; }
    .box-space { order: 4; display: grid; grid-template-columns: 1fr; gap: 22px; }
    .box { width: 100%; height: 290px; }
    .box-item { width: calc(100% - 28px); }
    .info-box { top: 50%; left: 50%; width: calc(100% - 48px); }
    .carousel-3d .course-block { width: min(88vw, 350px); height: auto; margin-left: max(-44vw, -175px); margin-top: max(-24.75vw, -98.4375px); }
    .carousel-3d .carousel-oval { top: -2px; }
    .designer-course-placeholder { font-size: 54px; }
    .carousel-3d { --course-card-half: min(24.75vw, 98.4375px); }
    .designer-course-description { padding: 40px 18px 15px; font-size: 12px; line-height: 1.35; }
    .carousel-3d nav { top: 50%; right: 0; left: 0; }
    .carousel-3d nav button { width: 38px; height: 38px; font-size: 18px; }
}