/* =========================
   INNER.CSS
   Estils per a pàgines interiors.
   Requereix style.css carregat prèviament.
========================= */


/* =====================
   HERO INTERIOR
===================== */

.inner-hero {
  padding: 180px 0 100px;
  border-bottom: 1px solid #eee;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #777;
  text-decoration: none;
  margin-bottom: 60px;
  transition: color .2s, gap .2s;
}

.back-link:hover {
  color: #000;
  gap: 14px;
}

.inner-tag {
  display: block;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #777;
  margin-bottom: 20px;
}

.inner-hero h1 {
  font-size: clamp(4rem, 9vw, 9rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0;
}

.inner-lead {
  font-size: 1.25rem;
  max-width: 600px;
  margin-top: 36px;
  line-height: 1.55;
  color: #333;
}

/* Meta dades ràpides (durada, places, modalitat…) */
.hero-meta {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 4px;
  gap: 24px;
}

.hero-meta-item {
  border-top: 1px solid #eee;
  padding-top: 16px;
}

.hero-meta-item span {
  display: block;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #aaa;
  margin-bottom: 6px;
}

.hero-meta-item strong {
  font-size: 1rem;
  font-weight: 700;
}


/* =====================
   DESCRIPCIÓ
===================== */

.desc-section {
  padding: 100px 0;
  border-bottom: 1px solid #eee;
}

.desc-section p {
  font-size: 1.2rem;
  line-height: 1.75;
  color: #222;
}

.desc-section p + p {
  margin-top: 24px;
}


/* =====================
   INFO BOXES
===================== */

.info-section {
  padding: 100px 0;
  border-bottom: 1px solid #eee;
}

.section-label {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #777;
  margin-bottom: 50px;
}


.info-box{
  height:100%;
  padding:28px 10px 22px;
  border-top:1px solid #ddd;

  display:flex;
  flex-direction:column;
  justify-content:flex-start;

  transition:all .25s ease;
}

.info-box h4{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#999;
  margin-bottom:18px;
  font-weight:700;
}

.info-box p{
  font-size:1.05rem;
  font-weight:500;
  line-height:1.45;
  margin:0;
}

/* =====================
   SORTIDES PROFESSIONALS
===================== */

.sortides-section {
  padding: 100px 0;
  border-bottom: 1px solid #eee;
}

.sortida-card {
  border-top: 2px solid #000;
  padding: 28px 0;
  height: 100%;
}

.sortida-card h4 {
  font-size: 1.2rem;
  font-weight: 900;
  margin-bottom: 10px;
}

.sortida-card p {
  font-size: .95rem;
  color: #555;
  line-height: 1.5;
  margin: 0;
}


/* =====================
   CTA
===================== */

.cta-section {
  padding: 100px 0;
}

.cta-inner {
  background: #000;
  color: #fff;
  padding: 70px;
}

.cta-inner h2 {
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -0.03em;
}

.cta-inner p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #888;
  margin-bottom: 32px;
  max-width: 380px;
}

.btn-white {
  display: inline-block;
  border: 1px solid #fff;
  padding: 12px 28px;
  color: #fff;
  text-decoration: none;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .2s, color .2s;
}

.btn-white:hover {
  background: #fff;
  color: #000;
}


/* =====================
   COM ES TREBALLA
===================== */

.com-es-treballa-section {
  padding: 100px 0;
  border-bottom: 1px solid #eee;
}


/* =====================
   IMATGES — fallback d'aspecte
   Evita que el layout s'ensorra si la imatge no carrega
===================== */

.project-image-wrap {
  aspect-ratio: 4 / 3;
  background: #f0f0f0;
}


/* =====================
   RESPONSIVE
===================== */

@media (max-width: 768px) {
  .inner-hero {
    padding: 140px 0 70px;
  }

  .hero-meta {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 48px;
  }

  .hero-meta-item {
    min-width: 140px;
  }

  .cta-inner {
    padding: 40px;
  }
}