/* ==========================================================================
   Under The Arch — complemento ad Artmart.

   Caricato DOPO style.css. NON ridefinisce ne' i font ne' la palette: la
   grafica deve restare quella del template (Playfair Display + Work Sans,
   monocromo #171717 / bianco / #F9F9F9), quindi qui non c'e' alcun @import
   di Google Font ne' alcun override dei token Artmart.

   Fa due sole cose:
     1. rimappa i token --uta-* sui valori Artmart, perche' editorial.css e
        shop.css li usano ancora nelle pagine interne;
     2. definisce i pochi componenti che Artmart non ha (galleria d'arte,
        non casa d'aste): prezzo su richiesta, opera venduta, contatore del
        carrello, card esperienza, stato vuoto.
   ========================================================================== */

:root {
    /* I nomi restano quelli storici; i valori sono quelli di Artmart. */
    --uta-ink:    #171717;   /* era nero galleria   -> primary-color   */
    --uta-terra:  #171717;   /* era terracotta      -> nessun accento  */
    --uta-terra2: #343434;   /* stato hover                            */
    --uta-terral: #D3D3D3;   /* accenti su fondo scuro                 */
    --uta-gold:   #7D7D7D;   /* stato "su richiesta"                   */
    --uta-goldb:  #595959;
    --uta-olive:  #343434;
    --uta-cream:  #FFFFFF;   /* era fondo crema     -> white-color     */
    --uta-parch:  #F9F9F9;   /* section-bg-color                       */
    --uta-linen:  #EEEEEE;   /* border-color                           */
    --uta-muted:  #595959;   /* text-color                             */
}

body.dark {
    /* Artmart ridefinisce gia' i propri token: qui bastano i nostri. */
    --uta-ink:    #FFFFFF;
    --uta-terra:  #FFFFFF;
    --uta-terra2: #D3D3D3;
    --uta-cream:  #171717;
    --uta-parch:  #212121;
    --uta-linen:  #343434;
    --uta-muted:  #D3D3D3;
}

/* --------------------------------------------------------------------------
   Occhiello — usato in 37 fra pagine e partial, Artmart non ha un equivalente
   -------------------------------------------------------------------------- */

.eyebrow,
.section-title span.eyebrow {
    font-family: var(--font-worksans);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--title-color);
    display: inline-block;
    margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   Logo testuale

   Artmart usa un SVG largo 138px; della galleria esistono solo raster 100x91,
   quindi finche' non arriva il vettoriale il logo e' una firma tipografica
   con lo stesso ingombro.
   -------------------------------------------------------------------------- */

.uta-wordmark {
    display: block;
    font-family: var(--font-playfair);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: .5px;
    color: var(--title-color);
    white-space: nowrap;
}

.uta-wordmark small {
    display: block;
    font-family: var(--font-worksans);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--text-color);
}

/* Nel footer il fondo e' sempre scuro, anche in tema chiaro */
.footer-logo .uta-wordmark        { color: #fff; font-size: 26px; }
.footer-logo .uta-wordmark small  { color: #D3D3D3; }

/* --------------------------------------------------------------------------
   Contatore del carrello dentro il bottone Artmart .header-btn

   Il bottone e' quello originale di "My Account": stesse classi, stesso box.
   Il <strong> e' gia' occupato dal ripple di btn-hover, quindi il conteggio
   viaggia in uno span a parte.
   -------------------------------------------------------------------------- */

.header-btn .mall-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background-color: var(--white-color);
    color: var(--primary-color);
    font-family: var(--font-worksans);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    transition: all 0.6s;
}

.header-btn:hover .mall-cart-count {
    background-color: var(--primary-color);
    color: var(--white-color);
}

/* --------------------------------------------------------------------------
   Stati di prezzo che Mall/Artmart non prevedono
   -------------------------------------------------------------------------- */

.price-on-request {
    font-family: var(--font-playfair);
    font-style: italic;
    font-size: 20px;
    color: var(--title-color);
}

.price-sold {
    font-family: var(--font-worksans);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-color);
}

/* --------------------------------------------------------------------------
   Adattamento delle foto reali ai box del template

   Artmart e' costruito su immagini demo di dimensioni fisse e non impone
   alcuna proporzione via CSS. Le nostre arrivano dalla libreria media con
   formati diversi: senza queste regole le griglie si sfalsano. I rapporti
   sono quelli dei file originali del template.
   -------------------------------------------------------------------------- */

.auction-card .auction-card-img-wrap .card-img img {
    display: block;
    width: 100%;
    aspect-ratio: 648 / 495;
    object-fit: cover;
}

.artist-card > a img {
    display: block;
    width: 100%;
    aspect-ratio: 648 / 762;
    object-fit: cover;
}

.article-card .article-img img {
    display: block;
    width: 100%;
    aspect-ratio: 648 / 575;
    object-fit: cover;
}

.about-img img,
.about-img-wrap > img,
.artistic-img img,
.feature-img img {
    display: block;
    width: 100%;
    height: auto;
}

/* Segnaposto per gli slot senza foto: stessa impronta dell'immagine */
.uta-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: var(--section-bg-color);
    color: var(--text-color);
    font-family: var(--font-worksans);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.auction-card .uta-noimg { aspect-ratio: 648 / 495; }
.artist-card  .uta-noimg { aspect-ratio: 648 / 762; }
.article-card .uta-noimg { aspect-ratio: 648 / 575; }

/* Nel mega-menu il posto dell'immagine e' una miniatura di misura fissa
   (56x54 nel template, 50x50 sotto i 992px): il segnaposto deve occupare
   esattamente quel box, altrimenti la riga si disallinea. */
.mega-menu .menu-row > li .artists-img .uta-noimg {
    min-width: 56px;
    max-width: 56px;
    height: 54px;
    aspect-ratio: auto;
    border-radius: 4px;
    font-family: var(--font-playfair);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--title-color);
}

@media (max-width: 991px) {
    .mega-menu .menu-row > li .artists-img .uta-noimg {
        min-width: 50px;
        max-width: 50px;
        height: 50px;
    }
}

/* Le voci delle colonne del mega-menu Opere restano su una riga sola, come
   nel template: i nomi che arrivano dal database ("Catalogo & Merchandising",
   "Dario Giurco (Jurcovich)") sono piu' lunghi di quelli demo e andrebbero a
   capo, sfalsando le colonne. Il pannello si allarga, non si spezza. */
.mega-menu2 .menu-row .menu-single-item ul li a {
    white-space: nowrap;
}

/* La card del mega-menu Opere e' una griglia 42%/58%: l'immagine riempie
   la colonna in altezza. La proporzione fissa impostata sopra la sfonderebbe,
   perche' il template qui impone height: 100%. */
.mega-menu2 .auction-card-area .auction-card .auction-card-img-wrap .card-img img,
.mega-menu2 .auction-card-area .auction-card .uta-noimg {
    aspect-ratio: auto;
    height: 100%;
    min-height: 130px;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   Card esperienza — resta per le pagine interne non ancora convertite
   -------------------------------------------------------------------------- */

.experience-card {
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    height: 100%;
    overflow: hidden;
}

.experience-card .experience-img img {
    width: 100%;
    height: 260px;
    object-fit: cover;
}

.experience-card .experience-content { padding: 26px 24px 30px; }

.experience-card .experience-number {
    font-family: var(--font-worksans);
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--text-color);
}

.experience-card h4 {
    font-family: var(--font-playfair);
    font-size: 26px;
    margin: 8px 0 12px;
}

.experience-card .experience-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 16px 0;
    margin: 16px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    font-family: var(--font-worksans);
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--text-color);
}

.experience-card .experience-price {
    font-family: var(--font-playfair);
    font-size: 24px;
    color: var(--title-color);
}

/* --------------------------------------------------------------------------
   Stato vuoto (editorial.css lo ridefinisce dove e' caricato)
   -------------------------------------------------------------------------- */

.uta-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--text-color);
    border: 1px dashed var(--border-color);
    border-radius: 6px;
}