/* Modal compacto: mostra a foto inteira e evita zoom excessivo no celular. */
.modal-card {
  width: min(92vw, 720px);
  max-height: 88dvh;
  overflow: auto;
  grid-template-columns: minmax(260px, .85fr) 1fr;
}

.modal-card > button {
  right: 12px;
  top: 10px;
  width: 38px;
  height: 38px;
}

.modal-card > img {
  min-height: 0;
  max-height: 520px;
  object-fit: contain;
  background: #fff;
}

.modal-card > div { padding: 30px; }
.modal-card h2 { margin: 9px 38px 12px 0; font-size: 26px; }
.modal-card p { margin: 0; line-height: 1.55; }
.modal-card strong { margin: 18px 0; font-size: 24px; }
.modal-card a { padding: 13px; }

@media (max-width: 920px) {
  .modal-card {
    width: min(90vw, 520px);
    grid-template-columns: 1fr;
  }
  .modal-card > img {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: 38dvh;
    object-fit: contain;
  }
  .modal-card > div { padding: 20px 24px 24px; }
  .modal-card h2 { font-size: 22px; }
  .modal-card p { font-size: 13px; }
}

@media (max-width: 520px) {
  .modal { padding: 12px; }
  .modal-card { width: 94vw; max-height: 90dvh; }
  .modal-card > img { max-height: 34dvh; }
  .modal-card > div { padding: 17px 20px 20px; }
  .modal-card h2 { font-size: 20px; }
  .modal-card strong { margin: 13px 0; font-size: 21px; }
}