/* Piece Page Common Styles */

:root {
    --divider-position: 50%;
    --vertical-position: 0%;
    --grip-top: 50%;
    --container-max-width: min(90vw, 1600px);
}

/* Piece Diptych Layout */
.piece-diptych {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--container-max-width);
    height: 92vh;
    display: flex;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom-color: rgba(255, 255, 255, 0.2);
    border-top: none;
}

.piece-panel {
    height: 100%;
    position: relative;
    overflow: hidden;
}

.piece-panel-left {
    width: var(--divider-position);
    background: #000;
}

.piece-panel-right {
    width: calc(100% - var(--divider-position));
    background: #111;
}

.piece-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(var(--vertical-position));
    transition: filter 0.1s ease-out;
}

#piece-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Draggable Divider */
.piece-divider {
    position: absolute;
    left: var(--divider-position);
    top: 0;
    width: 8px;
    height: 100%;
    cursor: move;
    background: transparent;
    transform: translateX(-50%);
    z-index: 50;
}

.piece-divider::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(-50%);
    transition: background 0.2s ease;
}

/* Grip indicator */
.piece-divider::after {
    content: '';
    position: absolute;
    left: 50%;
    top: var(--grip-top);
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.08);
    background-image: linear-gradient(
        to bottom,
        transparent 5px,
        rgba(255, 255, 255, 0.25) 5px,
        rgba(255, 255, 255, 0.25) 7px,
        transparent 7px,
        transparent 11px,
        rgba(255, 255, 255, 0.25) 11px,
        rgba(255, 255, 255, 0.25) 13px,
        transparent 13px,
        transparent 17px,
        rgba(255, 255, 255, 0.25) 17px,
        rgba(255, 255, 255, 0.25) 19px,
        transparent 19px
    );
    background-size: 20px 24px;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.piece-divider:hover::before,
.piece-divider.dragging::before {
    background: rgba(255, 255, 255, 0.5);
}

.piece-divider:hover::after,
.piece-divider.dragging::after {
    background-color: rgba(255, 255, 255, 0.15);
    background-image: linear-gradient(
        to bottom,
        transparent 5px,
        rgba(255, 255, 255, 0.5) 5px,
        rgba(255, 255, 255, 0.5) 7px,
        transparent 7px,
        transparent 11px,
        rgba(255, 255, 255, 0.5) 11px,
        rgba(255, 255, 255, 0.5) 13px,
        transparent 13px,
        transparent 17px,
        rgba(255, 255, 255, 0.5) 17px,
        rgba(255, 255, 255, 0.5) 19px,
        transparent 19px
    );
    border-color: rgba(255, 255, 255, 0.4);
}

/* Navigation */
.piece-nav {
    position: fixed;
    top: 20px;
    left: calc(50% - var(--container-max-width) / 2 + 20px);
    z-index: 100;
}


.back-link {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.back-link:hover {
    color: #fff;
    border-color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* Content Section */
.piece-content {
    position: relative;
    margin-top: 92vh;
    padding: 80px 60px;
    background: #111;
    min-height: 100vh;
    z-index: 2;
}

/* Inner content constrained to container width */
.piece-header,
.piece-info,
.piece-verification,
.piece-navigation {
    max-width: calc(var(--container-max-width) - 120px);
    margin-left: auto;
    margin-right: auto;
}

.piece-header {
    margin-bottom: 60px;
    text-align: center;
}

.piece-label {
    display: inline-block;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #111;
    background: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 6px 16px;
    margin-bottom: 24px;
}

.piece-header h1 {
    font-family: 'PP Right Grotesk', sans-serif;
    font-size: clamp(48px, 8vw, 120px);
    font-weight: 600;
    color: #fff;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.piece-artist {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.piece-artist a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.piece-artist a:hover {
    color: var(--electric-lime) !important;
}

.piece-artist a:visited {
    color: inherit;
}

/* Piece Info Grid */
.piece-info {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 80px;
    margin-bottom: 80px;
}

.piece-description {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
}

.piece-description p {
    margin-bottom: 1.5em;
}

.piece-description .emphasis {
    font-weight: 500;
    font-style: italic;
}

/* Metadata Sidebar */
.piece-metadata {
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    padding-left: 40px;
}

.piece-metadata h2 {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 24px;
}

.piece-metadata dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px 24px;
}

.piece-metadata dt {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.piece-metadata dd {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
}

/* Verification Section */
.piece-verification {
    padding-top: 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.piece-verification h2 {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 24px;
}

.piece-verification p {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 1em;
}

/* Piece Navigation */
.piece-navigation {
    padding-top: 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 60px;
}

.piece-navigation h2 {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 24px;
}

.piece-nav-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.piece-nav-item {
    display: block;
    text-decoration: none;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #000;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.piece-nav-item:hover,
.piece-nav-item:focus {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
    outline: 2px solid var(--electric-lime);
    outline-offset: 2px;
}

.piece-nav-item:focus {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4);
}

.piece-nav-item.current {
    opacity: 0.4;
    pointer-events: none;
}

.piece-nav-thumb {
    width: 100%;
    display: block;
}

.piece-nav-label {
    padding: 12px;
    background: #000;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
}

/* Responsive */

/* Tablet */
@media (max-width: 1024px) {
    .piece-content {
        padding: 60px 40px;
    }

    .piece-header,
    .piece-info,
    .piece-verification,
    .piece-navigation {
        max-width: none;
    }
}

@media (max-width: 900px) {
    .piece-content {
        padding: 60px 30px;
    }

    .piece-info {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .piece-metadata {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        padding-left: 0;
        padding-top: 40px;
    }

    .piece-nav-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 600px) {
    .piece-content {
        padding: 40px 20px;
    }

    .piece-header h1 {
        font-size: clamp(36px, 12vw, 60px);
    }

    .piece-description {
        font-size: 17px;
    }

    .back-link {
        font-size: 12px;
        padding: 6px 12px;
    }

    .piece-nav-label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }
}