/* =========================
   FONT
========================= */
@font-face {
  font-family: 'Lausanne';
  src: url('https://files.cargocollective.com/c1061418/Lausanne-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lausanne';
  src: url('https://files.cargocollective.com/c1061418/Lausanne-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================
   RESET / BASE / TIPO
========================= */
*, *::before, *::after { box-sizing: border-box; }

:root{
  --plico-red: #e40000;
  --btn-text: #000;
  --btn-bg: #fff;
  --btn-br: 6px;
  --btn-fw: 700;
  --btn-tr: .28s ease;
  --rule: #cfcfcf;
  --shadow: 0 2px 14px rgba(0,0,0,.06);
}

html, body {
  height: auto;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;
  font-family: 'Lausanne', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.35;
  color: #000;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.15;
  margin: 0.6em 0 0.3em;
  color: #000;
}
h1 { font-size: clamp(2rem, 3.5vw, 3rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); letter-spacing: -0.005em; }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
p, li { font-size: 1rem; margin: 0 0 1rem; }

.content { padding: 24px; max-width: 920px; margin: 0 auto; }

/* =========================
   HEADER COMUNE (logo/pallino fixed)
========================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: transparent;
}

.plico-logo {
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 10001;
}
.plico-logo img {
  height: 60px !important;
  width: auto !important;
  display: block !important;
}
.hero .plico-logo img { filter: invert(1) !important; }

.menu-toggle {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--plico-red);
  cursor: pointer;
}

/* =========================
   NASCONDI MENU NATIVO CARGO
========================= */
html body #site_menu_button,
html body [id*="site_menu_button"],
html body .site-header .nav-toggle,
html body .header .nav-toggle,
html body .header .menu-button,
html body a.hamburger,
html body button.hamburger,
html body .hamburger,
html body .menu-icon{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =========================
   TOGGLE & OFF-CANVAS MENU
========================= */
#menu-toggle{
  position: fixed !important;
  top: 15px !important; right: 15px !important;
  width: 28px !important; height: 28px !important;
  border-radius: 50% !important;
  background: #b80000 !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
  display: inline-block !important;
  animation: fadePulse 5s infinite ease-in-out;
  transition: background .3s ease, opacity .3s ease, right .4s ease;
}
#menu-toggle:hover{ opacity: .85; }
#menu-toggle.active{ background: #b80000; }

@keyframes fadePulse{
  0%{opacity:1} 50%{opacity:.4} 100%{opacity:1}
}

/* Off-canvas + Backdrop */
#side-menu{
  top: 10px;
  right: 10px;
  width: min(420px, 88vw);   /* più stretto */
  height: auto;
  max-height: 50vh;          /* 👈 molto più corto */
  padding: 10px 24px;        /* meno padding */
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  background: #fff;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;                 /* 👈 meno spazio tra link */
  transform-origin: top right;
  overflow-y: auto;          /* scroll se servisse */
  line-height: 1.1 !important;  /* 👈 abbassa l’interlinea */
  margin: 0 !important;         /* rimuove eventuali margini */
 border-radius: 0 !important;         /* 👈 elimina angoli arrotondati */
  border: 1px solid var(--plico-red);  /* 👈 linea sottile rossa */
  box-shadow: none !important;
    
}


/* copyright vicino ai link, non in fondo */
.menu-bottom{
  margin-top: 12px !important;
  font-size: 11px !important;
  color: #000 !important;
  opacity: .9;
  text-align: left !important;
}

#menu-backdrop{
  position: fixed; inset: 0;
  background: rgba(255,255,255,.3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s ease, visibility 0s .28s;
  z-index: 2147483500;
}
#menu-backdrop.visible{ opacity:1; visibility:visible; pointer-events:auto; }

/* Struttura interna menu */
.menu-inner{ height: 100%; display: flex; flex-direction: column; }
.menu-content{ flex: 1; overflow: auto; }
.menu-bottom{ margin-top: clamp(48px,10vh,160px); text-align: center; }

/* Link del menu */
#side-menu a{
  color: #000;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .02em;
  transition: color .12s ease, font-style .12s ease, font-family .12s ease, font-weight .12s ease;
}
#side-menu a:hover,
#side-menu a:focus,
#side-menu a:active{
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--plico-red);
}

/* Blocca scroll quando aperto */
body.menu-lock, html.menu-lock{ overflow: hidden !important; }

/* Accessibilità touch su iOS */
a#menu-toggle{ pointer-events: auto !important; }

/* Responsive minimo per il menu */
@media (max-width: 480px){
  #side-menu{ width: 95vw; padding-left: 24px; }
}

/* =========================
   LAYOUT 3 COLONNE
========================= */
.layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}
.left-col  { grid-column: 1; }
.main-col  {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main-col img {
  max-width: 80%;
  height: auto;
  border: 2px solid var(--rule);
  background: #fff;
  padding: 8px;
}
.right-col { grid-column: 3; }

/* =========================
   HERO
========================= */
.hero {
  position: relative;
  width: 100%;
  height: 86vh;
  overflow: hidden;
}
.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 220px;
  backdrop-filter: blur(var(--hero-blur, 0px));
  pointer-events: none;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1)   0%,
    rgba(0,0,0,.85) 60%,
    rgba(0,0,0,.35) 85%,
    rgba(0,0,0,0) 100%);
}
.hero-overlay {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
  padding: 0 20px;
  max-width: 1000px;
}
.hero-category {
  font-family: 'Times New Roman', serif;
  font-style: italic;
  color: var(--plico-red);
  font-size: 18px;
  margin-bottom: 10px;
}
.hero-caption {
  color: #fff !important;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
}
.hero h1,
.hero p,
.hero-caption { color: #fff !important; }

/* =========================
   BUTTON SYSTEM
========================= */
.btn,
.hero-button,
.add-to-cart,
a[data-commerce-cart-toggle],
button[data-commerce-cart-toggle],
[data-commerce-add-to-cart],
.commerce-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 10px 20px;
  border-radius: var(--btn-br);
  font-family: 'Lausanne', system-ui, sans-serif;
  font-size: 14px;
  font-weight: var(--btn-fw);
  letter-spacing: .5px;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition:
    transform var(--btn-tr),
    color var(--btn-tr),
    background var(--btn-tr),
    border-color var(--btn-tr);
  border: 2px solid transparent;
  background: var(--btn-bg);
  color: var(--btn-text);
}
.btn--outline       { background: transparent; color: var(--plico-red); border-color: var(--plico-red); }
.btn--outline:hover { background: var(--plico-red); color: #fff; }
.btn--solid         { background: var(--plico-red); color: #fff; border-color: var(--plico-red); }
.btn--solid:hover   { filter: brightness(.92); transform: translateY(-1px); }
.btn--ghost         { background: transparent; color: #111; border-color: transparent; }
.btn--ghost:hover   { background: #f3f3f3; }
.btn--pill { border-radius: 999px; }
.btn--lg   { padding: 14px 26px; font-size: 15px; }
.btn--sm   { padding:  8px 14px; font-size: 12px; }
.btn--invert       { color:#fff; border-color:#fff; background:transparent; }
.btn--invert:hover { background:#fff; color:#000; }
.btn--swipe { position: relative; overflow: hidden; }
.btn--swipe::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: var(--plico-red);
  z-index: -1;
  transition: transform var(--btn-tr);
}
.btn--swipe:hover { color:#fff; border-color: var(--plico-red); }
.btn--swipe:hover::after { transform: translateX(0); }
.hero .hero-button {
  border: 2px solid #fff !important;
  color: #fff !important;
  background: transparent !important;
}
.hero .hero-button:hover {
  background: var(--plico-red) !important;
  border-color: var(--plico-red) !important;
  color: #fff !important;
}

/* =========================
   BADGE
========================= */
.badge {
  display: inline-block;
  margin: 10px auto 0;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  border-radius: 12px;
  line-height: 1;
}
.poster .badge { margin-top: 14px; }

/* =========================
   BLOCCHI EDITORIALI
========================= */
.duo.is-gray   .duo__text{ background:#fff !important; color:#000 !important; }
.duo.is-orange .duo__text{ background:#000 !important; color:#fff !important; }
.duo.is-black { grid-template-columns: 1fr 1fr; }
.duo.is-black .duo__img  { order: 2; }
.duo.is-black .duo__text { order: 1; }






/* =========================
   RESPONSIVE (tablet)
========================= */
@media (max-width: 980px){
  .hero img{ height: 72vh; min-height: 420px; }
  .layout{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    margin-top: 0;
  }
  .left-col, .main-col, .right-col{
    width: 100%;
    max-width: 560px;
  }
  .main-col img{ max-width: 100%; }
}

/* =========================
   BANDA PROMO + MEDIA
========================= */
.band {
  width: 100%;
  display: flex; align-items: center;
  overflow: hidden;
  background: transparent; color: #ff2f2f;
  padding: 12px 16px;
  box-shadow: 0 0 20px transparent, 0 0 40px rgba(255,0,0,.4);
}
img, video, figure { transition: none !important; }
.card, .issue .cover, .quote, .nl, .grid img {
  will-change: transform;
  transform: translateZ(0);
}

/* =========================
   HOMEPAGE TWEAKS
========================= */
.hero-arrows, .hero-arrow { display: none !important; }
.hero + div > img[src*="ezgif-6f29ba7efa82f8.gif"] { display: none !important; }

/* Link generali */
a{
  text-decoration: none;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;
  -webkit-tap-highlight-color: rgba(228,0,0,.15);
}
a.btn, a.badge { text-decoration: none !important; }
a:hover, a:focus, a:active{ text-decoration: underline; }

/* Layout wrapper senza footer */
#plico-app{ display: contents !important; min-height: 0 !important; isolation: auto !important; }

/* =========================
   MOBILE-ONLY FIXES (≤768px)
========================= */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {

  /* HERO pieno schermo + gradient confinato */
  .hero{
    height: 100vh;       /* fallback cross-browser */
    min-height: 100vh;
    overflow: hidden;
    position: relative;
  }
  .hero img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .hero::after{
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 120px;
    pointer-events: none;
    z-index: 1;
    backdrop-filter: blur(var(--hero-blur, 0px));
    -webkit-mask-image: linear-gradient(to bottom,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.5) 70%,
      rgba(0,0,0,0) 100%);
  }
  .hero-overlay{
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 520px;
    text-align: center;
    z-index: 2;
  }
  .hero .hero-button{
    border: 2px solid #fff !important;
    background: transparent !important;
    color: #fff !important;
  }
  .hero .hero-button:active{
    background: var(--plico-red) !important;
    border-color: var(--plico-red) !important;
    color: #fff !important;
  }

 
/* MOBILE — fix spazi & badge che si sovrappone in .mosaic-exact .right */
@media (max-width: 768px){
  .mosaic-exact .right .poster{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;                 /* distanza base tra i blocchi */
    padding: 10px 0 18px;
  }

  /* Eyebrow sopra (VENEZIA 82 / PLICO MAGAZINE) */
  .mosaic-exact .right .poster__eyebrow:first-of-type{
    text-align: center;
    margin-bottom: 2px;
    line-height: 1.2;
  }

  /* Immagine più piccola */
  .mosaic-exact .right .poster__figure{
    width: 78%;
    margin: 4px auto 0;
  }
  .mosaic-exact .right .poster__figure img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
  }

  /* Eyebrow sotto: LIVE FROM VENICE (prima del bottone) */
  .mosaic-exact .right .poster__eyebrow:last-of-type{
    order: 2;
    text-align: center;
    margin-top: 8px;           /* spazio sopra */
    margin-bottom: 8px;        /* spazio sotto per separarlo dal badge */
    line-height: 1.25;
  }

  /* CTA: badge dopo l’eyebrow con spazio dedicato */
  .mosaic-exact .right .poster__cta{
    order: 3;
    margin-top: 8px;           /* ulteriore separazione */
  }

  /* Badge: mostra JOIN US!, dimensioni reali e no sovrapposizione */
  .mosaic-exact .right .poster__cta .badge{
    position: relative;
    display: inline-flex;      /* tiene altezza/padding corretti */
    align-items: center;
    justify-content: center;
    padding: 6px 12px;         /* altezza visibile */
    line-height: 1;            /* evita di invadere la riga sopra */
    font-size: 0 !important;   /* nasconde "loading..." */
    font-family: 'Lausanne', system-ui, sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
  }
  .mosaic-exact .right .poster__cta .badge::after{
    content: "JOIN US!";
    font-size: 11px;           /* testo reale del badge */
    letter-spacing: .06em;
  }
}


/* =========================
   MOBILE — solo titolo grande + "conversation with" in alto,
   immagine croppata sempre piena
========================= */
@media (max-width: 768px){
    .duo,
  .duo .duo__img{ position: relative; }

  /* Forza immagine a coprire l'intero blocco */
  .duo .duo__img img{
    display: block !important;
    width: 100% !important;
    height: 100% !important;     /* riempie */
    object-fit: cover !important;/* croppa se serve */
    margin: 0 !important;
  }

  .duo .duo__text{
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important; /* H1 sempre in basso */
    align-items: center !important;
    padding: 0 10px 10px 10px !important;
    background: #000 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .duo .duo__text > h1,
  .duo .duo__text > h2{
    display: block !important;
    font-weight: 800;
    line-height: 1.1;
    order: 2;
    margin: 0 !important;
  }

  .duo .duo__text br{ display:none !important; }

  /* Conversation with */
  .duo .duo__text > p,
  .duo .duo__text > a,
  .duo .duo__text > span{
    display: block !important;
    position: absolute !important;
    top: 10px; left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 24px);
    margin: 0 !important;
    text-align: center;
    font-family: 'Times New Roman', serif;
    font-style: italic;
    font-size: 13px;
    line-height: 1.2;
    color: #fff !important;
    text-decoration: none !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
    z-index: 3;
    pointer-events: none;
  }
}



/* =========================
   MOBILE — rimuove background dai blocchi colorati
========================= */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .duo.is-gray .duo__text,
  .duo.is-orange .duo__text {
    background: transparent !important;
    color: #f1c4c4 !important;              /* bianco per restare leggibile sulle foto */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* =========================
   MOBILE — Venezia section stile rosso (no overline)
========================= */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  /* Contenitore full red */
  .poster__figure,
  .poster figure.poster__figure,
  .poster .poster__figure{
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  /* Poster centrato, non stirato */
  


/* =========================
   MOBILE — inverti l’ordine: RIGHT prima di LEFT in .mosaic-exact
========================= */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  /* assicurati che sia in colonna su mobile */
  .mosaic-exact{
    display: flex !important;
    flex-direction: column !important;
    gap: 20px;
  }

  /* metti .right prima di .left */
  .mosaic-exact > .right{ order: 1 !important; }
  .mosaic-exact > .left { order: 2 !important; }

  /* sicurezza: gli elementi figli occupano tutta la larghezza */
  .mosaic-exact > *{ width: 100% !important; }
}

    }

/* =========================
   MOBILE — font identico al desktop per mosaic-exact .left
========================= */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .mosaic-exact .left,
  .mosaic-exact .left * {
    font-family: 'Nanum Myeongjo', 'Times New Roman', serif !important;
    font-weight: 400 !important;   /* no bold */
    font-style: normal !important; /* cambia in italic se sul desktop è corsivo */
    letter-spacing: 0 !important;
    text-transform: none !important; /* evita maiuscole forzate */
  }
}

/* Badge (il bottone) resta Lausanne maiuscolo */
  .mosaic-exact .left .badge,
  .mosaic-exact .left .badge * {
    font-family: 'Lausanne', system-ui, sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
  }
/* =========================
   MOBILE — Hero più corto (meno alto di 100vh)
========================= */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .hero{
    height: 70vh !important;   /* invece di 100vh */
    min-height: 420px;         /* altezza minima per non schiacciare troppo */
    overflow: hidden;
    position: relative;
  }
  .hero img{
    width: 100%;
    height: 100%;
    object-fit: cover;          /* croppa l’immagine */
  }
  .hero-overlay{
    bottom: 20px;               /* porta su il testo */
  }
}

}