/* ==========================================================
   VISTA DE ENTRADA CON IMAGEN DESTACADA A PANTALLA COMPLETA
   Solo en computadora y tableta (pantallas de 700 px de ancho o más y 500 px de alto o más).
   En celular se mantiene el diseño normal.
   ========================================================== */
:root {
  --hero-overlay: rgba(0, 0, 0, .40);    /* oscurece la imagen para que se lea el título */
  --hero-title-valign: center;           /* posición vertical del título: center | flex-end (abajo) | flex-start (arriba) */
  --hero-title-size: clamp(2.2rem, 1.2rem + 4vw, 4.6rem);
  --hero-min-height: 480px;
}

@media (min-width: 700px) and (min-height: 500px) {

  /* El contenedor principal deja de limitar el ancho: la imagen ocupa todo */
  body:has(.post-full .post-featured) main.wrap { max-width: none; padding: 0; }

  .post-full:has(.post-featured) { position: relative; display: flex; flex-direction: column; }

  /* --- Imagen destacada: pantalla completa --- */
  .post-full .post-featured {
    order: -1; position: relative; margin: 0;
    height: 100vh; height: 100dvh; min-height: var(--hero-min-height);
  }
  .post-full .post-featured img {
    display: block; width: 100%; height: 100%; aspect-ratio: auto;
    object-fit: cover; object-position: center; border-radius: 0;
  }
  .post-full .post-featured::after { content: ""; position: absolute; inset: 0; background: var(--hero-overlay); }

  /* --- Título de la entrada, centrado sobre la imagen --- */
  .post-full:has(.post-featured) > .post-title {
    position: absolute; top: 0; left: 0; right: 0; z-index: 5; margin: 0;
    height: 100vh; height: 100dvh; min-height: var(--hero-min-height);
    display: flex; align-items: var(--hero-title-valign); justify-content: center; text-align: center;
    padding: 90px max(var(--gutter), 10vw) 60px;
    color: #fff; font-size: var(--hero-title-size); line-height: 1.15;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .55);
    pointer-events: none;
  }

  /* --- Fecha, categorías y texto: debajo de la imagen, con el ancho normal del sitio --- */
  .post-full:has(.post-featured) > .post-meta,
  .post-full:has(.post-featured) > .post-content,
  .post-full:has(.post-featured) > .back {
    width: 100%; max-width: var(--max); margin-left: auto; margin-right: auto;
    padding-left: var(--gutter); padding-right: var(--gutter);
  }
  .post-full:has(.post-featured) > .post-meta { margin-top: 28px; }

  /* --- Encabezado en una sola línea, encima de la imagen --- */
  body:has(.post-full .post-featured) .site-header {
    position: absolute; top: 0; left: 0; right: 0; z-index: 30;
    margin: 0; padding: 18px 0 40px; border: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  }
  body:has(.post-full .post-featured) .site-header .wrap {
    display: flex; align-items: center; gap: 24px; flex-wrap: nowrap;
  }
  body:has(.post-full .post-featured) .site-title { color: #fff; white-space: nowrap; font-size: 1.4rem; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
  body:has(.post-full .post-featured) .site-tagline {
    flex: 1; min-width: 0; margin: 0; color: rgba(255, 255, 255, .85);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
  }
  body:has(.post-full .post-featured) .site-nav { margin: 0 0 0 auto; }
  body:has(.post-full .post-featured) .menu > li { border: 0; }
  body:has(.post-full .post-featured) .menu > li > a { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
  body:has(.post-full .post-featured) .menu > li > a:hover { color: #fff; text-decoration: underline; }
}

/* Tabletas angostas: el menú sándwich queda en la misma línea y se oculta la descripción */
@media (min-width: 700px) and (min-height: 500px) and (max-width: 960px) {
  body:has(.post-full .post-featured) .site-tagline { display: none; }
}
@media (min-width: 700px) and (min-height: 500px) and (max-width: 768px) {
  body:has(.post-full .post-featured) .site-header .wrap { flex-wrap: wrap; }
  body:has(.post-full .post-featured) .site-title { margin-right: auto; max-width: calc(100% - 60px); }
  body:has(.post-full .post-featured) .site-nav.open { flex-basis: 100%; background: rgba(0, 0, 0, .78); border-radius: 8px; padding: 4px 14px; margin-top: 6px; }
  body:has(.post-full .post-featured) .menu > li { border-top: 1px solid rgba(255, 255, 255, .18); }
  body:has(.post-full .post-featured) .menu > li:first-child { border-top: 0; }
  body:has(.post-full .post-featured) .sub a { color: #fff; }
  body:has(.post-full .post-featured) .menu-toggle { top: 2px; background: rgba(255, 255, 255, .92); }
}