/*
Theme Name: Hello Elementor Child MATA
Theme URI: https://elementor.com/hello-theme/
Template: hello-elementor
Author: MATA studio creativo
Version: 3.4.5
*/

/* =========================================================
   MATA – Design tokens (puliti e leggeri)
   ========================================================= */
:root{
  --mata-pink: #FFC2FB;
  --mata-dark: #3a3a3a;
  --mata-text: #111111;

  --mata-max: 1200px;
  --mata-side: 2%;
  --mata-gap: 32px;

  --mata-space-2: 24px;
  --mata-space-4: 48px;
  --mata-space-5: 70px;
}

/* =========================================================
   SINGLE PORTFOLIO (CPT: portfolio)
   Obiettivo:
   - Header ACF + footer fissi (tema)
   - Centro Elementor FULL WIDTH (anche se boxed)
   - Impatto solo sui progetti (single-portfolio)
   ========================================================= */

/* 1) Rimuove i limiti di larghezza del tema SOLO nei progetti */
body.single-portfolio .site-content,
body.single-portfolio .site-main,
body.single-portfolio .content-area,
body.single-portfolio .entry-content{
  max-width: 100% !important;
  width: 100% !important;
}

body.single-portfolio .site-main,
body.single-portfolio .entry-content{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) Wrapper del tuo template */
.mata-project{
  width: 100%;
}

/* Header rosa + margini 2% */
.mata-project__header{
  background: var(--mata-pink);
  padding: var(--mata-space-4) 0;
}

.mata-project__inner{
  max-width: var(--mata-max);
  margin: 0 auto;
  padding-left: var(--mata-side);
  padding-right: var(--mata-side);
}

.mata-project__title{
  margin: 0 0 var(--mata-space-2);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mata-project__meta{
  display: flex;
  gap: var(--mata-gap);
  align-items: flex-start;
}
.mata-project__col--left{ flex: 1 1 60%; min-width: 0; }
.mata-project__col--right{ flex: 1 1 40%; min-width: 0; }

.mata-project__block{ margin-bottom: 18px; }
.mata-project__label{ font-weight: 700; margin-bottom: 6px; }
.mata-project__value{ line-height: 1.55; }

.mata-project__hero{ margin: 0; }
.mata-project__hero img{
  display: block;
  width: 100%;
  height: auto;
}

/* 3) CONTENUTO ELEMENTOR: FULL WIDTH (qui è la chiave) */
.mata-project__content{
  padding: var(--mata-space-4) 0;
  width: 100%;
}

/* Il tuo template mette .mata-project__inner attorno a Elementor:
   questo lo rende boxed. Qui lo “sblocchiamo” SOLO per il contenuto. */
.mata-project__content .mata-project__inner{
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Forza anche i container Elementor “boxed” a diventare full width,
   ma SOLO dentro .mata-project__content (così non rompi altre pagine) */
.mata-project__content .e-con-boxed > .e-con-inner,
.mata-project__content .elementor-section.elementor-section-boxed > .elementor-container{
  max-width: 100% !important;
  width: 100% !important;
}

/* Se Elementor mette padding laterali nei container */
.mata-project__content .e-con-inner,
.mata-project__content .elementor-container{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Responsive */
@media (max-width: 768px){
  .mata-project__meta{
    flex-direction: column;
    gap: 20px;
  }
}

/* =========================================================
   Footer / Navigation (se lo usi nel template)
   ========================================================= */
.mata-project-nav{
  background: var(--mata-dark);
  padding: var(--mata-space-5) 0;
  margin: 60px 0 0;
}

.mata-project-nav__inner{
  max-width: var(--mata-max);
  margin: 0 auto;
  padding-left: var(--mata-side);
  padding-right: var(--mata-side);
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.mata-project-nav a,
.mata-project-nav__btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--mata-pink);
  color: var(--mata-text);
  text-decoration: none;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 0;
}
.mata-project-nav a:hover,
.mata-project-nav__btn:hover{ opacity: 0.9; }

/* Carousel overflow fix (mirato) */
.elementor-widget-image-carousel,
.elementor-widget-media-carousel,
.elementor-widget-slides{
  overflow: hidden !important;
}