/*
------------------------------------------------

Project Omnistic
Museum OS

Build XXVII.3 — Opening Day

A quiet, responsive final-polish layer for the
public Museum and its internal offices.

------------------------------------------------
*/

:root {
  --opening-content-width: 1240px;
  --opening-reading-width: 760px;
  --opening-section-space: clamp(64px, 9vw, 132px);
  --opening-card-radius: 0px;
  --opening-focus-ring: 2px solid var(--museum-accent, #7ecae8);
}

/* Consistent page rhythm */

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

main {
  min-width: 0;
}

img,
video,
iframe,
canvas,
svg {
  max-width: 100%;
}

img,
video {
  height: auto;
}

button,
input,
select,
textarea {
  max-width: 100%;
}

p,
li,
dd {
  overflow-wrap: break-word;
}

a,
button,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--opening-focus-ring);
  outline-offset: 4px;
}

/* Quiet loading treatment */

.opening-day-image {
  opacity: 0;
  transition: opacity 0.7s ease;
}

.opening-day-image.is-loaded {
  opacity: 1;
}

.opening-day-image.is-unavailable {
  min-height: 180px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.025),
      rgba(255, 255, 255, 0.06)
    );
  opacity: 0.55;
}

/* Headings remain elegant without breaking into narrow fragments */

h1,
h2,
h3 {
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

p {
  text-wrap: pretty;
}

/* Public artwork presentation */

.collection-card,
.artwork-card,
.object-card,
.museum-card,
.library-card,
.edition-card {
  min-width: 0;
}

.collection-card img,
.artwork-card img,
.object-card img,
.museum-card img {
  display: block;
  width: 100%;
  object-fit: contain;
}

.catalog-number,
.eyebrow {
  line-height: 1.4;
}

/* Long-form museum writing */

.curator-intro,
.artwork-description,
.artwork-story,
.library-description,
.exhibition-essay,
.museum-reading {
  max-width: var(--opening-reading-width);
  line-height: 1.75;
}

/* Buttons and links */

button,
.button,
.museum-button,
.museum-return,
.registrar-primary-button,
.registrar-secondary-button,
.staff-primary-button,
.staff-secondary-button {
  min-height: 44px;
}

.museum-return,
.museum-button,
.button {
  display: inline-flex;
  align-items: center;
}

/* Museum Voice */

.museum-voice-control,
.museum-voice-button {
  z-index: 999;
}

.museum-voice-dialog,
.museum-voice-entry,
.voice-entry-panel {
  max-width: min(540px, calc(100vw - 28px));
}

/* Desktop refinement */

@media (min-width: 1100px) {
  body:not(.exhibition-studio-page):not(.cataloger-page) main {
    margin-inline: auto;
  }

  .room-section,
  .museum-section,
  .page-section {
    padding-block: var(--opening-section-space);
  }
}

/* Tablet */

@media (max-width: 900px) {
  h1 {
    font-size: clamp(44px, 10vw, 78px) !important;
    line-height: 0.98 !important;
  }

  h2 {
    font-size: clamp(30px, 7vw, 54px);
  }

  .museum-directory-panel,
  .museum-menu-panel,
  .navigation-panel {
    max-width: 100vw;
  }

  .collection-grid,
  .object-grid,
  .museum-grid,
  .library-grid,
  .edition-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

/* Phone */

@media (max-width: 640px) {
  :root {
    --opening-section-space: 58px;
  }

  body {
    font-size: 16px;
  }

  h1 {
    font-size: clamp(42px, 13vw, 64px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.025em;
  }

  h2 {
    font-size: clamp(28px, 9vw, 44px);
    line-height: 1.05;
  }

  h3 {
    line-height: 1.15;
  }

  .eyebrow {
    letter-spacing: 1.4px;
  }

  .room-section,
  .museum-section,
  .page-section,
  .artwork-main,
  .collection-main,
  .library-main,
  .store-main,
  .artist-main,
  .contact-main {
    width: min(100% - 28px, var(--opening-content-width));
    margin-inline: auto;
  }

  .collection-grid,
  .object-grid,
  .museum-grid,
  .library-grid,
  .edition-grid {
    grid-template-columns: 1fr;
  }

  .collection-card,
  .object-card,
  .museum-card,
  .library-card,
  .edition-card {
    width: 100%;
  }

  .museum-return,
  .museum-button,
  .button {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .museum-directory-footer-actions,
  .museum-footer-links {
    align-items: flex-start;
    flex-direction: column;
  }

  .museum-voice-control,
  .museum-voice-button {
    right: 14px !important;
    bottom: 14px !important;
  }

  .museum-voice-dialog,
  .museum-voice-entry,
  .voice-entry-panel {
    width: calc(100vw - 28px);
    padding: 22px;
  }

  /* Keep internal offices usable during phone inspection */

  .registrar-main,
  .curator-main,
  .cataloger-main,
  .exhibition-studio-main,
  .backstage-main {
    width: min(100% - 24px, 1640px);
  }

  .studio-toolbar,
  .registrar-heading,
  .curator-section-heading,
  .staff-dashboard-heading {
    align-items: stretch;
  }

  .studio-toolbar > *,
  .studio-toolbar label,
  .studio-toolbar select,
  .studio-toolbar button {
    width: 100%;
  }
}

/* Very narrow phones */

@media (max-width: 390px) {
  h1 {
    font-size: clamp(38px, 12.5vw, 52px) !important;
  }

  .room-section,
  .museum-section,
  .page-section,
  .artwork-main,
  .collection-main,
  .library-main,
  .store-main,
  .artist-main,
  .contact-main {
    width: min(100% - 22px, var(--opening-content-width));
  }

  .wall-tabs,
  .preview-wall-tabs {
    grid-template-columns: 1fr !important;
  }
}

/* Respect visitors who prefer less movement */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .opening-day-image {
    opacity: 1;
  }
}

/* Print dignity for essays, records, and labels */

@media print {
  header,
  footer,
  nav,
  .museum-voice-control,
  .museum-voice-button,
  button {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #111 !important;
  }

  main {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  a {
    color: inherit !important;
    text-decoration: none !important;
  }
}