@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* Base */

html, body { overflow-x: clip; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;}


:root{
  --ml-content: var(--wp--style--global--content-size, 980px);
  --ml-wide:    var(--wp--style--global--wide-size, 1300px);
  --ml-gutter:  clamp(16px, 3vw, 32px);
}

/* Blocchi normali: contenuti a larghezza contentSize */
.entry-content > :where(:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull)){
  max-width: var(--ml-content);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ml-gutter);
  padding-right: var(--ml-gutter);
  box-sizing: border-box;
}

/* Wide */
.entry-content > :where(.alignwide){
  max-width: var(--ml-wide);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ml-gutter);
  padding-right: var(--ml-gutter);
  box-sizing: border-box;
}

/* Full */
.entry-content > :where(.alignfull){
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

    /* ===== HERO WRAP ===== */
    .hero{
      min-height: 100vh;
      position: relative;
      overflow: hidden;
      padding: 34px 18px 28px;
      display: grid;
      place-items: center;
    }

    /* Texture/Acquerello generale (fallback). Sostituisci con PNG se li hai */
    .hero::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(700px 450px at 22% 35%, rgba(205, 200, 230, .22), transparent 60%),
        radial-gradient(820px 520px at 70% 35%, rgba(190, 220, 220, .18), transparent 62%),
        radial-gradient(520px 420px at 55% 70%, rgba(235, 215, 160, .18), transparent 60%);
      pointer-events:none;
      z-index:0;
    }

    /* Foglie decorative (opzionali): metti i tuoi asset */
    .hero__decor{
      position:absolute; inset:0;
      pointer-events:none;
      z-index:0;
    }
    .hero__decor .leaves-left,
    .hero__decor .leaves-right{
      position:absolute;
      opacity:.9;
      filter: saturate(.95);
    }
    .hero__decor .leaves-left{
      left:-40px; top:130px;
      width: 420px;
      /* Se hai un asset:
         background: url("assets/leaves-left.png") no-repeat center/contain; */
      background:
        radial-gradient(circle at 30% 30%, rgba(160, 140, 190, .25), transparent 55%),
        radial-gradient(circle at 55% 55%, rgba(240, 220, 160, .20), transparent 55%),
        radial-gradient(circle at 65% 30%, rgba(170, 210, 210, .18), transparent 55%);
      height: 280px;
      border-radius: 40px;
      transform: rotate(-6deg);
    }
    .hero__decor .leaves-right{
      right:-80px; top:80px;
      width: 540px; height: 520px;
      /* Se hai un asset:
         background: url("assets/leaves-right.png") no-repeat center/contain; */
      background:
        radial-gradient(circle at 40% 25%, rgba(165, 215, 215, .24), transparent 55%),
        radial-gradient(circle at 65% 45%, rgba(165, 140, 190, .22), transparent 58%),
        radial-gradient(circle at 55% 75%, rgba(240, 220, 160, .22), transparent 58%);
      border-radius: 70px;
      transform: rotate(8deg);
    }

    /* ===== CONTAINER ===== */
    .wrap{
      width: min(var(--container), 100%);
      position: relative;
      z-index: 1;
    }

    /* ===== HEADER ===== */
    .header{
      display:grid;
      grid-template-columns: 180px 1fr 180px;
      align-items:center;
      gap: 14px;
      padding: 8px 6px 18px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap: 12px;
      text-decoration:none;
      color: inherit;
    }
    .brand__logo{
      width: 110px;
      height: auto;
      display:block;
    }

    .nav{
      display:flex;
      justify-content:center;
      gap: 14px;
      flex-wrap:wrap;
    }
    .nav a{
      font-size: 14px;
      text-decoration:none;
      color: rgba(58, 127, 131, .9);
      padding: 7px 14px;
      border-radius: var(--radius);
      background: var(--pill-bg);
      border: 1px solid var(--pill-br);
      line-height: 1;
      transition: transform .15s ease, background .15s ease;
      white-space: nowrap;
    }
    .nav a:hover{
      transform: translateY(-1px);
      background: rgba(180, 206, 206, .30);
    }

    /* hamburger (solo mobile) */
    .navToggle{
      justify-self:end;
      width: 46px; height: 46px;
      border-radius: var(--radius);
      background: transparent;
      border: 0;
      display:none;
      cursor:pointer;
    }
    .navToggle span{
      display:block;
      width: 22px; height: 2px;
      background: rgba(106, 74, 109, .85);
      margin: 5px auto;
      border-radius: 2px;
      transition: transform .2s ease, opacity .2s ease;
    }

    /* ===== HERO GRID ===== */
    .heroGrid{
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap: clamp(24px, 5vw, 70px);
      align-items:center;
      padding: clamp(10px, 2vw, 22px) 6px 10px;
    }

    /* ===== COPY ===== */
    .copy{
      max-width: 520px;
      position: relative;
    }

    .copy h1{
      margin: 0 0 14px;
      font-family: "Cormorant Garamond", serif;
      font-weight: 500;
      color: var(--purple);
      font-size: clamp(34px, 3.2vw, 46px);
      line-height: 1.08;
      letter-spacing: .2px;
      position: relative;
      display: inline-block;
    }

    /* Acquerello dietro al titolo (fallback). Sostituisci con PNG se vuoi */
    .copy h1::before{
      content:"";
      position:absolute;
      left:-18px; top: 50%;
      transform: translateY(-52%);
      width: 108%;
      height: 1.9em;
      z-index:-1;
      border-radius: 22px;
      background:
        radial-gradient(120px 70px at 15% 40%, rgba(160, 140, 190, .22), transparent 70%),
        radial-gradient(140px 80px at 55% 40%, rgba(170, 210, 210, .20), transparent 72%),
        radial-gradient(140px 80px at 80% 60%, rgba(240, 220, 160, .18), transparent 72%);
      filter: blur(.2px);
    }

    .copy p{
      margin: 0 0 26px;
      font-size: 16px;
      line-height: 1.65;
      color: rgba(85, 85, 95, .92);
      max-width: 46ch;
    }

    .actions{
      display:flex;
      gap: 14px;
      flex-wrap:wrap;
      align-items:center;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: 10px 18px;
      border-radius: var(--radius);
      font-size: 14px;
      text-decoration:none;
      line-height: 1;
      background: rgba(255,255,255,.35);
      border: 1px solid var(--btn-br);
      color: rgba(90, 90, 100, .92);
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
      backdrop-filter: blur(4px);
    }
    .btn:hover{
      transform: translateY(-1px);
      box-shadow: var(--soft);
      background: rgba(255,255,255,.55);
    }
    .btn--gold{
      border-color: var(--btn-br-2);
    }

    /* ===== MEDIA (FOTO + CORNICE) ===== */
    .media{
      display:grid;
      place-items:center;
      position: relative;
      min-height: 520px;
    }

    .portraitWrap{
      width: min(520px, 42vw);
      aspect-ratio: 1 / 1;
      position: relative;
      display:grid;
      place-items:center;
    }


    /* ===== MOBILE HERO ===== */
    @media (max-width: 900px){
      .header{
        grid-template-columns: 1fr;
        justify-items:center;
        gap: 10px;
        padding-bottom: 10px;
      }

      .nav{
        display:none;
        width: 100%;
        justify-content:center;
        gap: 10px;
        padding: 8px 0 0;
      }
      .nav.is-open{ display:flex; }

      .navToggle{
        display:block;
        justify-self:center;
      }

      .brand__logo{ width: 120px; }

      .heroGrid{
        grid-template-columns: 1fr;
        text-align:center;
        gap: 18px;
        padding-top: 6px;
      }

      .copy{
        margin: 0 auto;
        max-width: 420px;
      }

      /* pannello traslucido dietro al testo (look mobile mock) */
      .copyPanel{
        background: rgba(255,255,255,.35);
        border-radius: 26px;
        padding: 16px 16px 14px;
        border: 1px solid rgba(150, 190, 190, .25);
        backdrop-filter: blur(6px);
      }

      .copy h1{
        font-size: 18px;
        line-height: 1.25;
        font-weight: 500;
        margin-bottom: 10px;
      }
      .copy h1::before{
        width: 110%;
        height: 2.2em;
        left: -10px;
        opacity: .95;
      }

      .copy p{
        font-size: 12px;
        line-height: 1.6;
        max-width: 34ch;
        margin: 0 auto 14px;
      }

      .actions{
        justify-content:center;
        flex-direction: column;
        gap: 10px;
      }

      .btn{ width: 210px; }

      .media{
        min-height: 0;
        margin-top: 4px;
      }

      /* nel mock mobile la foto in hero non c'è */
      .portraitWrap{ display:none; }
    }