/* LAIREN AI — HOME DESKTOP DESIGN SYSTEM V57
   Una sola escala de tamanos para todos los componentes de HOME.
   Se carga al final para unificar reglas historicas; no afecta mobile.
   Revisar esta hoja para ajustes tipograficos futuros, no agregar
   nuevas versiones en cada CSS de componentes. */
@media (min-width: 1101px) {
  #home-page {
    --home-type-section: 17px;
    --home-type-feature: 17px;
    --home-type-item: 13px;
    --home-type-data: 11px;
    --home-type-label: 10px;
    --home-type-small: 9px;
    --home-space: 7px;
    --home-card-gap: 10px;
    --home-page-inset: 8px;

    /* El header de escritorio mide 37px mas su borde: 38px.
       El layout antiguo descontaba 48px y dejaba una franja vacia. */
    /* Alto real del viewport: conservar una HOME visible completa
       en la resolucion de escritorio 1366x768 con Chrome. */
    height: calc(100dvh - 38px) !important;
    max-height: calc(100dvh - 38px) !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    /* HERO y destacados contenidos; toda la altura restante
       se reserva para las 8 filas y los 4 torneos. */
    grid-template-rows:
      clamp(134px, 21.5dvh, 160px)
      clamp(112px, 17.5dvh, 134px)
      minmax(0, 1fr) !important;
    gap: var(--home-space) !important;
    overflow: hidden !important;
    isolation: isolate;
    padding: 5px 12px 6px !important;
  }

  html:has(#home-page),
  body:has(#home-page) {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  #home-page > .home-mobile-fold {
    display: contents !important;
  }

  /* Las secciones tienen su propia fila: sin superposiciones ni
     desplazamientos heredados de pruebas anteriores. */
  #home-page > .home-mobile-fold > .hero {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: relative !important;
    z-index: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
    isolation: isolate !important;
  }

  /* V57 — Imagen panoramica unificada: el arte original conserva
     su transparencia natural, ahora compuesta SOBRE un escenario
     azul continuo. No hay mascara ni sombra artificial. */
  #home-page > .home-mobile-fold > .hero {
    background-color: #04101f !important;
    background-image: url('/static/img/home/home-banner-seamless-v57.svg?v=57') !important;
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  /* No se permiten capas superpuestas que oscurezcan el banner. */
  #home-page > .home-mobile-fold > .hero::before,
  #home-page > .home-mobile-fold > .hero::after {
    display: none !important;
    content: none !important;
  }

  #home-page > .home-mobile-fold > .hero .hero-shell {
    position: relative !important;
    z-index: 1 !important;
  }

  #home-page > .home-mobile-fold > section.meta-summary,
  #home-page > .home-bottom-grid {
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
    width: calc(100% - var(--home-page-inset)) !important;
    max-width: calc(100% - var(--home-page-inset)) !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 0 0 var(--home-page-inset) !important;
    overflow: hidden !important;
  }

  #home-page > .home-mobile-fold > section.meta-summary {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  /* Los cuatro destacados crecen 10px HACIA ARRIBA; su borde
     inferior se queda donde estaba. La fila de Top Mazos y Torneos
     no se desplaza ni pierde altura. El HERO conserva su propia fila. */
  #home-page > .home-mobile-fold > section.meta-summary {
    top: -10px !important;
    height: calc(100% + 10px) !important;
    max-height: none !important;
  }

  /* Un poco de aire debajo de las ultimas estadisticas. */
  #home-page > .home-mobile-fold > section.meta-summary .hf-card-info {
    padding-bottom: 11px !important;
  }

  #home-page > .home-mobile-fold > section.meta-summary > .container,
  #home-page > .home-mobile-fold > section.meta-summary .meta-grid {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    transform: none !important;
    overflow: hidden !important;
  }

  #home-page > .home-mobile-fold > section.meta-summary .meta-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: var(--home-card-gap) !important;
  }

  #home-page > .home-mobile-fold > section.meta-summary .hf-card {
    height: 100% !important;
    min-height: 0 !important;
  }

  #home-page > .home-bottom-grid {
    grid-column: 1 !important;
    grid-row: 3 !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: var(--home-card-gap) !important;
  }

  #home-page > .home-bottom-grid > section,
  #home-page > .home-bottom-grid > section > .container {
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
  }

  body:has(#home-page) > footer.site-footer,
  body:has(#home-page) footer.site-footer {
    display: none !important;
  }

  /* Una misma jerarquia tipografica para todos los paneles. */
  #home-page .home-bottom-grid .home-panel-title-wrap h2 {
    font-size: var(--home-type-section) !important;
    line-height: 1.08 !important;
  }

  #home-page .home-bottom-grid .home-panel-link {
    font-size: var(--home-type-label) !important;
  }

  #home-page .meta-summary .hf-card-heading {
    font-size: var(--home-type-data) !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
  }

  #home-page .meta-summary .hf-card h3 {
    font-size: var(--home-type-feature) !important;
    font-weight: 800 !important;
    height: 21px !important;
    min-height: 21px !important;
    line-height: 21px !important;
  }

  #home-page .meta-summary .hf-card-metric {
    font-size: var(--home-type-label) !important;
    line-height: 16px !important;
    font-weight: 600 !important;
  }

  /* La tarjeta principal del HERO tiene un espacio real en la
     primera fila de la grilla, en vez de rebalsar sobre los destacados. */
  #home-page .hero-shell {
    grid-template-columns: 294px minmax(0, 1fr) 322px !important;
    gap: 8px !important;
    padding: 2px 10px !important;
  }

  #home-page .hero-card-leaders.hero-card-most-played {
    box-sizing: border-box !important;
    width: 310px !important;
    height: 126px !important;
    min-height: 0 !important;
    max-height: calc(100% - 2px) !important;
    align-self: start !important;
    justify-self: end !important;
    overflow: hidden !important;
  }

  #home-page .hero-card-leaders .hero-card-leader-panel {
    grid-template-columns: minmax(0, 1fr) 36% !important;
  }

  #home-page .hero-card-leaders .hero-card-body {
    padding: 8px 5px 7px 13px !important;
    overflow: hidden !important;
  }

  #home-page .hero-card-leaders .hero-card-art {
    margin: 5px 7px 5px 0 !important;
  }

  #home-page .hero-card-leaders .hero-card-body h2 {
    min-height: 0 !important;
    max-height: 30px !important;
    margin-top: 4px !important;
    -webkit-line-clamp: 2 !important;
  }

  #home-page .hero-card-leaders .hero-card-value {
    margin-top: 5px !important;
  }

  #home-page .hero-card-leaders .hero-card-metrics {
    padding-right: 0 !important;
  }

  /* Carta mas usada: texto secundario legible, numero proporcionado. */
  #home-page .hero-card-leaders .hero-card-eyebrow {
    font-size: var(--home-type-small) !important;
    line-height: 1.08 !important;
  }

  #home-page .hero-card-leaders .hero-card-body h2 {
    font-size: 13.3px !important;
    line-height: 1.08 !important;
  }

  #home-page .hero-card-leaders .hero-card-value {
    font-size: 19px !important;
    line-height: 1 !important;
  }

  #home-page .hero-card-leaders .hero-card-caption {
    font-size: var(--home-type-small) !important;
  }

  #home-page .hero-card-leaders .hero-card-metrics {
    font-size: var(--home-type-small) !important;
    gap: 3px !important;
    margin-top: 5px !important;
    line-height: 1.08 !important;
  }

  #home-page .hero-card-leaders .hero-card-metrics strong {
    font-size: var(--home-type-label) !important;
  }

  /* TOP MAZOS: etiquetas, cifras y nombres en una escala unica. */
  #home-page .home-bottom-grid .top-decks .ranking-header {
    font-size: 10px !important;
    font-weight: 700 !important;
  }

  #home-page .home-bottom-grid .top-decks .rank-number {
    font-size: var(--home-type-item) !important;
  }

  #home-page .home-bottom-grid .top-decks .deck-name strong {
    font-size: var(--home-type-item) !important;
    font-weight: 740 !important;
    line-height: 1.12 !important;
  }

  #home-page .home-bottom-grid .top-decks .metric-text,
  #home-page .home-bottom-grid .top-decks .ranking-trend {
    font-size: var(--home-type-data) !important;
    font-weight: 650 !important;
    line-height: 1.1 !important;
  }

  #home-page .home-bottom-grid .top-decks .wr-pill {
    font-size: var(--home-type-data) !important;
    min-width: 42px !important;
  }

  /* La cabecera y la lista comparten las ocho filas reales,
     sin alturas minimas capaces de expulsar las ultimas entradas. */
  #home-page .home-bottom-grid .top-decks .ranking-table {
    height: calc(100% - 28px) !important;
    min-height: 0 !important;
    grid-template-rows: 22px repeat(8, minmax(0, 1fr)) !important;
    overflow: hidden !important;
  }

  #home-page .home-bottom-grid .top-decks .ranking-row {
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  #home-page .home-bottom-grid .top-decks .deck-emblem {
    height: 22px !important;
    width: 22px !important;
    flex-basis: 22px !important;
  }

  #home-page .home-bottom-grid .competitive-activity .activity-carousel {
    height: calc(100% - 27px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* Torneos: mismos rangos que Top Mazos, sin nombres diminutos. */
  #home-page .home-bottom-grid .competitive-activity .activity-card {
    min-width: 0 !important;
    grid-template-rows: 48px minmax(0, 1fr) !important;
  }

  #home-page .home-bottom-grid .competitive-activity .activity-carousel {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    min-width: 0 !important;
    width: 100% !important;
    gap: 7px !important;
  }

  #home-page .home-bottom-grid .competitive-activity .activity-card-body {
    min-height: 0 !important;
    padding: 5px 6px 6px !important;
  }

  #home-page .home-bottom-grid .competitive-activity .event-type {
    font-size: var(--home-type-small) !important;
  }

  #home-page .home-bottom-grid .competitive-activity .activity-card h3 {
    font-size: 11.4px !important;
    font-weight: 700 !important;
    line-height: 1.14 !important;
    min-height: 29px !important;
    -webkit-line-clamp: 3 !important;
  }

  #home-page .home-bottom-grid .competitive-activity .event-fact {
    font-size: var(--home-type-label) !important;
    line-height: 1.08 !important;
  }

  #home-page .home-bottom-grid .competitive-activity .event-result small {
    font-size: var(--home-type-small) !important;
  }

  #home-page .home-bottom-grid .competitive-activity .event-result strong {
    font-size: 10.4px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    max-height: 27px !important;
  }

  #home-page .home-bottom-grid .competitive-activity .event-result span {
    font-size: 9.7px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
  }
}

/* Pantallas de escritorio muy bajas: prevenir cortes de texto. */
@media (min-width: 1101px) and (max-height: 590px) {
  #home-page {
    --home-space: 6px;
    --home-type-feature: 16px;
    --home-type-item: 13px;
    --home-type-data: 11px;
    --home-type-label: 10px;
    --home-type-small: 9px;
    /* La grilla reparte el espacio disponible, sin minimos absolutos. */
    grid-template-rows: 128px 108px minmax(0, 1fr) !important;
  }

  #home-page .hero-card-leaders.hero-card-most-played {
    height: 140px !important;
  }

  #home-page .home-bottom-grid .competitive-activity .activity-card h3 {
    min-height: 32px !important;
    font-size: 11px !important;
  }
}