/* ============================================================================
   PAGE FAMILY: artwork info scope (B5) — STRUCTURE tier — from the 3 global files, original order
   Migrated 2026-07-05. Scope: .art_info_section — artwork_info + artwork_diaporama
   + artists group_by_alphabet / start_by_letter (they reuse the scope).
   PHASE-A FIDELITY: verbatim relocation. Harness-diff before editing.
   ============================================================================ */
.art_info_section {
    padding: 0px 160px 20px;
}

.art_info_section .historicle_box.artwork-info-infobox {
    padding: 16px 16px;
}

.art_info_section .historicle_box {
    font-size: 14px;
    font-family: var(--font-body);
    color: #3E342A;
    text-align: justify;
    margin: 0;
    padding: 0;
}

.art_info_section .historicle_box a { color: inherit; }

.art_info_section .historicle_box ul { padding-left: 26px; }

.art_info_section .historicle_box ul li { list-style-type: disc; line-height: normal; }

.art_info_section .historicle_box ul li b { font-weight: 600; }

.art_info_section .historicle_box h1,
.art_info_section .historicle_box h2,
.art_info_section .historicle_box h3 {
    clear: right;
    font-size: 16px;
    font-family: var(--font-body);
    font-weight: 600;
    line-height: normal;
    color: #3E342A;
    margin-top: 10px;
    margin-bottom: 0;
}

.art_info_section .historicle_box p { margin: 0; line-height: 1.5em; }

body.artwork-diaporama-page .art_info_section {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1) rotateX(0) rotateY(0);
    /* Gentle ease-in-out-sine so every move glides in and settles softly,
       like a slow dance — no abrupt starts or stops. opacity fades a touch
       faster than the drift so the motion leads and the image breathes. */
    transition: opacity 1.7s cubic-bezier(0.37, 0, 0.63, 1),
                transform 1.9s cubic-bezier(0.37, 0, 0.63, 1),
                filter 1.7s cubic-bezier(0.37, 0, 0.63, 1);
    transform-style: preserve-3d;
    perspective: 1400px;
    will-change: opacity, transform, filter;
}

body.artwork-diaporama-page .art_info_section.slide-out-left { opacity: 0; transform: translateX(-45%) scale(0.94); }

body.artwork-diaporama-page .art_info_section.slide-in-right { opacity: 1; transform: translateX(0) scale(1); }

body.artwork-diaporama-page .art_info_section.slide-out-right { opacity: 0; transform: translateX(45%) scale(0.94); }

body.artwork-diaporama-page .art_info_section.slide-in-left { opacity: 1; transform: translateX(0) scale(1); }

body.artwork-diaporama-page .art_info_section.slide-out-up { opacity: 0; transform: translateY(-40%) scale(0.95); }

body.artwork-diaporama-page .art_info_section.slide-in-down { opacity: 1; transform: translateY(0) scale(1); }

body.artwork-diaporama-page .art_info_section.slide-out-down { opacity: 0; transform: translateY(40%) scale(0.95); }

body.artwork-diaporama-page .art_info_section.slide-in-up { opacity: 1; transform: translateY(0) scale(1); }

body.artwork-diaporama-page .art_info_section.scale-out { opacity: 0; transform: scale(0.82) rotateZ(2deg); }

body.artwork-diaporama-page .art_info_section.scale-in { opacity: 1; transform: scale(1) rotateZ(0deg); }

body.artwork-diaporama-page .art_info_section.scale-out-large { opacity: 0; transform: scale(1.12); }

body.artwork-diaporama-page .art_info_section.scale-in-small { opacity: 1; transform: scale(1); }

body.artwork-diaporama-page .art_info_section.rotate-out-y { opacity: 0; transform: rotateY(-32deg) scale(0.9); }

body.artwork-diaporama-page .art_info_section.rotate-in-y { opacity: 1; transform: rotateY(0deg) scale(1); }

body.artwork-diaporama-page .art_info_section.rotate-out-x { opacity: 0; transform: rotateX(32deg) scale(0.9); }

body.artwork-diaporama-page .art_info_section.rotate-in-x { opacity: 1; transform: rotateX(0deg) scale(1); }

body.artwork-diaporama-page .art_info_section.diagonal-out-tl { opacity: 0; transform: translateX(-38%) translateY(-38%) scale(0.9) rotateZ(-4deg); }

body.artwork-diaporama-page .art_info_section.diagonal-in-br { opacity: 1; transform: translateX(0) translateY(0) scale(1) rotateZ(0deg); }

body.artwork-diaporama-page .art_info_section.diagonal-out-tr { opacity: 0; transform: translateX(38%) translateY(-38%) scale(0.9) rotateZ(4deg); }

body.artwork-diaporama-page .art_info_section.diagonal-in-bl { opacity: 1; transform: translateX(0) translateY(0) scale(1) rotateZ(0deg); }

body.artwork-diaporama-page .art_info_section.fade-blur-out { opacity: 0; filter: blur(9px); transform: scale(1.05); }

body.artwork-diaporama-page .art_info_section.fade-blur-in { opacity: 1; filter: blur(0px); transform: scale(1); }

body.artwork-diaporama-page .art_info_section.blur-rotate-scale-out {
    opacity: 0;
    filter: blur(8px);
    transform: scale(0.6) rotateZ(-15deg);
    transform-origin: center;
}

body.artwork-diaporama-page .art_info_section.blur-rotate-scale-in {
    opacity: 1;
    filter: blur(0px);
    transform: scale(1) rotateZ(0deg);
    transform-origin: center;
}

body.artwork-diaporama-page .art_info_section.blur-rotate-scale-reverse-out {
    opacity: 0;
    filter: blur(8px);
    transform: scale(0.6) rotateZ(15deg);
    transform-origin: center;
}

body.artwork-diaporama-page .art_info_section.blur-rotate-scale-reverse-in {
    opacity: 1;
    filter: blur(0px);
    transform: scale(1) rotateZ(0deg);
    transform-origin: center;
}

@media only screen and (min-width: 992px) and (max-width: 1500px) {
.art_info_section {
        padding: 0px 60px 20px;
    }

}
@media only screen and (max-width: 991px) {
.art_info_section {
        padding: 0px 20px 20px;
    }

}
@media only screen and (max-width: 767px) {
.art_info_section {
    padding: 23px 20px 20px;
}

}

/* ── B5 second pass: .art_info_box rules (page-exclusive, from global-custom-V2.1.css) ── */
.art_info_box {
    margin-top: 34px;
    margin-bottom: 100px;
}

.art_info_box .artwork-info-actions-bar {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 20px auto 30px;
    padding: 0 15px;
    box-sizing: border-box;
}

.art_info_box .artwork-info-actions-bar .fav-icon-artwork {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
    /* Like the buy* templates: spread the action links edge-to-edge (align: justify) */
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
}

.art_info_box > .row > [class*="col-"] {
    min-width: 0;
}

@media (min-width: 576px) {
.art_info_box > .row > .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
        max-width: 50%;
    }

}
.art_info_box .details_reproducton {
    width: 100%;
    row-gap: 10px;
    column-gap: 20px;
}

.art_info_box .details_reproducton li,
.art_info_box .details_reproducton li a {
    line-height: normal;
    margin: 0;
}

.art_info_box .artwork-info-infobox a,
.art_info_box .historicle_box a,
.art_info_box .artinfo_top h4 a,
.art_info_box .art_info_inner h4 a,
.art_info_box .details_reproducton a,
.art_info_box .fav-icon-artwork a {
    transition: color 0.25s ease;
}

.art_info_box > .row > .col-md-12 .artwork-info-infobox {
    width: 100%;
    max-width: 100%;
}


/* ── B5 second pass: .art_info_box rules (page-exclusive, from global-responsive-V2.1.css) ── */
@media only screen and (max-width: 767px) {
.art_info_box {
    margin-bottom: 20px;
}

}

/* ── B11 alphabet leftovers (from globals) ── */
.alphabet_box {
    display: flex;
    margin: 29px auto 40px;
    width: 79%;
    justify-content: center;
}

.alpha_letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 41px;
    height: 41px;
    line-height: 1;
    border: 1px solid #CCC2AE;
    text-align: center;
    font-size: 27px;
    font-weight: 400;
    color: #3E342A;
    font-family: var(--font-title);
    border-right: 0px;
    cursor: pointer;
    text-transform: uppercase;
}

.alpha_letter a {
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1;
    text-transform: uppercase;
}

.alpha_letter:last-child {
    border-right: 1px solid #CCC2AE;
}

.alpha_letter:hover {
    background: #CCC2AE;
}

.alphabet_indv {
    margin-bottom: 24px;
}

.alphabet_indv h4 {
    font-family: var(--font-title);
    font-size: 38px;
    font-weight: 600;
    line-height: 50px;
    color: #3E342A;
    margin-bottom: 16px;
}

.view_more_alpha {
    margin-top: 12px;
    text-align: right;
}

.view_more_alpha a {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    color: #875D2A;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}

.view_more_alpha a:hover,
.view_more_alpha a:focus {
    text-decoration: none;
}

@media only screen and (min-width: 992px) and (max-width: 1500px) {
.alphabet_box {
    width: 100%;
}

}
@media only screen and (max-width: 991px) {
.alphabet_box {
        width: 100%;
        overflow: auto;
    }

.alpha_letter {
        line-height: 1;
        font-size: 24px;
        padding: 0;
    }

}