/* =========================
   LOFTS PAGE — PREMIUM AURORA
========================= */

.lofts-hero {
    min-height: 560px !important;
    display: flex !important;
    align-items: center !important;
    text-align: center !important;

    background:
        radial-gradient(circle at 12% 18%, rgba(214,170,255,.35), transparent 32%),
        radial-gradient(circle at 86% 24%, rgba(139,197,255,.30), transparent 34%),
        radial-gradient(circle at 50% 88%, rgba(255,188,230,.22), transparent 36%),
        linear-gradient(135deg,#fbf3fb 0%,#f1ebff 34%,#e9f1ff 70%,#fff6fb 100%) !important;
}

.lofts-hero h1 {
    color: #34204f !important;
    font-size: clamp(3rem,7vw,6.2rem) !important;
}

.lofts-hero p {
    color: rgba(52,32,79,.68) !important;
    max-width: 760px;
    margin: 0 auto;
    font-size: clamp(1rem,2vw,1.25rem);
}

/* ========================= */

.lofts-page {
    position: relative;

    background:
        radial-gradient(circle at 15% 18%, rgba(214,170,255,.24), transparent 30%),
        radial-gradient(circle at 88% 34%, rgba(139,197,255,.22), transparent 31%),
        linear-gradient(135deg,#fbf3fb 0%,#f0ebff 42%,#eaf2ff 100%);
}

.lofts-section {
    padding: 100px 0 !important;
}

/* =========================
   CARDS
========================= */

.loft-card {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 46px;

    align-items: center;

    margin-bottom: 74px;

    padding: clamp(22px,4vw,44px);

    border-radius: 38px;

    background:
        linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.34)) !important;

    border: 1px solid rgba(255,255,255,.62) !important;

    box-shadow:
        0 28px 80px rgba(108,75,180,.14),
        0 12px 32px rgba(44,27,74,.08) !important;

    backdrop-filter: blur(18px);
}

.loft-card-mystic {
    background:
        linear-gradient(135deg, rgba(255,255,255,.68), rgba(235,229,255,.42)),
        radial-gradient(circle at 12% 12%, rgba(124,64,180,.18), transparent 38%) !important;
}

/* =========================
   GALLERY
========================= */

.loft-gallery {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px;
}

/* PREMIUM MASONRY */

.mystic-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
    align-items: stretch !important;
    gap: 20px;
}

.mystic-gallery .loft-photo {
    height: 260px;
}

.mystic-gallery .loft-photo-wide {
    grid-column: 1 / -1;
    height: 340px !important;
}

.loft-photo,
.loft-placeholder {
    position: relative;

    overflow: hidden;

    border-radius: 30px;

    background:
        linear-gradient(135deg,#e9dcff,#dcecff);

    border: 1px solid rgba(255,255,255,.55);

    box-shadow:
        0 18px 42px rgba(45,22,70,.16);
}

.loft-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover !important;
    object-position: center center !important;

    filter: contrast(1.04) saturate(.98);

    transition:
        transform .55s ease,
        filter .55s ease;
}

/* Вторая фотка */

.mystic-gallery .loft-photo:nth-child(2) img {
    object-fit: cover !important;
    object-position: center top !important;
}

.loft-photo::after {
    content: '';

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(180deg, rgba(20,10,35,.05), rgba(20,10,35,.18)),
        radial-gradient(circle at 18% 18%, rgba(196,122,255,.16), transparent 36%);
}

.loft-card:hover .loft-photo img {
    transform: scale(1.035);

    filter:
        contrast(1.08)
        saturate(1.04);
}

/* =========================
   PLACEHOLDER
========================= */

.loft-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 260px;

    color: rgba(52,32,79,.42);

    font-weight: 800;
    font-size: 1.1rem;
}

/* =========================
   CONTENT
========================= */

.loft-content {
    color: #34204f;
}

.loft-label {
    display: inline-flex;

    margin-bottom: 18px;

    padding: 9px 15px;

    border-radius: 999px;

    background:
        linear-gradient(135deg,
        rgba(220,188,255,.65),
        rgba(139,197,255,.45));

    color: #5b3d88;

    font-weight: 800;
    font-size: .88rem;

    letter-spacing: .03em;

    border: 1px solid rgba(255,255,255,.58);
}

.loft-content h2 {
    color: #34204f !important;

    font-size: clamp(2.2rem,4vw,4rem) !important;

    line-height: 1;

    margin-bottom: 22px;
}

.loft-content p {
    color: rgba(52,32,79,.70) !important;

    font-size: 1.04rem;

    line-height: 1.82;

    margin-bottom: 16px;
}

/* =========================
   FEATURES
========================= */

.loft-features {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 28px;
}

.loft-features span {
    padding: 11px 16px;

    border-radius: 999px;

    background:
        linear-gradient(135deg,
        rgba(236,223,255,.88),
        rgba(220,231,255,.82));

    color: #4b2f72;

    font-weight: 800;

    border: 1px solid rgba(255,255,255,.65);

    box-shadow:
        0 8px 20px rgba(118,76,180,.08);
}

/* =========================
   BUTTON
========================= */

.loft-btn {
    display: inline-flex;

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

    min-height: 58px;

    margin-top: 34px;

    padding: 0 34px;

    border-radius: 999px;

    background:
        linear-gradient(135deg,
        #dcbcff 0%,
        #9f95ff 48%,
        #8bc5ff 100%) !important;

    color: #ffffff !important;

    font-weight: 900;

    text-decoration: none;

    box-shadow:
        0 16px 38px rgba(140,120,255,.28) !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.loft-btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 22px 48px rgba(140,120,255,.38) !important;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 980px) {

    .loft-card {
        grid-template-columns: 1fr;
    }

    .mystic-gallery .loft-photo:first-child,
    .mystic-gallery .loft-photo:nth-child(2) {
        height: 420px !important;
    }
}

@media (max-width: 640px) {

    .lofts-hero {
        min-height: 460px !important;
    }

    .lofts-section {
        padding: 64px 0 !important;
    }

    .loft-gallery {
        grid-template-columns: 1fr;
    }

    .mystic-gallery .loft-photo,
    .mystic-gallery .loft-photo:first-child,
    .mystic-gallery .loft-photo:nth-child(2),
    .mystic-gallery .loft-photo:last-child {
        height: 280px !important;
        grid-column: auto;
    }

    .loft-card {
        border-radius: 28px;
    }
}
/* =========================
   FAIRY LOFT GALLERY
========================= */

.loft-card-fairy {
    background:
        linear-gradient(135deg, rgba(255,255,255,.72), rgba(238,246,255,.46)),
        radial-gradient(circle at 18% 16%, rgba(176,205,255,.22), transparent 38%),
        radial-gradient(circle at 84% 22%, rgba(221,188,255,.22), transparent 36%) !important;
}

.fairy-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
    align-items: stretch !important;
    gap: 20px;
}

.fairy-gallery .loft-photo {
    height: 260px;
}

.fairy-gallery .loft-photo-wide {
    grid-column: 1 / -1;
    height: 340px !important;
}

.fairy-gallery .fairy-table-photo img {
    object-position: center center !important;
}

@media (max-width: 980px) {
    .fairy-gallery .loft-photo:first-child,
    .fairy-gallery .loft-photo:nth-child(2) {
        height: 420px !important;
    }
}

@media (max-width: 640px) {
    .fairy-gallery .loft-photo,
    .fairy-gallery .loft-photo:first-child,
    .fairy-gallery .loft-photo:nth-child(2),
    .fairy-gallery .loft-photo:last-child {
        height: 280px !important;
        grid-column: auto;
    }
}