/**
 * Fila de vídeo i botó destacat.
 *
 * El vídeo sol ocupava tota l'amplada del contenidor i menjava la pàgina.
 * Ara va a mida de lectura i, si la subcategoria també té botó (el
 * planificador de rutes, per exemple), comparteixen fila.
 */

.explora-mitjans {
  display: grid;
  gap: 1.5rem;
}

/* Vídeo sol: prou gran per veure's, prou petit per no dominar la pàgina. */
.explora-mitjans:not(.explora-mitjans--parell) .explora-video {
  max-width: 48rem;
  margin-inline: auto;
}

@media (min-width: 64rem) {
  .explora-mitjans--parell {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: stretch;
    gap: 2rem;
  }
}

/* ---- Banner: el botó destacat quan acompanya el vídeo ---- */

.explora-banner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem;
  background: rgb(var(--brand-primary));
  color: #fff;
  border-radius: var(--radius-lg, 2px);
  text-decoration: none;
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.explora-banner:hover {
  color: #fff;
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgb(var(--brand-primary) / 0.28);
}

/* Doble classe: el tema declara .material-icons-outlined { font-size: inherit }
   i amb un sol selector la icona sortia diminuta. */
.explora-banner .explora-banner__icona {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: rgb(var(--brand-accent));
  color: rgb(var(--on-accent, var(--brand-primary)));
  font-size: 1.75rem;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.explora-banner__label {
  font-family: var(--font-heading, 'Barlow', sans-serif);
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.15;
}

.explora-banner__nota {
  font-size: 0.9375rem;
  line-height: 1.45;
  opacity: 0.85;
  max-width: 34ch;
}

.explora-banner__anar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.5rem 1.125rem;
  border: 1px solid rgb(255 255 255 / 0.45);
  border-radius: var(--radius-pill, 2px);
  font-family: var(--font-heading, 'Barlow', sans-serif);
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.explora-banner__anar .material-icons-outlined {
  font-size: 1.125rem;
  transition: transform 0.2s ease;
}

.explora-banner:hover .explora-banner__anar .material-icons-outlined {
  transform: translateX(4px);
}

@media (max-width: 40rem) {
  .explora-banner {
    padding: 1.5rem;
  }
}