/* ─────────────────────────────────────────────────────
   1) Variables, reset i font-face
   ───────────────────────────────────────────────────── */
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('fonts/pp-neue-montreal.woff2') format('woff2'),
       url('fonts/pp-neue-montreal.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

:root {
  --font-base: 'PP Neue Montreal', sans-serif;

  --color-white: #ffffff;
  --color-black: #000000;

  /* Gris clar de fons per a header, hero i tota la zona “sota” */
  --color-bg-light: #f1f0ee;

  /* Gris fosc de fons per a la secció “About” */
  --color-bg-dark: #1c1c1c;

  --color-text-light: rgba(108, 108, 108, 1);
  --color-text-dark: rgba(28, 28, 28, 1);
  --color-text-muted: rgba(143, 143, 143, 0.6);
  --color-highlight: rgba(175, 175, 175, 1);
  --color-link: rgba(175, 175, 175, 1);

  /* Per a la línia divisòria sota “Areas” */
  --color-divider: rgba(200, 200, 200, 0.4);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-base);
  color: var(--color-text-dark);
  background-color: var(--color-white);
  line-height: 1.5;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ─────────────────────────────────────────────────────
   2) Contenidors (container) i punts de tall
   ───────────────────────────────────────────────────── */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Mòbil base (< 768px): container 100% */
@media (max-width: 767px) {
  .container {
    width: 90%;
  }

  .contact > a {
    display: block;
  }

}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }

}

@media (min-width: 1280px) {
  .container {
    max-width: 1240px;
  }

}

/* ─────────────────────────────────────────────────────
   3) BOTONS
   ───────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 500;
  text-align: center;
  border-radius: 30px;
  padding: 0.75rem 1.5rem;
  transition: background-color 0.2s ease-in-out;
  cursor: pointer;
}

.btn-light {
  background-color: var(--color-white);
  color: var(--color-text-dark);

}

.btn-light:hover {
  background-color: var(--color-text-dark);
  color: var(--color-white);
}

.btn-primary {
  background-color: var(--color-white);
  color: var(--color-text-dark);
  border: none;
}

.btn-primary:hover {
  background-color: var(--color-text-dark);
  color: var(--color-white);
}

/* ─────────────────────────────────────────────────────
   4) HEADER & HERO (fons #F1F0EE)
   ───────────────────────────────────────────────────── */
.site-header {
  background-color: var(--color-bg-light); /* #F1F0EE */
}

/* Header container (logo + botons) */
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

/* Nom “Cristina Oliver” a l’esquerra */
.site-title {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-text-dark);
}

/* Botons a la dreta */
.header-right a {
  margin-left: 1rem;
}

/* Hero: foto + títol + email */
.hero {
  background-color: var(--color-bg-light); /* #F1F0EE */
  padding: 2.5rem 0;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}

.hero-photo {
  position: relative;
}

.greeting-bubble {
  position: absolute;
  top: 4rem;
  left: 0;
  transform: translateX(-50%);
  background-color: var(--color-white);
  border-radius: 20px;
  padding: 0.5rem 1.2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.greeting {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-text-dark);
}

.portrait {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
}

.hero-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text-dark);
  line-height: 1.2;
}

.contact {
  font-size: 1.3rem;
  color: var(--color-text-light);
  padding-top: 6rem;
}

.contact a {
  color: var(--color-text-dark);
  text-decoration: none;
  font-weight: 500;
}

.contact a:hover {
  text-decoration: underline;
}

/* ─────────────────────────────────────────────────────
   5) SECTION “ABOUT” (With over 12 years…)
   ───────────────────────────────────────────────────── */
.about {
  background-color: var(--color-bg-dark); /* #1C1C1C */
  padding: 3rem 0;
}

.about-inner {
  margin: 0 auto;
  padding: 0 1rem;
}

.about-text {
  color: var(--color-text-light);
  /* Ara la font oscil·la entre 1.6rem i 3rem 
     depenent de l'amplada de pantalla */
  font-size: clamp(1.6rem, calc(1rem + 2vw), 3rem);
  line-height: 1.3;
  text-align: left;
}

.highlight {
  color: var(--color-highlight);
  font-weight: 400;
}

.link-secondary {
  color: var(--color-highlight);
  text-decoration: none;
  border-bottom: solid 4px #FFD353;
}

.link-secondary:hover {
   background-color: #FFD353;
   color: var(--color-text-dark);
}


@media (min-width: 768px) {

   .about {
    padding: 6rem 0;
  }
}




/* ─────────────────────────────────────────────────────
   6) ÁREA “AREAS I CAN HELP IN” (fons #F1F0EE)
   ───────────────────────────────────────────────────── */
.areas {
  background-color: var(--color-bg-light); /* #F1F0EE */
  padding: 3rem 0;
}

.areas-inner {
  text-align: left;
}

/* Títol “Areas I can help in:” alineat a l’esquerra */
.areas-title {
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--color-text-dark);
  margin-bottom: 1.5rem;
}

/* Graella de 3 columnes (1 columna en mòbil) */
.areas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.area-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.area-icon {
  font-size: 2rem;
}

.area-desc {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-text-dark);
  text-align: left;
  /* Permet que el text torni a la línia automàticament quan calgui */
}

/* De tablet cap amunt: 3 columnes */
@media (min-width: 768px) {
  .areas-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

/* Línia/divisor horitzontal sota les 3 columnes */
.divider {
  border: none;
  border-top: 1px solid var(--color-divider);
  margin-top: 4rem;
  margin-bottom: -1.5rem;
  
}

/* ─────────────────────────────────────────────────────
   7) PRINCIPLES (fons #F1F0EE)
   ───────────────────────────────────────────────────── */
.principles {
  background-color: var(--color-bg-light); /* #F1F0EE */
  /* no fem padding vertical addicional aquí; ja està generat per "areas" i "tools" */
}

.principles-inner {
  margin: 0 auto;
  padding: 0 1rem;
}

/* Dues columnes: esquerra 30% – dreta 70% (aprox) */
.principles-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
  align-items: flex-start;
}

/* Text intro a l’esquerra */
.principles-left {
  text-align: left;
  max-width: 240px;
}

.pt-intro {
  font-size: 1rem;
  color: var(--color-text-dark);
  line-height: 1.4;
}

/* Llista de principis a la dreta */
.principles-right {
  text-align: left;
}

.principles-list {
  font-weight: 500;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.principles-list li {
  font-size: 1.5rem;
  color: var(--color-text-dark);
  line-height: 1.4;
}



/* ─────────────────────────────────────────────────────
   8) TOOLS LINE (fons #F1F0EE)
   ───────────────────────────────────────────────────── */
.tools {
  background-color: var(--color-bg-light); /* #F1F0EE */
  padding: 5rem 0 2rem 0;
}

.tools-inner {
  text-align: center;
}

.tools-line {
  font-size: 0.9375rem; /* 15px */
  color: var(--color-text-light);
  margin-bottom: 0.5rem;
}

.tools-list {
  font-weight: 500;
  color: var(--color-text-dark);
}

/* ─────────────────────────────────────────────────────
   9) PORTFOLIO REQUEST (fons #F1F0EE)
   ───────────────────────────────────────────────────── */
.portfolio-request {
  background-color: var(--color-bg-light); /* #F1F0EE */
  padding: 2rem 0 5rem 0;
}

.pr-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}

.pr-text {
  font-size: 1rem;
  color: var(--color-text-dark);
  max-width: 820px; /* perquè el paràgraf no sigui massa ample */
}

/* Botó centrat */
.pr-inner .btn {
  width: 200px;
}

.email-portfolio {
  font-size: 1.4rem;
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────
   10) FOOTER (fons #F1F0EE)
   ───────────────────────────────────────────────────── */
.site-footer {
  background-color: var(--color-bg-light);
  padding: 1.5rem 0;
}

.footer-inner {
  display: flex;
  justify-content: space-between; /* allunya els dos texts */
  align-items: center;
  /* Manté el mateix max-width/paddings del container */
  width: 100%;
}

.footer-left,
.footer-right {
  font-size: 0.875rem; /* 14px */
  color: var(--color-text-muted);
  margin: 0;
}

/* Opcional: si vols que al mòbil es vegin damunt d’una altra línia */
@media (max-width: 480px) {
  .footer-inner {
    flex-direction: column;
    gap: 0.5rem;
  }

  .footer-left,
  .footer-right {
    text-align: center;
  }
}

/* ─────────────────────────────────────────────────────
   11) MEDIA QUERIES ADDICIONALS
   ───────────────────────────────────────────────────── */
/* Desktop gran >= 1280px: ajustem lleugerament fonts i espais */
@media (min-width: 1280px) {
  .hero {
    padding: 4rem 0 3rem 0;
  }

  .portrait {
    width: 280px;
    height: 280px;
  }

  .hero-title {
    font-size: 2rem;
  }

  .about-text {
    font-size: 3rem; /* ja establert */
    margin-bottom: 1.3rem;
  }

  .areas-title {
    font-size: 2rem;
  }

  .area-icon {
    font-size: 2.5rem;
  }

  .area-desc {
    font-size: 1.5rem;
  }

  .pt-intro {
    font-size: 1.125rem;
  }

  .principles-list li {
    font-size: 1.75rem;
  }

  .tools-line {
    font-size: 1rem;
  }

  .tools-list {
    font-size: 1rem;
  }

  .pr-text {
    font-size: 1.125rem;
  }

  .email-portfolio {
  font-size: 1.75rem;
  font-weight: 500;
}
}

/* En mòbil: una sola columna (s’apilà intro + llista) */
@media (max-width: 767px) {
  .site-title {
    font-size: 1.2rem;
  }

  .tools-list {
    display: block;
  }

  .principles-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .footer-inner {
  padding: 0 1.5rem;
}
}