/* ==================================================
   STILLS PAGE (photo project)
   one image at a time · INFO card · project info
   ================================================== */

.still-page {
  position: relative;
  min-height: 100dvh;
  padding: 82px 0 110px;
}


/* --------------------------------------------------
   VIEWER
   -------------------------------------------------- */

.still-viewer {
  position: relative;

  width: calc(100vw - 20px);
  height: calc(100dvh - 190px);

  margin: 0 auto;

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

  overflow: hidden;
}


/* --------------------------------------------------
   IMAGES
   -------------------------------------------------- */

.still-viewer-image {
  position: absolute;
  inset: 0;

  display: none;

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

  margin: 0;
}

.still-viewer-image.is-active {
  display: flex;
}

.still-viewer-image picture {
  display: contents;
}


/* Lightbox wrapper must not change image layout */

.still-lightbox-link {
  display: contents;
}


.still-viewer-image img {
  width: auto;
  height: auto;

  max-width: 100%;
  max-height: 100%;

  object-fit: contain;
}


/* Hide current image while INFO card is open */

.still-viewer-image.is-hidden-behind-info img {
  visibility: hidden;
}


.still-empty {
  font-family: var(--font-text);
}


/* --------------------------------------------------
   CUSTOM CURSOR
   -------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

  .still-viewer-image.is-active img {
    cursor: none;
  }

  .still-cursor {
    position: fixed;

    left: 0;
    top: 0;

    display: none;

    z-index: 9999;

    pointer-events: none;
    user-select: none;

    transform: translate(-50%, -50%);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 32px;
    font-weight: normal;
    line-height: 1;

    color: var(--blue);
  }
}


/* --------------------------------------------------
   CONTROLS
   -------------------------------------------------- */

.still-controls {
  position: absolute;

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

  z-index: 50;

  font-family: var(--font-text);
  font-size: clamp(13px, 1.05vw, 17px);
  line-height: 1;
}

.still-controls button {
  appearance: none;

  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;

  color: var(--blue);
}

.still-controls button:hover {
  color: var(--grey);
}


.still-image-navigation {
  display: flex;
  align-items: center;

  gap: .25em;
}


/* --------------------------------------------------
   INFO CARD
   -------------------------------------------------- */

.still-info-card {
  position: absolute;

  z-index: 20;

  background: var(--white);

  border: 0;
  border-radius: 0;

  font-family: var(--font-text);
  color: var(--blue);
}


/* Border */

.still-info-card::after {
  content: "";

  position: absolute;
  inset: 0;

  border: 1px solid var(--blue);
  border-radius: var(--radius);

  pointer-events: none;

  z-index: 10;
}


.still-info-card[hidden] {
  display: none;
}


/* --------------------------------------------------
   INFO TEXT
   -------------------------------------------------- */

.still-info-text {
  position: absolute;

  top: 20px;
  left: 20px;

  width: 55%;
  max-width: 700px;

  font-size: clamp(15px, 1.1vw, 19px);
  line-height: 1.15;

  z-index: 2;
}

.still-info-text p {
  margin: 0 0 1em;
}


/* Individual image information */

.still-image-info {
  display: none;
}

.still-image-info.is-active {
  display: block;
}


/* --------------------------------------------------
   INFO THUMBNAIL
   -------------------------------------------------- */

.still-info-image {
  position: absolute;

  top: 20px;
  right: 20px;

  width: 25%;
  height: 35%;

  display: flex;
  justify-content: flex-end;
  align-items: flex-start;

  z-index: 2;
}

.still-info-image img {
  width: auto;
  height: auto;

  max-width: 100%;
  max-height: 100%;

  object-fit: contain;
}


/* --------------------------------------------------
   PROJECT INFO
   -------------------------------------------------- */

.still-project-info {
  width: var(--content-width);

  margin: 110px auto 140px;

  transition: opacity .6s ease;
}

.js .still-project-info {
  opacity: 0;
}

.js main.is-scrolled .still-project-info {
  opacity: 1;
}


/* ==================================================
   MOBILE
   ================================================== */

@media (max-width: 650px) {

  .still-page {
    position: relative;

    padding: 72px 0 90px;
  }


  .still-viewer {
    position: relative;

    width: calc(100vw - 24px);

    /*
     * Available area between
     * fixed menu and bottom logo area
     */

    height: calc(100dvh - 72px - 90px);

    margin: 0 auto;

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

    overflow: hidden;
  }


  .still-viewer-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;

    display: none;

    align-items: center;
    justify-content: center;
  }


  .still-viewer-image.is-active {
    display: flex;
  }


  .still-viewer-image picture {
    display: contents;
  }


  .still-viewer-image img {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
  }


  /* INFO */

  .still-info-card {
    transform: none;
  }


  .still-info-text {
    top: 12px;
    left: 12px;

    width: 56%;

    font-size: 15px;
  }


  .still-info-image {
    top: 12px;
    right: 12px;

    width: 35%;
    height: 25%;
  }


  /* Project information */

  .still-project-info {
    width: calc(100vw - 24px);

    margin: 80px auto 100px;
  }
}


/* --------------------------------------------------
   TOUCH DEVICES
   -------------------------------------------------- */

@media (hover: none), (pointer: coarse) {

  .still-viewer-image.is-active img {
    cursor: auto;
  }

  .still-cursor {
    display: none !important;
  }
}


/* ==================================================
   DARK / GREY THEMES
   ================================================== */

body.stills-theme-black,
body.stills-theme-grey {
  color: #fff;
}


/* Header */

body.stills-theme-black .site-header,
body.stills-theme-grey .site-header {
  color: #fff;
}


/* Navigation */

body.stills-theme-black .main-nav a,
body.stills-theme-black .film-nav a,
body.stills-theme-grey .main-nav a,
body.stills-theme-grey .film-nav a {
  color: #fff;
}


body.stills-theme-black .film-nav span,
body.stills-theme-grey .film-nav span {
  color: #fff;
}


/* Active */

body.stills-theme-black .main-nav a.active,
body.stills-theme-black .film-nav a.active,
body.stills-theme-grey .main-nav a.active,
body.stills-theme-grey .film-nav a.active {
  color: #aaa;
}


/* Hover */

body.stills-theme-black .main-nav a:hover,
body.stills-theme-black .film-nav a:hover,
body.stills-theme-grey .main-nav a:hover,
body.stills-theme-grey .film-nav a:hover {
  color: #aaa;
}


/* Controls */

body.stills-theme-black .still-controls button,
body.stills-theme-grey .still-controls button {
  color: #fff;
}


body.stills-theme-black .still-controls button:hover,
body.stills-theme-grey .still-controls button:hover {
  color: #aaa;
}


/* Cursor */

body.stills-theme-black .still-cursor,
body.stills-theme-grey .still-cursor {
  color: #fff;
}


/* INFO card */

body.stills-theme-black .still-info-card,
body.stills-theme-grey .still-info-card {
  color: #fff;
}


body.stills-theme-black .still-info-card::after,
body.stills-theme-grey .still-info-card::after {
  border-color: #fff;
}


/* Project information */

body.stills-theme-black .still-project-info,
body.stills-theme-black .still-project-info *,
body.stills-theme-grey .still-project-info,
body.stills-theme-grey .still-project-info * {
  color: #fff;
}


/* --------------------------------------------------
   BLACK
   -------------------------------------------------- */

body.stills-theme-black {
  background: #000;
}

body.stills-theme-black .still-page {
  background: #000;
}

body.stills-theme-black .still-info-card {
  background: #000;
}


/* --------------------------------------------------
   GREY
   -------------------------------------------------- */

body.stills-theme-grey {
  background: #777;
}

body.stills-theme-grey .still-page {
  background: #777;
}

body.stills-theme-grey .still-info-card {
  background: #777;
}


/* --------------------------------------------------
   PAGE LOGO
   -------------------------------------------------- */

body.stills-theme-black .page-logo--name,
body.stills-theme-grey .page-logo--name {
  color: #fff;
}

/* ==================================================
   LIGHTBOX THEME
   inherits project background
   ================================================== */

/* WHITE */

body.stills-theme-white .lightbox {
  background: #fff;
  color: var(--blue);
}


/* BLACK */

body.stills-theme-black .lightbox {
  background: #000;
  color: #fff;
}


/* GREY */

body.stills-theme-grey .lightbox {
  background: #777;
  color: #fff;
}


/* Lightbox controls */

body.stills-theme-black .lightbox-close,
body.stills-theme-black .lightbox-prev,
body.stills-theme-black .lightbox-next,
body.stills-theme-grey .lightbox-close,
body.stills-theme-grey .lightbox-prev,
body.stills-theme-grey .lightbox-next {
  color: #fff;
}


/* Caption */

body.stills-theme-black .lightbox-caption,
body.stills-theme-grey .lightbox-caption {
  color: #fff;
}