/*
 * The portfolio /nashe-portfolio/ (WP-14; boards Portfolio and Portfolio-mobile), on the tokens of css/base.css.
 * Markup: page-nashe-portfolio.php, template-parts/portfolio-gallery.php and portfolio-lightbox.php; script:
 * js/page-portfolio.js. Loaded only on the portfolio page; every rule, the lightbox's included, is scoped under its body
 * class .k-type-portfolio.
 *
 * Layout: as drawn from 1200 px (4 tiles of 282 × 211.5 with 24 px gaps) and below 768 px (2 tiles with 8 px gaps);
 * derived: 4 tiles of the fluid container from 1024 to 1199 px, 3 tiles with 16 px gaps from 768 to 1023 px (I13).
 */

/* ---------- Page frame: breadcrumbs, H1, the stored text ---------- */

.k-type-portfolio .k-portfolio-page__section {
  padding: 28px 0 72px;
  background: var(--k-white);
}

.k-type-portfolio .k-portfolio-page__title {
  margin: 20px 0 0;
  overflow-wrap: break-word;
}

.k-type-portfolio .k-portfolio-page__content {
  margin-top: 40px;
}

/* ---------- Grid ---------- */

.k-type-portfolio .k-portfolio__label {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  color: var(--k-ink);
}

.k-type-portfolio .k-portfolio__grid {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.k-type-portfolio .k-portfolio__grid:first-child {
  margin-top: 0;
}

.k-type-portfolio .k-portfolio__item {
  margin: 0;
  padding: 0;
  min-width: 0;
  container-type: inline-size;
}

/* The scroll margin keeps the focus ring (2 px outline + 5 px ring) clear of the sticky header and the phone quickbar
   when Tab, Shift+Tab or the lightbox's focus return scrolls a tile into view. */
.k-type-portfolio .k-portfolio__link {
  display: block;
  border-radius: var(--k-radius-card);
  cursor: zoom-in;
  scroll-margin-block: 12px;
}

/* --k-portfolio-focus: the crop position set on a tile's <li> (template-parts/portfolio-gallery.php). */
.k-type-portfolio .k-portfolio__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: var(--k-portfolio-focus, 50% 50%);
  border-radius: var(--k-radius-card);
  background: var(--k-panel);
  transition: opacity .15s ease;
}

/* The boards round each tile's height down to whole pixels (282 → 211, 175 → 131), so six rows end where drawn;
   the .05 px keeps columns whose widths differ by a subpixel (234.66 and 234.67 at 768 px) at the same height. */
@supports (height: round(down, 75cqw, 1px)) {
  .k-type-portfolio .k-portfolio__img {
    aspect-ratio: auto;
    height: round(down, 75cqw + .05px, 1px);
  }
}

.k-type-portfolio .k-portfolio__link:hover .k-portfolio__img {
  opacity: .88;
}

@media (max-width: 1023px) {
  .k-type-portfolio .k-portfolio-page__section {
    padding-bottom: 56px;
  }

  .k-type-portfolio .k-portfolio__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 767px) {
  .k-type-portfolio .k-portfolio-page__section {
    padding: 20px 0 32px;
  }

  .k-type-portfolio .k-portfolio-page__title {
    margin-top: 14px;
  }

  .k-type-portfolio .k-portfolio-page__content {
    margin-top: 24px;
  }

  .k-type-portfolio .k-portfolio__label {
    line-height: 21px;
  }

  .k-type-portfolio .k-portfolio__grid {
    margin-top: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}

/* ---------- Lightbox: a native <dialog> over the whole screen ---------- */

.k-type-portfolio .k-lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  background: var(--k-ink);
  color: var(--k-white);
}

.k-type-portfolio .k-lightbox:not([open]) {
  display: none;
}

.k-type-portfolio .k-lightbox::backdrop {
  background: #14284a; /* --k-ink; ::backdrop does not inherit custom properties in older browsers */
}

.k-type-portfolio .k-lightbox__figure {
  height: 100%;
  margin: 0;
  padding: 72px 96px 24px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 16px;
}

.k-type-portfolio .k-lightbox__frame {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.k-type-portfolio .k-lightbox__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  transition: opacity .15s ease;
}

.k-type-portfolio .k-lightbox__img:not([src]),
.k-type-portfolio .k-lightbox.is-loading .k-lightbox__img {
  opacity: 0;
}

.k-type-portfolio .k-lightbox__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 16px;
  font-size: 15px;
  line-height: 22px;
  text-align: center;
}

.k-type-portfolio .k-lightbox__caption {
  max-width: 720px;
}

.k-type-portfolio .k-lightbox__count {
  color: var(--k-footer-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.k-type-portfolio .k-lightbox__btn {
  position: absolute;
  width: 48px;
  height: 48px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: var(--k-white);
  cursor: pointer;
}

.k-type-portfolio .k-lightbox__btn:hover {
  background: rgba(255, 255, 255, .26);
}

.k-type-portfolio .k-lightbox__btn:focus-visible {
  outline: 2px solid var(--k-white);
  outline-offset: 0;
  box-shadow: 0 0 0 5px var(--k-focus);
}

.k-type-portfolio .k-lightbox__icon {
  display: block;
  width: 24px;
  height: 24px;
}

.k-type-portfolio .k-lightbox__btn--close {
  top: 16px;
  right: 16px;
}

.k-type-portfolio .k-lightbox__btn--prev,
.k-type-portfolio .k-lightbox__btn--next {
  top: 50%;
  margin-top: -24px;
}

.k-type-portfolio .k-lightbox__btn--prev {
  left: 24px;
}

.k-type-portfolio .k-lightbox__btn--next {
  right: 24px;
}

/* One picture only: no arrows. */
.k-type-portfolio .k-lightbox--single .k-lightbox__btn--prev,
.k-type-portfolio .k-lightbox--single .k-lightbox__btn--next {
  display: none;
}

/* Phones: the picture uses the width; the arrows sit under it, either side of the caption. */
@media (max-width: 767px) {
  .k-type-portfolio .k-lightbox__figure {
    padding: 72px 16px 16px;
    gap: 12px;
  }

  .k-type-portfolio .k-lightbox__bar {
    min-height: 48px;
    padding: 0 60px;
    align-content: center;
  }

  .k-type-portfolio .k-lightbox__btn--prev,
  .k-type-portfolio .k-lightbox__btn--next {
    top: auto;
    bottom: 16px;
    margin-top: 0;
  }

  .k-type-portfolio .k-lightbox__btn--prev {
    left: 16px;
  }

  .k-type-portfolio .k-lightbox__btn--next {
    right: 16px;
  }

  .k-type-portfolio .k-lightbox--single .k-lightbox__bar {
    padding: 0;
  }
}

/* Short screens (a phone turned sideways, a low window): thin bands above and below the picture, the arrows at its
   sides in 80 px bands that also hold the close button, so the picture gets the height. */
@media (max-height: 520px) and (orientation: landscape) {
  .k-type-portfolio .k-lightbox__figure {
    padding: 16px 80px 12px;
    gap: 8px;
  }

  .k-type-portfolio .k-lightbox__bar {
    min-height: 0;
    padding: 0;
  }

  .k-type-portfolio .k-lightbox__btn--prev,
  .k-type-portfolio .k-lightbox__btn--next {
    top: 50%;
    bottom: auto;
    margin-top: -24px;
  }

  .k-type-portfolio .k-lightbox__btn--prev {
    left: 16px;
  }

  .k-type-portfolio .k-lightbox__btn--next {
    right: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .k-type-portfolio .k-portfolio__img,
  .k-type-portfolio .k-lightbox__img {
    transition: none;
  }
}