/* ===========================================================
   Responsive — transferido de Maqueta_Malba/style/responsive.css
   (entrega del 2026-09-11, la primera que trae el trabajo de mobile).

   POR QUÉ VA EN UN ARCHIVO APARTE
   -------------------------------
   Porque así lo separa la maqueta, y conviene mantener la correspondencia: al
   llegar una entrega nueva se compara archivo contra archivo en vez de buscar
   las media queries mezcladas entre 1800 líneas de custom.css.

   Se carga DESPUÉS de custom.css (ver conf/assets.conf), que es lo que hace
   que estas reglas ganen a igual especificidad.

   OJO CON LO QUE YA ESTÁ EN custom.css
   ------------------------------------
   custom.css tiene cuatro media queries propias, escritas por nosotros para
   cosas que la maqueta no contempla por ser estática:
     - (max-width: 1023px) y (max-width: 480px), líneas ~545 y ~554: el alto
       del body y el menú overlay. Header y footer YA funcionan en mobile, así
       que acá no se tocan.
     - (max-width: 1023px) y (max-width: 520px), líneas ~1224 y ~1236: el
       encabezado del browse cuando hay control de orden. Hoy ese control está
       oculto por pedido del cliente, así que esas reglas no hacen nada, pero
       quedan por si vuelve.

   LO QUE HUBO QUE ADAPTAR, Y ES LA TRAMPA DE SIEMPRE
   -------------------------------------------------
   La maqueta corre `.grid` y `.list` cuando se abren los filtros; nuestro
   theme corre `> .browse-results-col`, un contenedor que agregamos nosotros y
   que la maqueta no tiene. Copiar el selector de la maqueta tal cual haría que
   el listado se desplace DOS veces —ya pasó en el theme de EFC, ver
   bitacora-malba.md—. Por eso abajo va nuestro selector.
   =========================================================== */


/***TABLETS Y NOTEBOOKS CHICAS
*****************************************************/
@media (min-width: 481px) and (max-width: 1023px) {
    :root {
        --fontSizeXSmall: 0.9rem;
        --fontSizeSmall: 0.9rem;
        --fontSizeMedium: 1.2rem;
        --fontSizeLarge: 2.5rem;
        --fontSizeXLarge: 2.5rem;
        --fontSizeLogo: 1rem;
        --spaceX: calc(var(--fontSizeSmall) * var(--lineHeightHigh));
        --spaceY: calc(var(--fontSizeSmall) * var(--lineHeightHigh));
        --colGutter: calc(var(--spaceX) * 0.5);
        --headerHeight: calc(var(--spaceY)*1 + var(--rowGutterMedium));
    }

    /* Encabezado de sección: el bloque de acciones deja de ocupar media
       pantalla. */
    section .section_header .header_actions {
        width: calc(var(--colWidth) * 7 + var(--colGutter) * 6);
    }

    /* Barra de búsqueda: menos aire vertical. */
    .search {
        padding-block: calc(var(--spaceY)*0.5);
    }

    /* Vista de lista: los encabezados de columna no envuelven, se cortan con
       puntos suspensivos. */
    .list .list_header > * {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .list_row .row_link .row_media {
        grid-column: 1 / 3;
    }
}


/***CELULARES
*****************************************************/
@media (max-width: 480px) {
    :root {
        --fontSizeXSmall: 0.75rem;
        --fontSizeSmall: 1rem;
        --fontSizeMedium: 1.3rem;
        --fontSizeLarge: 1.9rem;
        --fontSizeXLarge: 2.5rem;
        --fontSizeLogo: 1.3rem;
        --spaceX: calc(var(--fontSizeSmall) * var(--lineHeightHigh));
        --spaceY: calc(var(--fontSizeSmall) * var(--lineHeightHigh));
        --colGutter: calc(var(--spaceX) * 0.5);
        --headerHeight: calc(var(--spaceY)*2 + var(--rowGutterMedium));
    }

    /* El encabezado de sección pasa a dos renglones: título arriba, acciones
       abajo. */
    section .section_header {
        flex-direction: column;
        align-items: start;
    }
    section .section_header .header_title {
        margin-bottom: calc(var(--rowGutterSmall)*0.5);
    }
    section .section_header .header_actions {
        justify-content: start;
        width: 100%;
    }

    /* Barra de búsqueda: "Obras / Artistas" arriba y el buscador DEBAJO, en
       vez de los dos en la misma línea. Sin esto quedan uno encima del otro:
       a 420 px cada mitad mide 182 px y el texto se superpone. */
    .search {
        flex-direction: column;
        row-gap: calc(var(--spaceY)*0.5);
    }
    .search .search_nav,
    .search .search_actions {
        width: 100%;
    }

    /* Grilla de obras: de cuatro columnas a dos (span 6 de 12). */
    .grid .grid_item {
        grid-column: span 6;
    }

    /* Panel de filtros: en celular ocupa casi toda la pantalla y empuja al
       listado fuera de la vista, en vez de convivir con él.

       ACÁ ESTÁ LA ADAPTACIÓN: la maqueta escribe
           .filterable.filters_on .grid, .filterable.filters_on .list, …
       y nuestro theme envuelve los resultados en `.browse-results-col`. Con el
       selector de la maqueta el desplazamiento se aplicaría al contenedor Y a
       la grilla de adentro, o sea dos veces. */
    .filterable.filters_on > .browse-results-col,
    .filterable.filters_on .filters {
        right: calc(var(--colWidth) * 12 + var(--colGutter) * 13);
    }
    .filterable.filters_on .filters {
        width: calc(100vw - var(--spaceX)*2);
    }

    /* Vista de lista: solo imagen y título; el resto de las columnas no entra
       y se oculta. */
    .list_row .row_link .row_media {
        grid-column: 1 / 7;
    }
    .list_row .row_link .row_title {
        grid-column: 7 / 13;
    }
    .list .list_header,
    .list_row .row_link .row_location,
    .list_row .row_link .row_date,
    .list_row .row_link .row_count {
        display: none;
    }

    /* Abecedario de artistas: envuelve en varias líneas. */
    .artists > .alphabet {
        gap: calc(var(--spaceY) * 0) calc(var(--spaceX) * 0.5);
        flex-wrap: wrap;
    }
}