/* Lock page scroll when modal is open */
body.sfp-lock { overflow: hidden; }

/* Dimmed backdrop */
.sfp-modal-overlay{
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 24px);
}

/* White card */
.sfp-modal{
  background: #fff; color: #111;
  width: min(1040px, 96vw);
  max-height: 92vh;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
}

/* Close button */
.sfp-modal__close{
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid rgba(0,0,0,.1);
  background: #fff; color: #111;
  font-size: 24px; line-height: 34px; text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

/* Sticky title header */
.sfp-modal__head{
  position: sticky; top: 0;
  background: #fff;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  z-index: 1;
}
.sfp-modal__title{
  margin: 0;
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.3;
}

/* Scrollable content area */
.sfp-modal__body{
  padding: 16px 20px 20px 20px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Constrain Gutenberg content nicely */
.sfp-modal__content{
  max-width: 860px;
  margin: 0 auto;
}

/* Make embeds responsive */
.sfp-modal__content img,
.sfp-modal__content video,
.sfp-modal__content iframe{
  max-width: 100%;
  height: auto;
}

/* Full/wide blocks should fit within the modal */
.sfp-modal__content .alignwide,
.sfp-modal__content .alignfull{
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Respect iOS safe areas on small screens */
.sfp-modal-overlay{
  padding-top: max(clamp(12px, 3vw, 24px), env(safe-area-inset-top));
  padding-bottom: max(clamp(12px, 3vw, 24px), env(safe-area-inset-bottom));
}