/* ==========================================================================
   REVAMPED EDITORIAL GALLERY LIST VIEW SYSTEM
   ========================================================================== */
.f3-works-list-view {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: gallery;
}

.f3-gallery-list-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 100px; /* 100px separation between project rows */
  box-sizing: border-box;
  --gallery-subbar-margin: 34px; /* Reduced by 30px (64px - 30px) */
  --gallery-subbar-height: 22px;
  --gallery-extra-height: calc(var(--gallery-subbar-margin) + var(--gallery-subbar-height)); /* 34px + 22px = 56px */
  --row-std-base-height: clamp(230px, calc((100vw - 50px - 132.53px) / 3.1985), 450px);
  --row-std-base-height: clamp(230px, calc((100cqi - 132.53px) / 3.1985), 540px);
  --row-std-full-height: calc(var(--row-std-base-height) + var(--gallery-extra-height));
}

.f3-gallery-project-block {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

.f3-gallery-project-title {
  display: none;
}

.f3-gallery-hairline-divider {
  width: 100%;
  height: 0;
  border-top: 1px solid var(--intro-divider-color, #282828);
  margin-bottom: 30px;
  box-sizing: border-box;
  position: relative;
}

.f3-gallery-hairline-divider::before,
.f3-gallery-hairline-divider::after {
  content: '';
  position: absolute;
  width: var(--f3-divider-square-size, 2px);
  height: var(--f3-divider-square-size, 2px);
  background-color: var(--f3-divider-square-color, #e5e5e6);
  top: -1px;
  pointer-events: none;
  z-index: 2;
}

.f3-gallery-hairline-divider::before {
  left: 0;
}

.f3-gallery-hairline-divider::after {
  right: 0;
}

.f3-gallery-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  gap: 25px; /* 25px margin separation between images */
  box-sizing: border-box;
  position: relative;
  --row-base-height: var(--row-std-base-height);
  --row-full-height: var(--row-std-full-height);
}

/* Row 1: U.S. Ski & Snowboard (USSS) - Aligned towards right */
.f3-gallery-row-1 {
  justify-content: flex-end;
}

.f3-gallery-offset-spacer {
  display: none;
}

/* Items with subbar: USSS 1, Memphis 1, NK Hoops 1, Uniros 3 — identical size, ratio, height, width */
.f3-gallery-card-usss-1 .f3-gallery-item,
.f3-gallery-card-memphis-1 .f3-gallery-item,
.f3-gallery-card-nk-1 .f3-gallery-item,
.f3-gallery-card-uniros-3 .f3-gallery-item {
  height: var(--row-base-height);
  aspect-ratio: 1800 / 1408;
}

/* Portrait items without subbar: USSS 2, Memphis 2, NK Hoops 2, Uniros 2 — identical size, ratio, height, width */
.f3-gallery-card-usss-2 .f3-gallery-item,
.f3-gallery-card-memphis-2 .f3-gallery-item,
.f3-gallery-card-nk-2 .f3-gallery-item,
.f3-gallery-card-uniros-2 .f3-gallery-item {
  height: var(--row-full-height);
  aspect-ratio: 748 / 890;
}

/* Flexible item filling remaining space to left edge: Uniros 1 */
.f3-gallery-card-wrap.f3-gallery-card-uniros-1 {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

.f3-gallery-card-wrap.f3-gallery-card-uniros-1 .f3-gallery-item {
  width: 100%;
  height: var(--row-full-height);
}

/* Wide item without subbar: Memphis 3 */
.f3-gallery-card-memphis-3 .f3-gallery-item {
  height: var(--row-full-height);
  aspect-ratio: 962 / 891;
}

/* Row 2: Memphis Grizzlies - Full width with 0 margin to site's right side */
.f3-gallery-row-2 {
  justify-content: flex-start;
}

/* Row 3: NK Hoops - Aligned towards left with 25px margin to site's left side */
.f3-gallery-row-3 {
  justify-content: flex-start;
}

/* Row 4: Uniros - Aligned towards right */
.f3-gallery-row-4 {
  justify-content: flex-end;
}

.f3-gallery-offset-spacer-right {
  display: none;
}

/* Bleed modifiers for 0 margin to the site's side */
.f3-bleed-right {
  margin-right: calc(-1 * var(--f3-gutter-x, 25px));
}

/* Card Wrap & Media Container */
.f3-gallery-card-wrap {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
}

.f3-gallery-item,
.f3-gallery-item:hover,
.f3-gallery-item:focus,
.f3-gallery-item:active {
  display: block;
  width: auto;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  background-color: transparent;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  opacity: 1;
  transform: none;
}

.f3-gallery-media {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  display: block;
  opacity: 1;
}

.f3-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0%) contrast(100%) brightness(100%);
  opacity: 1;
  transform: none;
  transition: filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: filter;
}

@media (hover: hover) and (pointer: fine) {
  /* When hovering over one image, all other images turn into black and white with 120% contrast and 50% brightness */
  .f3-gallery-list-wrap:has(.f3-gallery-item:hover) .f3-gallery-item:not(:hover) .f3-gallery-img {
    filter: grayscale(100%) contrast(120%) brightness(50%);
    opacity: 1;
  }

  .f3-gallery-item:hover,
  .f3-gallery-item:hover .f3-gallery-img {
    filter: grayscale(0%) contrast(100%) brightness(100%);
    opacity: 1;
    transform: none;
  }
}

/* Mono Label below every project image */
.f3-gallery-img-code {
  display: block;
  width: 100%;
  margin-top: 10px; /* 10px margin to bottom of image */
  text-align: left;
  color: #757575;
  opacity: 1;
  font-family: var(--type-mono-a-font, var(--font-mono, 'PP Supply Mono', monospace));
  font-size: var(--type-mono-a-size, 11px);
  font-weight: var(--type-mono-a-weight, 300);
  line-height: 1;
  letter-spacing: var(--type-mono-a-spacing, 0.5px);
  text-transform: uppercase;
  user-select: none;
  box-sizing: border-box;
  cursor: default;
}

.f3-gallery-img-code:hover {
  color: #757575;
  opacity: 1;
}

/* Subbar containing badge + button */
.f3-gallery-subbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: var(--gallery-subbar-margin, 34px);
  height: var(--gallery-subbar-height, 22px);
  box-sizing: border-box;
  gap: 12px;
}

.f3-list-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #161616;
  border: none;
  color: #faf9fc;
  font-family: var(--type-mono-light-font, 'Supply-Light', 'PP Supply Mono', monospace);
  font-size: var(--type-mono-a-size, 11px);
  font-weight: var(--type-mono-light-weight, 300);
  letter-spacing: var(--type-mono-a-spacing, 0.5px);
  padding: 0 var(--rect-btn-padx, 8px);
  height: var(--rect-btn-height, 22px);
  min-width: var(--rect-btn-min-width, auto);
  box-sizing: border-box;
  border-radius: 0;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}

/* Responsive Breakpoints */
@media (max-width: 960px) {
  .f3-gallery-row {
    --row-base-height: clamp(200px, 24vw, 280px);
    gap: 16px;
  }

  .f3-gallery-list-wrap {
    gap: 60px;
  }
}

@media (max-width: 640px) {
  .f3-gallery-offset-spacer,
  .f3-gallery-offset-spacer-right {
    display: none;
  }

  .f3-bleed-right {
    margin-right: 0;
  }

}

/* Works 2-Column Staggered Grid Container */
.f3-works-grid-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: var(--works-grid-margin-top, 0px);
  padding-bottom: var(--works-grid-padding-bottom, 100px);
}

/* Individual Work Card Custom Margins */

/* Individual Work Card */

.f3-work-card:hover .f3-work-card-title,
.f3-work-card:hover .f3-title-flip,
.f3-work-card:hover .f3-title-face,
.f3-work-card:hover .f3-title-front,
.f3-work-card:hover .f3-title-back,
.f3-work-card:hover .text-flip-face,
.f3-work-card:hover .text-flip-front,
.f3-work-card:hover .text-flip-back {
  color: #faf9fc;
  opacity: 1;
}

/* Full-bleed flexible media block with 3:2 aspect-ratio (3 width, 2 length) */

@media (hover: hover) and (pointer: fine) {
  .f3-works-grid-container:has(.f3-work-card:hover) .f3-work-card:not(:hover) .f3-work-card-media img.f3-card-img-primary {
    filter: grayscale(100%) contrast(120%) brightness(50%);
  }
}

/* Project Thumbnail Corner Number Badge (Top-Left 0px, White Square, Black Mono Number) */

/* Smaller 3:2 Rectangle that slides up from bottom edge on hover and settles centered */

/* Floating /view/ Cursor Follower Tag for Work Cards */
.f3-cursor-view-tag {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 999999;
  font-family: var(--type-mono-a-font, var(--font-mono, 'PP Supply Mono', monospace));
  font-size: var(--type-mono-a-size, 11px);
  font-weight: 500;
  letter-spacing: var(--type-mono-a-spacing, 0.5px);
  text-transform: uppercase;
  color: #ffffff;
  mix-blend-mode: difference;
  background: transparent;
  padding: 0;
  margin: 0;
  line-height: 1;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.92);
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.18s;
  will-change: transform, opacity;
  white-space: nowrap;
}

.f3-cursor-view-tag.is-visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

@media (hover: none) {
  .f3-cursor-view-tag {
    display: none;
  }
}

/* Card Info Block Beneath Media */

/* Title Row with Project Name on Left & Year on Right (Baseline Aligned) */