/* ------------------------------------
   Archivo page
------------------------------------ */

.archivo-page {
  width: 100%;
  overflow: hidden;
}

.archivo-list {
  width: 100%;
  margin-top: calc(var(--header-spacing) + 30px);
}


/* ------------------------------------
   Shared typography
------------------------------------ */

.archivo-categoria__titulo {
  font-family: var(--font-sans);
  font-size: var(--fs-sans);
  font-weight: var(--fw-sans);
  line-height: var(--lh-sans);
  letter-spacing: var(--tracking-sans);
  color: var(--color-text);
}

.archivo-categoria__contador,
.archivo-item__pie,
.archivo-lightbox__caption,
.archivo-lightbox__counter {
  font-family: var(--font-serif);
  font-size: var(--fs-serif);
  font-weight: var(--fw-serif);
  line-height: var(--lh-serif);
  letter-spacing: var(--tracking-serif);
  color: var(--color-text);
}


/* ------------------------------------
   Category row
------------------------------------ */

.archivo-categoria {
  --archivo-gallery-start: calc(
    var(--page-padding) +
    (
      (
        100vw -
        (var(--page-padding) * 2) -
        (var(--grid-gap) * 17)
      ) / 18 * 10
    ) +
    (var(--grid-gap) * 10)
  );

  position: relative;

  width: 100%;
  min-width: 0;

  padding: 34px var(--page-padding) 38px;

  align-items: center;
}

.archivo-categoria + .archivo-categoria {
  margin-top: 22px;
}


/* ------------------------------------
   Category title and counter
------------------------------------ */

.archivo-categoria__header {
  grid-column: 9 / span 2;
  grid-row: 1;

  align-self: center;
  justify-self: stretch;

  min-width: 0;

  text-align: center;

  position: relative;
  z-index: 2;

  pointer-events: none;
}

.archivo-categoria__titulo,
.archivo-categoria__contador {
  margin: 0;
  text-align: center;
}

.archivo-categoria__titulo {
  text-transform: lowercase;
}

.archivo-categoria[data-categoria="ep3"] .archivo-categoria__titulo {
  text-transform: uppercase;
}

.archivo-categoria__contador {
  margin-top: 2px;
}


/* ------------------------------------
   Horizontal gallery
------------------------------------ */

.archivo-categoria__items {
  grid-column: 1 / -1;
  grid-row: 1;

  display: flex;
  align-items: center;

  gap: clamp(44px, 7.5vw, 116px);

  width: 100vw;
  min-width: 0;

  margin-left: calc(var(--page-padding) * -1);

  padding-left: calc(var(--archivo-gallery-start) + 45px);
  padding-right: clamp(44px, 7.5vw, 116px);

  overflow-x: auto;
  overflow-y: hidden;

  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;

  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;

  position: relative;
  z-index: 1;
}

.archivo-categoria__items::-webkit-scrollbar {
  display: none;
}

.archivo-categoria__items:focus {
  outline: none;
}


/* ------------------------------------
   Archive items
------------------------------------ */

.archivo-item {
  --archivo-vertical-height: clamp(150px, 14vw, 220px);
  --archivo-vertical-width: calc(
    var(--archivo-vertical-height) * 4 / 5
  );

  flex: 0 0 auto;

  width: auto;
  min-width: 0;
  margin: 0;

  scroll-snap-align: start;
}

.archivo-item__media {
  margin: 0;
  overflow: hidden;
  background: transparent;
  cursor: pointer;
}

.archivo-item--vertical .archivo-item__media {
  width: var(--archivo-vertical-width);
  height: var(--archivo-vertical-height);
}

.archivo-item--horizontal .archivo-item__media {
  width: var(--archivo-vertical-height);
  height: var(--archivo-vertical-width);
}

.archivo-item--cuadrada .archivo-item__media {
  width: var(--archivo-vertical-height);
  height: var(--archivo-vertical-height);
}

.archivo-item__imagen {
  display: block;

  width: 100%;
  height: 100%;
  margin: 0;

  object-fit: cover;
}


/* ------------------------------------
   Captions
------------------------------------ */

.archivo-item__pie {
  width: 100%;
  max-width: 100%;

  margin: 5px 0 0;

  overflow-wrap: break-word;
}

.archivo-item__pie a {
  color: inherit;
  text-decoration: none;
}


/* ------------------------------------
   Item hover
------------------------------------ */

.archivo-item:hover .archivo-item__imagen {
  opacity: 1;
}

.archivo-item:hover .archivo-item__pie,
.archivo-item:hover .archivo-item__pie a {
  color: var(--color-hover-green);
}


/* ------------------------------------
   Selection
------------------------------------ */

.archivo-page ::selection {
  background: var(--color-bg);
  color: var(--color-hover-green);
}

.archivo-page ::-moz-selection {
  background: var(--color-bg);
  color: var(--color-hover-green);
}


/* ------------------------------------
   Empty categories
------------------------------------ */

.archivo-categoria__items:empty {
  min-height: clamp(150px, 14vw, 220px);
}


/* ------------------------------------
   Lightbox
------------------------------------ */

.archivo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: none;

  background: rgba(246, 246, 246, 0.88);
}

.archivo-lightbox.is-open {
  display: block;
}

.archivo-lightbox__content {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 40px 80px;
}

.archivo-lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  width: auto;
  max-width: min(78vw, 1200px);
  max-height: 88vh;

  margin: 0;
}

.archivo-lightbox__counter {
  position: fixed;
  left: 50%;
  bottom: 10px;
  z-index: 3;

  width: auto;
  margin: 0;

  transform: translateX(-50%);

  text-align: center;
}

.archivo-lightbox__image {
  display: block;

  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 80vh;

  object-fit: contain;
}

.archivo-lightbox__caption {
  width: 100%;
  margin-top: 6px;
}

.archivo-lightbox__caption a {
  color: inherit;
  text-decoration: none;
}

.archivo-lightbox__caption a:hover {
  color: var(--color-hover-green);
}


/* ------------------------------------
   Lightbox navigation
------------------------------------ */

.archivo-lightbox__nav {
  position: absolute;
  top: 50%;
  z-index: 2;

  transform: translateY(-50%);

  padding: 12px;

  border: 0;
  background: transparent;

  font-family: var(--font-sans);
  font-size: calc(var(--fs-sans) * 1.2);
  font-weight: var(--fw-sans);
  line-height: var(--lh-sans);
  letter-spacing: var(--tracking-sans);
  color: var(--color-text);

  cursor: pointer;
}

.archivo-lightbox__nav--prev {
  left: var(--page-padding);
}

.archivo-lightbox__nav--next {
  right: var(--page-padding);
}

.archivo-lightbox__nav:hover {
  color: var(--color-hover-green);
}

.archivo-lightbox__nav[hidden] {
  display: none;
}


/* ------------------------------------
   Lightbox open state
------------------------------------ */

body.archivo-lightbox-open {
  overflow: hidden;
}


/* ------------------------------------
   Tablet
------------------------------------ */

@media (max-width: 1200px) {
  .archivo-list {
    margin-top: calc(var(--header-spacing) + 20px);
  }

  .archivo-categoria {
    padding-top: 30px;
    padding-bottom: 34px;
  }

  .archivo-categoria__header {
    grid-column: 8 / span 3;
  }

  .archivo-item {
    --archivo-vertical-height: clamp(146px, 15.75vw, 186px);
  }

  .archivo-categoria__items:empty {
    min-height: clamp(146px, 15.75vw, 186px);
  }

  .archivo-lightbox__figure {
    max-width: 82vw;
  }
}


/* ------------------------------------
   Small tablet
------------------------------------ */

@media (max-width: 991px) {
  .archivo-list {
    margin-top: calc(var(--header-spacing) + 16px);
  }

  .archivo-categoria {
    --archivo-gallery-start: calc(
      var(--page-padding) +
      (
        (
          100vw -
          (var(--page-padding) * 2) -
          (var(--grid-gap) * 17)
        ) / 18 * 9
      ) +
      (var(--grid-gap) * 9)
    );

    padding-top: 28px;
    padding-bottom: 32px;
  }

  .archivo-categoria + .archivo-categoria {
    margin-top: 14px;
  }

  .archivo-categoria__header {
    grid-column: 7 / span 3;
  }

  .archivo-categoria__items {
    gap: clamp(36px, 6vw, 64px);
    padding-right: clamp(36px, 6vw, 64px);
  }

  .archivo-item {
    --archivo-vertical-height: clamp(140px, 18vw, 173px);
  }

  .archivo-categoria__items:empty {
    min-height: clamp(140px, 18vw, 173px);
  }

  .archivo-lightbox__content {
    padding: 32px 64px;
  }
}


/* ------------------------------------
   Mobile
------------------------------------ */

@media (max-width: 767px) {
  .archivo-list {
    margin-top: calc(var(--header-spacing) + 28px);
  }

  .archivo-categoria {
    --archivo-gallery-start: 62vw;

    padding: 24px var(--page-padding) 28px;

    align-items: center;
  }

  .archivo-categoria + .archivo-categoria {
    margin-top: 14px;
  }

  .archivo-categoria__header {
    grid-column: 1 / -1;
    align-self: center;
    justify-self: stretch;

    width: 100%;

    text-align: center;
  }

  .archivo-categoria__items {
    gap: 34px;
    padding-right: 34px;
  }

  .archivo-item {
    --archivo-vertical-height: clamp(136px, 41vw, 173px);
  }

  .archivo-categoria__items:empty {
    min-height: clamp(136px, 41vw, 173px);
  }

  .archivo-item__pie {
    margin-top: 4px;
  }

  .archivo-lightbox__content {
    padding: 28px 42px;
  }

  .archivo-lightbox__figure {
    max-width: 84vw;
  }

  .archivo-lightbox__image {
    max-height: 74vh;
  }

  .archivo-lightbox__nav {
    padding: 8px;
  }
}


/* ------------------------------------
   Small mobile
------------------------------------ */

@media (max-width: 480px) {
  .archivo-list {
    margin-top: calc(var(--header-spacing) + 20px);
  }

  .archivo-categoria {
    --archivo-gallery-start: 62vw;

    padding-top: 22px;
    padding-bottom: 26px;
  }

  .archivo-categoria__header {
    grid-column: 1 / -1;
  }

  .archivo-categoria__items {
    gap: 28px;
    padding-right: 28px;
  }

  .archivo-item {
    --archivo-vertical-height: clamp(130px, 40vw, 160px);
  }

  .archivo-categoria__items:empty {
    min-height: clamp(130px, 40vw, 160px);
  }

  .archivo-lightbox__content {
    padding: 24px 34px;
  }

  .archivo-lightbox__figure {
    max-width: 86vw;
  }

  .archivo-lightbox__image {
    max-height: 72vh;
  }
}