/* ===== Vars ===== */
:root{ --header-h: 0px; --wpbar: 0px; --sticky-top: calc(var(--header-h) + var(--wpbar)); }
body.admin-bar{ --wpbar: 32px; }
@media (max-width:782px){ body.admin-bar{ --wpbar: 46px; } }

/* ===== 1) Precondiciones sticky SOLO en single/page ===== */
body.single:has(.single-featured-image) .site,
body.single:has(.single-featured-image) .site-content,
body.single:has(.single-featured-image) main#primary,
body.page:has(.page-featured-image)   .site,
body.page:has(.page-featured-image)   .site-content,
body.page:has(.page-featured-image)   main#primary,
body.page:has(.page-featured-image)   .content-area,
body.page:has(.page-featured-image)   .site-main {
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  contain: none !important;
}

/* ===== 2) Imagen destacada sticky (posts + pages; cubre los wrappers más comunes) ===== */
body.single .single-featured-image,
body.page  .page-featured-image,
body.single .post-thumbnail,
body.page  .post-thumbnail,
body.single .entry-header .post-thumbnail,
body.page  .entry-header .post-thumbnail,
body.single .wp-block-post-featured-image,
body.page  .wp-block-post-featured-image{
  position: sticky !important;
  top: var(--sticky-top) !important;
  height: calc(100svh - var(--sticky-top)) !important;
  height: calc(100vh - var(--sticky-top)) !important; /* fallback */
  z-index: 0;
  overflow: hidden;
}

/* Edge case: el tema imprime <img.wp-post-image> sin wrapper */
body.single .entry-header > img.wp-post-image:first-child,
body.page  .entry-header  > img.wp-post-image:first-child{
  position: sticky !important;
  top: var(--sticky-top) !important;
  height: calc(100svh - var(--sticky-top)) !important;
  width: 100%;
  z-index: 0;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* ===== 3) La imagen rellena y prioriza el borde superior (evita “corte” arriba) ===== */
body.single .single-featured-image img,
body.page  .page-featured-image img,
body.single .post-thumbnail img,
body.page  .post-thumbnail img,
body.single .wp-block-post-featured-image img,
body.page  .wp-block-post-featured-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;           /* llena sin deformar */
  object-position: center top; /* mantiene visible la parte superior */
  display: block;
  backface-visibility: hidden;
}

/* ===== 4) El contenido pasa por encima (sin tocar tu layout) ===== */
body.single .single-featured-image + .container,
body.page  .page-featured-image + .container,
body.single .post-thumbnail + .container,
body.page  .post-thumbnail + .container,
body.single .wp-block-post-featured-image + .container,
body.page  .wp-block-post-featured-image + .container,
body.single .entry-content,
body.page  .entry-content{
  position: relative;
  z-index: 1;
}

/* Navegación de post por encima */
body.single .post-navigation{ position: relative; z-index: 1; }

/* ===== OPCIÓN: mostrar SIEMPRE la imagen completa (sin recorte) =====
   Descomenta este bloque si prefieres ver la imagen entera (habrá "letterboxing").
*/
/*
body.single .single-featured-image img,
body.page  .page-featured-image img,
body.single .post-thumbnail img,
body.page  .post-thumbnail img,
body.single .wp-block-post-featured-image img,
body.page  .wp-block-post-featured-image img{
  object-fit: contain;
  background: #000;  /* color de las bandas */
}
*/