/* =====================================

--- PORTADA.CSS
--- Abril 2026
--- Definicions específiques de la portada (home)
--- en català i castellà

======================================*/

/* Falta copiar aquí tot el que hi ha a portada4-00.CSS */
button {
  border:none;
  padding:0.7rem 1.5rem;
  border-radius:20px;
  cursor:pointer;
  color:#fff;
  font-weight:bold;
  transition: 
  background-color 0.3s ease,
  transform 0.2s ease,
  box-shadow 0.3s ease;
  /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);*/
}

/* Botons veure més */ 
boto-mes {
  display:flex;
  justify-content:center;
  margin-top:1rem;
}

boto-mes button {
  background:var(--color-principal);
}

boto-mes button:hover{
   background-color: var(--color-boto-hover);
   transition: background-color 0.3s ease,
   transform 0.2s ease,
   box-shadow 0.3s ease;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

boto-mes button a, boto-mes button a:visited {
  color:white;
  text-decoration: none;
}

boto-mes button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

button.fosc{
  background:var(--color-negre);
  cursor:pointer;
}

button.fosc:hover{
   background-color: #666666;
   transition:  background-color 0.3s ease,
   transform 0.2s ease,
   box-shadow 0.3s ease;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

button.fosc a, button.fosc a:visited {
  color:white;
  text-decoration: none;
}

body.menu-obert{
  overflow: hidden;
}

/* Galeria */
va-galeria {
  display: block;
  position: relative;
  width: 100%;
  height: 70vh;
  overflow: hidden;
}

va-galeria va-imatges a{
  text-decoration: none;
}

va-galeria va-imatges img {
  width: 100%;
  height: 70vh
  object-fit:cover;
  object-position: center top;
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

@media (max-width: 767px) {

  va-galeria,va-galeria va-imatges img{
    height: 40vh;
  }

}

va-galeria va-imatges img.actiu {
  opacity: 1;
}

text-galeria {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  row-gap: 0.4rem;         /* separació entre H1 i H2 */
  text-align: left;      /* centra el text */
  z-index: 2;
  color: white;
  text-shadow: 2px 2px 4px var(--color-negre);
  background: rgba(0, 0, 0, 0.3);
  animation: fadeInUp 1s ease;
}


@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



text-galeria h1 {
	color:#F7E3D2;
}

text-galeria img {
	margin-top:10px;
}

@media (max-width: 767px) {

text-galeria h1 {
	font-size:1.5rem
}

text-galeria h2 {
	font-size:1.2rem
}

}

va-controls {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

va-controls .punt {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 5px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.5;
  cursor: pointer;
}

va-controls .punt.actiu {
  opacity: 1;
  background: var(--color-principal);
}



/* --- Seccions --- */
.title-with-lines {
  display: flex;
  align-items: center;
  text-align: center;
  gap: 1rem;
  margin-bottom:2rem;
}

.title-with-lines::before,
.title-with-lines::after {
  content: "";
  flex: 1;
  background: #DC873A;
  height: 1px;
}

.title-with-lines span {
  white-space: nowrap;
}

contenidor-guies, rutes-catalunya, noticies-viatges, llibres-viatges {
  padding:var(--padding-general);
  display: block;
}


llista-guies, llista-rutes, llista-noticies, llista-llibres {
  display: flex;
  flex-wrap: wrap;
  gap:1rem;
  margin-top:1rem;
  justify-content: space-between;
}


va-guia, va-ruta, va-noticia, va-llibre {
  overflow:hidden;
  flex-grow: 1;
}

va-guia img, va-ruta img {
  width:100%;
  height: 100%;
  max-height:220px;
  object-fit:cover;
  transition: transform 0.6s ease, filter 0.3s ease;
}

va-ruta img{
  max-height:260px;
}

va-guia img-container, va-ruta img-container{
  width:100%;
  display: block;
  height: 220px;
  max-height: 220px;
  overflow: hidden;
}

va-ruta img-container {
  height: 260px;
  max-height: 260px;
}

va-noticia img {
  width:100%;
  height:300px;
  object-fit:cover;
  transition: transform 0.6s ease, filter 0.3s ease;
}

va-noticia img-container{
  width:100%;
  display: block;
  height: 300px;
  max-height: 300px;
  overflow: hidden;
}

va-llibre img{
  width: auto;
  height: 375px;
  object-fit: cover;
  transition: transform 0.6s ease, filter 0.3s ease;
}

va-llibre img-container{
  width:100%;
  display: block;
  height: 375px;
  max-height: 375px;
  overflow: hidden;
}

va-guia h3, va-ruta h3, va-noticia h3, va-llibre h3 { 
/*  font-family: 'Barlow Condensed', sans-serif; */
  margin-top: 0.8rem; 
  margin-bottom: 0.3rem; 
  font-size:1.2rem; 
  line-height:1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

va-guia p, va-ruta p, va-noticia p, va-llibre p { 
  margin:0.3rem 0rem; 
  font-size:1rem; 
}

va-guia a, va-ruta a, va-noticia a, va-llibre a {
  text-decoration:none;
  color:var(--color-text);
  display: block;
  height: 100%;
}

va-guia:hover img, va-ruta:hover img, va-noticia:hover img, va-llibre:hover img { 
  transform: scale(1.08);
  filter: brightness(0.9);
 }

@media (hover: none) {
  va-guia:hover img, va-ruta:hover img, va-noticia:hover img, va-llibre:hover img {
    transform: none;
    filter: none;
  }
}

/* Rutes */
rutes-catalunya {
  background:#f3f3f3;
}

rutes-catalunya h2 { 
  color:var(--color-text); 
}

rutes-catalunya va-ruta { 
  background:transparent; 
  box-shadow:none; }

/* Sobre nosaltres */
sobre-nosaltres {
  display:flex;
  align-items:center;
  gap:2rem;
  background:var(--color-principal);
  padding:2rem;
  justify-content: center;
}
sobre-nosaltres h2, sobre-nosaltres p{
  color:#fff; 
}

sobre-nosaltres p{
  margin-top:10px; 
}

sobre-nosaltres img { width:150px; }
sobre-nosaltres div { 
  max-width:600px; 
  display: flex;
  flex-direction: column;
}
sobre-nosaltres button {
  margin-top:1rem;
  align-self: flex-end;
}


/* Marges responsive*/
@media (max-width: 767px) {
  contenidor-guies, rutes-catalunya, noticies-viatges, llibres-viatges {
    padding:2rem 1rem;
  }
  va-guia, va-ruta, va-noticia, va-llibre {
    flex-basis: 100%;
  }

  va-llibre img {
    width:400px;
    height:auto;
  }

  sobre-nosaltres {
    flex-direction: column;
    text-align: center;
  }

  sobre-nosaltres img {
    width: 80px;
  }

  sobre-nosaltres button {
    align-self: center;
  }

}


/* Marges responsive*/
@media (max-width: 500px) { 
  va-llibre img {
	width: 100%;
    height: auto;
    display: block;
  }

}



@media (min-width: 768px) and (max-width: 1600px) { 
  contenidor-guies, rutes-catalunya, noticies-viatges, llibres-viatges {
    padding:2rem 4rem;
  }
  va-guia, va-ruta, va-noticia{
    flex-basis: calc(50% - 1rem);
  }
}

@media (min-width: 1200px) and (max-width: 1600px) { 
  va-llibre {
      flex-basis: calc(25% - 1rem);
   }

}



@media (min-width: 1600px)  { 
  va-guia, va-ruta,va-llibre {
    flex-basis: calc(25% - 1rem);
  }
  va-noticia {
    flex-basis: calc(50% - 1rem);
  }  

}


/* Banner 25 aniversari */
.banner-hero {
  position: relative;
  display: block;
  width: 100%;
  height: 200px;
  background-image: url('/img/25-anys-banner.jpg');
  background-size: cover;
  background-position: center top;
  border-radius: 0; /* full width */
  text-decoration: none;
  color: #fff;
}

/* Overlay per millorar contrast */
.banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.7) 0%,
    rgba(0,0,0,0.4) 40%,
    rgba(0,0,0,0.2) 100%
  );
}

/* Contingut */
.banner-content {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.banner-content h2 {
  font-size: 1.8rem;
  font-weight: 600;
  margin-left: 15%;
  max-width: 540px;
}

.cta {
  margin-top: 0.8rem;
  font-size: 0.95rem;
  margin-left: 15%;
  opacity: 0.85;
  transition: all 0.3s ease;
}

/* Hover subtil */
.banner-hero:hover .cta {
  transform: translateX(4px);
  opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .banner-hero {
    height: 180px;
  }

.banner-content h2 {
  font-size: 1.4rem;
  margin-left: 0;
  max-width: 600px;
}

.cta {
	margin:0;
}

  .banner-content h2 {
    font-size: 1.2rem;
  }
}