/*
  Custom styles for the "Consejo Municipal" page template.
  This stylesheet defines the layout for the hero banner, the
  informational sections and the sessions grid with video
  modals.  Colours, spacing and border radii leverage the
  CSS custom properties declared in the theme's root selector
  (see style.css) to ensure consistency across the site.
*/

/* Hero banner */
.cm-hero {
  position: relative;
  min-height: 560px;
  /* Usamos la imagen del concejo como fondo del hero.  La ruta es relativa al
     archivo CSS dentro de assets/css.  Si deseas otra imagen, cambia
     consejo-hero.png por la apropiada. */
  background-image: url('../consejo-hero.png');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}
.cm-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1;
}
.cm-hero .container {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: var(--space-4);
}
.cm-hero h1 {
  font-size: 2.5rem;
  margin-bottom: var(--space-2);
}
.cm-hero p {
  font-size: 1.125rem;
  line-height: 1.6;
  margin: 0;
}

/* Main content area */
.cm-content {
  padding: var(--space-5) 0;
  background: var(--color-bg);
}
.cm-content h2 {
  font-size: 2rem;
  margin-bottom: var(--space-3);
  color: #DF8233;
}
.cm-content p {
  margin-bottom: var(--space-3);
}

/* Sessions grid */
.sessions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-3);
}
.session-card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.session-card .thumb img {
  display: block;
  width: 100%;
  height: auto;
}
.session-card .card-body {
  padding: var(--space-2);
}
.session-card h3 {
  font-size: 1.125rem;
  margin: 0 0 .25rem;
}
.session-card .card-date {
  font-size: 0.875rem;
  margin-bottom: var(--space-2);
  color: var(--color-weak);
}
.session-card .card-actions {
  display: flex;
  gap: var(--space-1);
}
.session-card .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  border-radius:40px;
  width: 170px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
}
.session-card .btn-video {
  background: var(--color-accent);
  color: #fff;
}
.session-card .btn-video:hover {
  background: var(--color-primary);
}
.session-card .btn-acta {
  background: var(--color-secondary);
  color: #fff;
}
.session-card .btn-acta:hover {
  background: var(--color-primary);
}

/* Video modal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.modal.is-active {
  display: flex;
}
.modal-content {
  background: #fff;
  border-radius: var(--radius-md);
  max-width: 960px;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.modal-content iframe {
  width: 100%;
  height: 540px;
  border: 0;
  display: block;
}
.modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 2rem;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
}
.modal-close:hover {
  color: var(--color-primary);
}

/* Paginación de las sesiones del concejo */
.sessions-pagination {
  margin-top: var(--space-4);
  display: flex;
  justify-content: center;
}
.sessions-pagination ul.page-numbers {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.5rem;
}
.sessions-pagination ul.page-numbers li {
  margin: 0;
}
.sessions-pagination a.page-numbers,
.sessions-pagination span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--color-secondary);
  color: var(--color-secondary);
  background: #fff;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background .15s ease, color .15s ease;
}
.sessions-pagination a.page-numbers:hover {
  background: var(--color-secondary);
  color: #fff;
}
.sessions-pagination span.page-numbers.current {
  background: var(--color-secondary);
  color: #fff;
  border-color: var(--color-secondary);
}