/* =========================================================
   DINGODOTS COLLECTIBLE DETAIL
   Express Entry Detail - Custom Template
   ========================================================= */


/* ---------------------------------------------------------
   WRAPPER
   --------------------------------------------------------- */

.dingo-detail {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 10px 0 40px;
}


/* ---------------------------------------------------------
   BACK LINK
   --------------------------------------------------------- */

.dingo-detail-back {
    margin-bottom: 24px;
}

.dingo-detail-back a {
    color: #76547c;
    font-weight: 600;
    text-decoration: none;
}

.dingo-detail-back a:hover,
.dingo-detail-back a:focus {
    text-decoration: underline;
}


/* ---------------------------------------------------------
   MAIN LAYOUT
   --------------------------------------------------------- */

.dingo-detail-layout {
    display: grid;
    grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.dingo-detail-media {
    min-width: 0;
}

.dingo-detail-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #f5f3f6;
    border: 1px solid #e4dfe6;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(22, 18, 24, 0.07);
}

.dingo-detail-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.dingo-detail-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 24px;
    color: #8a858d;
    font-size: 15px;
    text-align: center;
}
/* ---------------------------------------------------------
   ADDITIONAL IMAGE GALLERY
   --------------------------------------------------------- */

.dingo-detail-gallery {
    margin-top: 24px;
}

.dingo-detail-gallery-title {
    margin: 0 0 12px;
    color: #2a272b;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

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

.dingo-detail-gallery-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f5f3f6;
    border: 1px solid #e4dfe6;
    border-radius: 9px;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.dingo-detail-gallery-item:hover,
.dingo-detail-gallery-item:focus {
    transform: translateY(-2px);
    border-color: #c9bacd;
    box-shadow: 0 5px 16px rgba(22, 18, 24, 0.10);
}

.dingo-detail-gallery-item:focus-visible {
    outline: 3px solid #76547c;
    outline-offset: 3px;
}

.dingo-detail-gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}


/* ---------------------------------------------------------
   CONTENT
   --------------------------------------------------------- */

.dingo-detail-content {
    min-width: 0;
}

.dingo-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.dingo-detail-type,
.dingo-detail-status {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dingo-detail-type {
    background: #eee8f0;
    color: #694b70;
}

.dingo-detail-status {
    background: #f0eef1;
    color: #59525c;
}

.dingo-detail-title {
    margin: 0;
    color: #242126;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.1;
}


/* ---------------------------------------------------------
   SECTIONS
   --------------------------------------------------------- */

.dingo-detail-section {
    margin-top: 34px;
}

.dingo-detail-section h2 {
    margin: 0 0 16px;
    color: #2a272b;
    font-size: 21px;
    font-weight: 700;
}


/* ---------------------------------------------------------
   SPECIFICATION LIST
   --------------------------------------------------------- */

.dingo-detail-specs {
    margin: 0;
    overflow: hidden;
    border: 1px solid #e4dfe6;
    border-radius: 12px;
    background: #fff;
}

.dingo-detail-spec {
    display: grid;
    grid-template-columns: minmax(150px, 42%) minmax(0, 1fr);
    margin: 0;
    border-bottom: 1px solid #ebe7ec;
}

.dingo-detail-spec:last-child {
    border-bottom: 0;
}

.dingo-detail-spec dt,
.dingo-detail-spec dd {
    margin: 0;
    padding: 13px 16px;
}

.dingo-detail-spec dt {
    background: #f7f5f8;
    color: #5f5962;
    font-size: 14px;
    font-weight: 700;
}

.dingo-detail-spec dd {
    color: #29262b;
    font-size: 15px;
}


/* ---------------------------------------------------------
   NOTES
   --------------------------------------------------------- */

.dingo-detail-note-text {
    padding: 18px;
    border: 1px solid #e4dfe6;
    border-radius: 12px;
    background: #f8f6f8;
    color: #4d484f;
    font-size: 15px;
    line-height: 1.7;
}


/* ---------------------------------------------------------
   ACTIONS / SALE BUTTON
   --------------------------------------------------------- */

.dingo-detail-actions {
    margin-top: 30px;
}

.dingo-detail-sale-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 11px 22px;
    border-radius: 8px;
    background: #76547c;
    color: #fff;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.dingo-detail-sale-button:hover,
.dingo-detail-sale-button:focus {
    background: #604365;
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .dingo-detail-layout {
        grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
        gap: 32px;
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .dingo-detail {
        padding-bottom: 28px;
    }

    .dingo-detail-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .dingo-detail-image {
        max-width: 440px;
        margin: 0 auto;
    }

    .dingo-detail-title {
        font-size: 32px;
    }

    .dingo-detail-section {
        margin-top: 28px;
    }

}


/* ---------------------------------------------------------
   SMALL MOBILE
   --------------------------------------------------------- */

@media (max-width: 480px) {

    .dingo-detail-spec {
        grid-template-columns: 1fr;
    }

    .dingo-detail-spec dt {
        padding-bottom: 5px;
        background: #f7f5f8;
    }

    .dingo-detail-spec dd {
        padding-top: 6px;
    }

    .dingo-detail-sale-button {
        width: 100%;
    }
    .dingo-detail-gallery-grid {
    grid-template-columns: 1fr;
}

}