/* ============================
   TO-NEWS – 3 colonne affiancate SOLO SU TABLET
   Range: min-width 768px – max-width 1180px
   ============================ */

@media (min-width: 768px) and (max-width: 1180px) {

  /* Rete di sicurezza globale */
  html, body { max-width: 100%; overflow-x: hidden; }
  *, *::before, *::after { box-sizing: border-box; }
  img, video, svg, canvas { max-width: 100% !important; height: auto !important; display: block; }
  iframe { max-width: 100% !important; width: 100% !important; display: block; }

  /* Wrapper delle 3 colonne come GRID */
  #whitebox_m #area{
    display: grid !important;
    grid-template-columns: 25% 50% 25%;
    grid-template-areas: "left main right";
    column-gap: clamp(18px, 2.4vw, 28px);  /* spazio più omogeneo */
    align-items: start;
  }

  /* Assegna le aree */
  #leftcolumn  { grid-area: left;  }
  #maincolumn  { grid-area: main;  min-width: 0; } /* evita overflow su iPad */
  #rightcolumn { grid-area: right; }

  /* Annulla vecchi float/clear */
  #leftcolumn, #maincolumn, #rightcolumn{
    float: none !important;
    clear: none !important;
    width: auto !important;
    padding-inline: 6px; /* respiro laterale */
  }

  /* Contenuti interni con width fisse non devono spingere */
  #leftcolumn *, #maincolumn *, #rightcolumn *{
    max-width: 100% !important;
  }

  /* Tabella wrapper nel main */
  #maincolumn > table{ width: 100% !important; border-collapse: collapse; table-layout: auto; }
  #maincolumn > table td{ width: auto !important; }

  /* Divisore verticale eliminato */
  td.greyline, .greyline{ display: none !important; width: 0 !important; padding: 0 !important; border: 0 !important; }

  /* Spaziature moduli */
  #leftcolumn .module, #rightcolumn .module, #rightcolumn .module_menu, 
  #maincolumn .moduletable{ margin-bottom: clamp(14px, 2.4vw, 24px); }

  /* Evita overflow slider */
  .gn_slider, .gn_opacitylayer, .gn_news{ max-width: 100% !important; }

  /* Banner inline */
  #leftcolumn [style*="width:"], #maincolumn [style*="width:"], #rightcolumn [style*="width:"],
  #leftcolumn [style*="min-width:"], #maincolumn [style*="min-width:"], #rightcolumn [style*="min-width:"],
  #leftcolumn [style*="max-width:"], #maincolumn [style*="max-width:"], #rightcolumn [style*="max-width:"]
  { max-width: 100% !important; }

  /* Link bar centrati */
  #links{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
  }
  #links ul{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0;
    list-style: none;
  }
  #links a{
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
    text-decoration: none;
  }

  /* Nascondi pathway */
  #pathway{ display: none !important; }

  /* Banner nel main senza margine sinistro */
  #maincolumn .pdm{
    margin-left: 0 !important;
    display: block;
  }

  /* Arrotonda le immagini dei blocchi fn_static_1 */
  .fn_static_1 img{
    border-radius: 10px;
  }

  /* ===== Header fix ===== */
  #header{
    position: relative;
    z-index: 5;
    margin-bottom: 20px !important;   /* spazio VERSO il contenuto */
  }
  #header_r{
    display: grid !important;
    grid-template-columns: max-content 1fr max-content; /* manchette | logo | manchette */
    grid-auto-rows: auto;
    align-items: center;
    height: auto !important;          /* override 120px */
    overflow: visible !important;
    padding: 16px 30px !important;
    padding-left: 30px !important;
    text-align: left !important;
    row-gap: 16px !important;
    padding-top: 80px !important;
  }
  #links{
    grid-column: 1 / -1;
    margin: 0 !important;
  }
  .custom_manchette_left{  justify-self: start;  grid-column: 1; }
  #header_r > a[href]{     justify-self: center; grid-column: 2; display: block !important; }
  .custom_manchette_right{ justify-self: end;    grid-column: 3; }
  .custom_manchette_left,
  .custom_manchette_right,
  #header_r > a[href]{
    padding-top: 4px;
    padding-bottom: 4px;
  }
  #whitebox{
    position: relative;
    z-index: 1;
    clear: both;
  }
  #whitebox_m{ margin-top: 0 !important; }
  .custom_manchette_left img,
  .custom_manchette_right img{
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* Logo centrato verticalmente */
  #header_r{
    display: grid !important;
    grid-template-columns: max-content 1fr max-content;
    align-items: center;
    height: 150px !important;
  }
  #header_r > a[href]{
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  #logo{
    display: block;
    height: 90px !important;
    width: auto;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    margin-top: 10px;
  }
  .custom_manchette_left,
  .custom_manchette_right{
    display: flex;
    align-items: center;
  }
  .custom_manchette_left img,
  .custom_manchette_right img{
    display: block;
    height: 90px;
    width: auto;
  }

  /* ===== Moduli laterali ===== */
  div.module_menu h3{
    width: 100% !important;
    box-sizing: border-box;
    margin: 0 0 10px 0 !important;
    padding: 8px 12px;
    font-size: 14px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    color: #eee;
    background: #69247B;
    text-align: center;
  }
  div.module_menu div div div{
    width: auto !important;
    padding: 0px !important;
    padding-bottom: 15px;
  }
  div.module_menu{
    border-radius: 10px;
    border: 7px solid #69247b;
    border-top: 10px solid #69247b;
    width: 180px;
    padding-bottom: 7px;
  }
  .roberto{ padding-left: 7px; }
  .gn_pagination_1 a:link{
    width: 100%;
    margin-top: 10px;
    text-align: center;
  }

  /* ===== DISTANZA MAIN ↔ RIGHT ===== */
  #whitebox_m #area{
    column-gap: 16px !important;   /* ← spazio sicuro */
  }
  #leftcolumn, #maincolumn, #rightcolumn{
    min-width: 0 !important;       /* ← impedisce che i figli spingano fuori */
  }
  #maincolumn{ padding-right: 6px !important;   padding-left: 0 !important;     /* annulla extra spacing */}
  #rightcolumn{
    padding-left: 6px !important;
    border-left: 1px solid rgba(0,0,0,.06);
  }
  #maincolumn *{
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }
}

/* ===== Pagina ARTICOLO (solo TABLET) – LEFT 25% + MAIN 70% ===== */
@media (min-width: 768px) and (max-width: 1180px){

  /* --- Metodo 1: classi tipiche di Joomla sull'elemento <body> --- */
  /* Se il body ha view-article (o varianti), nascondo la right e faccio 2 colonne */
  body.view-article #rightcolumn,
  body[class*="view-article"] #rightcolumn,
  body.option-com_content.view-article #rightcolumn,
  body.com_content.view-article #rightcolumn{
    display: none !important;
  }

  body.view-article #whitebox_m #area,
  body[class*="view-article"] #whitebox_m #area,
  body.option-com_content.view-article #whitebox_m #area,
  body.com_content.view-article #whitebox_m #area{
    display: grid !important;
    grid-template-columns: 25% 70% !important;   /* LEFT 25% | MAIN 70% */
    grid-template-areas: "left main" !important; /* niente colonna destra */
    column-gap: clamp(12px, 2vw, 20px) !important;
    align-items: start;
  }

  body.view-article #leftcolumn{ grid-area: left; }
  body.view-article #maincolumn{ grid-area: main; min-width: 0 !important; }

  /* --- Metodo 2 (fallback robusto): usa :has() se disponibile ---
     Se nel main è presente l'HTML tipico dell'articolo (.item-page), applica il layout */
  @supports selector(#whitebox_m #area:has(#maincolumn .item-page)) {
    #whitebox_m #area:has(#maincolumn .item-page) #rightcolumn{
      display: none !important;
    }
    #whitebox_m #area:has(#maincolumn .item-page){
      display: grid !important;
      grid-template-columns: 25% 70% !important;
      grid-template-areas: "left main" !important;
      column-gap: clamp(12px, 2vw, 20px) !important;
    }
    #whitebox_m #area:has(#maincolumn .item-page) #leftcolumn{ grid-area: left; }
    #whitebox_m #area:has(#maincolumn .item-page) #maincolumn{ grid-area: main; min-width: 0 !important; }
  }
}


/* ====== iPad Safari ONLY – fix header/columns (non tocca Chrome) ====== */
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {

    /* Tablet range */
    @media (min-width: 768px) and (max-width: 1180px) {

      /* Header fisso per evitare sovrapposizioni su Safari */
      #header{
        position: relative !important;
        z-index: 5;
        margin-bottom: 22px !important;
      }
      #header_r{
        display: grid !important;
        grid-template-columns: max-content 1fr max-content;
        align-items: center;
        height: 160px !important;          /* fissa (puoi portarla a 150/170) */
        padding: 14px 24px !important;
        overflow: hidden !important;        /* niente sbordi */
        box-sizing: border-box;
      }
      /* logo + manchette dimensionati per stare sempre dentro l'header */
      #header_r > a[href]{ display:flex !important; align-items:center; justify-content:center; }
      #logo{ height: 90px !important; width:auto; background-size:contain !important; background-position:center !important; margin:0 !important; }
      .custom_manchette_left,
      .custom_manchette_right{ display:flex; align-items:center; justify-content:center; }
      .custom_manchette_left img,
      .custom_manchette_right img{ height:90px !important; width:auto; display:block; }

      /* Colonne: prevenzione sovrapposizioni */
      #leftcolumn, #maincolumn, #rightcolumn{ min-width: 0 !important; }
      #whitebox_m #area{ column-gap: 20px !important; }  /* fallback stabile per Safari */
      #maincolumn{ padding-right: 8px !important; }
      #rightcolumn{ padding-left: 8px !important; border-left: 1px solid rgba(0,0,0,.06) !important; }

      /* Pagine articolo: 2 colonne (25% + 70%), right nascosta */
      body[class*="view-article"] #rightcolumn{ display:none !important; }
      body[class*="view-article"] #whitebox_m #area{
        display:grid !important;
        grid-template-columns: 25% 70% !important;   /* ← senza virgole finali */
        grid-template-areas: "left main" !important;
        align-items:start;
        column-gap: 20px !important;
      }
      body[class*="view-article"] #leftcolumn{ grid-area:left; }
      body[class*="view-article"] #maincolumn{ grid-area:main; min-width:0 !important; }
    }

    /* Target ancora più preciso: iPad 834 × 1112 portrait */
    @media (width: 834px) and (orientation: portrait) {
      #header_r{ height: 170px !important; }  /* piccola tolleranza in più su Safari */
    }
  }
}


/* ===== iPad Pro 10.5" — FIX sovrapposizione MAIN → RIGHT ===== */

/* Target iPad Pro 10.5" (Safari incluso) — PORTRAIT & LANDSCAPE */
@media (min-width: 768px) and (max-width: 1180px) {

  /* Ritocchi SOLO alle due larghezze tipiche dell’iPad Pro 10,5" */
  @media (width: 834px) and (orientation: portrait),
         (width: 1112px) and (orientation: landscape) {

    /* Traccia grid stabile + gap fisso */
    #whitebox_m #area{
      display: grid !important;
      grid-template-columns: 25% 50% 25% !important;
      grid-template-areas: "left main right";
      column-gap: 20px !important;   /* evita “contatto” tra main e right */
      align-items: start;
    }

    /* Colonne “pulite”: niente float/posizionamenti strani, niente width fisse */
    #leftcolumn, #maincolumn, #rightcolumn{
      float: none !important;
      position: static !important;
      width: auto !important;
      min-width: 0 !important;       /* fondamentale su Safari */
    }

    /* Il main NON deve invadere la right */
    #maincolumn{
      margin-left: 0 !important;     /* annulla eventuale -15px rimasto */
      padding-right: 10px !important;
      overflow: hidden;              /* taglia eventuali figli troppo larghi */
    }

    /* La right resta separata visivamente e non viene coperta */
    #rightcolumn{
      padding-left: 10px !important;
      border-left: 1px solid rgba(0,0,0,.08) !important;
      z-index: 1;                    /* in caso di stacking anomalo */
    }

    /* Hardening: i contenuti del main non possono “spingere” oltre */
    #maincolumn img, 
    #maincolumn table, 
    #maincolumn iframe,
    #maincolumn .gn_slider, 
    #maincolumn .gn_opacitylayer, 
    #maincolumn .gn_news{
      max-width: 100% !important;
    }
  }
}

/* Safari-only guard (non tocca Chrome/Firefox) */
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    @media (width: 834px) and (orientation: portrait),
           (width: 1112px) and (orientation: landscape) {
      /* doppia sicurezza su Safari: stessi fix del blocco sopra */
      #maincolumn{ margin-left: 0 !important; overflow: hidden; }
      #whitebox_m #area{ column-gap: 20px !important; }
      #leftcolumn, #maincolumn, #rightcolumn{ min-width: 0 !important; }
    }
  }
}

@media (min-width: 768px) and (max-width: 1180px) {
  /* Forza #links a non uscire orizzontalmente */
  #links {
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important; /* per iOS */
  }
  #links ul {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #links li {
    flex: 0 0 auto;
  }
  #links a {
    padding: 0 8px !important;  /* riduci padding se serve per far stare tutto dentro */
  }
}

/* Tablet: barra #links sempre dentro allo schermo */
@media (min-width: 768px) and (max-width: 1180px){
  #links{
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;                 /* usa i bordi, non una width fissa */
    width: auto !important;      /* niente 790px */
    max-width: none;
    box-sizing: border-box;      /* include padding/border nel calcolo */
    overflow-x: hidden;          /* oppure auto se vuoi lo scroll orizz. */
    white-space: nowrap;         /* evita a capo casuali */
  }
  /* annulla l’inline margin-left:140px sulla UL se presente */
  #links ul{ margin-left: 0 !important; }
}

/* ===== Forza Safari iPad a usare lo stesso header di Chrome ===== */
@media (min-width: 768px) and (max-width: 1180px) {
  #header_r{
    display: grid !important;
    grid-template-columns: max-content 1fr max-content !important; /* manchette | logo | manchette */
    align-items: center !important;
    justify-items: center !important;
    height: 150px !important;   /* uguale a Chrome, regola se serve */
    padding: 16px 30px !important;
    overflow: hidden !important;
    box-sizing: border-box;
  }

  .custom_manchette_left{  justify-self: start !important; }
  #header_r > a[href]{     justify-self: center !important; display: flex !important; align-items: center; }
  .custom_manchette_right{ justify-self: end !important; }

  #logo{
    display: block !important;
    height: 90px !important;  /* stessa altezza delle manchette */
    width: auto !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    margin: 0 !important;
  }

  .custom_manchette_left img,
  .custom_manchette_right img{
    display: block !important;
    height: 90px !important;
    width: auto !important;
margin-top:60px;
  }
}

/* Tablet: ridai dimensione visibile al logo dentro l'header */
@media (min-width: 768px) and (max-width: 1180px){
  /* assicura che la colonna centrale abbia spazio */
  #header_r > a[href]{
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 220px !important;    /* evita collasso della colonna */
  }

  /* dimensioni del box logo (regola la larghezza a gusto) */
  #logo{
    width: 300px !important;        /* <-- prova 220–260px */
    height: 90px !important;        /* come le manchette */
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    margin: 0 !important;
        display: block !important;
        position: relative !important;
        left: 0px !important;
        top: 50px !important;
  }
}


/* iPad Pro 10.5" – portrait */
@media screen and (width: 834px) and (height: 1112px) and (orientation: portrait) {
  #header_r .custom_manchette_left img,
  #header_r .custom_manchette_right img{
    margin-top: 25px !important;
  }
}

/* iPad Pro 10.5" – landscape */
@media screen and (width: 1112px) and (height: 834px) and (orientation: landscape) {
  #header_r .custom_manchette_left img,
  #header_r .custom_manchette_right img{
    margin-top: 25px !important;
  }
}

/* Fallback “tolleranza” per variazioni di viewport/dpr (solo se serve) */
@media screen and (min-width: 820px) and (max-width: 840px) and (orientation: portrait),
       screen and (min-width: 1100px) and (max-width: 1124px) and (orientation: landscape) {
  #header_r .custom_manchette_left img,
  #header_r .custom_manchette_right img{
    margin-top: 25px !important;
  }
}

/* ===== iPad Pro 10.5" — PORTRAIT (834×1112) ===== */
@media screen and (width: 834px) and (height: 1112px) and (orientation: portrait){

  /* Griglia stabile 3 colonne + gap fisso */
  #whitebox_m #area{
    display: grid !important;
    grid-template-columns: 25% 50% 25% !important;
    grid-template-areas: "left main right" !important;
    column-gap: 20px !important;
    align-items: start;
  }

  /* Mappa aree esplicite (DOM è LEFT | RIGHT | MAIN) */
  #leftcolumn  { grid-area: left  !important; }
  #maincolumn  { grid-area: main  !important; }
  #rightcolumn { grid-area: right !important; }

  /* Colonne pulite e senza overflow */
  #leftcolumn, #maincolumn, #rightcolumn{
    float: none !important;
    position: relative !important;
    width: auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Main: respiro verso right + top in stacking */
  #maincolumn{
    margin-left: 0 !important;        /* annulla -15px */
    padding-right: 10px !important;
    z-index: 2 !important;            /* sopra */
  }

  /* Right: separatore e sotto in stacking */
  #rightcolumn{
    padding-left: 10px !important;
    border-left: 1px solid rgba(0,0,0,.08) !important;
    z-index: 1 !important;            /* sotto */
  }

  /* Niente contenuti che “spingono” fuori */
  #leftcolumn *, #maincolumn *, #rightcolumn *{
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }

  /* Wrapper tabellare nel main a larghezza piena */
  #maincolumn > table{ width:100% !important; border-collapse:collapse; table-layout:auto; }
  #maincolumn > table td{ width:auto !important; }

  /* Vecchio divisore verticale */
  td.greyline, .greyline{ display:none !important; }
}


/* ===== iPad Pro 10.5" — LANDSCAPE (1112×834) ===== */
@media screen and (width: 1112px) and (height: 834px) and (orientation: landscape){

  #whitebox_m #area{
    display: grid !important;
    grid-template-columns: 25% 50% 25% !important;
    grid-template-areas: "left main right" !important;
    column-gap: 20px !important;
    align-items: start;
  }

  #leftcolumn  { grid-area: left  !important; }
  #maincolumn  { grid-area: main  !important; z-index: 2 !important; padding-right: 10px !important; }
  #rightcolumn { grid-area: right !important; z-index: 1 !important; padding-left: 10px !important; border-left: 1px solid rgba(0,0,0,.08) !important; }

  #leftcolumn *, #maincolumn *, #rightcolumn *{ max-width: 100% !important; overflow-wrap: anywhere; }
  #maincolumn > table{ width:100% !important; border-collapse:collapse; table-layout:auto; }
  #maincolumn > table td{ width:auto !important; }
  td.greyline, .greyline{ display:none !important; }
}