/* =========================================================
   DEPORTES JIMMY — PANTALLAS GRANDES  (v7.31)

   Por qué existe este archivo
   ---------------------------------------------------------
   Todo el tema estaba topado en 1320 px de ancho. En una laptop
   se ve perfecto. En un iMac de 27" —que trabaja a 2560 px— eso
   deja 620 px de blanco a cada lado: más de un tercio de la
   pantalla vacío, y el catálogo apretado en el medio.

   Aquí NO se rediseña nada: se ensancha el contenedor por tramos
   y, a la vez, se meten más productos por fila. Las dos cosas
   juntas, porque solo ensanchar haría tarjetas gigantes de un
   producto cada una, que se ve peor que el problema original.

   Se carga el ÚLTIMO, después de todos los demás CSS del tema,
   para poder pisar los anchos que están escritos a mano en
   header.css, home.css y shop.css sin tener que tocarlos.

   Sobre 4K y 8K: lo que manda no son los píxeles físicos de la
   pantalla sino los que ve el navegador. Un monitor 4K a escala
   200% le dice a la web que mide 1920, no 3840 — por eso los
   tramos llegan hasta 3840 y ahí paran. Más allá de ese ancho el
   texto se lee de lejos, así que en vez de seguir estirando se
   agranda la letra base.
   ========================================================= */

:root {
  --dj-max: 1320px;   /* el de siempre: en pantallas normales nada cambia */
}

/* ---------------------------------------------------------
   TODOS LOS CONTENEDORES PASAN A DEPENDER DE LA MISMA VARIABLE
   Así se ensancha todo a la vez y nada queda descolgado.
   --------------------------------------------------------- */
.dj-container,
.dj-cat-tiles__grid {
  max-width: var(--dj-max);
}

/* Bloques que llevaban su propio ancho a mano */
.dj-upsell {
  max-width: min(var(--dj-max), 1280px);
}

@media (min-width: 1440px) {
  .dj-upsell { max-width: var(--dj-max); }
}


/* =========================================================
   LOS TRAMOS
   ========================================================= */

/* --- Portátil grande / monitor 1080p --- */
@media (min-width: 1440px) {
  :root { --dj-max: 1400px; }
}

/* --- Monitor 1440p pequeño --- */
@media (min-width: 1600px) {
  :root { --dj-max: 1540px; }

  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(4, 1fr) !important; }
}

/* --- 1080p a pantalla completa --- */
@media (min-width: 1800px) {
  :root { --dj-max: 1700px; }

  .dj-home-products__grid { grid-template-columns: repeat(5, 1fr) !important; }
  .dj-reels__grid         { grid-template-columns: repeat(5, 1fr); }
}

/* --- iMac 27" y monitores 1440p (el caso real) --- */
@media (min-width: 2000px) {
  :root { --dj-max: 1880px; }

  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(5, 1fr) !important; }

  .dj-cat-tiles__grid { grid-template-columns: repeat(4, 1fr); }
  .dj-gym-tiles__grid { grid-template-columns: repeat(4, 1fr); }

  /* La barra de filtros crece con la página, no se queda flaca */
  .dj-shop-layout { grid-template-columns: 1fr 360px; gap: 48px; }
}

/* --- 27" a resolución nativa / 4K escalado al 150% --- */
@media (min-width: 2400px) {
  :root { --dj-max: 2160px; }

  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(6, 1fr) !important; }

  .dj-home-products__grid { grid-template-columns: repeat(6, 1fr) !important; }
  .dj-home-blog__grid     { grid-template-columns: repeat(4, 1fr); }
  .dj-reels__grid         { grid-template-columns: repeat(6, 1fr); }

  .dj-shop-layout { grid-template-columns: 1fr 380px; }

  /* A partir de aquí la pantalla se mira de más lejos: la letra
     base sube y con ella TODO lo que está en rem o en clamp(). */
  html { font-size: 17px; }
}

/* --- 4K sin escalar --- */
@media (min-width: 3000px) {
  :root { --dj-max: 2560px; }

  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(7, 1fr) !important; }

  .dj-cat-tiles__grid { grid-template-columns: repeat(5, 1fr); }
  .dj-gym-tiles__grid { grid-template-columns: repeat(5, 1fr); }
  .dj-upsell__grid    { grid-template-columns: repeat(6, 1fr); }

  html { font-size: 18px; }
}

/* --- 5K y 8K --- */
@media (min-width: 3840px) {
  :root { --dj-max: 3000px; }

  /*
    Aquí se deja de ensanchar a propósito.

    Un renglón de texto de 3000 px ya es incómodo de leer: el ojo
    pierde el principio de la línea siguiente. Lo que se hace en
    vez de estirar más es agrandar la letra, que es lo que de
    verdad hace falta a esa distancia. La web queda centrada con
    margen a los lados, y eso está bien: es la misma decisión que
    toman Apple o Nike en sus tiendas.
  */
  html { font-size: 20px; }

  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(6, 1fr) !important; }
}


/* =========================================================
   AJUSTES FINOS PARA PANTALLA ANCHA
   ========================================================= */
@media (min-width: 1800px) {

  /* El header se pega a los bordes en pantallas anchas si no se
     le da aire: el logo a la izquierda del todo y el carrito a la
     derecha del todo, con medio metro de nada en medio. */
  .dj-header__inner { gap: 32px; }

  /* El hero a pantalla completa: que la foto llene, no que se
     estire hasta pixelarse. */
  .dj-hero { max-height: 82vh; }

  /* La sección de sucursales aprovecha el ancho, pero la columna
     de datos tiene un tope: si no, "DIRECCIÓN" y su texto quedan
     separados por 40 cm de blanco. */
  .dj-suc__panel { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .dj-suc__data  { padding: clamp(32px, 2.6vw, 56px); }
  .dj-suc__row-body { max-width: 520px; }
}

@media (min-width: 2400px) {
  /* Con la letra base más grande, los espacios de la escala del
     tema se quedan cortos en proporción. Se suben a la par. */
  :root {
    --dj-space-lg:  clamp(40px, 2.4vw, 64px);
    --dj-space-xl:  clamp(64px, 4vw, 110px);
    --dj-space-2xl: clamp(96px, 6vw, 160px);
  }
}


/* =========================================================
   PANTALLAS BAJITAS Y ANCHAS
   Un portátil de 1920×1080 con la barra de marcadores deja unos
   900 px de alto útil. El hero a 100vh se come la pantalla entera
   y el cliente no ve que hay web debajo.
   ========================================================= */
@media (min-width: 1200px) and (max-height: 800px) {
  .dj-hero { max-height: 88vh; }
}


/* =========================================================
   HOMBRE / MUJER EN PANTALLA ANCHA  (v7.32)

   La sección va de borde a borde, así que su ancho es el de la
   pantalla entera, no el del contenedor. En un iMac de 27" eso
   son 2560px: un 4:3 exacto daría 960px de alto y la sección se
   comería la pantalla completa ella sola.

   Por eso el tope de 840px, que empieza a actuar a partir de los
   2240px de ancho. De ahí para arriba las fotos quedan un poco
   más apaisadas que 4:3 — es el precio de que la sección siga
   cabiendo en pantalla junto con lo de abajo.
   ========================================================= */
@media (min-width: 2000px) {
  .dj-gender-split { --dj-gender-tope: 880px; }
}

@media (min-width: 2400px) {
  .dj-gender-split { --dj-gender-tope: 940px; }
  .dj-gender-split__col { padding: 64px; }
}