/* ============================================================
   STRAIN-CARD.CSS — card strain (.strain, con like + visti), "nessun risultato", paginazione, #sresa.
   Estratto 1:1 da recre.css (v8). Caricato da: catalogo, catalogo vendor, account (dashboard, preferiti)
   subito dopo recre.css. Markup: partials/strain-grid.php, partials/strain-card.php, Support/Pagination.php.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   STRAIN CARDS — Glassmorphism
════════════════════════════════════════════════════════════ */
.straincontainer { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; gap: 32px !important; padding: 40px 24px !important; width: 95% !important; max-width: 1400px !important; margin: 0 auto !important; clear: both; }
/* container "card": le regole su nome/like/visti dipendono dalla larghezza reale della card, non dal viewport */
.strain_a { display: block !important; text-decoration: none !important; border-radius: 16px !important; perspective: 900px !important; width: 100% !important; margin: 0 !important; container: card / inline-size; }
.strain { width: 100% !important; aspect-ratio: 2 / 3 !important; height: auto !important; margin: 0 !important; border-radius: 16px !important; background-size: cover !important; background-position: center !important; position: relative !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; transform-style: preserve-3d; transform: rotateX(0deg) rotateY(0deg) scale(1); transition: transform 0.08s linear, box-shadow 0.4s ease !important; will-change: transform; cursor: pointer; }
.strain:hover { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 45px rgba(120, 80, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; }
.strain::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.15) 65%, rgba(0, 0, 0, 0.82) 100%); z-index: 1; pointer-events: none; }
.strain::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.13) 0%, transparent 60%); z-index: 6; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; }
.strain:hover::after { opacity: 1; }
.namediv { position: absolute !important; bottom: 12px !important; left: 12px !important; right: 12px !important; top: unset !important; width: auto !important; min-height: unset !important; background: none !important; padding: 0 !important; z-index: 3 !important; display: flex !important; align-items: flex-end !important; justify-content: space-between !important; gap: 6px !important; flex-direction: row !important; transition: bottom 0.42s cubic-bezier(0.34, 1.3, 0.64, 1), top 0.42s cubic-bezier(0.34, 1.3, 0.64, 1), left 0.42s cubic-bezier(0.34, 1.3, 0.64, 1), right 0.42s cubic-bezier(0.34, 1.3, 0.64, 1) !important; }
.strain:hover .namediv { bottom: unset !important; top: 12px !important; left: unset !important; right: 12px !important; flex-direction: column !important; align-items: flex-end !important; gap: 5px !important; }
.strainname { font-size: 0.93rem !important; font-weight: 700 !important; color: #fff !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9) !important; line-height: 1.2 !important; margin: 0 !important; padding: 0 !important; text-align: left !important; flex: 0 1 auto !important; min-width: 0 !important; overflow-wrap: break-word; display: block !important; overflow: visible !important; -webkit-line-clamp: unset !important; line-clamp: unset !important; transition: font-size 0.3s ease, text-align 0.3s ease; }
.strain:hover .strainname { font-size: 0.8rem !important; text-align: right !important; }

/* ── Like + visti (partials/strain-card.php, like in public/js/strain-card-like.js) ──
   Niente riquadro: icona + numero in bianco pieno, leggibili grazie all'ombra (in basso c'è il gradiente
   scuro di .strain::before, in hover il pannello .straininfo). A riposo stanno a destra del nome sulla
   stessa riga; in hover .namediv diventa colonna in alto a destra → nome, poi la riga like + visti. */
.card-meta { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; margin-left: auto; }
.strain:hover .card-meta { margin-left: 0; }
.card-stat { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 700; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 10px rgba(0, 0, 0, 0.55); }
.card-stat i { font-size: 0.95rem; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85)); transition: transform 0.2s ease, filter 0.2s ease; }
.card-views i { --fa-primary-color: #2ecc71; --fa-secondary-color: #ffffff; --fa-secondary-opacity: 1; }

/* bottone like: reset completo (anche contro il reboot di Bootstrap sulla pagina vendor), area di tocco allargata col padding */
.card-like { -webkit-appearance: none; appearance: none; background: none !important; border: 0 !important; box-shadow: none !important; margin: -6px -5px !important; padding: 6px 5px !important; border-radius: 999px; font: inherit; font-size: 0.74rem; font-weight: 700; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* icone solo "fad …": con "fa-duotone fa-solid" il .fa-solid di Font Awesome 6 Free (caricato anche lui) cambia font
   e lo strato ::after del duotone diventa un glifo mancante = il vecchio quadratino grigio. Il cuore duotone sta tutto
   nello strato secondario → il suo colore è --fa-secondary-color; l'occhio: pupilla = primario, contorno = secondario. */
.card-like i { --fa-primary-color: #ffffff; --fa-secondary-color: #ffffff; --fa-secondary-opacity: 1; }
.card-like:hover i { transform: scale(1.18); }
.card-like:focus { outline: none; }
.card-like:focus-visible { outline: 2px solid #2ecc71; outline-offset: 1px; }
.card-like[aria-busy="true"] { cursor: progress; opacity: 0.75; }
.card-like.is-liked i { --fa-primary-color: #ff3d63; --fa-secondary-color: #ff3d63; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 6px rgba(255, 61, 99, 0.65)); }
.card-like.is-pop i { animation: card-like-pop 0.4s cubic-bezier(0.34, 1.6, 0.64, 1); }
@keyframes card-like-pop { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } }
.card-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* card strette (mobile, griglia a 140px): a riposo like + visti vanno a capo sotto il nome, allineati a sinistra */
@container card (max-width: 199px) {
  .strain:not(:hover) .namediv { flex-wrap: wrap !important; align-items: flex-start !important; row-gap: 5px !important; }
  .strain:not(:hover) .strainname { flex-basis: 100% !important; }
  .strain:not(:hover) .card-meta { margin-left: 0; }
  .card-meta { gap: 8px; }
  .card-stat, .card-like { font-size: 0.68rem; }
  .card-stat i { font-size: 0.85rem; }
}
/* schermi touch: area di tocco del like più grande */
@media (hover: none) and (pointer: coarse) {
  .card-like { margin: -9px -7px !important; padding: 9px 7px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .card-stat i { transition: none; }
  .card-like:hover i { transform: none; }
  .card-like.is-pop i { animation: none; }
}

.straininfo { position: absolute !important; inset: 0 !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; border-radius: 16px !important; z-index: 2 !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; align-items: stretch !important; padding: 14px !important; background: rgba(10, 8, 35, 0.60) !important; backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09) !important; opacity: 0 !important; transform: translateY(10px); transition: opacity 0.38s ease, transform 0.38s cubic-bezier(0.34, 1.4, 0.64, 1) !important; pointer-events: none; }
.strain:hover .straininfo { opacity: 1 !important; transform: translateY(0) !important; pointer-events: auto; }
.straininfo-stats { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-bottom: 10px !important; }
.straininfo h4, .straininfo-stats h4 { display: inline-flex !important; align-items: center !important; gap: 5px !important; font-size: 0.7rem !important; font-weight: 600 !important; color: rgba(255, 255, 255, 0.93) !important; background: rgba(255, 255, 255, 0.09) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 30px !important; padding: 4px 10px !important; white-space: nowrap !important; margin: 0 !important; width: auto !important; text-align: left !important; }
.straininfo h4 i { color: inherit !important; margin-right: 0 !important; }
.thc-icon { color: #ff7b7b !important; }
.cbd-icon { color: #6bffb8 !important; }
.straininfo .fa-clock, .straininfo-stats .fa-clock { color: #ffd93d !important; }
.straininfo .fa-balance-scale, .straininfo-stats .fa-balance-scale { color: #a8edea !important; }
.straininfo p { display: none; }
.straininfo h2 { display: none; }
.bankimg { position: static !important; bottom: unset !important; left: unset !important; width: 100% !important; background: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(255, 255, 255, 0.11) !important; border-radius: 10px !important; padding: 7px 11px !important; box-sizing: border-box !important; z-index: auto !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 9px !important; color: rgba(255, 255, 255, 0.85) !important; font-weight: 600 !important; font-size: 0.76rem !important; text-transform: none !important; white-space: nowrap !important; }
.bankimg img { width: 32px !important; height: 32px !important; object-fit: cover !important; border-radius: 7px !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; display: block !important; flex-shrink: 0; margin-left: auto !important; max-width: unset !important; }

@media only screen and (max-width: 600px) {
  .strain_a { width: 98% !important; }
  .strainname { font-size: 0.8rem !important; }
}
@media only screen and (max-width: 650px) {
  .straincontainer { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; gap: 16px !important; padding: 10px !important; }
  .strain { aspect-ratio: 2 / 3 !important; height: auto !important; }
}

/* ════════════════════════════════════════════════════════════
   NO RESULTS
════════════════════════════════════════════════════════════ */
.noresults { width: 100%; height: 420px; margin: 0 auto; background-image: url("../img/other/420-not-found.png"); background-repeat: no-repeat; background-position: center; text-align: center; float: left; background-size: contain; }

/* ════════════════════════════════════════════════════════════
   PAGINAZIONE — barre, numeri a lunghezza fissa, "vai alla pagina"
════════════════════════════════════════════════════════════ */
/* Barre che contengono la paginazione: sopra .results-bar, sotto .pagination-bottom (markup in partials/strain-grid.php,
   disposizione a griglia in catalogue.css). Qui solo l'aspetto. Larghe quanto l'area risultati meno 16px per lato;
   nessun margine verso la griglia → lo spazio sopra e sotto le card è il padding di 40px di .straincontainer (simmetrico). */
.results-bar, .pagination-bottom { box-sizing: border-box; width: calc(100% - 32px); margin: 0 auto; padding: 8px 12px; border-radius: 12px; background: #0f1c14; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 1px 2px rgba(0, 0, 0, 0.25); }
/* Barra alta: verde più chiaro a sinistra (sotto "Ordina") che sfuma nel colore della barra filtri (#0f1c14) a destra.
   margin-top = top della toolbar sovrapposta in catalogue-filters.css */
.results-bar { margin-top: 16px; background: linear-gradient(90deg, #1b3826 0%, #142619 38%, #0f1c14 68%, #0f1c14 100%); }
.pagination-bottom { margin-bottom: 1.5rem; }

/* Paginazione. Posizioni a LARGHEZZA FISSA (anche le ellissi) + numero fisso di posizioni per livello
   (Support/Pagination::slots) → la lunghezza non cambia mentre si sfoglia. */
.pagination-nav { display: flex; justify-content: center; transition: opacity 0.2s ease; }
.pagination-nav .frm_pag { display: flex; justify-content: center; margin: 0; }
.pagination-inner { display: inline-flex; align-items: center; }
.pag-arrow { display: flex; cursor: pointer; margin: 0; border-radius: 50%; outline: none; }
.pag-arrow.is-disabled { cursor: not-allowed; pointer-events: none; }
.pag-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--f-text); transition: background-color 0.15s ease, color 0.15s ease; }
.pag-arrow:hover:not(.is-disabled) .pag-btn { background: rgba(255, 255, 255, 0.06); color: var(--f-green); }
.pag-arrow.is-disabled .pag-btn { opacity: 0.25; }
.pag-pages { display: flex; align-items: center; gap: 2px; margin: 0 10px; }
.pag-num-label { display: flex; cursor: pointer; margin: 0; border-radius: 999px; text-decoration: none; outline: none; }
.pag-num, .pag-ellipsis { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 40px; height: 36px; padding: 0; border-radius: 999px; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: rgba(212, 237, 216, 0.7); transition: background-color 0.15s ease, color 0.15s ease; }
.pag-num-label:hover .pag-num { background: rgba(255, 255, 255, 0.06); color: var(--f-text); }
.pag-num.is-active { position: relative; background: var(--f-green); color: #0b1a10; font-weight: 600; box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.18); cursor: default; }
.pag-ellipsis { color: var(--f-muted); cursor: default; user-select: none; }
.pag-arrow:focus-visible .pag-btn, .pag-num-label:focus-visible .pag-num { box-shadow: 0 0 0 2px var(--f-green); }
.pagination-nav.is-loading { pointer-events: none; opacity: 0.5; }
.pagination-nav.is-loading .pag-num.is-active { overflow: hidden; }
.pagination-nav.is-loading .pag-num.is-active::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%); animation: pag-shimmer 1s infinite; }

@keyframes pag-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* Livelli (larghezza del contenitore #sresa / #vendorStrainsGrid, dichiarati container in catalogue.css):
   s = 5 posizioni (< 480px) · m = 7 (default) · l = 11 (≥ 1190px). Soglie misurate con Chrome headless (PROGRESS_v8 §19e). */
.pag-set { display: none; }
.pag-set-m { display: flex; }
@container (min-width: 1190px) {
  .pag-set-m { display: none; }
  .pag-set-l { display: flex; }
}
@container (max-width: 479px) {
  .pag-set-m { display: none; }
  .pag-set-s { display: flex; }
  .results-bar, .pagination-bottom { padding: 6px 8px; }
  .pag-pages { margin: 0 4px; }
  .pag-btn { width: 34px; height: 34px; }
  .pag-num, .pag-ellipsis { width: 34px; height: 34px; font-size: 13px; }
}
@container (max-width: 359px) {
  .results-bar, .pagination-bottom { width: calc(100% - 16px); }
  .pag-pages { margin: 0 2px; }
  .pag-btn { width: 30px; height: 30px; }
  .pag-num, .pag-ellipsis { width: 30px; height: 30px; font-size: 12px; }
}

/* "Vai alla pagina" (Support/Pagination::jump) */
.pag-jump { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.pag-jump-input { box-sizing: border-box; width: 56px !important; height: 34px !important; margin: 0 !important; padding: 0 8px !important; border-radius: 8px !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; background: rgba(255, 255, 255, 0.05) !important; color: var(--f-text) !important; font-family: inherit; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; text-align: center; box-shadow: none; -moz-appearance: textfield; appearance: textfield; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.pag-jump-input::-webkit-outer-spin-button, .pag-jump-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pag-jump-input::placeholder { color: var(--f-muted); opacity: 1; }
.pag-jump-input:focus { outline: none; border-color: var(--f-green) !important; box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.18); }
.pag-jump-btn { display: flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--f-green-dim); color: var(--f-green); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.pag-jump-btn:hover { background: var(--f-green); color: #0b1a10; }
.pag-jump-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--f-green); }

/* ════════════════════════════════════════════════════════════
   SRESA — risultati AJAX
════════════════════════════════════════════════════════════ */
#sresa-ssr { display: none; }
#sresa { min-height: 80vh; }

@media (max-width: 650px) {
  #sresa { min-height: 60vh; }
}