/* assets/css/components/map-modal.css
 * @layer components — Map modal (office "View on Map" dialog)
 *
 * Opens from .js-map-modal-trigger buttons on office cards. Lazy-injects
 * a Google Maps iframe on open, clears it on close so cards don't pay the
 * iframe load cost until requested.
 */

@layer components {

  .map-modal[hidden] { display: none; }

  .map-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-m);
  }

  .map-modal__backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in oklch, var(--primary-ultra-dark) 65%, transparent);
    backdrop-filter: blur(4px);
    animation: map-modal-fade var(--duration-normal) var(--ease-default);
  }

  .map-modal__panel {
    position: relative;
    inline-size: min(100%, 44rem);
    max-block-size: min(90vh, 48rem);
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    animation: map-modal-pop var(--duration-normal) var(--ease-default);
  }

  .map-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    padding: var(--space-m) var(--space-l);
    border-block-end: 1px solid var(--border-subtle);
    background: var(--surface-tinted);
  }

  .map-modal__title {
    margin: 0;
    font-size: var(--heading-card);
    font-weight: var(--weight-bold);
    color: var(--primary);
    letter-spacing: var(--tracking-tight);
  }

  .map-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--space-l);
    block-size: var(--space-l);
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    color: var(--text-main);
    cursor: pointer;
    transition:
      background-color var(--duration-fast) var(--ease-default),
      border-color     var(--duration-fast) var(--ease-default);
  }

  .map-modal__close:hover {
    background: var(--surface-sunken);
    border-color: var(--border-default);
  }

  .map-modal__close:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .map-modal__embed {
    aspect-ratio: 1 / 1;
    padding: var(--space-m);
    background: var(--surface-sunken);
  }

  .map-modal__embed iframe {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
    border-radius: var(--radius-m);
  }

  @media (max-width: 48em) {
    .map-modal__embed { aspect-ratio: 4 / 5; }
  }

  @keyframes map-modal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes map-modal-pop {
    from { opacity: 0; transform: translateY(var(--space-2xs)) scale(0.98); }
    to   { opacity: 1; transform: none; }
  }

}