/* ==========================================================
   Museo Cisitalia — capa responsive (móvil)
   Solo actúa por debajo de 800px: el escritorio queda idéntico.
   ========================================================== */
@media (max-width: 767px) {
  html { -webkit-text-size-adjust: 100%; }
  body { background-attachment: scroll; background-size: auto 100%; }

  /* contenedores fijos a 760/770px -> fluidos */
  #generalcontainer, #header, #menu,
  #contentcontainer, #homecontentcontainer { width: 100%; }
  #headerimage, #mainmenu { width: 100%; box-sizing: border-box; }
  #maincolumn, #maincolumn2 { float: none; width: auto; }
  #maincolumn { padding: 1.25rem 1rem; }
  #contenido_principal { padding: 20px 16px 24px; }
  #listdiv { padding: 16px; }

  /* cabecera: logo a la izquierda, idiomas a la derecha */
  #logodiv { display: flex; align-items: flex-start; justify-content: space-between; padding: 0 16px; }
  #logimage { float: none; margin: 0 0 0 -16px; max-width: 62vw; height: auto; }
  #langmenu, .homepage #langmenu { float: none; margin: 0; padding: 2px 0 0 0 !important; white-space: nowrap; display: flex; align-items: center; }
  #langmenu li { display: flex; align-items: center; }
  #langmenu li { padding: 0 6px; }
  #langmenu li a { display: inline-block; padding: .75rem .25rem; min-width: 1.75rem; text-align: center; font-size: .8125rem; } /* área táctil 44px */

  /* slideshow (antes Flash) escalado 760:260 */
  #headerimage .slideshow { width: 100%; height: auto; aspect-ratio: 760 / 260; }
  #headerimage .slideshow img { width: 100%; height: 100%; object-fit: cover; }
  #headerimage:empty { display: none; }

  /* menú principal y submenú: pestañas con scroll horizontal si no caben */
  #menucontainer { float: none; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #menucompanion { display: none; }
  #menucontent, #listmenu { display: flex; flex-wrap: nowrap; white-space: nowrap; }
  #menucontent li, #listmenu li { float: none; flex: 0 0 auto; }
  #menucontent li a { padding: .75rem .875rem; }
  /* pestaña activa: como en escritorio, 2px más baja que las demás ("pulsada") y con la misma base */
  #menucontent li a.menuselecteda { padding: 7px .875rem 9px; margin-top: 7px; }
  /* pestañas de sección: 28px de alto visible = altura de las esquinas (sub_menu_*_corner.png);
     la zona táctil sigue siendo de 44px con un área invisible de 8px arriba y abajo */
  #listmenu { margin: -8px 0 -8px; padding: 8px 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #listmenu::-webkit-scrollbar, #menucontainer::-webkit-scrollbar { display: none; }
  #listmenu li a { position: relative; padding: 6px 15px; line-height: 16px; font-size: 14px; }
  #listmenu li a::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }

  /* degradado "hay más pestañas": solo si de verdad no caben (ui.js añade .tabs-overflow) */
  #maincolumn2.tabs-overflow::after { content: ""; position: absolute; right: 0; bottom: 8px; width: 28px; height: 28px; pointer-events: none; background: linear-gradient(to right, rgba(114,110,119,0), #726E77); }

  /* imágenes con tamaños fijos en el contenido (editor WYSIWYG del CMS) */
  #maincolumn div[style*="float"] { float: none !important; margin: 0 0 15px !important; }
  .ds_content iframe.yt { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; display: block; margin: 0 0 15px; }
  .ds_content img { max-width: 100% !important; height: auto !important; }
  #listdiv img { float: none; }
  /* Storia: la primera foto (Nuvolari, 300px en línea) a todo el ancho del texto */
  #maincolumn img[style*="width: 300px"] { float: none !important; display: block; width: 100% !important; margin: 0 0 15px !important; }

  /* tablas de revistas/libros/catálogos -> fichas: título / "1947 · Italy · IT" + botón en la misma línea */
  #tablelist, #tablelist tbody { display: block; width: auto; }
  #tablelist tr:first-child { display: none; }           /* sin cabecera ni etiquetas: fecha, país e idioma se leen solos */
  #tablelist tr { display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; padding: 14px 0; border-bottom: 1px solid #655F69; }
  #tablelist td { display: block; padding: 0; border: none; min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
  #tablelist td.yellowtd { flex: 0 0 100%; font-size: 1rem; }
  #tablelist td.yellowtd a { display: block; padding: .375rem 0; font-size: 1rem; }
  #tablelist td[data-label] { flex: 0 1 auto; }          /* un idioma largo ("Italian/English/French") parte línea en su celda, el botón no baja */
  #tablelist td[data-label] + td[data-label]::before { content: "·"; margin: 0 .5em; opacity: .55; }
  #tablelist td.dltd { flex: none; margin-left: auto; padding: 0 0 0 12px; }
  #tablelist td.dltd.empty { display: none; }

  /* galerías de miniaturas: rejilla fluida */
  #listdiv ul.ds_gallery_thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px 12px; }
  #listdiv ul.ds_gallery_thumbs li { float: none; min-height: 0; padding: 0 !important; width: auto !important; height: auto !important; margin: 0 !important; }
  #listdiv ul.ds_gallery_thumbs li img { width: 100%; height: auto; }
  #listdiv ul.ds_gallery_thumbs li span { display: block; font-size: var(--fs-xs); line-height: 1.35; }

  /* home: menú arriba (como en las páginas interiores) → línea → coche → título y texto.
     Solo cambia el orden visual; foto y texto no tienen enlaces, así que el orden del teclado coincide. */
  #homecontentcontainer { display: flex; flex-direction: column; padding-top: 0; }
  #homemenu { order: -1; width: auto; margin: 0 16px; border-top: 0; border-bottom: 1px solid #4D4D4D; }
  #homeimage, #hometext { float: none; width: auto; }
  #homeimage { margin-top: 16px; }
  #homeimage img { width: 100%; height: auto; display: block; }
  #hometext { padding: 20px 16px; }
  #homemenu ul { display: flex; flex-wrap: wrap; column-gap: 1.5rem; }
  #homemenu ul li { float: none; }
  #homemenu ul li a { display: block; padding: .75rem 0; }

  /* pies */
  #footer, #homefooter { width: auto; height: auto; display: flex; flex-wrap: wrap; gap: 10px; padding: 16px; }
  #footer_left, #footer_right, #home_footer_left, #home_footer_right { float: none; width: auto; margin: 0; padding: 0; }
  #home_footer_right { display: flex; align-items: center; gap: 12px; }
  #home_footer_right img { max-width: 100px; height: auto; }

}

/* móviles pequeños */
@media (max-width: 380px) {
  #menucontent li a { padding: 8px 10px; }
  #menucontent li a.menuselecteda { padding: 3px 10px 5px; }
  #listdiv ul.ds_gallery_thumbs { grid-template-columns: 1fr 1fr; }
}