/* ==========================================================================
   Hero
   ========================================================================== */
/* The next section gives the page room to scroll the lowest card's info
   card into view without moving the photo. */
.hero {
  /* room for the site header; grows a little on bigger screens */
  padding: clamp(104px, 3.6vw + 90px, 170px) 0 0;
  overflow-x: clip;
}

.hero__title {
  max-width: 13em;
  margin: 0 auto;
  padding: 0 16px;
  color: var(--text-strong);
  font-size: clamp(40px, 4.5vw, 72px); /* ≈65px at 1440px wide */
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.035em;
  text-align: center;
  text-wrap: balance;
}

/* Intro text and the wall share the same grid cell, so the outer
   columns rise beside the lead paragraph, as in the wireframe. */
.hero__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(28px, 2.4vw, 48px);
}

.hero__stage > * { grid-area: 1 / 1; }

.hero__intro {
  position: relative;
  z-index: 1;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}

.hero__lead {
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
  text-wrap: balance;
}

/* ---- Wall of project covers --------------------------------------------- */
/* Columns are absolutely placed by slot so the wall can slide like a
   carousel. The vertical offset belongs to the slot, not the column. */
.wall {
  position: relative;
  margin-top: clamp(0px, 2.2vw - 8px, 40px); /* more air under the lead on big screens */
  /* columns + room for the arrows under the centre column */
  height: calc(var(--off-center) + var(--w) * 2 + var(--gap) + 48px);
}

/* ---- slider arrows: either side of the centre column's lower edge ------------ */
.wall__arrow {
  position: absolute;
  top: calc(var(--off-center) + var(--w) * 2 + var(--gap) - 16px);
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-strong);
  box-shadow: var(--shadow-key);
  cursor: pointer;
  transition: background-color 150ms ease;
}

.wall__arrow:hover { background: var(--surface-subtle); }
.wall__arrow--prev { transform: translateX(calc(var(--w) / -2 - 100%)); margin-left: -16px; }
.wall__arrow--next { transform: translateX(calc(var(--w) / 2)); margin-left: 16px; }

.wall__arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wall__hint {
  display: none;
  margin: 8px 0 0;
  color: var(--text);
  font-size: 15px;
  text-align: center;
}

@media (hover: none) {
  .wall__hint { display: block; }
}

.wall__col {
  --x: 0;
  --y: var(--off-edge);
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  width: var(--w);
  transform: translate(calc(-50% + var(--x) * var(--step)), var(--y));
  transition: transform var(--slide) var(--ease-slide);
  will-change: transform; /* own GPU layer: the slide stays smooth while the page is busy */
}

.wall__col[data-slot="-4"] { --x: -4; }
.wall__col[data-slot="-3"] { --x: -3; }
.wall__col[data-slot="-2"] { --x: -2; }
.wall__col[data-slot="-1"] { --x: -1; --y: var(--off-side); }
.wall__col[data-slot="0"]  { --x: 0;  --y: var(--off-center); }
.wall__col[data-slot="1"]  { --x: 1;  --y: var(--off-side); }
.wall__col[data-slot="2"]  { --x: 2; }
.wall__col[data-slot="3"]  { --x: 3; }
.wall__col[data-slot="4"]  { --x: 4; }

/* invisible marker that always sits where the centre column ends up, so the
   page can scroll to a card while its column is still sliding */
.wall__probe {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--w);
  height: 0;
  transform: translate(-50%, var(--off-center));
  visibility: hidden;
  pointer-events: none;
}

.wall__col.is-clone { pointer-events: none; }
.wall__col.is-clone .card { animation: none; }

/* no hover state while the wall is moving */
.wall.is-sliding .card::before,
.wall.is-sliding .card__cta { opacity: 0 !important; }

/* badge sits on the centre slot's top edge, above the photo */
.hero__badge {
  position: absolute;
  top: calc(var(--off-center) - 40px);
  left: 50%;
  z-index: 2;
  width: 86px;
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 4px rgb(11 27 46 / .12));
  pointer-events: none;
}

.card {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 20px;
  background: var(--surface-subtle);
  animation: card-in 700ms var(--ease) both;
}

.wall__col:is([data-slot="-1"], [data-slot="1"]) .card { animation-delay: 80ms; }
.wall__col[data-slot="0"] .card { animation-delay: 160ms; }
.card + .card { animation-delay: 240ms; }

@keyframes card-in {
  from { opacity: 0; transform: translateY(16px); }
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* hover wash + "Ver proyecto" */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(38 39 57 / .22);
  opacity: 0;
  transition: opacity 150ms ease;
  pointer-events: none;
}

.card__cta {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 6px));
  transition: opacity 150ms ease, transform 300ms var(--ease), background-color 150ms ease;
}

.card__cta svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the whole card is the hit area (click handled in JS) */
.card { cursor: pointer; }

.card:hover::before,
.card:focus-within::before { opacity: 1; }

.card:hover .card__cta,
.card:focus-within .card__cta {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.card__cta:hover { background: var(--accent-hover); }

/* touch screens have no hover: keep the button visible */
/* touch screens: no "Ver proyecto" on every photo; one hint under the wall instead */
@media (hover: none) {
  .card::before, .card__cta { display: none; }
}

.card.is-active { visibility: hidden; }

/* ==========================================================================
   Small screens
   ========================================================================== */
@media (max-width: 720px) {
  :root {
    --w: 44vw;
    --gap: 8px;
    --off-edge: 0px;
    --off-side: calc(var(--w) * .14);
    --off-center: calc(var(--off-side) + var(--w) * .084);
  }

  .hero { padding: 104px 0 0; }
  .hero__stage { display: block; }
  .hero__lead { font-size: 16px; }
  .wall { margin-top: 40px; }
}