/*
Aquí irán los estilos responsivos.
Este archivo será encolado después del style.css principal.
*/

/* MÓVIL PEQUEÑO (ej. <= 600px) */
@media (max-width: 600px) { 
  .container {
    width: 95%;
    padding: 15px 10px;
  }

  .site-title a {
    font-size: 1.6em;
    text-align: center;
    display: block;
  }

  .page-title, .section-title {
    font-size: 1.4em;
  }

  /* Listado de Grupos y Relacionados - 1 columna */
  .group-list-container .group-list-item, /* Aplica a todos los .group-list-item */
  .related-groups .group-list-container .group-list-item { /* Más específico si es necesario */
    flex-basis: 100%; 
  }

  /* Single Grupo - Layout y Sidebar apilados */
  /* Asegurando que estas reglas sean suficientemente específicas y anulen otras */
  body.single-grupo .single-grupo-layout-wrapper,
  div.single-grupo-layout-wrapper { /* Añadida especificidad con div si es necesario */
    display: flex !important; /* Asegurar que es flex */
    flex-direction: column !important; /* ESTA ES LA LÍNEA CLAVE para apilar */
    gap: 20px !important; /* Espacio entre contenido y sidebar cuando están apilados */
  }

  body.single-grupo .main-content-area-grupo,
  div.main-content-area-grupo, /* Añadida especificidad */
  body.single-grupo .widget-area-single-grupo,
  aside.widget-area-single-grupo { /* Añadida especificidad con aside */
    flex-basis: 100% !important; /* Ocupar todo el ancho cuando están apilados */
    width: 100% !important;
    max-width: 100% !important; /* Evitar que un max-width de escritorio interfiera */
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  
  .single-grupo-article .grupo-meta-info {
    flex-direction: column !important; /* Apilar verticalmente */
    gap: 15px !important; /* Espacio entre imagen y taxonomías */
  }

  .single-grupo-article .grupo-image-single {
    flex-basis: 100% !important; /* Imagen ocupa todo el ancho */
    max-width: 100% !important; /* Asegurar que no exceda el contenedor */
    margin-left: 0 !important;   /* Quitar márgenes automáticos si los tuviera */
    margin-right: 0 !important;
    margin-bottom: 0 !important; /* El gap del contenedor padre se encarga del espacio */
  }
  
  .single-grupo-article .grupo-image-single img {
    width: 100% !important; /* Asegurar que la imagen llene el div */
    height: auto !important; /* Mantener proporción */
    max-height: 350px !important; /* Limitar altura máxima de la imagen en móviles */
    object-fit: cover !important; 
    display: block !important; /* Por si acaso */
  }

  .single-grupo-article .grupo-taxonomies {
    flex-grow: 0 !important; /* No necesita crecer si está apilado */
    width: 100% !important;  /* Ocupar todo el ancho */
    /* padding-left: 10px; */ /* Opcional: un pequeño padding si el texto queda muy pegado a los bordes */
    /* padding-right: 10px; */
  }

  .single-grupo-article .grupo-taxonomies div { 
    margin-bottom: 10px !important; /* Espacio entre items de taxonomía */
  }
  .single-grupo-article .grupo-taxonomies div:last-child {
    margin-bottom: 0 !important;
  }

  .single-grupo-article .grupo-actions .button {
    flex-basis: calc(50% - 5px) !important; 
    text-align: center !important;
    font-size: 0.85em !important; 
    padding: 8px 10px !important;
  }
  /* Si hay un número impar de botones, el último ocupará todo el ancho */
  /* .single-grupo-article .grupo-actions .button:last-child:nth-child(odd) {
    flex-basis: 100% !important;
  } */
  /* Temporalmente, todos los botones de acción al 100% en móvil para probar si se aplican los estilos de fuente/padding */
   .single-grupo-article .grupo-actions .button {
    flex-basis: 100% !important; 
    margin-bottom: 10px !important; /* Espacio entre botones apilados */
  }
  .single-grupo-article .grupo-actions .button:last-child {
    margin-bottom: 0 !important;
  }

  /* Estilos para el buscador en el sidebar en móviles */
  .widget_search .search-form {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .widget_search .search-field,
  .widget_search input[type="search"],
  .widget_search .search-submit {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important; /* Asegurar que padding no aumente el tamaño total */
  }
  .widget_search .search-field:not(:last-child),
  .widget_search input[type="search"]:not(:last-child) {
    margin-bottom: 10px !important; 
  }
  .widget_search .search-submit {
      margin-bottom: 0; /* El botón de búsqueda no necesita margen inferior si es el último */
  }

  .post-navigation .nav-links, .posts-navigation .nav-links {
    flex-direction: column;
    gap: 10px;
  }
  .post-navigation .nav-previous, .posts-navigation .nav-previous,
  .post-navigation .nav-next, .posts-navigation .nav-next {
    width: 100%;
    text-align: center;
  }

  /* Formularios de búsqueda general y específicos en MÓVILES (<= 600px) */
  /* Apilarlos todos */
  .search-form { /* Aplica a todos los .search-form, incluyendo home y taxonomías */
    flex-direction: column !important; /* Importante para anular el flex-direction:row base */
    align-items: stretch !important; 
  }

  .search-form .search-field,
  .search-form .search-filter-select, /* Clase que se añadirá a los selects de taxonomía */
  .search-form .filter-item, /* Contenedor de input/select en taxonomías */
  .search-form .search-submit,
  .search-form input[type="search"],
  .search-form input[type="text"],
  .search-form select,
  .search-form button[type="submit"],
  .search-form input[type="submit"] {
    width: 100% !important; /* Asegurar ancho completo */
    min-width: auto !important; /* Anular min-widths de escritorio */
    flex-basis: auto !important; /* Anular flex-basis de escritorio */
    margin-left: 0 !important; /* Anular márgenes si los hubiera */
    margin-right: 0 !important;
  }
  
  /* Espacio entre elementos apilados en formularios de búsqueda */
  .search-form > *:not(:last-child) {
    margin-bottom: 10px;
  }

  /* Si los .filter-item están presentes, el margen inferior debe estar en ellos, no en sus hijos directos */
  .search-form .filter-item:not(:last-child) {
      margin-bottom: 10px;
  }
  .search-form .filter-item:last-of-type:not(:last-child) { /* Si el último filter-item no es el último hijo del form (ej. botón después) */
    margin-bottom: 10px;
  }
  /* Quitar margen inferior del último elemento del formulario si es un filter-item */
  .search-form .filter-item:last-child {
      margin-bottom: 0;
  }
  /* O si el último es el botón y el anterior fue un filter-item, quitarle el margen al filter-item */
   .search-form .filter-item:has(+ .search-submit) {
      margin-bottom: 10px; /* Mantener si el botón va después */
  }
   .search-form .search-submit:last-child {
      margin-bottom: 0;
  }


  /* Ajustes específicos que ya estaban y pueden mantenerse o integrarse */
  /* .taxonomy-search-form select, (ya cubierto por .search-form select) */
  /* .city-dropdown-form select, (ya cubierto por .search-form select) */
  /* .tag-dropdown-form select { (ya cubierto por .search-form select) */
    /* width: 100%; */ /* Cubierto */
    /* margin-bottom: 10px; */ /* Cubierto por la regla general de > *:not(:last-child) */
  /* } */

  /* .home-search-form .search-filter-select { (ya cubierto) */
      /* margin-bottom: 10px; */ /* Cubierto */
  }

  /* Footer en móviles */
  .footer-column {
        flex-basis: 100%; 
        min-width: unset; 
        margin-bottom: 20px; 
  }
  .footer-column:last-child {
        margin-bottom: 0;
  }
  .footer-bottom-content {
        flex-direction: column; 
        text-align: center; 
  }
  .footer-social {
        margin-top: 15px;
  }

    /* === Estilos Responsivos para el nuevo formato de lista de grupos (Home) === */
    /* MÓVIL PEQUEÑO (ej. <= 600px) - Ya estamos dentro de esta media query */
    
    /* Las reglas para ancho completo del .container en .home-section... están ahora en style.css como base.
       Se pueden eliminar de aquí si no hay necesidad de sobreescribirlas específicamente para este breakpoint.
       Si se dejan, actúan como refuerzo o para un caso donde style.css no aplique por especificidad.
       Por limpieza, las comentaré aquí ya que el padding de la fila ya está en style.css también.
    */
    /*
    .home-section.featured-groups-section .container,
    .home-section.latest-groups-section .container {
        width: 100%;
        max-width: none !important; 
        padding-left: 0;
        padding-right: 0;
    }
    */

    /* .group-list-item-row padding base ya está en style.css */
    /* Aquí podemos ajustar si es necesario para <= 600px específicamente */
    /* .group-list-item-row { */
        /* padding: 10px 15px; // Ejemplo si fuera diferente al base */
    /* } */

    .group-list-item-row .group-item-content {
        /* margin-bottom: 10px; // No necesario si todo está en una línea */
        /* width: 100%; // No necesario si es parte de un flex row */
    }
    
    .group-list-item-row .group-title {
        font-size: 0.9em; /* Reducido para móviles */
    }
    .group-list-item-row .group-meta {
        font-size: 0.75em; /* Reducido para móviles */
        /* flex-direction: column; // Comentado para probar diseño en una línea */
        /* align-items: flex-start; // Comentado */
    }
    .group-list-item-row .group-meta .meta-separator {
        /* display: none; // Mostrar separador si están en línea */
    }

    .group-list-item-row .group-join-action .button {
        /* width: 100%; // No si está en línea */
        padding: 4px 8px; /* Botones más pequeños */
        font-size: 0.8em;
    }

    /* Ajustar los listados de categorías/ubicaciones/tags en móviles */
    .home-section .category-grid,
    .home-section .location-grid,
    .home-section .tagcloud {
        gap: 8px;
    }
    .home-section .category-grid li a,
    .home-section .location-grid li a,
    .home-section .tagcloud a {
        font-size: 0.85em;
        padding: 6px 10px;
    }
}

/* CELULAR MEDIO / TABLET VERTICAL (ej. 601px a 768.98px) */
@media (min-width: 601px) and (max-width: 768.98px) {
    .container {
        width: 95%;
    }

    .site-title a {
        font-size: 1.8em; 
    }
    .page-title, .section-title {
        font-size: 1.6em; 
    }

    /* FORZAR APILAMIENTO DE FORMULARIOS DE BÚSQUEDA EN ESTE BREAKPOINT */
    .search-form { 
        flex-direction: column !important; 
        align-items: stretch !important; 
    }

    .search-form .search-field,
    .search-form .search-filter-select, 
    .search-form .filter-item, 
    .search-form .search-submit,
    .search-form input[type="search"],
    .search-form input[type="text"],
    .search-form select,
    .search-form button[type="submit"],
    .search-form input[type="submit"] {
        width: 100% !important; 
        min-width: auto !important; 
        flex-basis: auto !important; 
        margin-left: 0 !important; 
        margin-right: 0 !important;
    }
    
    .search-form > *:not(:last-child) {
        margin-bottom: 10px;
    }
    .search-form .filter-item:not(:last-child) {
        margin-bottom: 10px;
    }
     .search-form .filter-item:last-of-type:not(:last-child) {
        margin-bottom: 10px;
    }
    .search-form .filter-item:last-child {
        margin-bottom: 0;
    }
    .search-form .filter-item:has(+ .search-submit) {
        margin-bottom: 10px; 
    }
    .search-form .search-submit:last-child {
        margin-bottom: 0;
    }
    /* FIN DE FORZAR APILAMIENTO DE FORMULARIOS */

    .group-list-item-row { 
        padding-left: 15px;
        padding-right: 15px;
    }
    .group-list-item-row .group-title {
        font-size: 1em; 
    }
     .group-list-item-row .group-meta {
        font-size: 0.8em;
    }
    .group-list-item-row .group-join-action .button {
        padding: 5px 10px; 
        font-size: 0.85em;
    }

  /* Single Grupo - Stack on medium mobiles / vertical tablets */
  body.single-grupo .single-grupo-layout-wrapper,
  div.single-grupo-layout-wrapper {
    flex-direction: column !important;
  }
  body.single-grupo .main-content-area-grupo,
  div.main-content-area-grupo,
  body.single-grupo .widget-area-single-grupo,
  aside.widget-area-single-grupo {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

    .main-navigation {
        position: relative; 
    }
    .menu-toggle {
        display: block; 
        margin: 10px auto; 
    }
    .main-navigation ul {
        display: none; 
        flex-direction: column;
        width: 100%;
        background-color: var(--dark-gray-color); 
        position: absolute;
        top: 100%; 
        left: 0;
        z-index: 1000;
    }
    .main-navigation.toggled-on ul { 
        display: flex;
    }
    .main-navigation ul li {
        width: 100%;
        text-align: center;
        border-top: 1px solid rgba(255,255,255,0.1);
    }
    .main-navigation ul li:first-child {
        border-top: none;
    }
    /* Single Grupo Sidebar: En este breakpoint (601px a 768.98px), el sidebar de single-grupo 
       estará AL LADO del contenido porque la regla flex-direction:column para .single-grupo-layout-wrapper 
       solo se aplica hasta max-width: 600px. */
}

/* TABLET HORIZONTAL / PANTALLAS PEQUEÑAS (ej. 769px a 1199.98px) */
@media (min-width: 769px) and (max-width: 1199.98px) { 
    /* Listados principales (ignora Customizer, fuerza 2 columnas) */
    body.group-list-cols-3 .group-list-container:not(.related-groups-list) .group-list-item,
    body.group-list-cols-4 .group-list-container:not(.related-groups-list) .group-list-item, 
    body.group-list-cols-5 .group-list-container:not(.related-groups-list) .group-list-item,
    .group-list-container:not([class*='group-list-cols-']):not(.related-groups-list) .group-list-item { 
        flex-basis: calc(50% - 10px); 
    }
    /* Grupos Relacionados - también 2 columnas */
    .related-groups .group-list-container .group-list-item {
        flex-basis: calc(50% - 10px); 
    }

  /* Single Grupo - Stack on horizontal tablets / small desktops */
  body.single-grupo .single-grupo-layout-wrapper,
  div.single-grupo-layout-wrapper {
    flex-direction: column !important;
  }
  body.single-grupo .main-content-area-grupo,
  div.main-content-area-grupo,
  body.single-grupo .widget-area-single-grupo,
  aside.widget-area-single-grupo {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

    body.single-grupo .single-grupo-article .grupo-meta-info { 
         flex-wrap: nowrap; 
    }

    .group-list-item-row {
        font-size: 1.05em; /* Aumenta el tamaño de fuente base para las filas de grupo */
    }
}

/* ESCRITORIO (ej. >= 1200px) */
@media (min-width: 1200px) { 
    body {
        font-size: 1.125rem; /* Aumenta el tamaño base para escritorio (18px si html base es 16px) */
    }
    /* En escritorio, el .container general del tema debe aplicar su max-width y centrado.
       No se necesitan reglas específicas para .home-section .container aquí si ese es el comportamiento deseado.
       Si #primary o .site-main están causando que el contenido se vea "a un costado",
       se necesitaría revisar los estilos de esos elementos en style.css (base).
    */
    /* Ejemplo si se quisiera forzar que los metas siempre estén en línea en Desktop para la lista:
    .group-list-item-row .group-meta {
        flex-wrap: nowrap !important; 
        white-space: nowrap;
    }
    .group-list-item-row .group-item-content {
        gap: 15px; // Más espacio en desktop entre nombre y metas
    }
    */

    /* Ajustar tamaño de fuente para .group-list-item-row también en escritorio */
    .group-list-item-row {
        font-size: 1.05em; /* Esto será 1.05em del nuevo body font-size (1.125rem) */
    }

    /* === Listados Principales (controlados por Customizer) === */
    body.group-list-cols-3 .group-list-container:not(.related-groups-list) .group-list-item {
        flex-basis: calc(33.333% - 13.34px); /* (20px gap * 2) / 3 */
    }
    body.group-list-cols-4 .group-list-container:not(.related-groups-list) .group-list-item {
        flex-basis: calc(25% - 15px);    /* (20px gap * 3) / 4 */
    }
    body.group-list-cols-5 .group-list-container:not(.related-groups-list) .group-list-item {
        flex-basis: calc(20% - 16px);    /* (20px gap * 4) / 5 */
    }
    /* Fallback para escritorio si no hay clase específica del body (default a 3 columnas) */
    /* Para listados genéricos que no sean de búsqueda ni relacionados */
    .group-list-container:not([class*='group-list-cols-']):not(.related-groups-list):not(.search-results-list) .group-list-item {
         flex-basis: calc(33.333% - 13.34px); 
    }

    /* Los estilos específicos para la página de resultados de búsqueda en escritorio
       se manejarán en el siguiente paso para asegurar un diseño de fila única.
       Las reglas anteriores que intentaban forzar 3, 4, o 5 columnas para búsqueda aquí
       han sido eliminadas. */

    /* Aplicar ancho completo a los items en la página de búsqueda para escritorio */
    body.search-results .search-results-list .group-list-item {
        flex-basis: 100% !important; /* Asegura que ocupe todo el ancho */
        width: 100% !important; /* Refuerzo con width */
        margin-bottom: 15px; /* Espacio entre items de lista */
    }
    /* Quitar el gap del contenedor flex para que los items puedan ocupar el 100% sin problemas de cálculo con gap */
    body.search-results .search-results-list {
        gap: 0;
    }


    /* === Ajustes internos de fichas para 4 y 5 columnas en listados principales === */
    /* Comentado: Estos estilos son para el diseño de fichas, no para la nueva lista de la home. */
    /* Si se reutilizan en otras páginas de archivo, se deben mantener o refactorizar. */
    /*
    body.group-list-cols-4 .group-list-container:not(.related-groups-list) .group-list-item {
        padding: 12px; 
    }
    body.group-list-cols-4 .group-list-container:not(.related-groups-list) .group-list-item .entry-title {
        font-size: 1.1em; 
        margin-bottom: 4px;
    }
    // ... (resto de estilos de ficha para 4 y 5 columnas) ...
    */
    
    /* === Fin Ajustes internos de fichas === */

    /* Grupos Relacionados (siempre 3 columnas en escritorio, si todavía usan el formato de ficha .group-list-item) */
    /* Si los grupos relacionados también deben ser una lista, estos estilos necesitarán cambiar. */
    /* Asumiendo que los relacionados podrían seguir usando fichas por ahora: */
    .related-groups .group-list-container .group-list-item { /* Esta regla es para fichas */
        flex-basis: calc(33.333% - 13.34px); 
        flex-grow: 0; 
        flex-shrink: 0;
    }


    /* ESCRITORIO (ej. >= 1200px) */
    body {
        font-size: 1.125rem; /* Aumenta el tamaño base para escritorio (18px si html base es 16px) */
    }
    /* En escritorio, el .container general del tema debe aplicar su max-width y centrado.
       No se necesitan reglas específicas para .home-section .container aquí si ese es el comportamiento deseado.
       Si #primary o .site-main están causando que el contenido se vea "a un costado",
       se necesitaría revisar los estilos de esos elementos en style.css (base).
    */
    /* Ejemplo si se quisiera forzar que los metas siempre estén en línea en Desktop para la lista:
    .group-list-item-row .group-meta {
        flex-wrap: nowrap !important; 
        white-space: nowrap;
    }
    .group-list-item-row .group-item-content {
        gap: 15px; // Más espacio en desktop entre nombre y metas
    }
    */

    /* Otros estilos de escritorio */
    .main-navigation ul {
        justify-content: flex-start; 
    }
    .site-branding {
        flex-direction: row; 
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
    .custom-logo {
        margin-bottom: 0;
        margin-right: 20px;
    }
}

/* Móviles en modo horizontal (landscape) */
@media (orientation: landscape) and (max-height: 500px) { 
    .main-navigation ul li a {
        padding: 0.8em; 
    }
    @media (min-width: 568px) { 
        /* Listado principal y relacionados en 2 columnas en landscape móvil */
        /* Comentado si la home ya no usa fichas, o ajustar si aplica a otras vistas con fichas */
        /*
        .group-list-container .group-list-item { 
            flex-basis: calc(50% - 10px); 
        }
        */
    }
}

/* ESTILOS ESPECÍFICOS PARA MÓVILES MUY PEQUEÑOS (<= 486px) */
/* Sobrescribe algunos estilos de <=600px si es necesario para ocultar metas */
@media (max-width: 486px) {
  /* Los .container de las secciones de lista ya son de ancho completo por style.css */
  /* El padding de .group-list-item-row se ajusta aquí para ser más pequeño */
  .group-list-item-row {
      flex-direction: row !important; /* Asegurar que esté en fila, por si alguna regla anterior lo cambió */
      align-items: center !important; 
      justify-content: space-between;
      padding: 8px 10px; /* Padding más pequeño para estas pantallas */
  }
  .group-list-item-row .group-item-content {
    gap: 0; /* Sin espacio si solo está el título */
    margin-bottom: 0; /* Sin margen inferior si está en una fila */
  }
  .group-list-item-row .group-meta {
    display: none !important; /* Ocultar ciudad y categoría */
  }
  .group-list-item-row .group-title {
    font-size: 0.85em; /* Ajustar tamaño del título si es necesario */
    /* El text-overflow: ellipsis ya está en style.css */
  }
   .group-list-item-row .group-join-action .button {
      width: auto; /* Ancho automático para el botón */
      padding: 3px 6px;
      font-size: 0.75em;
  }

  /* Específico para Grupos Relacionados en móviles pequeños */
  .related-groups .group-list-item-row .group-title {
    font-size: 0.8em; /* Un poco más pequeño que en la home para esta vista */
  }
  .related-groups .group-list-item-row .group-meta {
    display: none !important; /* Ocultar meta también en relacionados para móviles */
  }
  .related-groups .group-list-item-row .group-join-action .button {
    padding: 2px 5px;
    font-size: 0.7em;
  }
  .related-groups .group-list-item-row .group-item-content {
    /* Si solo queda el título, asegurar que ocupe el espacio y permita ellipsis */
    flex-grow: 1;
    min-width: 0; /* Para que el ellipsis funcione en el título hijo */
  }
}