/* =================================================================
   portfolio.css
   Small overrides layered on top of the StyleShout "Lounge" template
   to adapt it into Jose Joao Baptista's sculpture portfolio.
   ================================================================= */

/* --- Works: repurpose the old price column as a material / status label --- */
.menu-list__item-price {
    font-family   : var(--type-all-caps);
    font-weight   : 500;
    font-size     : var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color         : var(--color-1);
    white-space   : nowrap;
    align-self    : center;
    opacity       : 0.9;
}
.menu-list__item-price span { display: none; }

/* --- About: quick facts list --- */
.about-facts {
    list-style    : none;
    margin        : var(--vspace-1) 0 0 0;
    padding       : var(--vspace-0_75) 0 0 0;
    border-top    : 1px solid var(--color-border, rgba(0,0,0,0.12));
}
.about-facts li {
    display       : flex;
    flex-wrap     : wrap;
    gap           : 0.4em 1.2em;
    padding       : 0.55em 0;
    font-size     : var(--text-sm);
    border-bottom : 1px solid var(--color-border, rgba(0,0,0,0.08));
}
.about-facts li span {
    flex          : 0 0 11.5rem;
    font-family   : var(--type-all-caps);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size     : var(--text-xs);
    color         : var(--color-1);
    opacity       : 0.95;
}
.about .lead { font-family: var(--type-lead); }

/* --- Artist statement (reuses the testimonials section shell) --- */
.statement-quote {
    max-width : 80rem;
    margin    : var(--vspace-1) auto 0;
}
.statement-quote p {
    font-family: var(--type-quote);
    font-style : italic;
    font-size  : var(--text-md, 1.4em);
    line-height: 1.5;
}
.statement-quote cite {
    display       : block;
    margin-top    : var(--vspace-0_75);
    font-style    : normal;
    font-family   : var(--type-all-caps);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size     : var(--text-xs);
    color         : var(--color-1);
}

/* --- Footer commission button: let it size to its content, centered --- */
.subscribe-form .btn.u-fullwidth {
    display      : inline-block;
    width        : auto;
    min-width    : 24rem;
    text-align   : center;
    height       : auto;
    line-height  : 1;
    padding      : 1.6rem 3.2rem;
}

/* =================================================================
   Selected Works — clickable items + detail popup (modal)
   ================================================================= */

/* hint under the tabs */
.works-hint {
    margin-top    : var(--vspace-0_75);
    font-size     : var(--text-sm);
    color         : var(--color-text-light);
    max-width     : 30rem;
}

/* make each work item look clickable */
.menu-list__item.work-trigger {
    cursor        : pointer;
    border-radius : var(--border-radius);
    padding       : 1.2rem 1.4rem;
    margin        : 0 -1.4rem;
    transition    : background-color .2s ease, transform .2s ease;
    outline       : none;
}
.menu-list__item.work-trigger:hover,
.menu-list__item.work-trigger:focus-visible {
    background-color: rgba(255, 255, 255, 0.04);
}
.menu-list__item.work-trigger:focus-visible {
    box-shadow: 0 0 0 2px var(--color-1);
}
.menu-list__item.work-trigger:active { transform: scale(0.995); }

/* the little "View" cue beside each title */
.work-cue {
    display        : inline-block;
    margin-left    : 0.8rem;
    vertical-align : middle;
    font-family    : var(--type-all-caps);
    text-transform : uppercase;
    letter-spacing : 0.12em;
    font-size      : 1.05rem;
    line-height    : 1;
    padding        : 0.45em 0.7em;
    border         : 1px solid var(--color-1);
    border-radius  : 100px;
    color          : var(--color-1);
    opacity        : 0;
    transform      : translateX(-4px);
    transition     : opacity .2s ease, transform .2s ease;
}
.menu-list__item.work-trigger:hover .work-cue,
.menu-list__item.work-trigger:focus-visible .work-cue {
    opacity   : 1;
    transform : translateX(0);
}
@media (hover: none) {                 /* always show the cue on touch devices */
    .work-cue { opacity: 1; transform: none; }
}

/* ---- modal shell ---- */
html.modal-open { overflow: hidden; }

.work-modal { position: fixed; inset: 0; z-index: 1200; display: none; }
.work-modal.is-open { display: block; }

.work-modal__overlay {
    position        : absolute;
    inset           : 0;
    background-color: rgba(8, 10, 9, 0.82);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter : blur(4px);
}

.work-modal__dialog {
    position      : absolute;
    top           : 50%;
    left          : 50%;
    transform     : translate(-50%, -50%);
    width         : min(112rem, calc(100vw - 4rem));
    max-height    : calc(100vh - 4rem);
    display       : flex;
    overflow      : hidden;
    background-color: var(--color-bg-neutral, #1a1a1a);
    border        : 1px solid rgba(255,255,255,0.08);
    border-radius : calc(var(--border-radius) * 1.5);
    box-shadow    : 0 3rem 8rem rgba(0,0,0,0.6);
    animation     : work-modal-in .25s ease;
}
@keyframes work-modal-in {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

.work-modal__close {
    position      : absolute;
    top           : 1.2rem;
    right         : 1.2rem;
    z-index       : 3;
    display       : inline-flex;
    align-items   : center;
    justify-content: center;
    width         : 4rem;
    height        : 4rem;
    border        : none;
    border-radius : 50%;
    background-color: rgba(0,0,0,0.45);
    color         : #fff;
    cursor        : pointer;
    transition    : background-color .2s ease;
}
.work-modal__close:hover { background-color: var(--color-1); }

/* media side */
.work-modal__media {
    position        : relative;
    flex            : 1 1 58%;
    min-width       : 0;
    background-color: #0c0e0d;
    display         : flex;
    align-items     : center;
    justify-content : center;
}
.work-modal__figure {
    margin   : 0;
    width    : 100%;
    height   : 100%;
    display  : flex;
    align-items: center;
    justify-content: center;
}
.work-modal__img {
    display    : block;
    max-width  : 100%;
    max-height : calc(100vh - 4rem);
    width      : auto;
    height     : auto;
    object-fit : contain;
}
.work-modal__nav {
    position      : absolute;
    top           : 50%;
    transform     : translateY(-50%);
    width         : 4.4rem;
    height        : 4.4rem;
    display       : inline-flex;
    align-items   : center;
    justify-content: center;
    border        : none;
    border-radius : 50%;
    background-color: rgba(0,0,0,0.4);
    color         : #fff;
    cursor        : pointer;
    transition    : background-color .2s ease;
}
.work-modal__nav:hover { background-color: var(--color-1); }
.work-modal__nav--prev { left: 1.2rem; }
.work-modal__nav--next { right: 1.2rem; }

.work-modal__dots {
    position      : absolute;
    bottom        : 1.4rem;
    left          : 0;
    right         : 0;
    display       : flex;
    gap           : 0.8rem;
    justify-content: center;
}
.work-modal__dot {
    width         : 0.9rem;
    height        : 0.9rem;
    padding       : 0;
    border        : none;
    border-radius : 50%;
    background-color: rgba(255,255,255,0.4);
    cursor        : pointer;
    transition    : background-color .2s ease, transform .2s ease;
}
.work-modal__dot.is-active { background-color: var(--color-1); transform: scale(1.25); }

/* text side */
.work-modal__body {
    flex      : 1 1 42%;
    padding   : 4rem 3.6rem;
    overflow-y: auto;
    color     : var(--color-text);
}
.work-modal__title {
    margin-bottom : 0.6rem;
    color         : var(--color-text-bold);
}
.work-modal__meta {
    margin-bottom : 2rem;
    font-family   : var(--type-all-caps);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size     : var(--text-xs);
    color         : var(--color-1);
}
.work-modal__desc p { font-size: var(--text-sm); }
.work-modal__desc p:last-child { margin-bottom: 0; }

/* stack on narrow screens */
@media screen and (max-width: 800px) {
    .work-modal__dialog { flex-direction: column; }
    .work-modal__media  { flex: 0 0 auto; max-height: 50vh; }
    .work-modal__img    { max-height: 50vh; }
    .work-modal__body   { flex: 1 1 auto; padding: 2.8rem 2.4rem; }
}