/* Padding vertical propi per a les seccions de imprescindibles (evitem
   .section-spacing-* perquè el tema col·lapsa el padding-top entre seccions
   consecutives, i aquí volem mantenir l'aire entre cada bloc). */
.imprescindible-section {
  padding-block: clamp(3rem, 8vw, 6rem);
}

/* Aïllar el stacking context del mapa perquè els alts z-index de
   Leaflet (popups, tiles, controls) no es montin sobre la navbar. */
.imprescindible-map-wrap {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

/* Marker custom pin */
.imprescindible-marker__pin {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}
.imprescindible-marker:hover .imprescindible-marker__pin {
  transform: scale(1.15);
}
.leaflet-popup-content-wrapper {
  border-radius: 4px;
}

/* Yellow blob decoration del hero (centro-derecha vertical) */
.imprescindible-hero-blob {
  position: absolute;
  right: 20%;
  top: 50%;
  width: 16rem;
  height: 16rem;
  background: rgb(var(--brand-accent) / 0.20);
  border-radius: 9999px;
  filter: blur(48px);
  z-index: 0;
  pointer-events: none;
  transform: translateY(-50%);
}

/* H1 con saltos de línea preservados.
   El tamaño lleva !important porque el tema fuerza h1 a 6rem y el título se
   salía de su columna, por debajo de las fotos del collage. */
.imprescindible-hero-h1 {
  white-space: pre-line;
  font-size: clamp(2.25rem, 4vw, 3.5rem) !important;
  line-height: 1.05;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Breadcrumbs row con social icons + h-line */
.imprescindible-breadcrumbs-row {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}
.imprescindible-social-icons {
  display: flex;
  gap: 0.5rem;
  margin-right: 1.5rem;
}
.imprescindible-social-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(var(--brand-primary));
  color: rgb(var(--brand-primary));
  background: transparent;
  transition: all 0.3s ease;
}
.imprescindible-social-icon:hover {
  background: rgb(var(--brand-primary));
  color: white;
}
.imprescindible-h-line {
  height: 2px;
  background: rgb(var(--brand-primary));
  flex-grow: 1;
}
.imprescindible-breadcrumbs {
  font-size: 0.875rem;
  font-family: 'Work Sans', sans-serif;
  color: rgb(var(--neutral-text-muted));
  margin-bottom: 3rem;
  letter-spacing: 0.02em;
}
.imprescindible-breadcrumbs a {
  transition: color 0.2s ease;
}
.imprescindible-breadcrumbs a:hover {
  color: rgb(var(--brand-primary));
}
.imprescindible-breadcrumbs strong {
  color: rgb(var(--brand-primary));
}

/* CTA botón "Descobreix-ho" */
.imprescindible-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: rgb(var(--brand-accent));
  color: rgb(var(--on-accent, var(--brand-primary)));
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1rem 2rem;
  border-radius: var(--radius-sm, 2px);
  transition: all 0.3s ease;
  text-decoration: none;
}
.imprescindible-cta-btn:hover {
  background: rgb(var(--brand-primary));
  color: white;
}

/* Carousel scroll-snap */
.imprescindibles-carousel {
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.imprescindibles-carousel::-webkit-scrollbar {
  display: none;
}
.imprescindibles-carousel > * {
  scroll-snap-align: start;
}