/* ── AtlasNetwork.razor ── */
/* Movido verbatim (tema oscuro/cian; la unificación de theming se hará en otra fase — ver plan
   design-tokens). AtlasNetwork.razor también tiene un AtlasNetwork.razor.css con CSS isolation
   propio, que NO se toca aquí — esto es solo el <style> inline que había en el .razor. */

/* Full-screen page. Scrollbar hiding is scoped to this page's own container so it
   can never affect the left sidebar or other pages. The scroll-lock on the html/body
   elements (and the app-wide .content-inner) is gated behind .atlas-connect-active — a
   class added on init and removed in Dispose — so it is fully torn down when leaving
   the page; otherwise the sidebar loses its scroll after visiting ATLAS Connect, even
   after navigating to another menu. */
.atlas-network-page,
.atlas-network-page * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.atlas-network-page::-webkit-scrollbar,
.atlas-network-page *::-webkit-scrollbar {
    display: none !important;
}

.atlas-connect-active {
    overflow: hidden !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    position: fixed;
    width: 100%;
}

.atlas-connect-active .content-inner {
    overflow: hidden !important;
}

/* Scoped to the page root — NOT :root. `--card-height` collides with Bootstrap's own
   `.card { height: var(--card-height) }`, so declaring it on :root leaked 60vh into every
   .card across the whole app (see WARNINGS §43). The carousel consumers (.scroll-wrapper,
   .carousel-item, .carousel-spacer, header) are all descendants of .atlas-network-page and
   still inherit these vars. */
.atlas-network-page {
    --card-height: 60vh;
    --card-width: calc(var(--card-height) * 0.62);
    --card-gap: calc(var(--card-width) * 0.55);
    --header-font-size: clamp(2.5rem, 8vh, 4rem);
}

@media (max-height: 600px) {
    .atlas-network-page {
        --card-height: 50vh;
    }
}

.scroll-wrapper {
    display: flex !important;
    flex-direction: row !important;
    gap: var(--card-gap) !important;
    padding-left: calc(50% - (var(--card-width) / 2)) !important;
    padding-right: calc(50% - (var(--card-width) / 2)) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: 100% !important;
    height: 80vh !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    perspective: 3500px !important;
    transform-style: preserve-3d !important;
}
.scroll-wrapper::-webkit-scrollbar {
    display: none !important;
}
.carousel-item {
    flex: 0 0 var(--card-width) !important;
    height: var(--card-height) !important;
    visibility: visible !important;
    opacity: 0;
    display: block !important;
    position: relative !important;
}
.scroll-wrapper.is-laid-out .carousel-item {
    opacity: 1;
}
.menu-container {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    margin-top: -2vh !important;
}
.carousel-header h1 {
    font-size: var(--header-font-size) !important;
    letter-spacing: 15px !important;
}
.title-section p {
    color: var(--atlas-white) !important;
    opacity: 1 !important;
    letter-spacing: 8px !important;
    font-size: 0.85rem !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;
}
.carousel-header {
    padding-top: 20px !important;
    padding-bottom: 0 !important;
}
.carousel-header .logo-left img {
    height: 50px !important;
    width: auto !important;
}
.carousel-header .logo-right img {
    height: 85px !important;
    width: auto !important;
    margin-top: -10px !important;
}
.controls-hint {
    position: fixed !important;
    bottom: 30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-family: var(--atlas-font-sans) !important;
    font-size: 0.7rem !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
    z-index: 100 !important;
    pointer-events: none !important;
}
#main-view {
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: hidden !important;
}
.atlas-network-page {
    height: 100vh !important;
    overflow: hidden !important;
}

.carousel-item .card-inner {
    overflow: hidden;
    border: none;
    border-radius: min(24px, 4vh);
    box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}
.carousel-item .image-wrapper {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.carousel-item .project-info {
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.5) 50%, transparent 100%);
    width: 100%;
    padding: 40px 15px;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    transform: translateY(20px);
    opacity: 0.9;
}
.project-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.hassi-img {
    object-position: 25% 45%;
}
.carousel-item:hover .project-info {
    transform: translateY(0);
    opacity: 1;
    background: linear-gradient(to top, rgba(0, 229, 255, 0.2) 0%, rgba(0,0,0,0.8) 60%, transparent 100%);
}

.carousel-item .project-info p {
    color: rgba(255,255,255,0.7) !important;
    font-weight: 300 !important;
    font-size: 0.8rem !important;
    margin-bottom: 0 !important;
}

.carousel-item h2 {
    font-size: clamp(1.2rem, 4vh, 2.5rem) !important;
    margin-bottom: 5px !important;
    letter-spacing: 2px !important;
}

.carousel-item .project-tag {
    font-size: clamp(0.5rem, 1.5vh, 0.8rem);
    color: var(--atlas-cyan);
    letter-spacing: 4px;
    margin-bottom: 1vh;
    font-weight: 300;
}

.carousel-item .view-details {
    display: inline-block;
    margin-top: 1vh;
    padding: 0.5vh 1.5vh;
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-radius: 100px;
    font-size: clamp(0.5rem, 1.2vh, 0.7rem);
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.3s ease;
}

.carousel-item:hover .view-details {
    background: var(--atlas-cyan);
    color: var(--atlas-black);
    border-color: var(--atlas-cyan);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.4);
}

.carousel-spacer {
    flex: 0 0 var(--card-width) !important;
    height: var(--card-height) !important;
    pointer-events: none;
    visibility: hidden;
}