@import url("/shared.css");

html, body {
  height: 100%;
  overflow: hidden;
}

.display-root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 2vh 4vw 1vh;
  transition: background-color 0.6s ease, color 0.6s ease;
}

/* Default / explicit landscape (current sizing) */
.display-root.display-landscape {
  --type-scale: 1;
}

/* Narrow portrait displays: ?orientation=portrait */
.display-root.display-portrait {
  --type-scale: 0.62;
  padding: 1.5vh 3vw 0.75vh;
}

.display-header {
  display: flex;
  align-items: center;
  gap: 2vw;
  flex-shrink: 0;
  min-height: 8vh;
}

.display-logo {
  max-height: 10vh;
  max-width: 22vw;
  object-fit: contain;
}

.display-logo.hidden {
  display: none;
}

.display-header-text {
  margin: 0;
  font-size: clamp(calc(1.4rem * var(--type-scale, 1)), calc(3vw * var(--type-scale, 1)), calc(2.4rem * var(--type-scale, 1)));
  font-weight: 600;
  letter-spacing: 0.02em;
}

.display-portrait .display-header-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.display-slide {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2vh 0;
  animation: fadeIn 0.8s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.slide-title {
  font-size: clamp(calc(2rem * var(--type-scale, 1)), calc(5vw * var(--type-scale, 1)), calc(3.5rem * var(--type-scale, 1)));
  font-weight: 700;
  margin: 0 0 2vh;
  border-bottom: 4px solid var(--accent, #c9a227);
  padding-bottom: 1vh;
}

.display-portrait .slide-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-lines {
  list-style: none;
  margin: 0;
  padding: 0;
}

.event-lines .event-line {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  font-size: clamp(calc(1.8rem * var(--type-scale, 1)), calc(4.2vw * var(--type-scale, 1)), calc(3.2rem * var(--type-scale, 1)));
  line-height: 1.35;
  padding: 0.35em 0;
  font-weight: 500;
}

.display-portrait .event-lines .event-line {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.event-lines .event-line:nth-child(odd) {
  opacity: 0.95;
}

.event-line-date {
  flex: 0 1 auto;
  white-space: nowrap;
  min-width: 0;
}

.display-portrait .event-line-date {
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-line-separator {
  flex: 0 0 auto;
  opacity: 0.65;
  padding: 0 0.15em;
}

.event-line-name {
  flex: 1 1 auto;
  text-align: right;
  min-width: 0;
}

.display-portrait .event-line-name {
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.empty-message {
  font-size: clamp(calc(1.4rem * var(--type-scale, 1)), calc(3vw * var(--type-scale, 1)), calc(2.2rem * var(--type-scale, 1)));
  font-style: italic;
  opacity: 0.75;
}

.custom-content {
  font-size: clamp(calc(1.6rem * var(--type-scale, 1)), calc(3.8vw * var(--type-scale, 1)), calc(2.8rem * var(--type-scale, 1)));
  line-height: 1.4;
}

.custom-page-body {
  flex: 1;
  min-height: 0;
}

.custom-page-split {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  height: 100%;
}

.custom-page-split .custom-content {
  flex: 1 1 55%;
  min-width: 0;
  text-align: left;
}

.custom-page-split .custom-page-image {
  flex: 0 1 42%;
  margin: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
}

.custom-page-split .custom-page-image img {
  max-width: 100%;
  max-height: min(55vh, 520px);
  width: auto;
  height: auto;
  object-fit: contain;
}

.custom-page-image-only {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.custom-page-image-only .custom-page-image {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-page-image-only .custom-page-image img {
  max-width: min(90%, 960px);
  max-height: min(65vh, 720px);
  object-fit: contain;
}

.display-portrait .custom-page-split {
  flex-direction: column;
  align-items: stretch;
}

.display-portrait .custom-page-split .custom-content {
  flex: 0 1 auto;
}

.display-portrait .custom-page-split .custom-page-image {
  flex: 1 1 auto;
  justify-content: center;
}

.display-portrait .custom-page-split .custom-page-image img {
  max-height: min(40vh, 480px);
}

.display-portrait .custom-content.text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.custom-content.text {
  white-space: pre-wrap;
}

.display-footer {
  text-align: center;
  font-size: clamp(calc(0.8rem * var(--type-scale, 1)), calc(1.5vw * var(--type-scale, 1)), calc(1rem * var(--type-scale, 1)));
  opacity: 0.5;
  flex-shrink: 0;
}

.display-portrait .display-logo {
  max-height: 7vh;
  max-width: 28vw;
}

.display-portrait .display-header {
  min-height: 6vh;
  gap: 1.5vw;
}