/**
 * JK Hive — logo de marca (assets/img/brand/jkhive-logo.png)
 * La imagen ES el logo completo (hexágono + texto). Origen: data/logoJKhive.png
 * No usar .jkhive-hex de la UI como contenedor.
 */

:root {
  /* Proporción hex vertical (ancho/alto del panal) */
  --jkhive-brand-logo-ratio: 1.1547;
  /* Proporción real del PNG jkhive-logo.png (810×946) */
  --jkhive-brand-logo-img-aspect: 0.8562;
  --jkhive-logo-square-size: 140px;
  --jkhive-logo-sidebar-fill: 0.94;
}

.jkhive-brand-logo {
  display: block;
  object-fit: contain;
  object-position: center;
  border: none;
  background: transparent !important;
  box-shadow: none;
  filter: none;
  margin: 0 auto;
  padding: 0;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  aspect-ratio: 810 / 946;
}

/* Grilla superior izquierda: el logo ocupa TODO el cuadrado 140×140 */
#jkhive-logo-square.jkhive-logo-square,
.jkhive-logo-square {
  padding: 0;
  box-sizing: border-box;
}

.jkhive-logo-square .jkhive-sidebar-logo {
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

.jkhive-logo-square .jkhive-sidebar-logo > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 0;
  flex: 1 1 auto;
  text-decoration: none;
}

/* Sidebar: ocupa casi todo el cuadrado 140×140 (antes el hex CSS era solo 90px) */
.jkhive-brand-logo--sidebar {
  height: calc(var(--jkhive-logo-square-size) * var(--jkhive-logo-sidebar-fill)) !important;
  width: calc(var(--jkhive-logo-square-size) * var(--jkhive-logo-sidebar-fill) * var(--jkhive-brand-logo-img-aspect)) !important;
  max-width: calc(var(--jkhive-logo-square-size) - 4px) !important;
  max-height: calc(var(--jkhive-logo-square-size) - 4px) !important;
}

.jkhive-logo-square:hover .jkhive-brand-logo--sidebar,
.jkhive-sidebar .jkhive-sidebar-logo:hover .jkhive-brand-logo--sidebar {
  transform: scale(1.04);
}

.jkhive-logo-square .jkhive-brand-logo--sidebar,
.jkhive-logo-square .jkhive-brand-logo {
  object-fit: contain !important;
  filter: none !important;
  background: transparent !important;
}

.hero-section .jkhive-editorial-hero-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.jkhive-brand-logo--hero {
  width: min(128px, 32vw) !important;
  height: auto !important;
  max-width: 100%;
}

.jkhive-brand-logo--hero-landing {
  width: min(260px, 90vw) !important;
  height: auto !important;
  max-width: 100%;
}

/* Vence hero-hex-animation.css (90px fijos en .jkhive-hex legacy) */
.hero-section .jkhive-editorial-hero-logo .jkhive-brand-logo--hero {
  width: min(128px, 34vw) !important;
  height: auto !important;
  max-height: none !important;
}

.hero-section .jkhive-editorial-hero-logo .jkhive-brand-logo--hero-landing,
.hero-section.jkfw-landing-basic-hero .jkhive-editorial-hero-logo .jkhive-brand-logo--hero-landing {
  width: min(260px, 90vw) !important;
  height: auto !important;
  max-height: none !important;
}

.jkhive-brand-logo--missing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  text-align: center;
  color: var(--jk-accent-honey-light, #f4c430);
  background: transparent;
}

.hero-jkhive-hub .jkhive-editorial-hero-logo > .jkhive-brand-logo--hero {
  position: relative;
  z-index: 3;
}

@media (max-width: 768px) {
  :root {
    --jkhive-logo-square-size: 101px;
  }

  .jkhive-brand-logo--sidebar {
    height: calc(var(--jkhive-logo-square-size) * var(--jkhive-logo-sidebar-fill)) !important;
    width: calc(var(--jkhive-logo-square-size) * var(--jkhive-logo-sidebar-fill) * var(--jkhive-brand-logo-img-aspect)) !important;
    max-width: calc(var(--jkhive-logo-square-size) - 4px) !important;
    max-height: calc(var(--jkhive-logo-square-size) - 4px) !important;
  }

  .jkhive-brand-logo--hero-landing,
  .hero-section.jkfw-landing-basic-hero .jkhive-editorial-hero-logo .jkhive-brand-logo--hero-landing {
    width: min(200px, 88vw) !important;
  }
}

@media (max-width: 992px) {
  .hero-jkhive-hub .jkhive-brand-logo--hero {
    width: min(96px, 24vw) !important;
    height: auto !important;
  }
}

@media (max-width: 768px) {
  .hero-jkhive-hub .jkhive-brand-logo--hero {
    width: min(88px, 22vw) !important;
    height: auto !important;
  }
}

@media (max-width: 576px) {
  .hero-jkhive-hub .jkhive-brand-logo--hero {
    width: min(80px, 20vw) !important;
    height: auto !important;
  }

  .jkhive-brand-logo--hero-landing {
    width: min(168px, 86vw) !important;
  }
}

@media (max-width: 480px) {
  .hero-jkhive-hub .jkhive-brand-logo--hero {
    width: min(72px, 18vw) !important;
    height: auto !important;
  }
}

@media (max-width: 400px) {
  .hero-jkhive-hub .jkhive-brand-logo--hero {
    width: min(68px, 17vw) !important;
    height: auto !important;
  }
}

.hero-section.hero-collapsed .hero-logo-wrapper .jkhive-editorial-hero-logo .jkhive-brand-logo {
  width: var(--hex-bar-size, 52px) !important;
  height: var(--hex-bar-height, calc(52px * 1.1547)) !important;
  object-fit: contain;
}

/* Landing básica: nunca mostrar logo editorial legacy si el HTML se revierte por error */
body.jkfw-landing-basic-body #jkhive-logo-square .jkhive-hex-jkhive-face,
body.jkfw-landing-basic-body #jkhive-logo-square .jkhive-logo-main-jkhive,
body.jkfw-landing-basic-body #jkhive-logo-square .jkhive-logo-sub-jkhive,
body.jkfw-landing-basic-body .jkfw-landing-basic-hero .jkhive-hex-jkhive-face,
body.jkfw-landing-basic-body .jkfw-landing-basic-hero .jkhive-logo-main-jkhive,
body.jkfw-landing-basic-body .jkfw-landing-basic-hero .jkhive-logo-sub-jkhive {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Logo PNG: sin texto editorial JK/HIVE legacy (evita HIVE suelto o como enlace) */
.jkhive-logo-square a:has(.jkhive-brand-logo) .jkhive-logo-sub-jkhive,
.jkhive-logo-square a:has(.jkhive-brand-logo) .jkhive-logo-main-jkhive,
.jkhive-logo-square:has(.jkhive-brand-logo) .jkhive-hex-jkhive-face,
.jkhive-logo-square:has(.jkhive-brand-logo) .jkhive-logo-editorial-head,
.jkhive-logo-square:has(.jkhive-brand-logo) .jkhive-logo-main-jkhive,
.jkhive-logo-square:has(.jkhive-brand-logo) .jkhive-logo-sub-jkhive {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.hero-section.jkfw-landing-basic-hero .jkhive-editorial-hero-logo:has(.jkhive-brand-logo) .jkhive-hex-jkhive-face,
.hero-section.jkfw-landing-basic-hero .jkhive-editorial-hero-logo:has(.jkhive-brand-logo) .jkhive-logo-editorial-head,
.hero-section.jkfw-landing-basic-hero .jkhive-editorial-hero-logo:has(.jkhive-brand-logo) .jkhive-logo-main-jkhive,
.hero-section.jkfw-landing-basic-hero .jkhive-editorial-hero-logo:has(.jkhive-brand-logo) .jkhive-logo-sub-jkhive {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.jkfw-landing-basic-hero-logo .jkhive-hero-logo-link {
  text-decoration: none;
  color: inherit;
}