/* =========================================================
   HERO – cross-fade vrstvy tak, aby NEMĚNILY layout headeru
   ========================================================= */

header .wp-block-cover {
  position: relative;
  overflow: hidden;

  /* desktop default: velké hero */
  min-height: 100vh;
  
  /* Lepší výkon při animacích */
  will-change: auto;
}

/* Obě vrstvy přes sebe – nesmí ovlivnit layout */
header .wp-block-cover__image-background,
header .hero-crossfade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  object-fit: cover;

  /* požadované kotvení: vpravo nahoře (ořez dole + vlevo) */
  object-position: 100% 0%;

  transition: opacity 1.2s ease-in-out;

  /* obrázky nikdy nesmí chytat kliknutí */
  pointer-events: none;
  
  /* GPU akcelerace pro plynulejší animace */
  transform: translateZ(0);
  backface-visibility: hidden;
}

header .hero-crossfade {
  opacity: 0;
  z-index: 1;
}

header .wp-block-cover__image-background {
  opacity: 1;
  z-index: 0;
}

/* Obsah headeru (menu, odkazy, texty) musí být nad obrázky */
header {
  position: relative;
  z-index: 20;
}


/* =========================================================
   RESPONSIVE: DESKTOP (velké obrazovky)
   ========================================================= */
@media (min-width: 1441px) {
  header .wp-block-cover {
    min-height: 100vh;
  }
  
  header .wp-block-cover__image-background,
  header .hero-crossfade {
    object-position: 100% 0%;
  }
}


/* =========================================================
   RESPONSIVE: DESKTOP (standardní 1024-1440px)
   ========================================================= */
@media (min-width: 1025px) and (max-width: 1440px) {
  header .wp-block-cover {
    min-height: 90vh;
  }
  
  header .wp-block-cover__image-background,
  header .hero-crossfade {
    object-position: 95% 0%;
  }
}


/* =========================================================
   RESPONSIVE: TABLET (768-1024px)
   ========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
  header .wp-block-cover {
    min-height: 70vh;
  }
  
  header .wp-block-cover__image-background,
  header .hero-crossfade {
    object-position: 90% 0%;
    transition-duration: 1.1s;
  }
}

/* Tablet na výšku (portrait) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  header .wp-block-cover {
    min-height: 60vh;
  }

  header .wp-block-cover__image-background,
  header .hero-crossfade {
    object-position: 85% 8%;
  }
}

/* Tablet na šířku (landscape) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  header .wp-block-cover {
    min-height: 65vh;
  }

  header .wp-block-cover__image-background,
  header .hero-crossfade {
    object-position: 80% 0%;
  }
}


/* =========================================================
   RESPONSIVE: MOBIL (do 767px)
   ========================================================= */
@media (max-width: 767px) {
  header .wp-block-cover {
    min-height: 75vh;
  }
  
  header .wp-block-cover__image-background,
  header .hero-crossfade {
    object-position: 70% 8%;
    transition-duration: 0.9s;
  }
}

/* Mobil na výšku (portrait) - nejčastější - maximální využití displeje */
@media (max-width: 767px) and (orientation: portrait) {
  header .wp-block-cover {
    min-height: 80vh;
  }

  header .wp-block-cover__image-background,
  header .hero-crossfade {
    object-position: 65% 12%;
  }
}

/* Mobil na šířku (landscape) - větší plocha */
@media (max-width: 767px) and (orientation: landscape) {
  header .wp-block-cover {
    min-height: 85vh;
  }

  header .wp-block-cover__image-background,
  header .hero-crossfade {
    object-position: 70% 5%;
  }
}

/* Velmi malé mobily (do 480px) na výšku - plné využití */
@media (max-width: 480px) and (orientation: portrait) {
  header .wp-block-cover {
    min-height: 78vh;
  }

  header .wp-block-cover__image-background,
  header .hero-crossfade {
    object-position: 60% 15%;
  }
}


/* =========================================================
   PORTRAIT obrázky – lepší zobrazení na všech zařízeních
   (JS přidává .is-portrait na .wp-block-cover)
   ========================================================= */

/* Desktop: portrait obrázky s contain, aby nebyly oříznuté */
@media (min-width: 1025px) {
  header .wp-block-cover.is-portrait {
    background: #000;
  }

  header .wp-block-cover.is-portrait .wp-block-cover__image-background,
  header .wp-block-cover.is-portrait .hero-crossfade {
    object-fit: contain;
    object-position: 50% 0%;
  }
}

/* Tablet: portrait obrázky s jemným ořezem */
@media (min-width: 768px) and (max-width: 1024px) {
  header .wp-block-cover.is-portrait .wp-block-cover__image-background,
  header .wp-block-cover.is-portrait .hero-crossfade {
    object-position: 50% 5%;
  }
}

/* Mobil: portrait obrázky více vycentrované s optimálním výřezem */
@media (max-width: 767px) {
  header .wp-block-cover.is-portrait .wp-block-cover__image-background,
  header .wp-block-cover.is-portrait .hero-crossfade {
    object-position: 50% 8%;
    /* Portrait obrázky na mobilu můžou být trochu víc cover pro lepší využití */
    object-fit: cover;
  }
}


/* =========================================================
   Přístupnost: uživatel nechce animace
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  header .wp-block-cover__image-background,
  header .hero-crossfade {
    transition: none !important;
    animation: none !important;
  }
}