/* ============================================================================
   Es Bassol Nou — Our Approach
   Página editorial calcada del mockup (medidas en vw/% → escala a cualquier
   resolución). Secciones: hero arena, muro de piedra (Philosophy) con tarjeta,
   How We Work, proceso azul, taller (Crafted) con tarjeta, materiales, olive.
   Desktop-first fiel; en móvil se apila.
   ========================================================================== */

.ap-hero,
.ap-philo,
.ap-work,
.ap-process,
.ap-craft,
.ap-materials,
.ap-lets {
  position: relative;
  overflow: hidden;
}

/* --- HERO (arena + espiral) --------------------------------------------- */
.ap-hero {
  height: 77.6vw;
  background: url("/assets/img/approach/hero-bg.jpeg") center / cover no-repeat;
  color: var(--c-ink);
}

.ap-hero__title {
  position: absolute;
  inset: 17.7vw 2.1% auto;
  display: grid;
  font-family: var(--font-display);
  font-size: clamp(3rem, 9.375vw, 15rem);
  /* 180pt */
  line-height: 0.86;
  letter-spacing: 0.01em;
  text-align: center;
}

/* --- PHILOSOPHY (muro de piedra) ---------------------------------------- */
.ap-philo {
  height: 94vw;
  background: url("/assets/img/approach/stone-1920.jpg") center / cover no-repeat;
}

.ap-philo__h {
  position: absolute;
  top: 1.5vw;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 5.21vw;
  /* 100pt */
  line-height: 1;
  color: #f3f1e4;
}

.ap-philo__h--l {
  left: 2%;
}

.ap-philo__h--r {
  right: 2%;
}

/* Tarjeta blanca central (reutilizada en Crafted) */
.ap-card {
  position: absolute;
  top: 19.5vw;
  left: 50%;
  transform: translateX(-50%);
  width: 46.9%;
  height: 55vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: #f4f1e6;
  padding: 2vw;
  color: var(--c-ink);
  text-align: center;
}

.ap-card__head {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 3.12vw;
  /* 60pt */
  line-height: 0.9;
  text-align: left;
}

.ap-card__head span {
  display: block;
}

.ap-card__head span:last-child {
  margin-left: 0.98em;
}

.ap-card__head2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 3.12vw;
  /* 60pt */
  line-height: 0.9;
  text-align: left;
}

.ap-card__head2 span {
  display: block;
}

.ap-card__head2 span:last-child {
  margin-left: 1.6em;
}

.ap-card__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.56vw;
  /* 30pt */
  line-height: 1.2;
  margin: 0;
  padding: 0;
  text-align: center;
  transform: translateY(0.9px);
}

.ap-card__body p {
  margin: 0;
  text-align: center;
}

.ap-card__body p+p {
  margin-top: 34px;
}

.ap-card__body p:first-child+p {
  margin-top: 0.2em;
}

.ap-dash {
  display: block;
  margin: 0.2em 0;
}

.ap-card__foot {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 3.12vw;
  line-height: 1;
  text-align: right;
}

.ap-card__foot--r {
  text-align: right;
}

/* Wordmark inferior sobre la piedra */
.ap-wordmark {
  position: absolute;
  top: 87.5vw;
  left: 0;
  right: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 5.21vw;
  line-height: 1;
  color: #f3f1e4;
}

.ap-wordmark__l {
  position: absolute;
  left: 2%;
}

.ap-wordmark__c {
  position: absolute;
  left: 41.2%;
}

.ap-wordmark__r {
  position: absolute;
  right: 2%;
}

/* --- HOW WE WORK -------------------------------------------------------- */
.ap-work {
  height: 86vw;
  margin-top: 6vw;
  margin-bottom: 10.5vw;
  background: var(--c-cream);
}

.ap-work__title {
  position: absolute;
  top: 6.5vw;
  left: 2.1%;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 5.21vw;
  line-height: 0.84;
  color: var(--c-ink);
}

.ap-work__title span {
  display: block;
}

.ap-work__title span:not(:first-child)::before {
  content: "HO";
  visibility: hidden;
}

.ap-work__img {
  position: absolute;
  top: 6.5vw;
  bottom: 2vw;
  left: 36.65%;
  width: 62.15%;
  height: auto;
  margin: 0;
  overflow: hidden;
}

.ap-work__img picture {
  display: block;
  width: 100%;
  height: 100%;
}

.ap-work__img img {
  width: 89%;
  height: 100%;
  margin-left: 6vw;
  object-fit: fill;
}

.ap-work__at {
  position: absolute;
  top: 78vw;
  bottom: 10.9vw;
  left: 2.1%;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.5vw, 3.6rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--c-ink);
}

.ap-work__brand {
  position: absolute;
  top: auto;
  bottom: 1.8vw;
  left: 31.5%;
  width: 15.5vw;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2rem, 2.17vw, 6rem);
  line-height: 0.88;
  color: var(--c-ink);
}

.ap-work__brand span {
  display: block;
}

.ap-work__brand span:last-child {
  margin-left: 1.6em;
  text-align: left;
}

/* --- PROCESS (azul) ----------------------------------------------------- */
.ap-process {
  height: 89.6vw;
  background: var(--c-blue);
  color: #e7d8bf;
}

.ap-step {
  position: absolute;
  width: 31%;
}

.ap-step h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 3.12vw;
  /* 60pt */
  line-height: 1;
  font-weight: 400;
  color: #f0e3ca;
  margin-bottom: 1.1vw;
}

.ap-step p {
  font-size: 1.56vw;
  line-height: 1.2;
  color: #dcc7b0;
}

.ap-step--understanding {
  top: 5.7vw;
  left: 2.1%;
}

.ap-step--planning {
  top: 18.8vw;
  left: 34.6%;
}

.ap-step--execution {
  top: 30vw;
  left: 67%;
}

.ap-step--longterm {
  top: 50.6vw;
  left: 34.2%;
}

.ap-step--communication {
  top: 67.5vw;
  left: 2.1%;
}

/* --- CRAFTED WITH (taller) ---------------------------------------------- */
.ap-craft {
  height: 95.7vw;
  background: url("/assets/img/approach/workshop-1920.jpg") center top / cover no-repeat;
}

.ap-card--craft {
  top: 18.4vw;
  height: 59vw;
  padding: 2vw;
}

/* --- MATERIALES --------------------------------------------------------- */
.ap-materials {
  height: 85.5vw;
  background: var(--c-cream);
}

.ap-mat {
  position: absolute;
  margin: 0;
  overflow: hidden;
}

.ap-mat picture {
  display: block;
  width: 100%;
  height: 100%;
}

.ap-mat img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ap-mat--cement {
  top: 7.8vw;
  left: 37.32%;
  width: 25.36%;
  aspect-ratio: 4/3;
}

.ap-mat--steps {
  top: 30.7vw;
  left: 12.24%;
  width: 19.06%;
  aspect-ratio: 3/4;
}

.ap-mat--plaster {
  top: 33.8vw;
  left: 40.75%;
  width: 18.5vw;
  height: 18.5vw;
  aspect-ratio: 1;
}

.ap-mat--plaster img {
  object-position: right center;
  transform: scale(1.2);
  transform-origin: right center;
}

.ap-mat--orange {
  top: 30.7vw;
  left: 68.7%;
  width: 19.06%;
  aspect-ratio: 3/4;
}

.ap-mat--tiles {
  top: 59.8vw;
  left: 37.32%;
  width: 25.36%;
  aspect-ratio: 4/3;
}

/* --- LET'S TALK (olive + espiral) --------------------------------------- */
.ap-lets {
  height: 49.1vw;
  background: url("/assets/img/approach/olive-bg.png") center / cover no-repeat, var(--c-olive);
  overflow: visible;
}

.ap-lets .lets-talk {
  position: absolute;
  right: 11.7%;
  bottom: 0;
  height: 25vw;
}

/* ========================================================================
   MÓVIL: apilado sencillo (el layout absoluto solo aplica en desktop)
   ======================================================================== */
@media (max-width: 63.99rem) {

  .ap-hero,
  .ap-philo,
  .ap-work,
  .ap-process,
  .ap-craft,
  .ap-materials,
  .ap-lets {
    height: auto;
    overflow: visible;
    padding: 3rem 1.25rem;
  }

  .ap-hero__title {
    position: absolute;
    inset: 17.7vw 2.1% auto;
    display: grid;
    font-size: clamp(3rem, 9.375vw, 15rem);
    line-height: 0.86;
  }

  .ap-philo__h,
  .ap-card,
  .ap-wordmark,
  .ap-wordmark__l,
  .ap-wordmark__c,
  .ap-wordmark__r,
  .ap-work__title,
  .ap-work__img,
  .ap-work__at,
  .ap-work__brand,
  .ap-step,
  .ap-mat {
    position: static;
    width: auto;
    transform: none;
    inset: auto;
  }

  .ap-card {
    height: auto;
    margin: 2rem auto;
  }

  .ap-card__body {
    flex: none;
    font-size: 1.4rem;
    padding: 0;
  }

  .ap-card__body br,
  .ap-step p br {
    display: none;
  }

  .ap-card__head,
  .ap-card__foot {
    font-size: 2rem;
  }

  .ap-work__img {
    height: auto;
    aspect-ratio: 4/3;
    margin-top: 1.5rem;
  }

  .ap-step {
    margin-bottom: 2rem;
  }

  .ap-step h3 {
    font-size: 2rem;
  }

  .ap-step p,
  .ap-philo__h {
    font-size: 1.4rem;
  }

  .ap-philo__h {
    display: block;
  }

  .ap-mat {
    height: auto;
    aspect-ratio: 4/3 !important;
    margin-bottom: 1rem;
  }

  .ap-mat--plaster {
    aspect-ratio: 1 !important;
  }

  .ap-lets .lets-talk {
    position: static;
    margin: 1rem auto 0;
  }

  /* Composición móvil específica ---------------------------------------- */
  .ap-hero {
    position: relative;
    display: block;
    height: 70vw;
    min-height: 0;
    padding: 0;
  }

  .ap-hero__title {
    position: absolute;
    inset: 17.7vw 2.1% auto;
    display: grid;
    font-size: clamp(3rem, 9.375vw, 15rem);
    line-height: 0.86;
    text-align: center;
  }

  .ap-philo {
    padding: 2rem 1.25rem 3rem;
  }

  .ap-philo__h {
    font-family: var(--font-display);
    font-size: clamp(2rem, 10vw, 3.4rem);
    line-height: 0.9;
  }

  .ap-philo__h--r {
    margin: -0.9em 0 2rem;
    text-align: right;
  }

  .ap-card {
    width: min(100%, 26rem);
    padding: 1.5rem 1rem;
  }

  .ap-card__head,
  .ap-card__head2 {
    font-size: clamp(2rem, 10vw, 2.6rem);
  }

  .ap-card__body {
    font-size: clamp(1rem, 2.4vw, 1.2rem);
    line-height: 1.3;
    transform: translateY(0.9px);
  }

  .ap-card__body p+p {
    margin-top: 1.15rem;
  }

  .ap-card__foot {
    font-size: clamp(1.7rem, 8vw, 2.2rem);
  }

  .ap-wordmark {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
    font-size: clamp(1.8rem, 9vw, 2.5rem);
    line-height: 0.82;
  }

  .ap-wordmark__l,
  .ap-wordmark__c,
  .ap-wordmark__r {
    display: block;
  }

  .ap-wordmark__c {
    margin-left: 0;
  }

  .ap-wordmark__r {
    margin-left: 0;
  }

  .ap-work {
    padding: 3.5rem 1.25rem 4rem;
  }

  .ap-work__title {
    font-size: clamp(2.6rem, 13vw, 3.4rem);
    line-height: 0.82;
  }

  .ap-work__img {
    width: 100%;
    margin-top: 2rem;
  }

  .ap-work__signature {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 2.75rem;
  }

  .ap-work__at {
    flex: none;
    margin: 0.15em 0.55em 0 0;
    font-size: 1.15rem;
    line-height: 0.92;
  }

  .ap-work__brand {
    flex: none;
    width: auto;
    margin: 0;
    font-size: 1.45rem;
    line-height: 0.82;
  }

  .ap-process {
    padding: 4rem 1.25rem;
  }

  .ap-step {
    width: min(100%, 21rem);
    margin-bottom: 3.25rem;
  }

  .ap-step:nth-child(even) {
    margin-left: auto;
  }

  .ap-step h3 {
    font-size: clamp(1.8rem, 9vw, 2.3rem);
    margin-bottom: 0.45rem;
  }

  .ap-step p {
    font-size: clamp(1rem, 4.5vw, 1.15rem);
    line-height: 1.3;
  }

  .ap-lets {
    display: block;
    height: 75vw;
    min-height: 0;
    padding: 0;
  }

  .ap-lets .lets-talk {
    position: absolute;
    top: auto;
    right: 11.7%;
    bottom: 0;
    left: auto;
    width: 11.8%;
    min-height: 0;
    height: 25vw;
    margin: 0;
    padding: 1.4vw 0;
  }
}

@media (max-width: 47.99rem) {
  .ap-lets .lets-talk {
    right: 11.5%;
    width: 12.4%;
  }
}