/*!
 * pages.css
 *
 * Pages: bloques de pagina (slider, grid, gallery).
 *  - PAGE SLIDER (Splide): wrapper, track, slides, content container, tipografia, boton, page-card-icons
 *  - ARROWS (desactivat intencionalment) - desktop i mobile
 *  - Splide counter, numeritos, contador title
 *  - Responsive @media 900px tablet i 600px mobile
 *  - PAGE GRID: page-block-content-container-grid
 *  - PAGE LINK: enlace completo del bloque
 *  - GALLERY MASONRY: patron 60/40 + responsive
 */

/* =========================================================
   PAGE SLIDER – ESTILOS LIMPIOS (SIN VARIABLES)
   ========================================================= */

/* Wrapper general */
.wp-block-page-slider.splide {
  position: relative !important;
  width: 100% !important;
  height: 62vh !important;
  overflow: hidden !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Pista y slides */
.wp-block-page-slider .splide__track {
  height: 62vh !important;
  width: 100% !important;
}

.wp-block-page-slider .splide__list {
  height: 100% !important;
  width: 100% !important;
}

.wp-block-page-slider .splide__slide {
  height: 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  flex-shrink: 0 !important;
}

/* Fondo slide */
.page-block-container {
  height: 100% !important;
  width: 100% !important;
  background-size: cover !important;
  background-position: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
/* Contenedor de contenido */

.page-block-content-container {
  width: 400px !important;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(6px);
  padding: 3.5rem 2rem !important;
  position: relative;
  margin-left: 150px !important;
  box-shadow: 0 20px 40px rgba(0,0,0,.18);
  flex-shrink: 0;
}

/* Tarjeta */
/*.page-block-wrapper.alignwide {
  height:100% !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  max-width: none !important;
}
*/
.page-block-content {
  text-align: center;
}

/* Tipografía */
.page-block-content h2 {
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 18px !important;
}

.page-block-content h4,
.page-block-content p {
  font-size: 17px;
  line-height: 1.5;
  margin: 0 0 12px !important;
}

/* Botón */
.page-block-content .wp-block-button {
  margin-top: 20px !important;
}

.page-block-content .wp-block-button__link {
  border: 1px solid #000;
  background: transparent;
  color: #000;
  padding: .85rem 1.4rem;
  text-decoration: none;
  transition: .2s ease;
  display: inline-block;
}

.page-block-content .wp-block-button__link:hover {
  background: #000;
  color: #fff;
}

/* Iconos */
.page-card-icons {
  margin: 18px 0 !important;
  display: grid !important;
 grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));

  gap: 22px !important;
justify-content: center !important;
  text-align: center !important;
}

.page-card-icons p {
  margin: 8px 0 0 !important;
  font-size: 17px !important;
  text-align: center !important;
}
.page-card-icons div {
  width: 70px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}




/************************* Flechas y contador ****************************/
.splide__controls {
  position: absolute;
  bottom: 28px;
  right: 28px;
  z-index: 20;
}

/*ARROWS COMENTADAS*/
/* Caja negra principal */
/*
.splide__arrows {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Flechas *
.splide__arrow {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  cursor: pointer;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
	align-self: flex-start!important;
  margin-top: -10px!important;
}

.splide__arrow:hover {
  opacity: 0.8;
}

.splide__arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.splide__arrow span {
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  font-weight: bold;
}
*/
/* Contador */
.splide__counter {
  text-align: center;
  color: #fff;
  min-width: 80px;
  flex-shrink: 0;
}

/* Numeritos */
.counter-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  margin: 0;
}

.counter-numbers h3,
.counter-numbers h4 {
  margin: 0;
  padding: 0;
  font-size: 18px;
  font-weight: 600;
	color:white;
}

.counter-numbers span {
  font-weight: 400;
  opacity: 0.9;
}

/* Título */
.counter-title {
  margin: 4px 0 0 0 !important;
  padding: 0 !important;
  font-size: 12px;
  line-height: 1.2;
  opacity: 0.85;
  font-weight: 500;
}

/****responsive***/

/* TABLET (900px - 600px) */
@media (max-width: 900px) {
  .page-block-content-container {
    width: 75% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* MOBILE (600px y menos) */
@media (max-width: 600px) {
  /* Slider */
  .wp-block-page-slider.splide {
    height: auto !important;
    min-height: 100vh !important;
  }

  /* .splide__track i .splide__slide — desactivat intencionalment */
  /*
  .splide__track {
    height: auto !important;
    min-height: 100vh !important;
  }

  .splide__slide {
    height: auto !important;
    min-height: 100vh !important;
  }
  */

  /* Container del slide */
  .page-block-container {
    height: auto !important;
    min-height: 100vh !important;
    background-size: cover !important;
    background-position: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding-bottom: 60px !important;
  }

  /* Wrapper */
  .page-block-wrapper.alignwide {
    height: auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
  }

  /* Tarjeta */
  .page-block-content-container {
    width: 90% !important;
    padding: 2rem !important;
    margin: 0 auto !important;
    max-width: 500px !important;
  }

  .page-block-content h2 {
    font-size: 28px !important;
  }

  /* Iconos visibles */
  .page-card-icons {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    margin: 16px 0 !important;
  }

  .page-card-icons div p {
    font-size: 12px !important;
  }
/*ARROWS COMENTADAS*/
  /* Controles al fondo */
/*
  .splide__controls {
    position: absolute !important;
    bottom: 20px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 20 !important;
    background: linear-gradient(to top, rgba(0,0,0,.6), transparent) !important;
    padding: 20px 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  .splide__arrows {
    position: static !important;
    bottom: auto !important;
    right: auto !important;
    padding: 12px 20px !important;
    gap: 20px !important;
  }

  .splide__arrow {
    width: 32px !important;
    height: 32px !important;
  }

  .splide__counter {
    text-align: center !important;
  }

  .counter-numbers h3,
  .counter-numbers h4 {
    font-size: 16px !important;
  }

  .counter-title {
    font-size: 12px !important;
  }
  */
}
/*********************************************************************************************************/

.page-block-content-container-grid {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    width: 100% !important;
    background-color: #ffffff !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.page-block-container {
    border: none !important;
    box-shadow: none !important;
}

/***************todo el bloque como enlace**************/

.page-block-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* Para que nada dentro se subraye */
.page-block-link * {
  text-decoration: none !important;
  color: inherit !important;
}

/* Efecto al pasar el ratón por encima del bloque */
.page-block-link:hover .page-block-image-container {
  transform: scale(1.02);
  transition: transform 0.3s ease;
}

.page-block-link:hover {
  opacity: 0.95;
}
/********************************************************************/
/* Resetear el masonry de Kadence y usar grid manual */
.kb-gallery-ul.kb-gallery-type-masonry {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px;
    position: static !important;
    height: auto !important;
}

/* Resetear posicionamiento absoluto de Kadence */
.kb-gallery-ul.kb-gallery-type-masonry > .kadence-blocks-gallery-item {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
}

/* Patrón asimétrico 60%-40% */
.kb-gallery-ul.kb-gallery-type-masonry > .kadence-blocks-gallery-item:nth-child(1),
.kb-gallery-ul.kb-gallery-type-masonry > .kadence-blocks-gallery-item:nth-child(4) {
    width: calc(60% - 8px) !important;
}

.kb-gallery-ul.kb-gallery-type-masonry > .kadence-blocks-gallery-item:nth-child(2),
.kb-gallery-ul.kb-gallery-type-masonry > .kadence-blocks-gallery-item:nth-child(3) {
    width: calc(40% - 8px) !important;
}

/* Ocultar todas las imágenes a partir de la 5ª */
.kb-gallery-ul.kb-gallery-type-masonry > .kadence-blocks-gallery-item:nth-child(n+5) {
    display: none !important;
}

/* Ajustar contenedores de imagen */
.kb-gallery-ul.kb-gallery-type-masonry .kadence-blocks-gallery-item-inner {
    height: 100%;
}

.kb-gallery-ul.kb-gallery-type-masonry .kb-gallery-figure {
    height: 100%;
    margin: 0;
}

.kb-gallery-ul.kb-gallery-type-masonry .kb-gal-image-radius {
    height: 100%;
    max-width: none !important;
}

.kb-gallery-ul.kb-gallery-type-masonry .kb-gallery-image-contain {
    height: 100%;
    padding-bottom: 0 !important;
}

/* Las imágenes deben cubrir su contenedor manteniendo aspect ratio */
.kb-gallery-ul.kb-gallery-type-masonry .kb-gallery-image-contain img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Altura REDUCIDA a las filas - AJUSTA ESTOS VALORES según necesites */
.kb-gallery-ul.kb-gallery-type-masonry > .kadence-blocks-gallery-item:nth-child(1),
.kb-gallery-ul.kb-gallery-type-masonry > .kadence-blocks-gallery-item:nth-child(2) {
    height: 250px; /* Reducido de 350px a 250px */
}

.kb-gallery-ul.kb-gallery-type-masonry > .kadence-blocks-gallery-item:nth-child(3),
.kb-gallery-ul.kb-gallery-type-masonry > .kadence-blocks-gallery-item:nth-child(4) {
    height: 250px; /* Reducido de 350px a 250px */
}

/* RESPONSIVE: Apilar imágenes en móvil/tablet */
@media (max-width: 768px) {
    .kb-gallery-ul.kb-gallery-type-masonry > .kadence-blocks-gallery-item:nth-child(1),
    .kb-gallery-ul.kb-gallery-type-masonry > .kadence-blocks-gallery-item:nth-child(2),
    .kb-gallery-ul.kb-gallery-type-masonry > .kadence-blocks-gallery-item:nth-child(3),
    .kb-gallery-ul.kb-gallery-type-masonry > .kadence-blocks-gallery-item:nth-child(4) {
        width: 100% !important;
        height: 200px; /* Más pequeño en móvil */
    }
}

/* Tablet intermedio - 2 columnas */
@media (min-width: 769px) and (max-width: 1024px) {
    .kb-gallery-ul.kb-gallery-type-masonry > .kadence-blocks-gallery-item:nth-child(1),
    .kb-gallery-ul.kb-gallery-type-masonry > .kadence-blocks-gallery-item:nth-child(2),
    .kb-gallery-ul.kb-gallery-type-masonry > .kadence-blocks-gallery-item:nth-child(3),
    .kb-gallery-ul.kb-gallery-type-masonry > .kadence-blocks-gallery-item:nth-child(4) {
        width: calc(50% - 8px) !important;
        height: 220px;
    }
}

/* =========================================================
   PÀGINA CONTACTE — V-B (mapa a sang + presència §08)
   Implementació del design drop Contacte.html (versió V-B):
   panell fosc al costat del mapa, indicacions com a targetes
   numerades, formulari split. CSS específic per a la pàgina:
   no toca cap altre component cànon ja existent.
========================================================= */
.er-contacte-panel {
	background: #2A2520;
	color: #FBF9F4;
	padding: 2.5rem clamp(1.25rem, 4vw, 2rem);
}
.er-contacte-panel h1,
.er-contacte-panel h2,
.er-contacte-panel h3,
.er-contacte-panel p,
.er-contacte-panel address,
.er-contacte-panel a { color: #FBF9F4; }
.er-contacte-panel address { font-style: normal; }
.er-contacte-panel a { text-decoration: none; }
.er-contacte-panel a:hover { text-decoration: underline; text-underline-offset: 3px; }

.er-on-photo-kicker {
	font-family: 'Jost', sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #D6E4C2 !important;
}

.er-contacte-map {
	background: #2A2520;
	min-height: 600px;
	position: relative;
}
.er-contacte-map iframe {
	width: 100%;
	height: 100%;
	min-height: 600px;
	border: 0;
	display: block;
}

.er-route-card {
	background: #FBF9F4;
	border: 1px solid #E3DCCF;
	padding: 2rem clamp(1.25rem, 3.5vw, 2rem);
}
.er-route-card .er-route-counter {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 0.95rem;
	color: #03693A;
	letter-spacing: 0.04em;
	margin-bottom: 0.4rem;
	display: block;
}

.er-contacte-form-meta {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid #E3DCCF;
	font-size: 0.92rem;
}
.er-contacte-form-meta dt {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #6B6258;
}
.er-contacte-form-meta dd { color: #2A2520; margin: 0 0 0.6rem; }
.er-contacte-form-meta a { color: #2A2520; text-decoration: underline; text-underline-offset: 3px; }

/* Formulari nadiu (placeholder fins que es decideixi plugin) */
.er-contacte-form { display: grid; gap: 1.25rem; }
.er-contacte-form .field { display: grid; gap: 0.4rem; }
.er-contacte-form .field--inline { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) {
	.er-contacte-form .field--inline { grid-template-columns: 1fr 1fr; }
}
.er-contacte-form label {
	font-family: 'Jost', sans-serif;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #03693A;
}
.er-contacte-form .req { color: #6B6258; font-weight: 400; margin-left: 0.3rem; text-transform: none; letter-spacing: normal; }
.er-contacte-form input,
.er-contacte-form select,
.er-contacte-form textarea {
	font: inherit;
	font-size: 1rem;
	color: #2A2520;
	background: #FBF9F4;
	border: 1px solid #E3DCCF;
	border-radius: 4px;
	padding: 0.85rem 1rem;
	width: 100%;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.er-contacte-form textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.er-contacte-form input:focus,
.er-contacte-form select:focus,
.er-contacte-form textarea:focus {
	outline: none;
	border-color: #03693A;
	box-shadow: 0 0 0 3px rgba(3, 105, 58, 0.12);
}
.er-contacte-form .form-legal { font-size: 0.82rem; color: #6B6258; line-height: 1.55; max-width: 60ch; }
.er-contacte-form .form-legal a { color: #2A2520; text-decoration: underline; text-underline-offset: 3px; }