/* ==========================================================================
   ProjectFlow 2.11 – ways to show the projects: grid, masonry, list (with a
   floating picture), 3D carousel and compact, and the switch between them.
   The cards are the same in every view; only the layout changes.
   ========================================================================== */

/* --- Switch ---------------------------------------------------------------- */
.pfps-views-switch {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--pfps-line);
  border-radius: 999px;
  background: var(--pfps-surface);
  isolation: isolate;
}

.pfps-views-switch__btn {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--pfps-muted);
  cursor: pointer;
  transition: color .35s var(--pfps-ease), transform .35s var(--pfps-ease);
}

.pfps-views-switch__btn:hover {
  color: var(--pfps-ink);
}

.pfps-views-switch__btn:active {
  transform: scale(.92);
}

.pfps-views-switch__btn.is-active,
.pfps-views-switch__btn.is-active:hover {
  color: #fff;
}

.pfps-views-switch__btn:focus-visible {
  outline: 2px solid var(--pfps-accent);
  outline-offset: 2px;
}

.pfps-views-switch__btn svg {
  display: block;
  pointer-events: none;
}

.pfps-views-switch__glider {
  position: absolute;
  z-index: 0;
  top: 4px;
  left: 0;
  width: 38px;
  height: 34px;
  border-radius: 999px;
  background: var(--pfps-ink);
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--pfps-ink) 70%, transparent);
  opacity: 0;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1), width .55s cubic-bezier(.22, 1, .36, 1);
}

.pfps-views-switch.is-ready .pfps-views-switch__glider {
  opacity: 1;
}

/* Before the script measures the buttons. */
.pfps-views-switch:not(.is-ready) .pfps-views-switch__btn.is-active {
  background: var(--pfps-ink);
}

.pfps-toolbar-top .pfps-views-switch {
  margin-left: auto;
}

.pfps-result-count + .pfps-views-switch {
  margin-left: .6rem;
}

.pfps-tx .pfps-fbar__row > .pfps-views-switch {
  margin-left: .2rem;
}

/* Only the switch in the bar (no filters, no search). */
.pfps-tx .pfps-fbar__row > .pfps-fbar__count:first-child {
  margin-left: 0;
}

.pfps-tx .pfps-fbar__row > .pfps-fbar__count:first-child + .pfps-views-switch {
  margin-left: auto;
}

/* Every view except the grid lines the cards up (no staggered second column). */
.pfps-wrap .pfps-views:not(.pfps-view-grid) > .pfps-card:nth-child(n) {
  margin-top: 0;
}

/* --- Masonry ------------------------------------------------------------------ */
.pfps-wrap .pfps-views.pfps-view-masonry {
  display: block;
  columns: 3 260px;
  column-gap: clamp(1.1rem, 2.4vw, 2rem);
}

.pfps-wrap .pfps-views.pfps-view-masonry > .pfps-card {
  display: block;
  width: 100%;
  margin: 0 0 clamp(1.4rem, 3vw, 2.4rem);
  break-inside: avoid;
  page-break-inside: avoid;
}

.pfps-wrap .pfps-views.pfps-view-masonry > .pfps-empty {
  column-span: all;
}

/* Pictures of different heights make the mosaic. */
.pfps-wrap .pfps-view-masonry > .pfps-card:nth-child(6n + 1) .pfps-card-media,
.pfps-wrap .pfps-view-masonry > .pfps-card:nth-child(6n + 5) .pfps-card-media {
  aspect-ratio: 4 / 5;
}

.pfps-wrap .pfps-view-masonry > .pfps-card:nth-child(6n + 3) .pfps-card-media {
  aspect-ratio: 1;
}

/* --- Compact ------------------------------------------------------------------ */
.pfps-wrap .pfps-views.pfps-view-compact {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.pfps-wrap .pfps-view-compact > .pfps-card {
  margin: 0;
}

.pfps-wrap .pfps-view-compact :is(.tx-work__excerpt, .pfps-card-deadline, .pfps-progress, .pfps-card-coming, .tx-work__badge, .pfps-card-text, .pfps-tags, .pfps-card-footer, .pfps-card-flag, .pfps-card-category, .pfps-wm-badge) {
  display: none;
}

.pfps-wrap .pfps-view-compact .tx-work__info {
  padding-top: .8rem;
}

.pfps-wrap.pfps-tx .pfps-view-compact .tx-work__title {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
}

.pfps-wrap .pfps-view-compact .pfps-tx-kicker {
  margin-bottom: .3rem;
  font-size: .6rem;
}

.pfps-wrap .pfps-view-compact .tx-work__year {
  padding: .3em .7em;
  font-size: .66rem;
}

.pfps-wrap .pfps-view-compact .pfps-card-status {
  transform: scale(.86);
  transform-origin: left top;
}

.pfps-wrap .pfps-view-compact .pfps-card-body {
  padding: 1rem;
}

.pfps-wrap .pfps-view-compact .pfps-card-title {
  font-size: 1.02rem;
}

/* --- List: rows with a number; the picture floats next to the pointer -------- */
.pfps-wrap .pfps-views.pfps-view-list {
  display: block;
  border-top: 1px solid var(--pfps-line);
  counter-reset: pfps-row;
}

.pfps-wrap .pfps-view-list > .pfps-card {
  position: relative;
  margin: 0;
  border-bottom: 1px solid var(--pfps-line);
  counter-increment: pfps-row;
}

.pfps-wrap .pfps-view-list > .pfps-empty {
  border: 0;
}

/* Toopix cards */
.pfps-wrap .pfps-view-list > .tx-work > .tx-work__link {
  position: relative;
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: clamp(1.1rem, 2.4vw, 1.9rem) .6rem;
  overflow: hidden;
  isolation: isolate;
}

.pfps-wrap .pfps-view-list > .tx-work > .tx-work__link::before {
  content: counter(pfps-row, decimal-leading-zero);
  color: var(--pfps-muted);
  font-family: var(--pfps-display);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .08em;
  transition: color .4s var(--pfps-ease);
}

/* The row fills with the accent from the left. */
.pfps-wrap .pfps-view-list > .tx-work > .tx-work__link::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pfps-accent) 14%, transparent), color-mix(in srgb, var(--pfps-accent) 3%, transparent) 70%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

.pfps-wrap .pfps-view-list > .tx-work > .tx-work__link:hover::after,
.pfps-wrap .pfps-view-list > .tx-work > .tx-work__link:focus-visible::after {
  transform: scaleX(1);
}

.pfps-wrap .pfps-view-list > .tx-work > .tx-work__link:hover::before {
  color: var(--pfps-accent);
}

.pfps-wrap .pfps-view-list .tx-work__info {
  align-items: center;
  padding: 0;
}

.pfps-wrap .pfps-view-list .pfps-tx-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  column-gap: clamp(1rem, 3vw, 3rem);
  flex: 1 1 auto;
}

.pfps-wrap .pfps-view-list .pfps-tx-kicker {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 .35rem;
}

.pfps-wrap.pfps-tx .pfps-view-list .tx-work__title {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  margin: 0;
  font-size: clamp(1.35rem, 2.6vw, 2.3rem);
  transition: transform .6s cubic-bezier(.22, 1, .36, 1), color .4s;
}

.pfps-wrap.pfps-tx .pfps-view-list .tx-work__link:hover .tx-work__title {
  transform: translateX(.5rem);
}

.pfps-wrap .pfps-view-list .tx-work__excerpt {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: .9rem;
}

.pfps-wrap .pfps-view-list .pfps-tx-info > :is(.pfps-card-deadline, .pfps-progress, .pfps-card-coming) {
  grid-column: 1 / -1;
  max-width: 420px;
}

.pfps-wrap .pfps-view-list .tx-work__year {
  margin-left: 1rem;
  transition: background-color .4s, border-color .4s, color .4s;
}

.pfps-wrap .pfps-view-list .tx-work__link:hover .tx-work__year {
  border-color: var(--pfps-accent);
  background: var(--pfps-accent);
  color: #fff;
}

/* With a mouse the picture is not in the row: it floats next to the pointer. */
@media (hover: hover) and (pointer: fine) {
  .pfps-wrap .pfps-view-list .pfps-tx-media,
  .pfps-wrap .pfps-view-list .pfps-card-media {
    display: none;
  }
}

/* Classic cards */
.pfps-wrap .pfps-view-list > .pfps-card:not(.tx-work) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.pfps-wrap .pfps-view-list > .pfps-card:not(.tx-work) .pfps-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 2rem;
  padding: 1.4rem .4rem;
}

.pfps-wrap .pfps-view-list > .pfps-card:not(.tx-work) :is(.pfps-tags, .pfps-progress, .pfps-card-deadline, .pfps-card-coming) {
  display: none;
}

/* The floating picture */
.pfps-hover-preview {
  position: fixed;
  z-index: 9990;
  top: 0;
  left: 0;
  width: clamp(240px, 24vw, 380px);
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  will-change: transform;
}

.pfps-hover-preview.is-on {
  opacity: 1;
}

.pfps-hover-preview > * {
  display: block;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
  transform: scale(.82);
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}

.pfps-hover-preview.is-on > * {
  transform: none;
}

.pfps-hover-preview :is(.pfps-card-status, .pfps-card-flag, .tx-work__badge, .pfps-card-category, .pfps-wm-badge) {
  display: none;
}

/* Touch screens and narrow windows: a small picture in front of the row. */
@media (hover: none), (pointer: coarse), (max-width: 760px) {
  .pfps-wrap .pfps-view-list > .tx-work > .tx-work__link {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .pfps-wrap .pfps-view-list > .tx-work > .tx-work__link::before {
    display: none;
  }

  .pfps-wrap .pfps-view-list .pfps-tx-media {
    display: block;
    border-radius: 12px;
  }

  .pfps-wrap .pfps-view-list .pfps-tx-media > :is(.pfps-card-status, .pfps-card-flag, .tx-work__badge, .pfps-wm-badge) {
    display: none;
  }

  .pfps-wrap .pfps-view-list .pfps-tx-info {
    grid-template-columns: minmax(0, 1fr);
  }

  .pfps-wrap .pfps-view-list .tx-work__excerpt {
    display: none;
  }
}

/* --- 3D carousel ---------------------------------------------------------------- */
.pfps-wrap .pfps-views.pfps-view-carousel {
  --pfps-slide: min(40vw, 440px);
  position: relative;
  display: flex;
  gap: clamp(.5rem, 1.6vw, 1.4rem);
  padding: clamp(1.5rem, 3vw, 2.5rem) calc(50% - var(--pfps-slide) / 2) clamp(2rem, 4vw, 3rem);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  outline: 0;
}

.pfps-wrap .pfps-views.pfps-view-carousel::-webkit-scrollbar {
  display: none;
}

.pfps-wrap .pfps-views.pfps-view-carousel.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
}

.pfps-wrap .pfps-views.pfps-view-carousel.is-dragging * {
  pointer-events: none;
}

.pfps-wrap .pfps-views.pfps-view-carousel:focus-visible {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pfps-accent) 50%, transparent);
  border-radius: 24px;
}

.pfps-wrap .pfps-view-carousel > .pfps-card {
  position: relative;
  flex: 0 0 var(--pfps-slide);
  margin: 0;
  scroll-snap-align: center;
  transform-origin: 50% 45%;
  backface-visibility: hidden;
  will-change: transform, opacity;
  /* The theme animates cards in on scroll; here the script moves them every frame. */
  transition: opacity .25s linear !important;
}

.pfps-wrap .pfps-view-carousel > .pfps-card .tx-work__info,
.pfps-wrap .pfps-view-carousel > .pfps-card .pfps-card-body {
  transition: opacity .45s ease, transform .45s ease;
}

.pfps-wrap .pfps-view-carousel > .pfps-card:not(.is-center) .tx-work__info,
.pfps-wrap .pfps-view-carousel > .pfps-card:not(.is-center) .pfps-card-body {
  opacity: .25;
  transform: translateY(8px);
}

.pfps-wrap.pfps-tx .pfps-view-carousel > .pfps-card.is-center .tx-work__title::after {
  transform: scaleX(1);
  transform-origin: left;
}

.pfps-wrap .pfps-view-carousel > .pfps-card.is-center .pfps-tx-media,
.pfps-wrap .pfps-view-carousel > .pfps-card.is-center .pfps-card-media {
  box-shadow: 0 40px 70px -40px color-mix(in srgb, var(--pfps-accent) 70%, rgba(0, 0, 0, .6));
}

.pfps-wrap .pfps-view-carousel > .pfps-empty {
  flex: 1 0 100%;
}

.pfps-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0 0 1.2rem;
}

.pfps-carousel-nav[hidden] {
  display: none;
}

.pfps-carousel-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--pfps-line);
  border-radius: 50%;
  background: var(--pfps-surface);
  color: var(--pfps-ink);
  cursor: pointer;
  transition: background-color .35s, border-color .35s, color .35s, transform .35s var(--pfps-ease);
}

.pfps-carousel-btn:hover {
  border-color: var(--pfps-accent);
  background: var(--pfps-accent);
  color: #fff;
  transform: scale(1.06);
}

.pfps-carousel-btn:focus-visible {
  outline: 2px solid var(--pfps-accent);
  outline-offset: 3px;
}

.pfps-carousel-progress {
  position: relative;
  width: min(220px, 40vw);
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--pfps-line);
}

.pfps-carousel-progress i {
  position: absolute;
  inset: 0;
  background: var(--pfps-accent);
  transform: scaleX(.06);
  transform-origin: left;
  transition: transform .2s linear;
}

/* --- Sizes ------------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .pfps-wrap .pfps-views.pfps-view-compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .pfps-wrap .pfps-views.pfps-view-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pfps-wrap .pfps-views.pfps-view-carousel {
    --pfps-slide: 78vw;
  }

  .pfps-wrap .pfps-view-list > .pfps-card:not(.tx-work) .pfps-card-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .pfps-views-switch__btn {
    width: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pfps-views-switch__glider,
  .pfps-hover-preview,
  .pfps-hover-preview > *,
  .pfps-wrap .pfps-view-list > .tx-work > .tx-work__link::after {
    transition: none;
  }
}