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

.room-placeholder {
    position: relative;
    min-height: calc(100vh - 72px);
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    background: #07090b;
}

.room-placeholder-background,
.room-placeholder-overlay {
    position: absolute;
    inset: 0;
}

.room-placeholder-background {
    z-index: -4;
    overflow: hidden;
}

.room-placeholder-overlay {
    z-index: -3;
    background:
        linear-gradient(
            90deg,
            rgba(3, 5, 7, .98) 0%,
            rgba(3, 5, 7, .86) 42%,
            rgba(3, 5, 7, .35) 75%,
            rgba(3, 5, 7, .12) 100%
        ),
        linear-gradient(
            180deg,
            rgba(3, 5, 7, .08),
            rgba(3, 5, 7, .25) 55%,
            rgba(3, 5, 7, .92)
        );
}

.room-placeholder-inner {
    width: 100%;
    padding-top: 130px;
    padding-bottom: 130px;
}

.room-placeholder-content {
    position: relative;
    z-index: 2;
    max-width: 790px;
}

.room-placeholder-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--red);
}

.room-placeholder-kicker > span {
    width: 38px;
    height: 1px;
    background: currentColor;
}

.room-placeholder h1 {
    margin-top: 24px;
    font-size: clamp(58px, 10vw, 128px);
    line-height: .88;
    letter-spacing: -.045em;
    text-transform: uppercase;
}

.room-placeholder h1 small {
    display: block;
    margin-top: 25px;
    font-family: "JetBrains Mono", monospace;
    font-size: clamp(13px, 2vw, 20px);
    line-height: 1.3;
    letter-spacing: .16em;
}

.room-placeholder-lead {
    max-width: 58ch;
    margin: 30px 0 0;
    color: rgba(255, 255, 255, .72);
    font-size: clamp(16px, 2vw, 19px);
}

.room-placeholder-status {
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 550px;
    margin-top: 34px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, .13);
    background: rgba(5, 8, 10, .55);
    backdrop-filter: blur(12px);
}

.room-placeholder-status-indicator {
    position: relative;
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 7px rgba(226, 58, 46, .1);
}

.room-placeholder-status strong,
.room-placeholder-status small {
    display: block;
}

.room-placeholder-status strong {
    font-family: "Archivo", sans-serif;
    font-size: 14px;
    text-transform: uppercase;
}

.room-placeholder-status small {
    margin-top: 4px;
    color: rgba(255, 255, 255, .5);
    font-size: 12px;
}

.room-placeholder-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}

/* =========================================================
   AZTEC THEME
========================================================= */

.room-placeholder--aztec {
    background:
        radial-gradient(
            circle at 78% 36%,
            rgba(226, 159, 51, .35),
            transparent 24%
        ),
        linear-gradient(135deg, #201609, #070707 70%);
}

.room-placeholder--aztec .room-placeholder-background {
    background:
        linear-gradient(
            120deg,
            rgba(25, 12, 3, .7),
            rgba(94, 48, 8, .26)
        ),
        repeating-linear-gradient(
            45deg,
            rgba(255, 198, 86, .035) 0,
            rgba(255, 198, 86, .035) 2px,
            transparent 2px,
            transparent 18px
        );
}

.room-placeholder--aztec h1 small {
    color: #e4a94b;
}

.room-placeholder-symbol {
    position: absolute;
    border: 1px solid rgba(236, 177, 74, .18);
    transform: rotate(45deg);
}

.room-placeholder-symbol--one {
    top: 10%;
    right: 6%;
    width: 430px;
    height: 430px;
}

.room-placeholder-symbol--two {
    top: 26%;
    right: 15%;
    width: 260px;
    height: 260px;
}

.room-placeholder-symbol--three {
    right: 1%;
    bottom: -160px;
    width: 520px;
    height: 520px;
}

/* =========================================================
   SUBMARINE THEME
========================================================= */

.room-placeholder--submarine {
    background:
        radial-gradient(
            circle at 78% 38%,
            rgba(16, 167, 198, .22),
            transparent 24%
        ),
        linear-gradient(145deg, #06151b, #020506 72%);
}

.room-placeholder--submarine .room-placeholder-background {
    background:
        linear-gradient(
            180deg,
            rgba(1, 34, 45, .32),
            rgba(0, 7, 10, .8)
        ),
        repeating-linear-gradient(
            90deg,
            rgba(61, 199, 220, .025) 0,
            rgba(61, 199, 220, .025) 1px,
            transparent 1px,
            transparent 70px
        );
}

.room-placeholder--submarine h1 small {
    color: #53c9dc;
}

.room-placeholder--submarine .room-placeholder-status-indicator {
    background: #53c9dc;
    box-shadow: 0 0 0 7px rgba(83, 201, 220, .1);
}

.room-placeholder-sonar {
    position: absolute;
    top: 50%;
    right: -130px;
    width: 720px;
    height: 720px;
    border: 1px solid rgba(83, 201, 220, .12);
    border-radius: 50%;
    transform: translateY(-50%);
}

.room-placeholder-sonar::before,
.room-placeholder-sonar::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(83, 201, 220, .1);
    border-radius: 50%;
}

.room-placeholder-sonar::before {
    inset: 110px;
}

.room-placeholder-sonar::after {
    inset: 225px;
}

.room-placeholder-bubble {
    position: absolute;
    border: 1px solid rgba(111, 220, 235, .18);
    border-radius: 50%;
}

.room-placeholder-bubble--one {
    top: 18%;
    right: 31%;
    width: 30px;
    height: 30px;
}

.room-placeholder-bubble--two {
    top: 29%;
    right: 24%;
    width: 16px;
    height: 16px;
}

.room-placeholder-bubble--three {
    top: 38%;
    right: 35%;
    width: 9px;
    height: 9px;
}

.room-placeholder-watermark {
    position: absolute;
    right: 3vw;
    bottom: 4vh;
    z-index: -1;
    font-family: "Archivo", sans-serif;
    font-size: clamp(55px, 12vw, 170px);
    font-weight: 900;
    color: rgba(255, 255, 255, .035);
    letter-spacing: -.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* =========================================================
   BREADCRUMB
========================================================= */

.room-placeholder-breadcrumb {
    border-top: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: #0b0d10;
}

.room-placeholder-breadcrumb .breadcrumb {
    padding: 17px 0;
}

.room-placeholder-breadcrumb .breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    padding: 0;
    margin: 0;
    list-style: none;
    color: rgba(255, 255, 255, .45);
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.room-placeholder-breadcrumb .breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.room-placeholder-breadcrumb .breadcrumb li:not(:last-child)::after {
    content: "/";
    color: rgba(255, 255, 255, .2);
}

.room-placeholder-breadcrumb .breadcrumb a:hover {
    color: var(--red);
}

.room-placeholder-breadcrumb .breadcrumb [aria-current="page"] {
    color: rgba(255, 255, 255, .85);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 759px) {
    .room-placeholder {
        min-height: 760px;
        align-items: flex-end;
    }

    .room-placeholder-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(3, 5, 7, .08),
                rgba(3, 5, 7, .64) 38%,
                rgba(3, 5, 7, .98) 76%
            );
    }

    .room-placeholder-inner {
        padding-top: 105px;
        padding-bottom: 70px;
    }

    .room-placeholder h1 {
        font-size: clamp(54px, 17vw, 80px);
    }

    .room-placeholder h1 small {
        font-size: 12px;
        letter-spacing: .1em;
    }

    .room-placeholder-actions {
        flex-direction: column;
    }

    .room-placeholder-actions .btn {
        width: 100%;
    }

    .room-placeholder-watermark {
        right: -10px;
        bottom: 20px;
    }
}