/* ------------------------------------------------------------------------------------------------------------------------ */
/* Això són estils globals de totes les pàgines, no tocar. Si es vol modificar un estil en concret, es pot fer més avall. */
/* ------------------------------------------------------------------------------------------------------------------------ */

.box-image-text .image {
    min-height: 190px;
    max-height: 190px;
}

.box-image-text .image img {
    max-height: 190px;
    margin: auto;
}

.box-simple {
    min-height: 230px;
}

.page-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.page-hero {
  margin-top: 3rem;
  margin-bottom: 2rem;
}

.page-body img {
  max-width: 70%;
  height: auto;
  display: block;
  margin: 1.5rem auto;
}

.page-body p {
  line-height: 1.6;
  margin-bottom: 1.2rem;
  font-size: 1.6rem;
}

/* ------------------------------------------------------------------------------------------------------------------------ */
/* Opcions generals de format de totes les pàgines */
/* ------------------------------------------------------------------------------------------------------------------------ */

body {
  color: black; /* Color general del text que hi ha a totes les pàgines (es pot posar tot tipus de color en hexadecimal) */
  line-height: 1.6;
}

.page-title { /* Representa el Titol que poses en el capçal del .md */
  text-align: center; /* (left | right | center) son les opcions per colocar el text */
  font-weight: bold; /* (normal | bold) */
  color: #4888c0; /* Color del titol (es pot posar tot tipus de color en hexadecimal) */
  letter-spacing: 0.5px;
  font-size: clamp(5rem, 10vw, 10rem);
  word-wrap: break-word;
}

.page-body h1 { /* Representa el Titol1 del md (Si es posa un sol #) les opcions son les mateixes que avans */
  text-align: center;
  font-weight: normal;
  font-size: 10rem;
  color: #4888c0;
  letter-spacing: 0.5px;
}

.page-body h2 { /* Representa el Titol2 del md (Si es posa ##) les opcions son les mateixes que avans */
  text-align: center;
  font-weight: bold;
  font-size: 3.6rem;
  color: #4888c0;
  letter-spacing: 0.1px;
}

.page-body h3 { /* Representa el Titol3 del md (Si es posa ###) les opcions son les mateixes que avans */
  text-align: center;
  font-weight: 500;
  font-size: 2.5rem;
  color: #74a1c9;
  letter-spacing: 0.1px;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.page-body ul { /* Representa les llistes amb punts (unordered list) */
  list-style-type: disc;
  margin-left: 0rem; /* Es pot modificar que tan espai per la esquerra es vol donar */
}

.page-body ul li { /* Representa cada linea de una llista desordenada */
  font-size: 1.5rem;
  color: black;
  margin-bottom: 0.8rem; /* Per donar espai entre les lineas de la llista */
}

.page-body ol { /* Representa les llista numerada (ordered list) igual que la llista amb punts */
  list-style-type: decimal;
  margin-left: 0rem;
}

.page-body ol li { /* Representa cada linea de una llista ordenada */
  font-size: 1.5rem;
  color: black;
  margin-bottom: 0.8rem;
}

.page-body a { /* Representa els links */
  color: black; /* modificar nomes aixo */
  text-decoration: none;
  transition: color 0.3s;
}

.page-body a:hover { /* Representa un link al pasar el cursor per sobre */
  color: #007BFF;
  text-decoration: underline; /* underline | none */
}

/* ------------------------------------------------------------------------------------------------------------------------ */
/* Apartat inferior de copyright i xarxes socials de la part superior */
/* ------------------------------------------------------------------------------------------------------------------------ */

#copyright { /* Colors */
  background-color: #4888c0;
  color: white;
}

#copyright a { /* Links */
  color: white !important;
  text-decoration: none;
}

#copyright a:hover { /* Link al pasar el cursor per sobre */
  color: white !important;
  text-decoration: underline;
}

#top { /* Xarxes socials */
  background-color: #4888c0;
}

/* ------------------------------------------------------------------------------------------------------------------------ */
/* Opcions de format per a la pagina home */
/* Si es vol modificar un estil en concret dins la pàgina home, es pot fer des d’aquí. Cal posar al principi .page-home
 seguit del tipus que es vulgui modificar (els tipus es poden copiar de l’apartat general) i afegir-hi les especificacions
 que es vulguin canviar. A continuació hi ha un parell d’exemples de com s’hauria de fer. */
/* ------------------------------------------------------------------------------------------------------------------------ */

.page-home .page-title{
  text-align: left;
}

.page-home .page-body h2 {
  text-align: left;
}

.page-home .page-body h3 {
  text-align: center;
  color: black;
}

.page-home .page-body {
  text-align: center;
}

/* ------------------------------------------------------------------------------------------------------------------------ */
/* Opcions de format per a la pagina posts */
/* Es segueix la mateixa lògica que a .page-home. */
/* ------------------------------------------------------------------------------------------------------------------------ */

.page-posts .page-body {
  text-align: center;
}

.page-posts .page-body img {
  max-width: 35% !important;
  height: auto !important;
}

/* ------------------------------------------------------------------------------------------------------------------------ */
/* Formats que no s’han de tocar, només els colors especificats. */
/* ------------------------------------------------------------------------------------------------------------------------ */

home-banner {
  display: block;
  background-color: #4888c0; /* Color banner pàgina home */
  padding: 10rem 2rem;
  margin: 5rem 0;
  color: white;
}

home-banner .banner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width: 100%;
  margin: 0 auto;
}

home-banner .banner {
  flex: 1 1 250px;
  text-align: center;
  max-width: 100%;
}

home-banner .banner p {
  margin-top: 1rem;
  font-size: 1.25rem;
  color: white;
}

.carousel-home {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3rem 0;
}

.carousel-home .carousel {
  max-width: 100%;
  width: 700px;
  height: auto;
  margin: 0 auto;
  overflow:  hidden;
}

.carousel-home .carousel .item img {
  max-width: 100%;
  height: auto;
}




#footer .container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;              
  gap: 2rem;                    
}


#footer .footer-left {
  flex: 1;
  max-width: 40%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


#footer .footer-right {
  flex: 1;
  max-width: 20%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
}


@media (max-width: 768px) {
  #footer {
    padding: 3rem 2rem !important; 
  }

  #footer .container {
    flex-direction: column; 
    align-items: center;
    text-align: center;
  }

  #footer .footer-left,
  #footer .footer-right {
    max-width: 100%;
    align-items: center;
  }

  #footer .footer-left p {
    font-size: 1.2rem; 
    margin-bottom: 1rem;
  }

  #footer .footer-right a {
    width: 100%;
    text-align: center;
  }
}



@media (max-width: 768px) {
  #footer .footer-right {
    width: 100%;
    align-items: center;
  }

  #footer .footer-right a {
    display: inline-block;
    width: 90%;
    max-width: 300px;
    font-size: clamp(0.9rem, 2.5vw, 1.2rem); 
    white-space: normal;
    text-align: center;
    padding: 0.8rem 1rem;
    box-sizing: border-box;
    margin-bottom: 1rem;
  }
}


.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.grid-item {
  border-width: 1px;
  border-style: solid;
  border-color: #ccd2d8;
  padding: 1rem;
}

.grid-item img {
  max-width: 100%;
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}