/* =====================================================================
 * mondo5-mobile-v5.css
 * Vista mobile portrait V5 (1col / 2col) per la grid camgirl.
 *
 * SCOPE: tutte le regole sono dentro
 *   @media (max-width: 480px) and (orientation: portrait)
 * Nessun impatto su desktop, tablet, mobile landscape.
 *
 * Toggle stato:
 *   body (default)         → 1 colonna, AR 11/5, 3 card grandi a viewport.
 *   body.mc-grid-2col      → 2 colonne, AR 3/2, 8 card a viewport.
 *
 * Versionamento: bump del query string ?v=YYYYMMDD-N nel <link> del PHP.
 * ===================================================================== */

/* Default (desktop/tablet/landscape): tutti gli elementi V5 iniettati via JS
   restano nascosti. Il media query mobile portrait sotto li riattiva. */
html body.mondo5-page .mc-grid-toggle,
html body.mondo5-page .mc-country-chip,
html body.mondo5-page .mc-status-badge,
html body.mondo5-page .mc-lang-more { display: none; }

@media (max-width: 480px) and (orientation: portrait) {

  /* ---------- Container & filtri compatti ---------- */
  html body.mondo5-page .image-grid {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #FAFAFA !important;
  }
  html body.mondo5-page .image-grid .mondo5-language-filters {
    padding: 4px 8px 2px 8px !important;
    gap: 4px !important;
    margin: 0 !important;
  }
  html body.mondo5-page .image-grid .mondo5-language-filter {
    width: 26px !important; height: 26px !important; font-size: 9px !important;
  }
  html body.mondo5-page .image-grid .video-grid__filters-wrapper {
    padding: 0 8px 4px 8px !important;
    margin: 0 !important;
  }

  /* ---------- Grid wrapper: default 1col, override su body.mc-grid-2col ---------- */
  html body.mondo5-page .image-grid .image-grid__grid {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 1px !important;
  }
  html body.mondo5-page.mc-grid-2col .image-grid .image-grid__grid {
    display: grid !important;
    /* minmax(0,1fr) impedisce alle colonne di espandersi oltre il 50% per
       contenuti intrinsechi (es. img larga in absolute con width:auto). */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 4px !important;
    padding: 0 4px !important;
  }

  /* ---------- Card base (comune 1col + 2col) ---------- */
  html body.mondo5-page .image-grid .image-grid__item {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #1A1A1D !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    position: relative !important;
    display: block !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
  }
  /* Hide aggressivo di tutti i badge "novita'" / "weekly" / "starred" che
     possono comparire come banner sopra l'immagine in certe varianti card. */
  html body.mondo5-page .image-grid .image-grid__item [class*="card-badge"],
  html body.mondo5-page .image-grid .image-grid__item [class*="card-novita"],
  html body.mondo5-page .image-grid .image-grid__item [class*="novita-banner"] {
    display: none !important;
  }
  /* I filtri legacy nascondono le card aggiungendo queste classi (vedi mondo5-behavior.js):
     ribadiamo display:none con specificità sufficiente affinché il media query mobile
     non rompa lingua / online / novità. */
  html body.mondo5-page .image-grid .image-grid__item.mondo5-is-hidden-by-lang,
  html body.mondo5-page .image-grid .image-grid__item.mondo5-is-hidden-by-online,
  html body.mondo5-page .image-grid .image-grid__item.mondo5-is-hidden-by-novita { display: none !important; }

  /* 1col: 3 card grandi (AR 11/5 ≈ 2.2:1) */
  html body.mondo5-page:not(.mc-grid-2col) .image-grid .image-grid__item {
    aspect-ratio: 11/5 !important;
    margin: 0 0 7px 0 !important;
  }
  /* 2col: 8 card (AR 3/2) */
  html body.mondo5-page.mc-grid-2col .image-grid .image-grid__item {
    aspect-ratio: 3/2 !important;
    margin: 0 !important;
  }

  /* ---------- <a> e wrapper foto: assoluti dentro la card ---------- */
  html body.mondo5-page .image-grid .image-grid__item > a.image-grid__item-content {
    position: absolute !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    display: block !important;
    padding: 0 !important; margin: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }
  html body.mondo5-page .image-grid .image-grid__item .mondo5-card-badge { display: none !important; }

  html body.mondo5-page .image-grid .image-grid__item .image-grid__item-image-wrapper {
    position: absolute !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important;
    border-radius: 10px !important; overflow: hidden !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    background: #111 !important;
    aspect-ratio: auto !important;
  }
  /* Backdrop blur (stessa foto scalata + sfocata) */
  html body.mondo5-page .image-grid .image-grid__item .image-grid__item-image-wrapper::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    background-image: var(--mc-bg) !important;
    background-size: cover !important;
    background-position: center !important;
    filter: blur(28px) saturate(150%) brightness(0.92) !important;
    transform: scale(1.25) !important;
    z-index: 0 !important;
  }
  html body.mondo5-page .image-grid .image-grid__item .image-grid__item-image-wrapper::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    background: rgba(0,0,0,0.18) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }
  html body.mondo5-page .image-grid .image-grid__item img.image-grid__item-image {
    position: relative !important;
    z-index: 2 !important;
    height: 100% !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* ---------- Strip bottom con gradient ---------- */
  html body.mondo5-page .image-grid .image-grid__item .image-grid__item-title {
    position: absolute !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    z-index: 5 !important;
    margin: 0 !important;
    padding: 16px 8px 6px 8px !important;
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 70%, rgba(0,0,0,0) 100%) !important;
    border-radius: 0 !important;
    display: block !important;
    width: auto !important; height: auto !important;
    color: #fff !important;
  }
  html body.mondo5-page.mc-grid-2col .image-grid .image-grid__item .image-grid__item-title {
    padding: 14px 6px 4px 6px !important;
  }
  html body.mondo5-page .image-grid .image-grid__item .mondo5-card-name-line {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
  }
  html body.mondo5-page.mc-grid-2col .image-grid .image-grid__item .mondo5-card-name-line { gap: 5px !important; }
  html body.mondo5-page .image-grid .image-grid__item .mondo5-card-info-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  html body.mondo5-page.mc-grid-2col .image-grid .image-grid__item .mondo5-card-info-left { gap: 5px !important; }

  html body.mondo5-page .image-grid .image-grid__item .image-grid__item-status {
    width: 8px !important; height: 8px !important;
    border-radius: 50% !important;
    background: #999 !important;
    box-shadow: none !important;
    flex: 0 0 auto !important;
  }
  html body.mondo5-page.mc-grid-2col .image-grid .image-grid__item .image-grid__item-status {
    width: 7px !important; height: 7px !important;
  }
  html body.mondo5-page .image-grid .image-grid__item .image-grid__item-status--online {
    background: #21BA45 !important;
    box-shadow: 0 0 0 2px rgba(33,186,69,0.18) !important;
  }
  html body.mondo5-page .image-grid .image-grid__item .image-grid__item-name {
    color: #fff !important;
    font: 800 13px/1.1 -apple-system, "SF Pro Text", system-ui, sans-serif !important;
    letter-spacing: -0.1px !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.55) !important;
    flex: 0 1 auto !important; min-width: 0 !important;
    overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
    padding: 0 !important; margin: 0 !important;
    background: transparent !important;
  }
  html body.mondo5-page.mc-grid-2col .image-grid .image-grid__item .image-grid__item-name {
    font-size: 11px !important;
  }

  /* ---------- Bandierine lingue (max 3 in 1col, 2 in 2col, +N pill) ---------- */
  html body.mondo5-page .image-grid .image-grid__item .mondo5-card-languages {
    display: flex !important;
    gap: 3px !important;
    align-items: center !important;
    flex: 0 0 auto !important;
  }
  html body.mondo5-page .image-grid .image-grid__item .mondo5-card-languages img.mondo5-card-language-flag {
    width: 13px !important; height: 13px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.12) !important;
    display: inline-block !important;
    margin: 0 !important;
  }
  html body.mondo5-page.mc-grid-2col .image-grid .image-grid__item .mondo5-card-languages img.mondo5-card-language-flag {
    width: 11px !important; height: 11px !important;
  }
  html body.mondo5-page .image-grid .image-grid__item .mondo5-card-languages img.mondo5-card-language-flag.mc-hidden { display: none !important; }
  /* Nasconde il +N legacy del componente desktop (popup hover): in mobile usiamo il nostro */
  html body.mondo5-page .image-grid .image-grid__item .mondo5-card-languages-more { display: none !important; }
  html body.mondo5-page .image-grid .image-grid__item .mc-lang-more {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    height: 13px; padding: 0 4px;
    border-radius: 7px;
    background: rgba(0,0,0,0.45);
    color: #fff;
    font: 700 9px/1 -apple-system, system-ui, sans-serif;
  }
  html body.mondo5-page.mc-grid-2col .image-grid .image-grid__item .mc-lang-more {
    height: 11px; padding: 0 3px;
  }

  /* ---------- Cuore/Stella e country in-card: nascosti in mobile V5 ---------- */
  html body.mondo5-page .image-grid .image-grid__item .mondo5-card-favorite-actions { display: none !important; }
  html body.mondo5-page .image-grid .image-grid__item .mondo5-favorite-toggle { display: none !important; }

  /* ---------- Country chip top-right (creato via JS) ---------- */
  html body.mondo5-page .image-grid .image-grid__item .mc-country-chip {
    display: inline-flex !important;
    align-items: center !important;
    position: absolute !important;
    top: 6px !important; right: 6px !important;
    bottom: auto !important; left: auto !important;
    z-index: 6 !important;
    background: rgba(0,0,0,0.45) !important;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: #fff !important;
    font: 800 9px/1 -apple-system, system-ui, sans-serif !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    padding: 3px 6px !important;
    border-radius: 4px !important;
  }

  /* ---------- Status badge: nascosto (lo stato live/online e' gia' visibile
     dal filtro "Visualizza Camgirl Online" e dal pallino verde nella strip
     bottom; il badge "novita'" legacy gestisce il tag NEW top-left). ---------- */
  html body.mondo5-page .image-grid .image-grid__item .mc-status-badge { display: none !important; }

  /* ---------- Toggle griglia (figlio diretto del body, fissato in alto a destra) ----------
     A destra dell'icona lente, che spostiamo a sinistra con un margin dedicato sotto. */
  html body.mondo5-page .mc-grid-toggle {
    position: fixed !important;
    top: 12px !important; right: 10px !important;
    display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
    gap: 2px !important;
    width: 56px !important; height: 32px !important;
    margin: 0 !important;
    background: rgba(0,0,0,0.55) !important;
    border: 1px solid rgba(255,255,255,0.30) !important;
    border-radius: 8px !important;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    cursor: pointer !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    z-index: 1050 !important;
  }
  /* Topbar: allinea hamburger+logo a sinistra, lente+toggle a destra.
     Non tocca le dimensioni del logo (lasciate al CSS legacy), si limita a
     spostarlo ed a scalarlo via transform per non rischiare collassi a 0px. */
  html body.mondo5-page .navbar-helpers-bar__topbar {
    justify-content: flex-start !important;
    gap: 4px !important;
  }
  html body.mondo5-page .navbar-helpers-bar__topbar .navbar-helpers-bar__logo-holder {
    margin: 0 auto 0 0 !important;
  }
  html body.mondo5-page .navbar-helpers-bar__topbar .navbar-helpers-bar__logo-holder a {
    display: inline-block !important;
    transform: scale(0.9) !important;
    transform-origin: left center !important;
  }
  /* Sposta la lente di ricerca a sinistra del toggle (lascia ~64px sulla destra). */
  html body.mondo5-page .navbar-helpers-bar__topbar .navbar-helpers-bar__open-toggle:last-child {
    margin-right: 64px !important;
  }
  html body.mondo5-page .mc-grid-toggle svg { width: 18px; height: 18px; display: block; }
  html body.mondo5-page .mc-grid-toggle .mc-ico-1 rect { fill: #D81B60; }
  html body.mondo5-page .mc-grid-toggle .mc-ico-2 rect { fill: #999; }
  html body.mondo5-page.mc-grid-2col .mc-grid-toggle .mc-ico-1 rect { fill: #999; }
  html body.mondo5-page.mc-grid-2col .mc-grid-toggle .mc-ico-2 rect { fill: #D81B60; }

  /* ---------- Sticky filtri: hide-on-scroll-down (classe applicata da JS) ---------- */
  html body.mondo5-page.mc-hide-filters .mc-sticky-filters { transform: translateY(-100%) !important; }
  html body.mondo5-page .mc-sticky-filters { transition: transform 240ms ease-out; will-change: transform; }
}