/* ════════════════════════════════════════════════════════════════════════
   GH · Bloques Home
   Grid responsive de tarjetas (imagen / vídeo / texto)
   ════════════════════════════════════════════════════════════════════════ */

.gh-hb,
.gh-hb * {
  box-sizing: border-box;
}

.gh-hb {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: stretch;
}

/* ── Tarjeta base ───────────────────────────────────────────────────── */
.gh-hb__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  min-height: 220px;
}

a.gh-hb__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(10, 10, 10, 0.10);
  border-color: #d6e9dd;
}

/* ── Anchos ─────────────────────────────────────────────────────────── */
.gh-hb__card--full  { flex: 1 1 100%; }
.gh-hb__card--half  { flex: 1 1 calc(50% - 9px); }
.gh-hb__card--third { flex: 1 1 calc(33.333% - 12px); }

/* ── Media (imagen / vídeo) ─────────────────────────────────────────── */
.gh-hb__media {
  position: relative;
  width: 100%;
  background: #f4f4f4;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

/* ── Slot 6 · fila entera ────────────────────────────────────────────
   El resto de tarjetas van con la imagen mandando (16/9) y el texto
   debajo alineado a la izquierda. Aquí la imagen se reduce a una banda
   superior — un tercio de lo que ocupaba como banner 21/9 — y el
   nombre del bloque va centrado justo debajo.
   La altura de la tarjeta la marca el contenido (con el min-height de
   220px de la tarjeta base como suelo), de modo que el título no queda
   flotando sobre un hueco en blanco.                                  */
/* El min-height de 220px de la tarjeta base existe para igualar las
   tarjetas estrechas de una misma fila. Aquí la tarjeta va sola en su
   fila, así que ese suelo solo añadiría blanco bajo la banda cuando el
   bloque no lleva título. */
.gh-hb__card--full {
  min-height: 0;
}

.gh-hb__card--full .gh-hb__media {
  aspect-ratio: auto;            /* anula el 16/9 heredado */
  flex: 0 0 auto;
  height: 140px;
}

.gh-hb__card--full .gh-hb__body {
  flex: 0 0 auto;
  align-items: center;
  text-align: center;
}

.gh-hb__media img,
.gh-hb__media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
  transition: transform 0.4s ease;
}

a.gh-hb__card:hover .gh-hb__media img {
  transform: scale(1.04);
}

/* ── Cuerpo ─────────────────────────────────────────────────────────── */
.gh-hb__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px 20px;
  flex: 1;
}

.gh-hb__title {
  font-family: var(--gh-font-display, inherit);
  font-size: 1.35rem;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.25;
}

.gh-hb__subtitle {
  font-size: 0.92rem;
  color: #525252;
  margin: 0;
  line-height: 1.45;
}

.gh-hb__text {
  font-size: 0.95rem;
  color: #2a2a2a;
  margin: 6px 0 0;
  line-height: 1.55;
  white-space: pre-line;
}

/* ── CTA ────────────────────────────────────────────────────────────── */
.gh-hb__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #1f6f4a;
  transition: gap 0.2s ease;
}

a.gh-hb__card:hover .gh-hb__cta {
  gap: 10px;
}

.gh-hb__cta svg {
  flex: 0 0 14px;
}

/* ── Variantes por tipo ─────────────────────────────────────────────── */
.gh-hb__card--text {
  background: linear-gradient(135deg, #f4faf7 0%, #fff 70%);
}

.gh-hb__card--text .gh-hb__title {
  font-size: 1.6rem;
}

/* ── Vídeo: recortar la UI de YouTube (título y "Ver más") ───────────
   El iframe se escala desde el centro para que los bordes (donde sale
   el título y el botón "Watch on YouTube") queden fuera del área
   visible. Solo se ve el centro del vídeo.                            */
.gh-hb__media--video {
  overflow: hidden;
  pointer-events: none;          /* click pasa al <a> padre si lo hay */
}
.gh-hb__media--video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.45);
  transform-origin: center;
  pointer-events: none;
  border: 0;
}

/* Vídeo AUTOALOJADO (2026-08-25) · <video> nativo del slot de vídeo:
   a sangre con object-fit, SIN el scale(1.45) del iframe (aquel compensaba
   las franjas y marca de YouTube; un archivo propio no las tiene). */
.gh-hb__media--video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  border: 0;
}