/* GREMAB — Recursos & Eventos catalogs: filters, cards, badges, pagination.
 * Loaded on the front end and inside the editor (enqueue_block_assets).
 */

.gremab-catalog {
  --gremab-navy: var(--wp--preset--color--primary, #001525);
  --gremab-navy-2: var(--wp--preset--color--primary-container, #012a44);
  --gremab-yellow: var(--wp--preset--color--secondary-container, #fdae03);
  --gremab-gold: var(--wp--preset--color--secondary, #805600);
  --gremab-muted: var(--wp--preset--color--on-surface-variant, #42474d);
  --gremab-line: var(--wp--preset--color--outline-variant, #c2c7ce);
  --gremab-soft: var(--wp--preset--color--surface-container, #e5eeff);
  scroll-margin-top: 1rem;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* ── Filter bar ── */
.gremab-filtros {
  background: #ffffff;
  border: 1px solid var(--gremab-line);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2.5rem;
}

.gremab-filtros__search {
  display: flex;
  max-width: 560px;
}

.gremab-filtros__search input[type="search"] {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 1rem;
  border: 1px solid var(--gremab-line);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--gremab-navy);
  background: #ffffff;
}

.gremab-filtros__search input[type="search"]:focus,
.gremab-filtros select:focus {
  outline: 2px solid var(--gremab-yellow);
  outline-offset: 1px;
}

.gremab-filtros__search-btn {
  width: 52px;
  height: 46px;
  border: 0;
  border-radius: 0 8px 8px 0;
  background: var(--gremab-yellow);
  color: var(--gremab-navy);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gremab-filtros__advanced {
  margin-top: 0.9rem;
}

.gremab-filtros__advanced summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--gremab-navy);
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--gremab-line);
  border-radius: 999px;
  user-select: none;
}

.gremab-filtros__advanced summary::-webkit-details-marker {
  display: none;
}

.gremab-filtros__advanced[open] summary {
  background: var(--gremab-soft);
  border-color: var(--gremab-navy-2);
}

.gremab-filtros__advanced summary .material-symbols-outlined {
  font-size: 18px;
}

.gremab-filtros__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
  align-items: end;
}

.gremab-filtros__field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gremab-muted);
  margin-bottom: 0.35rem;
}

.gremab-filtros select {
  width: 100%;
  height: 46px;
  padding: 0 0.75rem;
  border: 1px solid var(--gremab-line);
  border-radius: 8px;
  background: #ffffff;
  font: inherit;
  font-size: 0.92rem;
  color: var(--gremab-navy);
}

.gremab-filtros__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 46px;
}

.gremab-filtros__apply {
  height: 46px;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 8px;
  background: var(--gremab-navy);
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}

.gremab-filtros__clear {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gremab-muted);
}

/* ── Badges (Post Terms blocks) ── */
.gremab-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  font-size: 0;
}

.gremab-term {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.65rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  background: #ffffff;
  color: var(--gremab-navy);
  border: 1px solid var(--gremab-line);
}

.gremab-term--exclusivo-socios,
.gremab-term--publico {
  font-weight: 700;
}

.gremab-term--exclusivo-socios {
  background: var(--gremab-navy);
  border-color: var(--gremab-navy);
  color: #ffffff;
}

.gremab-term--exclusivo-socios::before,
.gremab-term--publico::before {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-size: 15px;
  line-height: 1;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
}

.gremab-term--exclusivo-socios::before {
  content: 'lock';
}

.gremab-term--publico::before {
  content: 'public';
}

.gremab-badge--tipo .gremab-term {
  background: #fff4d6;
  border-color: #f6d88a;
  color: var(--gremab-gold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Cards (shared) ── */
.gremab-card {
  background: #ffffff;
  border: 1px solid var(--gremab-line);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.gremab-card:hover {
  transform: translateY(-4px);
  border-color: var(--gremab-navy-2);
  box-shadow: 0 6px 20px rgba(1, 42, 68, 0.1);
}

.gremab-card .wp-block-post-featured-image {
  margin: 0;
  background: var(--gremab-soft);
}

.gremab-card .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.gremab-card__body {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.5rem 1.5rem;
}

.gremab-card .wp-block-post-title {
  margin: 0.25rem 0 0.5rem;
  line-height: 1.3;
}

.gremab-card .wp-block-post-title a {
  color: var(--gremab-navy);
  text-decoration: none;
}

.gremab-card .wp-block-post-title a:hover {
  text-decoration: underline;
}

.gremab-card .wp-block-post-excerpt {
  margin: 0;
  color: var(--gremab-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.gremab-card .wp-block-post-excerpt__excerpt {
  margin: 0;
}

.gremab-card .wp-block-post-excerpt__more-text {
  display: none;
}

/* ── Recursos: 3-column grid, badges over the thumbnail ── */
.wp-block-post-template.gremab-recursos-grid {
  gap: 2rem;
}

.gremab-card--recurso {
  display: flex;
  flex-direction: column;
}

.gremab-card--recurso .gremab-card__media,
.gremab-card--proxima .gremab-card__media {
  position: relative;
}

.gremab-card--recurso .gremab-card__media .gremab-badge--acceso,
.gremab-card--proxima .gremab-card__media .gremab-badge--acceso {
  position: absolute;
  top: 12px;
  left: 12px;
}

.gremab-card--recurso .gremab-card__media .gremab-badge--tipo {
  position: absolute;
  top: 12px;
  right: 12px;
}

.gremab-card--recurso .gremab-card__body {
  flex: 1;
}

.gremab-card__footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--gremab-line);
}

.gremab-card--recurso .gremab-card__footer {
  margin-top: 1.25rem;
}

.gremab-card__year {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gremab-muted);
}

.gremab-card__year .gremab-term {
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.82rem;
  color: var(--gremab-muted);
}

.gremab-card__more.wp-block-read-more {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gremab-navy);
  text-decoration: none;
}

.gremab-card__more.wp-block-read-more:hover {
  color: var(--gremab-gold);
}

/* ── Próximas actividades (Inicio): same card, event type as a gold label ── */
.gremab-card--proxima {
  display: flex;
  flex-direction: column;
}

.gremab-card--proxima .gremab-card__body {
  flex: 1;
}

.gremab-card__label {
  margin: 0;
}

.gremab-card__label .gremab-term {
  padding: 0;
  border: 0;
  background: none;
  color: var(--gremab-gold);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media (max-width: 1024px) {
  .wp-block-post-template.gremab-recursos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .wp-block-post-template.gremab-recursos-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ── Eventos: horizontal cards, image on the left ── */
.wp-block-post-template.gremab-eventos-list {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.gremab-card--evento {
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  align-items: stretch;
}

.gremab-card--evento .wp-block-post-featured-image {
  height: 100%;
}

.gremab-card--evento .wp-block-post-featured-image img {
  height: 100%;
  min-height: 240px;
}

.gremab-card--evento .gremab-card__body {
  justify-content: center;
  padding: 1.75rem 2rem;
}

.gremab-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.gremab-card--evento .wp-block-post-title {
  font-size: var(--wp--preset--font-size--xl, 1.5rem);
}

.gremab-card--evento .gremab-card__more.wp-block-read-more {
  align-self: flex-start;
  margin-top: 1.25rem;
  padding: 0.6rem 1.4rem;
  border: 1.5px solid var(--gremab-navy);
  border-radius: 10px;
}

.gremab-card--evento .gremab-card__more.wp-block-read-more:hover {
  background: var(--gremab-navy);
  color: #ffffff;
}

@media (max-width: 781px) {
  .gremab-card--evento {
    grid-template-columns: minmax(0, 1fr);
  }
  .gremab-card--evento .wp-block-post-featured-image img {
    min-height: 0;
  }
  .gremab-card--evento .gremab-card__body {
    padding: 1.25rem 1.5rem 1.5rem;
  }
}

/* ── Pagination ── */
.gremab-pagination {
  margin-top: 3rem;
  gap: 0.5rem;
}

.gremab-pagination .page-numbers,
.gremab-pagination .wp-block-query-pagination-previous,
.gremab-pagination .wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 0.85rem;
  margin: 0 0.2rem;
  border: 1px solid var(--gremab-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--gremab-navy);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}

.gremab-pagination .page-numbers.current {
  background: var(--gremab-navy);
  border-color: var(--gremab-navy);
  color: #ffffff;
}

.gremab-pagination .page-numbers.dots {
  border: 0;
  background: none;
}

.gremab-pagination a:hover {
  border-color: var(--gremab-navy-2);
}

/* ── Empty state ── */
.gremab-no-results {
  background: #ffffff;
  border: 1px dashed var(--gremab-line);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  color: var(--gremab-muted);
}

/* ── Single resource / event ── */
.gremab-back-link a {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--wp--preset--color--primary, #001525);
  text-decoration: none;
}

.gremab-back-link a:hover {
  text-decoration: underline;
}

.gremab-single__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.gremab-single .wp-block-post-featured-image img {
  border-radius: 12px;
}

.gremab-single .wp-block-file {
  margin-top: 1.5rem;
}

.gremab-single .wp-block-file .wp-block-file__button {
  background: var(--wp--preset--color--secondary-container, #fdae03);
  color: var(--wp--preset--color--primary, #001525);
  border-radius: 8px;
  font-weight: 700;
  padding: 0.6rem 1.2rem;
}

/* ── "Solo destacados" checkbox in Búsqueda avanzada ── */
.gremab-filtros__check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 46px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gremab-navy);
  cursor: pointer;
}

.gremab-filtros__check input {
  width: 18px;
  height: 18px;
  accent-color: var(--gremab-navy);
}

.gremab-filtros__check .material-symbols-outlined {
  font-size: 18px;
  color: var(--gremab-yellow);
}

/* ── Destacado badge ── */
.gremab-term--destacado {
  background: var(--gremab-yellow);
  border-color: var(--gremab-yellow);
  color: var(--gremab-navy);
}

.gremab-term--destacado::before {
  content: 'star';
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-size: 15px;
  line-height: 1;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
}

.gremab-card--recurso .gremab-card__media .gremab-badge--destacado {
  position: absolute;
  left: 12px;
  bottom: 12px;
}

/* ── Evento destacado hero (Eventos page) ── */
.gremab-hero-destacado {
  position: relative;
  min-height: 65vh;
  display: flex;
  align-items: center;
  padding: 5rem 2rem;
  background-color: var(--gremab-navy);
  background-size: cover;
  background-position: center;
  color: #ffffff;
}

.gremab-hero-destacado::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 21, 37, 0.5);
}

.gremab-hero-destacado__inner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.gremab-hero-destacado__panel {
  max-width: 620px;
  padding: 2rem;
  border-left: 4px solid var(--gremab-yellow);
  border-radius: 12px;
  background: rgba(1, 43, 69, 0.64);
}

.gremab-hero-destacado__label {
  display: inline-block;
  margin: 0;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  background: var(--gremab-yellow);
  color: var(--gremab-navy);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gremab-hero-destacado__title {
  margin: 1rem 0 0.75rem;
  color: #ffffff;
  font-size: var(--wp--preset--font-size--2-xl, 2rem);
  line-height: 1.2;
}

.gremab-hero-destacado__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gremab-yellow);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gremab-hero-destacado__meta .gremab-term {
  text-transform: none;
  letter-spacing: 0;
}

.gremab-hero-destacado__excerpt {
  margin: 0 0 1.75rem;
  font-size: var(--wp--preset--font-size--md, 1.125rem);
  line-height: 1.6;
  color: #ffffff;
}

.gremab-hero-destacado__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.gremab-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
}

.gremab-btn--primary {
  background: var(--gremab-yellow);
  color: var(--gremab-navy);
}

.gremab-btn--outline {
  border: 2px solid #ffffff;
  color: #ffffff;
}

.gremab-btn:hover {
  opacity: 0.9;
}

@media (max-width: 640px) {
  .gremab-hero-destacado {
    min-height: 0;
    padding: 3rem 1rem;
  }
  .gremab-hero-destacado__panel {
    padding: 1.5rem;
  }
}

/* ── Beneficios (Únete): 6 visible, "Ver más beneficios" shows the other 6 ── */
.gremab-beneficios-grid {
  gap: 1.5rem;
}

.gremab-beneficios-grid > .gremab-beneficio {
  margin: 0;
  height: 100%;
}

.gremab-ver-mas {
  margin-top: 1.5rem;
}

.gremab-ver-mas > summary {
  display: flex;
  justify-content: center;
  width: fit-content;
  margin: 1rem auto 0;
  padding: 0.75rem 1.75rem;
  border: 2px solid var(--wp--preset--color--primary, #001525);
  border-radius: 8px;
  color: var(--wp--preset--color--primary, #001525);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.gremab-ver-mas > summary::-webkit-details-marker {
  display: none;
}

.gremab-ver-mas > summary:hover {
  background: var(--wp--preset--color--primary, #001525);
  color: #ffffff;
}

/* Once opened, the button goes away and the other 6 benefits stay visible. */
.gremab-ver-mas[open] > summary {
  display: none;
}

.gremab-ver-mas[open] > .gremab-beneficios-grid {
  margin-top: 1.5rem;
}

@media (max-width: 1024px) {
  .gremab-beneficios-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .gremab-beneficios-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Event page: hide the "Resumen del evento" heading until the client writes it. */
.gremab-single .wp-block-post-content h2:empty {
  display: none;
}

/* "Ver menos beneficios" (added by carousel.js at the bottom of the opened list) */
.gremab-ver-menos {
  display: none;
}

.gremab-ver-mas[open] > .gremab-ver-menos {
  display: flex;
  justify-content: center;
  width: fit-content;
  margin: 2rem auto 0;
  padding: 0.75rem 1.75rem;
  border: 2px solid var(--wp--preset--color--primary, #001525);
  border-radius: 8px;
  background: transparent;
  color: var(--wp--preset--color--primary, #001525);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.gremab-ver-mas[open] > .gremab-ver-menos:hover {
  background: var(--wp--preset--color--primary, #001525);
  color: #ffffff;
}

/* Event detail page: show the whole flyer (no cropping) */
.gremab-evento-flyer img {
  width: 100%;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
}

.gremab-evento-flyer {
  max-width: 720px;
  margin-left: auto !important;
  margin-right: auto !important;
}