/* ===== Square Popup Panel (window itself is square) ===== */

/* Overlay */
.lp-overlay{
  position:fixed; inset:0; z-index:9998;
  background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.lp-overlay.is-open{ opacity:1; pointer-events:auto; }

/* Container */
.lp-modal{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
  padding:10px;
}
.lp-modal.is-open{ opacity:1; pointer-events:auto; }

/* ---------- SQUARE PANEL ---------- */
:root{
  --sp-size: min(92vw, 480px);      /* window width & height */
  --sp-close-gap: 28px;             /* extra space for the close link */
}

.lp-modal__inner{
  width: var(--sp-size);
  height: var(--sp-size);
  background:#f5f5f5; color:#000;
  box-shadow:0 10px 40px rgba(0,0,0,.2);
  border-radius:0; position:relative; box-sizing:border-box;

  /* push content down so it never collides with the close link */
  padding: calc(12px + var(--sp-close-gap)) 12px 14px 12px;  /* ⬅ changed */

  display:grid; grid-template-rows:auto 1fr; /* title, then fill area */
  font-family:"ModeratLight", sans-serif; line-height:1.5; outline:0;
  overflow:hidden;
}

/* Close link */
.lp-modal__closelink{
  position:absolute; top:8px; right:10px;
  padding:2px 4px; background:transparent; border:0;
  font:inherit; font-size:.68rem; color:#000; cursor:pointer; z-index:2;
  text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px;
}
.lp-modal__closelink:hover,
.lp-modal__closelink:focus{ background:#000; color:#fff; text-decoration:none; }

/* Title */
.lp-modal__title{
  margin:0 0 8px; padding:0 0 8px; border-bottom:1px solid #eee;
  font-weight:400; line-height:1.2; color:#000;
  font-size:clamp(1.05rem, 1.8vw + .55rem, 1.3rem);
}

/* Media zone fills the remaining square space */
.lp-modal__video{
  position:relative; width:100%; height:100%; overflow:hidden; background:#f5f5f5;
}

/* Neutralize Vimeo’s padding wrapper so it fills the square */
.lp-modal__video > div[style*="position:relative"]{
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important; padding:0 !important;
}

/* Make the iframe fill the square */
.lp-modal__video iframe{
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important; border:0 !important;
}

/* Phones: slightly smaller square & a bit more top gap */
@media (max-width:520px){
  :root{
    --sp-size: min(94vw, 380px);
    --sp-close-gap: 34px;           /* ⬅ more space on tiny screens */
  }
}