/**
 * Haupt-Stylesheet
 * Styles für das HOMCity Display-Panel (1080x1920px)
 */

/* ========================================
   HTML & Body & Root Container
   ======================================== */

html {
  /* Exakte Panel-Dimensionen - IMMER 1080x1920 */
  width: var(--panel-width);
  height: var(--panel-height);
  min-width: var(--panel-width);
  min-height: var(--panel-height);
  max-width: var(--panel-width);
  max-height: var(--panel-height);

  /* Kein Overflow */
  overflow: hidden;

  margin: 0 auto;
}

body {
  /* Exakte Panel-Dimensionen - IMMER 1080x1920 */
  width: var(--panel-width);
  height: var(--panel-height);
  min-width: var(--panel-width);
  min-height: var(--panel-height);
  max-width: var(--panel-width);
  max-height: var(--panel-height);

  /* Horizontal zentrieren (im Browser, auf Panel macht es keinen Unterschied) */
  margin: 0 auto;

  /* Kein Scrollen möglich (wird im Dev-Mode überschrieben) */
  overflow: hidden;

  /* Standard-Schriftart und -Farbe */
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);

  /* Hintergrundfarbe */
  background-color: var(--color-background);

  /* Position fixiert für Display */
  position: relative;
}

/* App-Container - IMMER 1080x1920 */
#app {
  width: var(--panel-width);
  height: var(--panel-height);
  min-width: var(--panel-width);
  min-height: var(--panel-height);
  max-width: var(--panel-width);
  max-height: var(--panel-height);
  overflow: hidden;
  position: relative;
}

/* ========================================
   Dev Mode Styles
   ======================================== */

html.dev-mode {
  /* Im Dev-Mode: Scrollen aktivieren für Browser-Tests */
  overflow: auto;

  /* Größen IMMER beibehalten */
  width: var(--panel-width);
  height: var(--panel-height);
  min-width: var(--panel-width);
  min-height: var(--panel-height);
  max-width: var(--panel-width);
  max-height: var(--panel-height);
}

body.dev-mode {
  /* Im Dev-Mode: Scrollen aktivieren für Browser-Tests */
  overflow: auto;

  /* Größen IMMER beibehalten */
  width: var(--panel-width);
  height: var(--panel-height);
  min-width: var(--panel-width);
  min-height: var(--panel-height);
  max-width: var(--panel-width);
  max-height: var(--panel-height);
}

body.dev-mode .video-container {
  /* Im Dev-Mode: Relative Position für bessere Browser-Darstellung */
  position: relative;
}

/* Dev Mode Info-Banner (optional) */
body.dev-mode::before {
  content: "DEV MODE AKTIVIERT";
  position: fixed;
  right: 15px;
  bottom: 15px;
  width: 200px;
  height: auto;
  background: rgba(255, 0, 0, 0.8);
  color: white;
  padding: var(--spacing-sm);
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  z-index: var(--z-index-tooltip);
  pointer-events: none;
  border-radius: var(--border-radius-sm);
}

/* ========================================
   Typography
   ======================================== */

/* Heading */
h1 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -3px;
}

/* Text, in dem man nur den Rahmen um die Schrift herum sieht und der Inhalt transparent ist */
.text--bordered {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 3px var(--color-heading);
}

/* ========================================
   Panel Haupt-Container
   ======================================== */

.panel {
  /* Volle Größe des Viewports - IMMER 1080x1920 */
  width: 100%;
  height: 100%;
  min-width: var(--panel-width);
  min-height: var(--panel-height);
  max-width: var(--panel-width);
  max-height: var(--panel-height);

  /* Flexbox Layout für vertikale Aufteilung */
  display: flex;
  flex-direction: column;

  /* Kein Overflow */
  overflow: hidden;

  /* Padding */
  padding: var(--panel-padding);

  /* Background-Image */
  background-image: url("../assets/images/bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ========================================
   Panel Header
   ======================================== */

.panel__header {
  /* Flexible Höhe - wird später nach Design angepasst */
  flex: 0 0 auto;

  /* Basis-Styling */
  width: 100%;

  /* Standard-Padding */
  padding: var(--spacing-lg);
}

.panel__logo-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.panel__logo {
  width: 325px;
  height: auto;
  object-fit: contain;
  object-position: center;
  object-fit: contain;
}

.panel__icon {
  width: 190px;
  height: auto;
  object-fit: contain;
  object-position: center;
  object-fit: contain;
}

/* ========================================
   Panel Main Content
   ======================================== */

.panel__main {
  /* Nimmt verfügbaren Platz zwischen Header und Footer ein */
  flex: 1 1 auto;

  /* Basis-Styling */
  width: 100%;

  /* Overflow-Verhalten falls Inhalt zu groß wird */
  overflow: hidden;

  /* Standard-Padding */
  padding: var(--spacing-lg);
}

.panel__heading-container {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-xl);
}

.panel__heading {
  width: 75%;
}

.panel__heading-icon {
  width: 25%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.panel__text {
  width: 25%;
  text-align: right;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

/* ========================================
   Content Grid
   ======================================== */

.panel__content-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  width: 100%;
  margin-top: 15px;
}

.panel__content-grid-item {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.panel__content-grid-item:hover {
  opacity: 0.9;
}

.panel__content-grid-item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Grid Items ohne Link (nur Bilder) */
.panel__content-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Placeholder für fehlende Bilder */
.panel__content-grid-item-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--color-surface);
  display: block;
}

/* ========================================
   Panel Footer
   ======================================== */

.panel__footer {
  /* Flexible Höhe - wird später nach Design angepasst */
  flex: 0 0 auto;

  /* Basis-Styling */
  width: 100%;

  /* Standard-Padding */
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-xl);
}

.panel__footer-logo {
  width: 350px;
  height: auto;
  object-fit: contain;
  object-position: center;
  display: block;
  margin-bottom: -15px;
}

.panel__footer-back-button {
  width: 50%;
  height: auto;
  object-fit: contain;
  object-position: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-xl);
}

.panel__footer-back-button img {
  width: 300px;
  height: auto;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* ========================================
   Video Container (für index.html)
   ======================================== */

.video-container {
  /* Volle Größe des Viewports - IMMER 1080x1920 */
  width: 100%;
  height: 100%;
  min-width: var(--panel-width);
  min-height: var(--panel-height);
  max-width: var(--panel-width);
  max-height: var(--panel-height);

  /* Position absolut für vollständige Überlagerung */
  position: absolute;
  top: 0;
  left: 0;

  /* Overflow verstecken */
  overflow: hidden;

  /* Hintergrundfarbe für Ladezustand */
  background-color: var(--color-background);
}

.video-container__video {
  /* Exakte Panel-Dimensionen - pixelgenau (1080x1920px) */
  width: 1080px;
  height: 1920px;

  /* Video wird pixelgenau angezeigt, da Dimensionen exakt passen */
  /* Kein object-fit nötig, da Video und Container identische Dimensionen haben */

  /* Keine Steuerungselemente */
  pointer-events: none;

  /* Smooth Rendering */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  
  /* Optimiertes Laden für schnelleres Anzeigen */
  object-fit: cover;
  will-change: opacity;
}

/* ========================================
   SPA Transitions
   ======================================== */

/* View-Container für Transitions */
.view-container {
  width: 100%;
  height: 100%;
  min-width: var(--panel-width);
  min-height: var(--panel-height);
  max-width: var(--panel-width);
  max-height: var(--panel-height);
  opacity: 1;
  transition: opacity var(--duration-normal) var(--ease-in-out);
}

/* Fade-Out Animation */
.view-container.fade-out {
  opacity: 0;
}

/* Fade-In Animation (Start mit opacity 0) */
.view-container.fade-in {
  opacity: 0;
  animation: fadeIn var(--duration-normal) var(--ease-in-out) forwards;
}

/* Panel-Inhalte Transitions (nur für Panel-zu-Panel Übergänge) */
.panel__header,
.panel__main,
.panel__footer {
  transition: opacity var(--duration-normal) var(--ease-in-out);
}

.panel__header.fade-out,
.panel__main.fade-out,
.panel__footer.fade-out {
  opacity: 0;
}

.panel__header.fade-in,
.panel__main.fade-in,
.panel__footer.fade-in {
  opacity: 0;
  animation: fadeIn var(--duration-normal) var(--ease-in-out) forwards;
}

/* Keyframe für Fade-In */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}