/**
 * Atelier — Modal shell (C12). Dim overlay + centered panel, reused by
 * Quick View (T13) and future modal-based flows (size guide, etc).
 */
.atl-modal-overlay {
  min-height: 100vh;
  background: var(--atl-overlay-scrim);
  display: grid;
  place-items: center;
  padding: 40px;
}
.atl-modal-panel {
  background: var(--atl-surface);
  max-width: 880px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  position: relative;
}
.atl-modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-size: 20px;
  color: var(--atl-text-muted);
  cursor: pointer;
  z-index: 2;
  background: none;
  border: none;
  font-family: inherit;
}
.atl-modal-close:focus-visible { outline: 2px solid var(--atl-focus-ring); outline-offset: 2px; }
.atl-modal-media { aspect-ratio: 1/1; }
.atl-modal-body { padding: 34px; display: flex; flex-direction: column; gap: 13px; }

@media (max-width: 767px) {
  .atl-modal-overlay { padding: 0; }
  .atl-modal-panel { grid-template-columns: 1fr; max-width: none; min-height: 100vh; }
  .atl-modal-body { padding: 24px 20px; }
}