/* ===================================================================================

* Theme Name: Liko Child
* Theme URI: https://wp.hixstudio.net/liko/
* Author: fox-themes 
* Author URI: https://themeforest.net/user/fox-themes
* Description: Liko - Creative Agency & Portfolio WordPress Theme
* Version: 1.0.0
* Template: liko
* License: GNU General Public License version 3.0
* License URI: http://www.gnu.org/licenses/gpl-3.0.html
* Tags: one-column, right-sidebar, left-sidebar, custom-menu, featured-images, post-formats, sticky-post, translation-ready

* We encourage you to create Child theme for any modifications you will want to do.

* Why use Child theme?

* Because of future updates we may provide for this theme that will overwrite your
* modifications and all your custom work.

* If you are not familiar with Child Themes, you can read about it here:
* http://codex.wordpress.org/Child_Themes
* http://wp.tutsplus.com/tutorials/theme-development/child-themes-basics-and-creating-child-themes-in-wordpress/

====================================================================================== */
/* Il titolo fa da riferimento e sta davanti */
.tp-hero-title {
    position: relative;
    z-index: 1;
}

/* L'immagine: centrata, dietro al testo, spostata in basso */
.tp-hero-title-img {
    position: absolute !important;
    left: 50%;
    top: 55%;              /* più alto il numero, più l'immagine scende */
    transform: translateX(-50%);
    z-index: -1;
}
/* Rende cliccabile tutta la card del progetto, immagine compresa */
.tp-project-2-item {
    position: relative;
}

.tp-project-2-title-sm a::after {
    content: '';
    position: absolute;
    inset: 0;          /* copre l'intera card: sopra, sotto, destra, sinistra */
    z-index: 5;
}
/* Allarga il riquadro del testo a tutta la card,
   tenendo il titolo in basso a sinistra come adesso */
.tp-project-2-item .tp-project-2-content {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}

/* ==========================================================================
   [MMEDS] FIX 1 — BLOCCO SCORRIMENTO ORIZZONTALE SU MOBILE / TABLET
   --------------------------------------------------------------------------
   Problema: su desktop il tema usa GSAP ScrollSmoother, che crea un
   #smooth-wrapper in position:fixed + overflow:hidden. Quel wrapper taglia
   tutto ciò che sborda lateralmente, quindi il problema non si vede.
   Sui telefoni (dispositivi touch) ScrollSmoother NON applica lo smoothing:
   il wrapper torna in flusso normale e gli elementi più larghi del viewport
   diventano scroll orizzontale reale -> la pagina "si sposta" a destra/sinistra.

   Elementi che sbordano in homepage (misurati a 389px di viewport):
     - .tp-project-2-area  -> margin: 0 -15px  (sfora 15px per lato)
     - .tp-award-2-title / .tp-award-2-shape (marquee) -> fino a +27px
   Totale: scrollWidth 416px contro clientWidth 389px.

   Soluzione: overflow-x: clip su html/body (e sui wrapper di ScrollSmoother).
   Si usa "clip" e NON "hidden" perché "hidden" creerebbe un contenitore di
   scorrimento, cosa che rompe position:sticky e i pin di ScrollTrigger
   (smooth scroll, sezioni pinnate, slider orizzontale dei progetti).
   "hidden" resta solo come fallback per browser vecchi (Safari < 16).

   Limitato a max-width:1199px: sopra i 1200px il tema attiva lo slider
   orizzontale .panels, che va lasciato assolutamente intatto.
   ========================================================================== */

@media (max-width: 1199px) {
  html,
  body {
    overflow-x: clip;
    max-width: 100%;
  }

  #smooth-wrapper,
  #smooth-content {
    overflow-x: clip;
    max-width: 100%;
  }
}

/* Fallback per browser che non supportano overflow:clip (es. iOS Safari < 16) */
@supports not (overflow-x: clip) {
  @media (max-width: 1199px) {
    html,
    body {
      overflow-x: hidden;
    }

    #smooth-wrapper,
    #smooth-content {
      overflow-x: hidden;
    }
  }
}


/* ==========================================================================
   [MMEDS] FIX 1b — HERO VIDEO HOMEPAGE (residuo dello scorrimento laterale)
   --------------------------------------------------------------------------
   Questo è il pezzo che sfuggiva: NON era scroll della pagina intera
   (infatti si spostava solo quella fascia dello schermo, non tutto).

   Nel tema (liko-core.css, riga ~12021):

       .tp-hero-bottom-img { width: 670px; height: 890px; overflow: hidden; }
       @media (max-width: 767px) { .tp-hero-bottom-img { height: 500px; } }

   La media query mobile corregge solo l'altezza, la larghezza resta 670px
   fissi. Su un telefono da 389px il blocco video è quindi 281px più largo
   del viewport: il contenitore Elementor che lo racchiude ha
   overflow-x:hidden, e un elemento con overflow:hidden E contenuto più largo
   diventa a tutti gli effetti un contenitore scorrevole, che col dito si
   trascina lateralmente. Da qui il "si sposta ma non su tutto lo schermo".

   Il blocco html/body del FIX 1 non poteva intercettarlo, perché lo
   scorrimento avveniva DENTRO quel contenitore, non a livello di documento.

   max-width:100% non tocca il desktop (lì il contenitore è più largo di
   670px, quindi la regola non entra mai in gioco) e sul telefono riporta il
   video a filo schermo. Il video ha già object-fit:cover dal tema, quindi si
   adatta senza deformarsi.
   ========================================================================== */

.tp-hero-bottom-img {
  max-width: 100%;
}


/* ==========================================================================
   [MMEDS] FIX 1c — CONTENITORI "hidden" TRASCINABILI COL DITO
   --------------------------------------------------------------------------
   Stesso meccanismo del FIX 1b, ma su altre sezioni: il tema usa
   .fix { overflow: hidden } (liko-core.css riga 624) per tagliare i marquee
   e le animazioni di zoom. Quando il contenuto interno è più largo del
   contenitore — cosa che succede per definizione in un marquee, e in modo
   temporaneo durante le animazioni .anim-zoomin-wrap — quel blocco diventa
   un contenitore di scorrimento e su touch si trascina lateralmente.

   Misurato a 389px, prima della correzione:
     /about-us/          .tp-team-area.fix   -> 3000px di contenuto in 389px
     /portfolio-standard/ .anim-zoomin-wrap  -> 431px in 359px (durante lo zoom)

   overflow: clip taglia esattamente come hidden ma NON crea un contenitore
   scorrevole, quindi l'aspetto resta identico e il trascinamento sparisce.
   !important serve perché GSAP scrive overflow inline durante le animazioni.
   Solo sotto i 1200px: su desktop tutto resta come prima.
   ========================================================================== */

@media (max-width: 1199px) {
  .fix,
  .anim-zoomin-wrap {
    overflow: clip !important;
  }
}