/* v2: Inter, served from the site itself (public/fonts), so the web looks the
   same on Mac, Windows and Android. To go back to the system font, delete this
   block and the "Inter" override at the end of this file. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations'),
       url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations'),
       url('/assets/fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --color-bg: #ffffff;
  --color-text: #111111;
  --color-muted: #c4c4c4;
  --color-border: #e2e2e2;
  --color-hover: #f5f5f5;
  /* Header spacing (matches the mockup): menu line, project-info line, then images */
  --header-pad-top: 9px;
  --header-row-gap: 5px;
  --header-pad-bottom: 12px;
  /* Single type scale for the whole site (home, ficha, desktop and mobile) */
  --font-size: 11px;
  --font-weight: 500;
  --line-height: 12.5px; /* v2: was 12px */
}

* {
  box-sizing: border-box;
  line-height: var(--line-height);
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  color: var(--color-text);
  background: var(--color-bg);
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
}

/* Header — one row on desktop: EMS · .INFO · Image/List · tags ··· tagline · contact */
.site-header {
  /* Fixed (not sticky): body is only 100% tall, so a sticky header would scroll
     away after one screen. body gets padding-top = header height (set from JS
     as --header-height, with the mockup's 55px as fallback). */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding-bottom: var(--header-pad-bottom);
  background: var(--color-bg);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--header-row-gap) 45px;
  padding: var(--header-pad-top) 10px 0;
}

/* .INFO sits right after the name, so it reads as one domain:
   ELOI MONTENEGRO SANCLEMENTE.INFO */
.header-brand {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

/* EMS initials; the full name sits on top in the same spot and only shows on hover */
.logo {
  position: relative;
  display: block;
}

.logo-name {
  letter-spacing: normal;
}

.logo .logo-name {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  visibility: hidden;
}

.logo:hover .logo-name {
  visibility: visible;
}

.logo:hover .logo-mark {
  visibility: hidden;
}

.logo-mark {
  position: relative;
  display: block;
  height: var(--line-height);
}

.logo-mark-letter {
  position: absolute;
  top: 0;
  left: 0;
}

.header-nav-link:hover {
  color: var(--color-muted);
}

.header-tagline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 45px;
}

.content-mode-toggle {
  display: flex;
  gap: 8px;
}

.content-mode-btn {
  border: none;
  background: none;
  padding: 0;
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  color: var(--color-muted);
  cursor: pointer;
}

.content-mode-btn.is-current {
  color: var(--color-text);
}

.tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.tag-btn {
  border: none;
  background: none;
  padding: 0;
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  color: var(--color-muted);
  cursor: pointer;
}

.tag-btn.is-selected {
  color: var(--color-text);
}

.is-tag-hidden {
  display: none !important;
}

.header-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 45px;
  margin-left: auto;
}

.header-contact p {
  margin: 0;
}

.header-contact-links {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Contact / Instagram are buttons: grey like the inactive menu items, black on hover */
.header-contact-links {
  color: var(--color-muted);
}

.header-contact a:hover {
  color: var(--color-text);
}

.header-info-row {
  position: relative;
  height: var(--line-height);
  margin: var(--header-row-gap) 10px 0;
}

/* 1 / 6 toggle: small white box floating over the images, centered horizontally
   and vertically on the first row of thumbnails (--toggle-top is set from JS) */
.view-toggle-row {
  position: fixed;
  top: var(--toggle-top, 50vh);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
}

.view-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px;
  background: var(--color-bg);
}

.view-toggle-btn {
  border: none;
  background: none;
  color: var(--color-muted);
  font-weight: var(--font-weight);
  font-size: var(--font-size);
  padding: 0.4rem;
  cursor: pointer;
}

.view-toggle-btn.is-current {
  color: var(--color-text);
}

body[data-page="home"] {
  padding-top: var(--header-height, 55px);
}

/* "List" scrolls to the index: keep it clear of the fixed header */
.project-index {
  scroll-margin-top: var(--header-height, 55px);
}

/* Empty state */
.empty-state {
  text-align: center;
  color: var(--color-muted);
  padding: 4rem 1rem;
}

/* Grid view (Modo 1: 6 columnas / responsive) */
.view-grid .hero-view {
  display: none;
}

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

.grid-cell {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.grid-cell img,
.grid-cell video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.grid-hover-info {
  display: flex;
  flex-wrap: nowrap;
  gap: 30px;
  white-space: nowrap;
  color: var(--color-text);
  pointer-events: none;
}

.grid-hover-counter {
  margin-right: 8px;
}

/* Mobile: no sticky header, so tapping an image shows its info pinned to the top */
@media (max-width: 767px) {
  .grid-hover-info.is-active {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 25;
    padding: 10px;
    background: var(--color-bg);
  }
}

.project-index {
  display: flex;
  flex-direction: column;
  padding: 4rem 10px 2rem;
}

.project-index-row {
  display: flex;
  gap: 30px;
  padding: 2px 0;
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  color: var(--color-text);
}

.project-index-row:hover {
  color: var(--color-muted);
}

.project-index-row.is-tag-dimmed {
  color: var(--color-muted);
}

@media (min-width: 1024px) {
  .photo-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 6 columns only on large external monitors; laptops keep 4 */
@media (min-width: 1920px) {
  .photo-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Hero view (Modo 2: 1 columna) */
.view-hero .grid-view {
  display: none;
}

.hero-view {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.hero-item {
  display: block;
  width: 100%;
}

.hero-item img,
.hero-item video {
  width: 100%;
  height: auto;
}

.ficha-logo-ghost {
  position: fixed;
  top: 0;
  left: 10px;
  visibility: hidden;
  pointer-events: none;
}

.ficha-logo-ghost * {
  visibility: hidden !important;
}

/* Ficha de proyecto */
.ficha-body {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 1;
  transition: opacity 200ms ease;
  animation: ficha-fade-in 250ms ease;
}

.ficha-body.is-leaving {
  opacity: 0;
}

@keyframes ficha-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.ficha-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  /* same top offset as the home header line */
  padding: var(--header-pad-top) 10px 10px;
}

.ficha-nav-controls {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.ficha-nav-btn {
  border: none;
  background: none;
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  color: var(--color-text);
  cursor: pointer;
  padding: 0;
}

.ficha-nav-btn:hover {
  color: var(--color-muted);
}

.ficha-info {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  /* same gap between category, number, title, description and "Done at" */
  gap: var(--header-row-gap) 30px;
  min-width: 0;
}

.ficha-number,
.ficha-services,
.ficha-title,
.ficha-description,
.ficha-studio {
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  color: var(--color-text);
  margin: 0;
}

.ficha-description {
  width: 700px;
  max-width: 100%;
}

.ficha-studio {
  color: var(--color-muted);
}

.carousel-info-slide {
  display: none;
}

@media (max-width: 767px) {
  .ficha-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 25;
    background: var(--color-bg);
  }

  .ficha-header .ficha-description,
  .ficha-header .ficha-studio {
    display: none;
  }

  /* phone: "Done at ..." in a darker grey, the light one is barely visible */
  .carousel-info-slide .ficha-studio {
    color: #8a8a8a;
  }

  .carousel-info-slide {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 auto;
    width: 100%;
    padding: 20px 10px;
    scroll-snap-align: start;
  }
}

.carousel {
  position: relative;
  flex: 1;
  min-height: 0;
  outline: none;
}

.carousel-track {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0;
}

.carousel-slide,
.carousel-next-slide {
  flex: 0 0 66.3%; /* 78% - 15% */
  width: 100%;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-slide img,
.carousel-slide video {
  height: 100%;
  width: auto;
  max-width: 100%;
}

.carousel-next-slide {
  flex-wrap: wrap;
  gap: 30px;
  padding: 20px;
}

.carousel-next-slide:hover .ficha-title {
  color: var(--color-muted);
}

@media (min-width: 768px) {
  /* Same space below as the header takes above, so photos sit in the
     vertical centre of the screen, not just of the area under the header */
  .carousel {
    padding-bottom: var(--ficha-header-height, 31px);
  }

  /* White 10px margin on the left: hides the edge of the previous photo */
  .carousel::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 10px;
    background: var(--color-bg);
    z-index: 2;
    pointer-events: none;
  }

  .carousel-track {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* first photo starts at the same 10px margin as the text above */
    padding: 0 10px;
    scroll-padding-inline: 10px;
  }

  .carousel-slide,
  .carousel-next-slide {
    flex-basis: 40.8%; /* 48% - 15% */
    width: auto;
    height: 100%;
  }

  .carousel-slide img {
    width: 100%;
    height: auto;
    max-height: 100%;
    max-width: none;
  }
}

@media (min-width: 1024px) {
  .carousel-slide,
  .carousel-next-slide {
    flex-basis: 32.3%; /* 38% - 15% */
  }
}

@media (min-width: 1440px) {
  .carousel-slide,
  .carousel-next-slide {
    flex-basis: 25.5%; /* 30% - 15% */
  }
}

/* Footer */
.site-footer {
  padding: 1.25rem;
  text-align: left;
  color: var(--color-text);
  font-weight: var(--font-weight);
  font-size: var(--font-size);
}

.site-footer p {
  margin: 0;
}

@media (max-width: 767px) {
  /* Mobile: stacked and not sticky (EMS · .INFO / tagline + contact / Image-List + tags) */
  .site-header {
    position: relative;
  }

  body[data-page="home"] {
    padding-top: 0;
  }

  .header-inner {
    flex-direction: column;
    gap: 20px;
    padding-top: 10px;
  }

  .header-contact {
    order: 1;
    margin-left: 0;
    flex-direction: column;
  }

  .header-tagline {
    order: 2;
    gap: 4px 30px;
  }
}

/* Cookie banner */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 10px;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner p {
  margin: 0;
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  color: var(--color-text);
}

.cookie-banner-actions {
  display: flex;
  gap: 1.25rem;
}

/* Ficha: description takes only the width of its text (max 700px) so
   "Done at ..." follows it with the same gap as the other elements */
.ficha-header .ficha-description {
  width: auto;
  max-width: 700px;
}

/* Ficha carousel: no visible scrollbar (navigation stays with trackpad,
   mouse wheel, arrow keys and swipe) */
.carousel-track {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* v2: middle slot of the 1 / 6 pill: "More info" label and the hovered
   project's title are layered in the same spot; the slot's width animates. */
.view-toggle-slot {
  position: relative;
  display: block;
  height: calc(var(--line-height) + 0.8rem);
  overflow: hidden;
  transition: width 260ms ease;
}

.view-toggle-e,
.view-toggle-title-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  color: var(--color-text);
  transition: opacity 150ms ease;
}

/* label: invisible until the pill is hovered (or the panel is open) */
.view-toggle-e {
  opacity: 0;
  user-select: none;
}

.view-toggle:hover .view-toggle-e,
.view-toggle.is-open .view-toggle-e,
.view-toggle-e:focus-visible {
  opacity: 1;
}

/* title: only while hovering a project */
.view-toggle-title-text {
  opacity: 0;
  pointer-events: none;
}

.view-toggle.has-title .view-toggle-title-text {
  opacity: 1;
}

.view-toggle.has-title .view-toggle-e {
  opacity: 0;
  pointer-events: none;
}

/* v2: pill = row (1 Info 6) + expandable info panel below it */
.view-toggle {
  flex-direction: column;
  gap: 0;
}

.view-toggle-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* "Info" is a button now */
button.view-toggle-e {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  cursor: pointer;
}

button.view-toggle-e:hover {
  color: var(--color-muted);
}

.view-toggle-panel {
  width: 0;
  height: 0;
  overflow: hidden;
  transition: width 260ms ease, height 260ms ease;
}

.view-toggle-panel-inner {
  width: max-content;
  max-width: min(420px, calc(100vw - 40px));
  padding: 0.4rem 0.4rem 0.6rem;
  text-align: center;
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  color: var(--color-text);
  opacity: 0;
  transition: opacity 200ms ease;
}

.view-toggle.is-open .view-toggle-panel-inner {
  opacity: 1;
  transition-delay: 120ms;
}

.view-toggle-panel-inner p {
  margin: 0;
}

.view-toggle-panel-inner p + p {
  margin-top: var(--line-height);
}

.view-toggle-panel-inner a:hover {
  color: var(--color-muted);
}

/* v2: no header bar — content starts at the very top of the page */
.site-header {
  padding: 0;
  height: 0;
  background: none;
}

body[data-page="home"] {
  padding-top: 0 !important;
}

#gridHoverInfo {
  display: none !important;
}

/* v2: Image / List inside the info panel */
.view-toggle-panel-modes {
  justify-content: center;
  margin-top: var(--line-height);
}

/* v2: compact pill ("1 6") when nothing is hovered */
.view-toggle-slot {
  transition: width 260ms ease, margin 260ms ease;
}

.view-toggle.is-compact .view-toggle-slot {
  margin: 0 -5px; /* cancels the 10px gaps on both sides of the empty slot */
}

/* v2: list hover -> the pill shows only the project's first image, exactly as
   wide as the compact "1 6" pill (width set from JS) */
.view-toggle-preview {
  display: none;
}

.view-toggle.has-preview {
  padding: 0;
}

.view-toggle.has-preview .view-toggle-main,
.view-toggle.has-preview .view-toggle-panel {
  display: none;
}

.view-toggle.has-preview .view-toggle-preview {
  display: block;
}

.view-toggle-preview img,
.view-toggle-preview video {
  display: block;
  width: 100%;
  height: auto;
}

/* v2: in the project list, only the text reacts to the mouse (hover preview,
   colour change and click), not the empty space to the right of each row */
.project-index-row {
  align-self: flex-start;
  pointer-events: none;
}

.project-index-row > span {
  pointer-events: auto;
}

/* v2: the list preview grows downwards from the pill's top edge (instead of
   from its centre): the top of the image sits where the top of "1 6" was */
.view-toggle-row:has(.view-toggle.has-preview) {
  transform: translate(-50%, calc(var(--pill-height, 35px) / -2));
}

/* v2: same space between the last images and the list as the list's left
   margin (10px: 8px padding + 2px row padding) */
.project-index {
  padding-top: 8px;
}

/* v2: footer under the list: 50px gap, info block, then copyright.
   Same 10px left margin as the list; blocks separated by one blank line. */
.project-index {
  padding-bottom: 0;
}

.site-footer {
  margin-top: 48px; /* + 2px row padding = 50px from the last list row */
  padding: 0 10px 10px;
}

.site-footer p {
  margin: 0;
}

.site-footer p + p,
.site-footer .site-footer-copy {
  margin-top: var(--line-height);
}

.site-footer a:hover {
  color: var(--color-muted);
}

/* v2: same 50px between Instagram and the copyright as between the list and the info */
.site-footer .site-footer-copy {
  margin-top: 50px;
}

/* v2: intro state (first paint): title in normal flow so the slot already has
   the name's width, with no animation */
.view-toggle.is-intro .view-toggle-slot {
  transition: none;
}

.view-toggle.is-intro .view-toggle-title-text {
  position: static;
  transform: none;
  display: block;
  transition: none;
}

/* v2: the carousel scrolls freely on every screen. Desktop: JS settles on
   the nearest photo when the gesture ends. Phone: the finger moves the photos
   continuously with the phone's own momentum (snapping to every photo made the
   scroll feel jerky, as if it went in chunks). */
.carousel-track {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

/* v2: images of any proportion.
   Home grid: every image fills its 4:5 cell, cropped from the centre
   (wide images such as websites or book spreads are cut at the sides). */
.grid-cell img,
.grid-cell video {
  object-fit: cover;
}

/* Project page (desktop): every photo has the same HEIGHT (the height a 4:5
   photo has at the usual slide width) and keeps its own proportions, so wide
   images are shown complete and simply take more width. */
@media (min-width: 768px) {
  :root {
    --slide-w: 40.8vw;
  }

  .carousel-slide {
    flex: 0 0 auto;
    width: auto;
  }

  .carousel-slide img,
  .carousel-slide video {
    height: min(calc(var(--slide-w) * 1.25), 100%);
    width: auto;
    max-width: none;
    max-height: none;
  }
}

@media (min-width: 1024px) {
  :root {
    --slide-w: 32.3vw;
  }
}

@media (min-width: 1440px) {
  :root {
    --slide-w: 25.5vw;
  }
}

/* v2: Inter for the whole site (same size 11px / weight 500 / line 12px) */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* v2: info panel text ranged left (Image / List stays centred) */
.view-toggle-panel-inner p {
  text-align: left;
}

/* v2: videos load only when near the screen; until then keep the usual 4:5
   space (then the video's own proportions) so the page doesn't jump */
.hero-item video {
  aspect-ratio: auto 4 / 5;
  background: var(--color-hover);
}

/* Text only for search engines and screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}