/* =========================================
   NETWORK ARCHIVE COMPONENT
   Adapted from Projects Archive
   With brand-specific colors
   ========================================= */
/* === BRAND COLOR PALETTE (OKLCH) === */
:root {
    --network-color-royal: oklch(47% 0.08 264);

    /* Cobalt: Royal */
    --network-color-moss: oklch(62% 0.06 130);

    /* Sage: Moss */
    --network-color-lagoon: oklch(56% 0.06 220);

    /* Water: Lagoon */
    --network-color-granite: oklch(62% 0.01 270);

    /* Stone: Granite */
    --network-color-greige: oklch(63% 0.04 80);

    /* Linen: Greige */
    --network-color-oak: oklch(62% 0.12 75);

    /* Sand: Oak */
    --network-color-canyon: oklch(55% 0.10 35);

    /* Clay: Canyon */
    --network-color-grape: oklch(48% 0.10 310);

    /* Velvet: Grape */
}

/* === SECTION === */
.network-archive {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    height: max-content;
    background-color: var(--color-bg-light);
}

.network-archive .section-label {
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
    padding: 1rem 1.5rem;
}

/* === TOP DIVIDER (separate element for animation) === */
.network-archive .network-top-divider {
    width: 100%;
    height: 3px;
    background-color: var(--color-text-main);
}

/* === NETWORK LIST === */
.network-archive .network-list {
    width: 100%;
}

/* === NETWORK ROW === */
.network-archive .network-row {
    position: relative;
    width: 100%;
    cursor: pointer;
    border-bottom: 3px solid var(--color-text-main);

    /* Brand color passed via data attribute, stored as custom property */
    --row-brand-color: var(--color-text-main);
    transition: margin-bottom 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Mobile Preview Image (Default Hidden) */
.mobile-preview-image,
.mobile-toggle-icon {
    display: none;
}

.network-archive .network-header {

    height: 120px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    position: relative;
    width: 100%;
}

/* The wrapper that slides up/down - CLIPPED by parent */
.network-archive .network-wrapper {
    position: relative;
    width: 100%;
    height: 360px;
    transform: translateY(-240px) translateZ(0);
    backface-visibility: hidden;
}

/* Two states: name (light) and details (brand color) */
.network-archive .network-name-row,
.network-archive .network-details-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 120px;
    padding: 0 1rem;
}

/* Light row (default visible) */
.network-archive .network-name-row {
    background-color: var(--color-bg-light);
    color: var(--color-text-main);
    border-bottom: 1px solid transparent;

    /* Match details row border for perfect alignment */
}

/* Brand color row (revealed on hover) - uses dynamic color */
.network-archive .network-details-row {
    background-color: var(--row-brand-color);
    border-bottom: 1px solid var(--row-brand-color);
}

.network-archive .network-details-row .network-title,
.network-archive .network-details-row .network-cta {
    color: var(--color-bg-light);
}

/* Typography */
.network-archive .network-title {
    font-family: var(--font-primary);
    letter-spacing: -0.025em;
    margin: 0;
    line-height: 1.1;
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
}

.network-archive .network-category {
    font-family: var(--font-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.network-archive .network-cta {
    font-family: var(--font-primary);
    font-weight: 550;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* === PREVIEW IMAGE (fixed center-right, OUTSIDE section) === */
.network-preview {
    position: fixed;
    top: 50%;
    right: 25%;
    transform: translateY(-50%);
    width: 30vw;
    max-width: 450px;
    aspect-ratio: 4 / 3;
    z-index: 1000;
    pointer-events: auto;
    border-radius: 0.1rem;
    overflow: hidden;
    cursor: grab;
}

.network-preview:active {
    cursor: grabbing;
}

.network-preview img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* === EXPANDED CONTENT (accordion) === */
.network-archive .network-expanded {
    display: none;
    position: relative;
    width: 100%;
    background-color: var(--row-brand-color);
    color: var(--color-bg-light);
    padding: 2rem 1rem;
    padding-bottom: calc(2rem + 2px);

    /* Compensate for upward shift */
    margin-top: -2px;

    /* Pull up to cover joint line/gap */
    overflow: hidden;
}

/* seamless joint: make header border transparent when expanded */
.network-archive .network-row.is-expanded .network-details-row {
    border-bottom-color: transparent;
}

.network-archive .network-row.is-expanded .network-expanded {
    display: block;
}

.network-archive .expanded-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3rem;
}

.network-archive .expanded-text {
    flex: 1;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    align-self: stretch;
}

.network-archive .network-description {
    margin-bottom: 2rem;
    color: var(--color-bg-light);
}

/* Credits grid (Origin, Specialty, Website) */
.network-archive .credits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 4rem;
    row-gap: 2rem;
}

.network-archive .credit {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.network-archive .credit-label {
    text-transform: uppercase;
    opacity: 0.7;
}

.network-archive .credit-value {
    color: var(--color-bg-light);
}

.network-archive .credit-value a {
    color: var(--color-bg-light);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.network-archive .credit-value a:hover {
    opacity: 0.8;
}

/* Expanded image */
.network-archive .expanded-image {
    width: 30%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    position: relative;

    /* Ensure stacking context */
}

.network-archive .expanded-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;

    /* Hidden by default */
    transition: opacity 1.2s ease;

    /* CSS fallback, but JS will likely drive it */
    z-index: 1;
}

.network-archive .expanded-image img.active {
    opacity: 1;
    z-index: 2;
}

/* Close button */
.network-archive .close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 180px;
    margin-top: 1.5rem;
    padding: 0.875rem 1.25rem;
    background: transparent;
    border: 1px solid var(--color-bg-light);
    color: var(--color-bg-light);
    font-family: var(--font-primary);
    font-size: var(--text-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.network-archive .close-btn:hover {
    background: var(--color-bg-light);
    color: var(--row-brand-color);
}

/* === MOBILE === */
@media (max-width: 991px) {

    /*    .network-archive {
        padding: 3rem 1.5rem;
    }
 */
    .network-archive .network-title {
        font-size: 2rem;
        max-width: none;
        flex: 1;
    }

    .network-archive .network-category {
        word-wrap: normal;
        overflow-wrap: normal;
        max-width: none;
        text-align: right;
        white-space: nowrap;
    }

    .network-archive .network-header {
        height: auto;
        /* Allow height to grow for image + title */
        display: flex;
        flex-direction: column;
    }

    /* Mobile Preview Image - Visible here */
    .mobile-preview-image {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 4/3;
        object-fit: cover;
        order: -1;
        /* Ensure it stays on top */
    }

    /* Mobile Toggle Icon */
    .mobile-toggle-icon {
        display: block;
        width: 1.5rem;
        height: 1.5rem;
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .network-archive .network-row.is-expanded .mobile-toggle-icon {
        transform: rotate(45deg);
    }

    .network-archive .network-row.is-expanded {
        margin-bottom: 2rem;
    }

    .mobile-row-meta {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-shrink: 0;
    }

    .network-archive .network-wrapper {
        height: 90px;
        transform: translateY(0px) !important;
        overflow: hidden;
    }

    /* Ensure visible text on mobile */
    .network-archive .network-name-row {
        background-color: var(--color-bg-light);
        color: var(--color-text-main);
    }

    /* Active State for Mobile Accordion - Instant color change */
    .network-archive .network-row.is-expanded .network-name-row {
        background-color: var(--row-brand-color);
        color: var(--color-bg-light);
    }

    /* Ensure title and category text also change color */
    .network-archive .network-row.is-expanded .network-name-row .network-title,
    .network-archive .network-row.is-expanded .network-name-row .network-category {
        color: var(--color-bg-light);
    }

    /* Hide hover interaction rows on mobile */
    .network-archive .network-details-row {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    .network-archive .network-name-row,
    .network-archive .network-details-row {
        height: 90px;
        padding: 0 0.75rem;
    }

    /* Hide the desktop floaty preview on tablet/mobile */
    .network-preview {
        display: none !important;
    }

    .network-archive .expanded-inner {
        flex-direction: column;
    }

    .network-archive .expanded-text {
        max-width: 100%;
    }

    .network-archive .expanded-image {
        width: 100%;
        margin-top: 1.5rem;
    }

    .network-archive .credits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* === HERO POSITIONS (Ported from Projects) === */
.network-header-pos {
    grid-area: 1 / 1 / 2 / 7;
    position: relative;
    top: -1rem;
}

.our-network-header-pos {
    grid-area: 1 / 7 / 2 / 13;
}

/* Network Page Hero Responsive */
@media screen and (max-width: 991px) {

    .network-header-pos,
    .our-network-header-pos {
        grid-area: auto;
        grid-column: 1 / -1;
        width: 100%;
        margin-bottom: 2rem;
    }
}

@media (max-width: 767px) {
    .network-archive .network-title {
        font-size: 1.5rem;
        max-width: none;
    }

    .network-archive .network-category {
        /* font-size: 0.85rem; */
        max-width: none;
    }

    .network-preview {
        display: none;
    }

    .network-archive .credits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}