/**
 * @file
 * Modal component styles.
 */

.sse-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.sse-modal[aria-hidden="false"] {
  display: flex;
}

.sse-modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: color-mix(in srgb, var(--color-fg) 70%, transparent);
  cursor: pointer;
  animation: fadeIn 0.2s ease-out;
}

.sse-modal__container {
  position: relative;
  width: 100%;
  max-height: 90vh;
  background: var(--color-bg);
  border-radius: var(--radius-lg, 8px);
  box-shadow: var(--shadow-modal, 0 10px 40px color-mix(in srgb, var(--color-fg) 30%, transparent));
  display: flex;
  flex-direction: column;
  animation: slideIn 0.3s ease-out;
  z-index: 1;
}

/* Size variants */
.sse-modal--small .sse-modal__container {
  max-width: 400px;
}

.sse-modal--medium .sse-modal__container {
  max-width: 600px;
}

.sse-modal--large .sse-modal__container {
  max-width: 900px;
}

.sse-modal__header {
  display: grid;
  grid-template-columns: 1fr auto; /* title | close */
  grid-template-rows: auto auto auto; /* title + meta + location */
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.sse-modal__title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-fg);
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.sse-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-fg-muted);
  transition: all 0.2s ease;
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  justify-self: end;
}

.sse-modal__close:hover {
  background: var(--color-surface);
  color: var(--color-fg);
}

.sse-modal__close:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.sse-modal__body {
  padding: 1.5rem;
  overflow-y: auto;
  overflow-x: hidden; /* Prevent horizontal overflow */
  flex: 1;
}

/* Constrain all content to modal width */
.sse-modal__body * {
  max-width: 100%;
}

/* Ensure images are responsive */
.sse-modal__body img {
  height: auto;
  width: 100%;
  object-fit: cover;
}

/* Prevent tables and pre blocks from overflowing */
.sse-modal__body table,
.sse-modal__body pre {
  overflow-x: auto;
  display: block;
}

/* Ensure node teaser images don't overflow */
.sse-modal__body .node--type-sse-action img,
.sse-modal__body .field--name-field-image img,
.sse-modal__body .field--name-field-featured-image img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Footer */
.sse-modal__footer {
  padding: 0.75rem 1.5rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* Olivero core's .button adds margin-block:var(--sp1) (~1rem top+bottom); reset
   it here so the footer height is driven by its own padding, not stray button
   margin. Specificity (0,2,0) beats core's (0,1,0). */
.sse-modal__footer .button {
  margin: 0;
}

/* Ensure all buttons in modals have proper contrast in both light and dark modes */
.sse-modal .button,
.sse-modal .btn {
  background-color: var(--color-link);
  color: var(--color-bg);
  border-color: var(--color-link);
}

.sse-modal .button:hover,
.sse-modal .btn:hover {
  background-color: var(--color-link-hover);
  color: var(--color-bg);
  text-decoration: none;
}

/* Primary buttons - high contrast in light mode */
.sse-modal .button.button--primary,
.sse-modal .btn.btn--primary {
  background-color: var(--brand-600);
  color: var(--neutral-0); /* Always white in light mode */
  border: 1px solid var(--brand-700);
}

.sse-modal .button.button--primary:hover,
.sse-modal .btn.btn--primary:hover {
  background-color: var(--brand-700);
  color: var(--neutral-0);
  border-color: var(--brand-800);
}

/* Dark mode adjustments for modal buttons */
html[data-theme="dark"] .sse-modal .button.button--primary,
html[data-theme="dark"] .sse-modal .btn.btn--primary {
  background-color: var(--brand-500);
  color: var(--neutral-950); /* Dark text on bright button */
  border-color: var(--brand-400);
}

html[data-theme="dark"] .sse-modal .button.button--primary:hover,
html[data-theme="dark"] .sse-modal .btn.btn--primary:hover {
  background-color: var(--brand-400);
  color: var(--neutral-950);
  border-color: var(--brand-300);
}

/* Optional size variant for footer buttons */
.sse-modal__footer .button.button--large,
.sse-modal__footer .button.button--lg {
  font-size: 1rem;
  padding: 0.625rem 1rem;
}

/* Reduce extra bottom spacing from node teasers inside modal */
.sse-modal .node {
  margin-bottom: 0;
}
.sse-modal .node__content > *:last-child {
  margin-bottom: 0;
}

/* New header rows (meta + location) */
.sse-modal__header-rows {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
  display: grid;
  grid-template-rows: auto auto;
  gap: 0.25rem;
}

.sse-modal__header-row {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 0.5rem;
}

.sse-modal__header-row--meta {
  font-size: 0.95rem;
  color: var(--color-fg);
}

.sse-modal__meta-left,
.sse-modal__meta-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sse-modal__meta-left .meta-item,
.sse-modal__meta-right .meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  line-height: 1.2;
}

.sse-modal__meta-right {
  font-weight: 600;
  color: var(--color-link);
}

.sse-modal__header-row--location {
  font-size: 0.95rem;
  color: var(--color-fg-muted);
}

.sse-modal__header-row svg {
  width: 16px;
  height: 16px;
  color: var(--color-link);
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Prevent body scroll when modal is open */
body.sse-modal-open {
  overflow: hidden;
}

/* Respect reduced-motion intent: disable entrance animations */
@media (prefers-reduced-motion: reduce) {
  .sse-modal__overlay,
  .sse-modal__container {
    animation: none;
  }
}

/* Loading state */
.sse-modal__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  font-size: 1.1rem;
  color: var(--color-fg-muted);
}

.sse-modal__loading::after {
  content: '';
  margin-left: 0.5rem;
  width: 20px;
  height: 20px;
  border: 3px solid var(--color-border);
  border-top: 3px solid var(--color-link);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Error state */
.sse-modal__error {
  padding: 2rem;
  text-align: center;
}

.sse-modal__error p {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  color: var(--color-fg-muted);
}

.sse-modal__error .button,
.sse-modal__error a.button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--color-link);
  color: var(--neutral-0);
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.sse-modal__error .button:hover,
.sse-modal__error a.button:hover {
  background: var(--color-link-hover);
}

/* Responsive */
@media (max-width: 768px) {
  .sse-modal {
    padding: 0;
  }

  .sse-modal__container {
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    height: 100%;
    width: 100vw; /* Force full viewport width on mobile */
  }

  .sse-modal--small .sse-modal__container,
  .sse-modal--medium .sse-modal__container,
  .sse-modal--large .sse-modal__container {
    max-width: 100%;
    width: 100vw;
  }

  /* Reduce padding on mobile for more content space */
  .sse-modal__header,
  .sse-modal__body,
  .sse-modal__footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Make images more compact on mobile */
  .sse-modal__body img {
    max-height: 200px;
    object-fit: cover;
  }

  /* Stack header metadata vertically on very small screens */
  @media (max-width: 480px) {
    .sse-modal__header-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
    }

    .sse-modal__meta-left,
    .sse-modal__meta-right {
      width: 100%;
    }
  }
}