/* =============================================================
   product-cards.css
   Task #234/#235 - stile "editorial magazine" per le card prodotto.
   Condiviso da ProdottiCards.ascx, FeaturedProductsSection.ascx,
   LatestProductsSection.ascx (via wrapper) e RelatedProducts.ascx.
   ============================================================= */

.pc-section  { padding: 1.5rem 1rem 3rem; }
.pc-header   { max-width: 1100px; margin: 0 auto 1.5rem; text-align: center; }
.pc-title    { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: #212529; margin-bottom: .25rem; }
.pc-subtitle { color: #6c757d; font-size: 1rem; }

.pc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.75rem;
    max-width: 1240px; margin: 0 auto;
}
/* Task #242 - variante compatta per le strip (Related, Featured/Latest
   dentro colonne strette). minmax 160px calibrato per garantire 4 card
   sulla larghezza tipica della colonna prodotto (~700-780px). */
.pc-grid.pc-grid-strip {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}
/* Task #243 - nelle strip le card sono piccole; scalo un po' i font di
   prezzo, titolo e CTA per non far wrappare "€ 25,00" su 2 righe. */
.pc-grid-strip .pc-card-title { font-size: .95rem; }
.pc-grid-strip .pc-price,
.pc-grid-strip .pc-price-new  { font-size: 1.05rem; }
.pc-grid-strip .pc-price-old  { font-size: .72rem; }
.pc-grid-strip .pc-cta        { padding: .35rem .65rem; font-size: .72rem; }
.pc-grid-strip .pc-card-body  { padding: .8rem .9rem 1rem; }

/* ── Card contenitore ───────────────────────────────── */
.pc-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(20,20,40,.08);
    transition: transform .25s cubic-bezier(.2,.7,.3,1),
                box-shadow .25s ease;
    display: flex; flex-direction: column;
    position: relative;
    color: inherit;
}
.pc-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 32px rgba(20,20,40,.15);
}
.pc-card-link {
    position: absolute; inset: 0;
    z-index: 1;
    text-indent: -9999px;
    background: transparent;
}

/* ── Immagine (top) — pattern "libreria" ────────────────
   Doppio layer:
   - .pc-card-image-bg → sfondo blurato della stessa copertina
     che riempie il box (cover, blur, luminosità ridotta). Serve
     a riempire le bande laterali con un'estensione atmosferica
     della copertina invece di lasciare fondo grigio.
   - .pc-card-image    → copertina INTERA visibile (contain) al
     centro. Zoom lento al hover.
   Aspect ratio 3/4 verticale: buon compromesso per copertine
   libro (tipicamente 2/3) e altri prodotti fotografici. Le
   copertine verticali riempiono l'altezza; foto orizzontali
   hanno un po' di banda sopra/sotto (ma mostrate integre).
*/
.pc-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background-color: #eef0f4;
}
.pc-card-image-bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    /* Blur pesante + scale per nascondere gli edge sfumati */
    filter: blur(24px) brightness(0.72) saturate(1.1);
    transform: scale(1.18);
    /* Non deve reagire al hover: resta sfondo statico */
}
.pc-card-image {
    position: absolute; inset: 0;
    background-size: contain;      /* copertina intera visibile */
    background-position: center;
    background-repeat: no-repeat;
    transition: transform .5s cubic-bezier(.2,.7,.3,1);
    /* leggera ombra sotto la copertina per "staccarla" dal blur */
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}
.pc-card:hover .pc-card-image { transform: scale(1.04); }

.pc-card-media::after {
    content: '';
    position: absolute; inset: auto 0 0 0; height: 40%;
    background: linear-gradient(to top, rgba(0,0,0,.15), rgba(0,0,0,0));
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
}
.pc-card:hover .pc-card-media::after { opacity: 1; }

/* ── Quick actions (colonna in alto a destra sulla foto) ── */
.pc-quick-actions {
    position: absolute;
    top: .55rem; right: .55rem;
    z-index: 3;
    display: flex; flex-direction: column; gap: .4rem;
}
.pc-quick-btn {
    width: 40px; height: 40px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #212529;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 10px rgba(0,0,0,.15);
    font-size: 1.05rem;
    cursor: pointer;
    opacity: 0;
    transform: translateX(12px);
    transition: opacity .25s ease, transform .25s ease,
                background .15s ease, color .15s ease;
    text-decoration: none;
}
.pc-quick-btn:hover {
    background: #212529;
    color: #fff;
    text-decoration: none;
}
.pc-quick-btn.pc-wish-on         { color: #dc3545; background: #fff; }
.pc-quick-btn.pc-wish-on:hover   { color: #fff;    background: #dc3545; }

.pc-card:hover .pc-quick-btn                 { opacity: 1; transform: translateX(0); }
.pc-card:hover .pc-quick-btn:nth-child(1)    { transition-delay: .05s; }
.pc-card:hover .pc-quick-btn:nth-child(2)    { transition-delay: .12s; }

@media (hover: none) {
    .pc-quick-btn { opacity: .85; transform: none; }
}

/* ── Body ───────────────────────────────────────────── */
.pc-card-body {
    padding: 1.1rem 1.25rem 1.4rem;
    flex: 1;
    display: flex; flex-direction: column;
}

.pc-categories {
    font-size: .68rem;
    line-height: 1;
    margin-bottom: .6rem;
    display: flex; flex-wrap: wrap; gap: .3rem;
}
.pc-categories a {
    display: inline-block;
    padding: .3em .55em;
    border-radius: 999px;
    background: #f1f3f5;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
    text-decoration: none;
    position: relative; z-index: 2;
    transition: background .15s ease, color .15s ease;
}
.pc-categories a:hover { background: #212529; color: #fff; }
.pc-categories .pc-cat-sep { display: none; }

.pc-card-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #212529;
    line-height: 1.25;
    margin-bottom: .5rem;
    letter-spacing: -.01em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

.pc-rating {
    display: flex; align-items: center; gap: .35rem;
    font-size: .78rem; color: #6c757d;
    margin-bottom: .55rem;
}
.pc-stars                { color: #ffc107; letter-spacing: 1px; }
.pc-stars .bi            { font-size: .82rem; }
.pc-stars .star-empty    { color: #dee2e6; }
.pc-rating-count         { color: #6c757d; }
.pc-rating-empty         { color: #adb5bd; font-style: italic; }

.pc-card-desc {
    color: #6c757d;
    font-size: .88rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    flex: 1;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

.pc-card-footer {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-top: auto;
    gap: .5rem;
}
.pc-price-block  { display: flex; flex-direction: column; line-height: 1; }
.pc-price-label  {
    font-size: .68rem; color: #adb5bd;
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: .2rem;
}
.pc-price {
    font-size: 1.55rem; font-weight: 800; color: #b88a00;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;   /* "€ 25,00" resta su una riga */
}
.pc-price-old {
    display: block;
    font-size: .82rem; font-weight: 500; color: #adb5bd;
    line-height: 1; text-decoration: line-through;
    margin-bottom: .2rem;
}
.pc-price-new {
    display: block;
    font-size: 1.55rem; font-weight: 800; color: #d9534f;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pc-cta {
    display: inline-flex; align-items: center; gap: .25rem;
    background: #212529;
    color: #fff;
    font-weight: 600;
    font-size: .82rem;
    padding: .55rem 1rem;
    border-radius: 999px;
    transition: background .15s ease, transform .15s ease;
    white-space: nowrap;
}
.pc-card:hover .pc-cta { background: #b88a00; transform: translateX(2px); }
.pc-cta.disabled {
    background: #dee2e6; color: #6c757d;
    cursor: not-allowed; pointer-events: none;
}
.pc-card:hover .pc-cta.disabled { background: #dee2e6; transform: none; }

/* Badge stato prodotto (top-left) */
.pc-status-badge {
    position: absolute;
    top: .55rem; left: .55rem;
    z-index: 2;
    font-size: .68rem;
    padding: .35em .6em;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    letter-spacing: .3px;
}

/* Empty state */
.pc-empty {
    text-align: center; color: #6c757d;
    padding: 3rem 1rem;
    background: #f8f9fa; border-radius: 14px;
}