.modal .title {
  margin-bottom: 6px;
  font-size: 20px;
  margin: 0;
  align-self: stretch;
}

.modal .close:after {
  content: "✕";
}

.modal .close::after {
  content: "✕";
  font-size: 20px;
  line-height: 1;
  color: #fff;
}

.modal .close:hover {
  transform: scale(1.06);
}

.modal.open {
  display: flex;
}

.modal-backdrop.open {
  display: block;
}

.modal .desc {
  font-size: 14px;
  opacity: 0.9;
  align-self: stretch;
}

.modal.open, .modal-backdrop.open{ display:flex; }

.modal .close{ position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.3); display:grid; place-items:center; cursor:pointer; }



/* === [MOD: ensure modal & panel always fully visible on any viewport] ===
   Date: 2025-08-31
   Rationale: keep the entire modal inside the visual viewport and scale its media.
*/
:root{
  /* Fallbacks if not defined elsewhere */
  --modal-gap: var(--modal-gap, 16px);
  --modal-offset-top: 0px;
  --modal-offset-bottom: 0px;
  --modal-pad-top: 12px;
  --modal-pad-bottom: 12px;
  --modal-pad-side: 12px;
}

.modal{
  position: fixed;
  top: var(--modal-offset-top, 0px);
  bottom: var(--modal-offset-bottom, 0px);
  left: 0;
  right: 0;
  /* Use padding as viewport "margins" so the panel never touches edges */
  padding-top: max(var(--modal-pad-top, 12px), env(safe-area-inset-top), 12px);
  padding-right: max(var(--modal-pad-side, 12px), env(safe-area-inset-right), 12px);
  padding-bottom: max(var(--modal-pad-bottom, 12px), env(safe-area-inset-bottom), 12px);
  padding-left: max(var(--modal-pad-side, 12px), env(safe-area-inset-left), 12px);
  align-items: center;
  justify-content: center;
}

.modal-backdrop{
  top: var(--modal-offset-top, 0px);
  bottom: var(--modal-offset-bottom, 0px);
}

/* Modal panel layout */
.modal .panel{
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  --glass-hover-border: var(--glass-border);
  /* Cap size to the *visual* viewport (svh avoids mobile browser UI jumps) */
  max-width: min(96vw, 1200px);
  max-height: min(96svh, 96vh);
  width: auto;
  height: auto;
  overflow: hidden; /* prevent inner overflow from spilling */
}

.modal .title,
.modal .desc{
  flex: 0 0 auto;
}

.modal .media{
  /* Flexible area that gives remaining space to media */
  flex: 1 1 auto;
  min-height: 0; /* allow flex child to shrink below content height */
  display: grid;
  place-items: center;
}

/* Children (img/video/iframe/canvas/etc.) must *contain* inside media box */
.modal .media > *{
  max-width: var(--media-max-w, 96vw);
  max-height: var(--media-max-h, 90svh);
  width: auto;
  height: auto;
  object-fit: contain;
}

/* When orientation is portrait/landscape we still contain the media */
.modal .media.portrait > *,
.modal .media.landscape > *{
  object-fit: contain;
}


/* [ADD] External site round button next to the close button */
.modal .visit{
  position:absolute;
  top: 18px;
  right: 66px; /* 18 + 38 + ~10gap */
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: #111;
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 3px 12px rgba(0,0,0,.08);
  display:grid;
  place-items:center;
  text-decoration: none;
  cursor: pointer;
}
.modal .visit::after{
  content: "↗";
  font-size: 18px;
  line-height: 1;
}
.modal .visit:hover{ transform: translateY(-1px); }
.modal .visit:active{ transform: translateY(0); }


/* === Modal controls unification override ===
   Ensures .visit and .close are IDENTICAL in size and Y-position,
   aligned horizontally with a fixed gap.
   Tune with:
     --modal-control-size (38px)
     --modal-controls-gap (10px)
     --panel-padding (16px)
     --modal-title-line (28px)
     --modal-title-gap (6px)
*/
.modal .visit,
.modal .close{
  position: absolute;
  width: var(--modal-control-size, 38px);
  height: var(--modal-control-size, 38px);
  top: calc(
    var(--panel-padding, 16px)
    + ((var(--modal-title-line, 21px) + var(--modal-title-gap, 6px)) / 2)
    - (var(--modal-control-size, 38px) / 2)
  );
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-sizing: border-box; /* keep border from changing the visual size */
}

.modal .close{ right: 18px; }
.modal .visit{ right: calc(18px + var(--modal-control-size, 38px) + var(--modal-controls-gap, 10px)); }

/* Optional: normalize border widths so circles look equal in diameter */
.modal .visit{ border-width: 1px; }
.modal .close{ border-width: 1px; }