/**
 * GeoFazendas Modal Base - Desktop Styles & Fullscreen Variant
 * Part of the modal-base component system.
 *
 * Desktop overrides (>768px): centered dialog with scale animation,
 * horizontal footer layout, hidden drag handle.
 * Also includes the fullscreen variant for maps/editors.
 */

/* ==========================================================================
   DESKTOP STYLES (>768px)
   Centered dialog with scale animation
   ========================================================================== */

@media (min-width: 768px) {
  .gf-modal {
    align-items: center;
    padding: 1rem;
  }
  
  .gf-modal__dialog {
    max-width: var(--gf-modal-desktop-width, var(--gf-modal-width-md));
    max-height: calc(100vh - 2rem);
    border-radius: 1rem;
    
    /* Animation: scale + fade */
    transform: scale(1);
    transition: transform var(--gf-modal-transition-duration) var(--gf-modal-transition-easing),
                opacity var(--gf-modal-transition-duration) ease;
  }
  
  .gf-modal[aria-hidden="true"] .gf-modal__dialog {
    transform: scale(0.95);
  }
  
  /* Hide drag handle on desktop */
  .gf-modal__handle {
    display: none;
  }
  
  /* Header adjustments */
  .gf-modal__header {
    padding: 1.5rem 1.5rem 1rem;
  }
  
  .gf-modal__header--centered {
    padding: 2rem 2rem 1rem;
  }
  
  /* Body adjustments */
  .gf-modal__body {
    padding: 0 1.5rem 1.5rem;
  }
  
  .gf-modal__body--centered {
    padding: 0 2rem 1.5rem;
  }
  
  /* Footer: horizontal layout on desktop */
  .gf-modal__footer {
    flex-direction: row;
    justify-content: flex-end;
    padding: 1rem 1.5rem;
  }
  
  .gf-modal__footer .btn {
    width: auto;
    min-width: 120px;
  }
  
  .gf-modal__footer--centered {
    justify-content: center;
    padding: 0 2rem 2rem;
  }
  
  /* Close button position */
  .gf-modal__close {
    top: 1rem;
    right: 1rem;
  }
}

/* ==========================================================================
   Fullscreen Variant (for complex content like maps, editors)
   ========================================================================== */

.gf-modal--fullscreen .gf-modal__dialog {
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  border-radius: 0;
}

@media (min-width: 768px) {
  .gf-modal--fullscreen .gf-modal__dialog {
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
    height: auto;
    border-radius: 1rem;
  }
}