/*
 * V9.507 — Composer mobile compatto + FAB centrato + popup Fan Club
 * Corregge il composer dei post su smartphone, il pulsante flottante di
 * scrittura e il clipping delle schede Fan Club nelle mappe compatte.
 * Nessuna modifica alla logica di pubblicazione.
 */

@media (max-width:760px){
  /*
   * Il composer non deve occupare artificialmente tutta l'altezza del telefono.
   * Rimane un dialog centrato, abbastanza grande per scrivere ma proporzionato
   * al contenuto. visualViewport continua a proteggerlo quando appare la tastiera.
   */
  html[data-slr-theme] body.slr-site.slr-home-social .slr-post-composer-modal{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    padding:
      max(12px,env(safe-area-inset-top,0px))
      max(10px,env(safe-area-inset-right,0px))
      max(12px,env(safe-area-inset-bottom,0px))
      max(10px,env(safe-area-inset-left,0px))!important;
  }

  html[data-slr-theme] body.slr-site.slr-home-social .slr-post-composer-modal.is-open{
    top:var(--slr-mobile-vv-top,0px)!important;
    right:0!important;
    bottom:auto!important;
    left:0!important;
    width:100%!important;
    height:var(--slr-mobile-vv-height,100dvh)!important;
    max-height:var(--slr-mobile-vv-height,100dvh)!important;
  }

  html[data-slr-theme] body.slr-site.slr-home-social .slr-post-composer-dialog{
    width:min(560px,100%)!important;
    min-height:0!important;
    height:auto!important;
    max-height:calc(
      var(--slr-mobile-vv-height,100dvh)
      - max(24px,env(safe-area-inset-top,0px))
      - max(24px,env(safe-area-inset-bottom,0px))
    )!important;
    overflow:auto!important;
    overscroll-behavior:contain;
    border:1px solid var(--slr-polish-line,var(--slr-ui-line,#cfd9de))!important;
    border-radius:20px!important;
    box-shadow:0 22px 64px rgba(0,0,0,.28)!important;
    transform:translateY(8px) scale(.99);
  }

  html[data-slr-theme] body.slr-site.slr-home-social .slr-post-composer-modal.is-open .slr-post-composer-dialog{
    transform:translateY(0) scale(1)!important;
  }

  html[data-slr-theme] body.slr-site.slr-home-social .slr-post-composer-header{
    min-height:56px!important;
    padding-top:6px!important;
    padding-bottom:6px!important;
  }

  html[data-slr-theme] body.slr-site.slr-home-social .slr-post-composer-main{
    padding-top:15px!important;
  }

  html[data-slr-theme] body.slr-site.slr-home-social .slr-post-composer-text-shell>textarea[data-social-composer-body],
  html[data-slr-theme] body.slr-site.slr-home-social .slr-post-composer-editor>textarea{
    min-height:clamp(145px,25dvh,190px)!important;
    resize:none!important;
  }

  html[data-slr-theme] body.slr-site.slr-home-social .slr-post-composer-footer{
    padding-bottom:max(10px,env(safe-area-inset-bottom,0px))!important;
  }

  /*
   * La policy "telefono fisico" forzava display:inline-flex e annullava il
   * place-items del FAB. Ripristiniamo un solo sistema di centraggio.
   */
  html.slr-physical-mobile body.slr-site.slr-home-social>.slr-social-mobile-compose[type="button"],
  body.slr-site.slr-home-social>.slr-social-mobile-compose[type="button"]{
    display:grid!important;
    place-items:center!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    line-height:0!important;
    box-sizing:border-box!important;
  }

  html.slr-physical-mobile body.slr-site.slr-home-social>.slr-social-mobile-compose[type="button"] svg,
  body.slr-site.slr-home-social>.slr-social-mobile-compose[type="button"] svg{
    display:block!important;
    grid-area:1/1!important;
    margin:0!important;
    flex:none!important;
  }
}

@media (max-width:420px){
  html[data-slr-theme] body.slr-site.slr-home-social .slr-post-composer-dialog{
    border-radius:18px!important;
  }

  html[data-slr-theme] body.slr-site.slr-home-social .slr-post-composer-main{
    padding-inline:12px!important;
  }
}


/*
 * Fan Club: nei widget mappa stretti il contenuto del popup deve poter
 * restringersi davvero entro il canvas. L'anchor viene scelto dinamicamente
 * dal JS V9.507 in base allo spazio disponibile attorno al marker.
 */
@media (max-width:760px){
  .slr-fan-map-popup-shell--compact{
    max-width:calc(100% - 16px)!important;
  }

  .slr-fan-map-popup-shell--compact .maplibregl-popup-content{
    box-sizing:border-box!important;
    width:min(236px,calc(100vw - 64px))!important;
    max-width:100%!important;
    padding:10px!important;
  }

  .slr-fan-map-popup-shell--compact .slr-fan-map-popup{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  .slr-fan-map-popup-shell--compact .slr-fan-map-popup>div{
    grid-template-columns:38px minmax(0,1fr)!important;
    gap:8px!important;
  }

  .slr-fan-map-popup-shell--compact .slr-fan-map-popup>div>span{
    width:38px!important;
    height:38px!important;
  }

  .slr-fan-map-popup-shell--compact .slr-fan-map-popup strong,
  .slr-fan-map-popup-shell--compact .slr-fan-map-popup small{
    overflow-wrap:anywhere;
  }
}