/* Phase 2 mobile project-page refinements. Loaded after styles.css on purpose. */

.type-book-fullscreen__media,
.type-book-fullscreen__media img { transition: none !important; }

.image-lightbox,
.type-book-fullscreen {
  touch-action: none;
  overscroll-behavior: none;
}

/* Final interaction corrections — 2026-08-14 */

.cursor-dot,
.cursor-circle,
.home-effect,
.contact-home-effect {
  display: none !important;
}

.image-lightbox__arrow,
.type-book-fullscreen__arrow {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.image-lightbox__arrow::before,
.type-book-fullscreen__arrow::before {
  content: "" !important;
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  border: 0 !important;
  border-top: 1.5px solid currentColor !important;
  border-right: 1.5px solid currentColor !important;
  transform-origin: center !important;
}

/* Same right-arrow design, rotated towards the left */
.image-lightbox__arrow--left::before,
.type-book-fullscreen__arrow--left::before {
  transform: rotate(-135deg) !important;
}

.image-lightbox__arrow--right::before,
.type-book-fullscreen__arrow--right::before {
  transform: rotate(45deg) !important;
}

@media (max-width: 760px) {
  .type-globe,
  .type-globe__canvas {
    touch-action: pan-y !important;
    overscroll-behavior-y: auto !important;
  }

  .type-globe__canvas { pointer-events: none !important; }

  .type-globe__touch-surface {
    width: min(76vw, 64dvh) !important;
    height: min(76vw, 64dvh) !important;
    aspect-ratio: auto !important;
    touch-action: none !important;
  }

  .flowriders-study .case-gallery > .flowriders-pair {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .flowriders-study .flowriders-pair > .case-image,
  .flowriders-study .flowriders-pair > figure {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
  }

  .flowriders-study .flowriders-pair > .case-image img,
  .flowriders-study .flowriders-pair > figure img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .goal-box {
    height: 191px !important;
    min-height: 191px !important;
    padding: 10px !important;
  }

  .goal-box h2,
  main .goal-box h2[data-scramble] {
    margin: 8px 0 !important;
    font-size: clamp(.95rem, 4.65vw, 1.25rem) !important;
    line-height: 1 !important;
  }

  .goal-box p {
    margin: 8px 0 0 !important;
    font-size: clamp(.58rem, 2.45vw, .7rem) !important;
    line-height: 1.32 !important;
  }

  .project-row__arrow {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity 180ms ease, visibility 180ms ease !important;
  }

  .project.is-open .project-row__arrow,
  .project-row.is-open .project-row__arrow {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

.image-lightbox__arrow,
.type-book-fullscreen__arrow {
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .35) !important;
  border-radius: 999px !important;
  background: rgba(8, 8, 8, .58) !important;
  color: #fff !important;
  font-family: var(--font-sans) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  backdrop-filter: blur(14px);
}

.image-lightbox__arrow::before,
.type-book-fullscreen__arrow::before {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}

.image-lightbox__arrow--left::before,
.type-book-fullscreen__arrow--left::before { transform: rotate(-135deg); }
.image-lightbox__arrow--right::before,
.type-book-fullscreen__arrow--right::before { transform: rotate(45deg); }

@media (max-width: 760px) {
  .type-book-fullscreen__rotate { display: none !important; }

  .cursor-dot,
  .cursor-circle { display: none !important; }

  .home-effect img,
  .contact-home-effect img {
    clip-path: circle(112px at var(--effect-x, 50%) var(--effect-y, 42%)) !important;
  }

  .type-study .case-hero {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .type-study .case-hero > * { grid-column: 1 !important; }

  .type-study .case-hero .section-kicker {
    position: relative;
    display: block !important;
    min-height: 34px;
    margin: 0 0 26px !important;
    padding-right: min(48vw, 180px);
  }

  .type-study .case-hero .section-kicker span:last-child {
    display: block;
    margin-top: 9px;
  }

  .type-study .type-book-entry {
    position: absolute !important;
    top: 42px !important;
    right: var(--page-margin) !important;
    z-index: 5;
    width: auto !important;
    max-width: 46vw;
    min-height: 30px;
    margin: 0 !important;
    padding: 7px 10px !important;
    font-size: .54rem !important;
    white-space: nowrap !important;
  }

  .type-study .case-hero h1 { white-space: nowrap !important; }

  .type-study .case-hero .case-image {
    width: 100% !important;
    min-height: 0 !important;
    margin: 12px 0 0 !important;
    aspect-ratio: auto !important;
  }

  .type-study .case-hero .case-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .type-globe,
  .type-globe__canvas { touch-action: pan-y !important; }

  .type-globe__touch-surface {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    width: min(94vw, 76dvh);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    touch-action: none;
  }

  .type-globe__project-nav { z-index: 7 !important; }

  .type-globe__label { bottom: 48px !important; }

  .type-book-fullscreen__counter {
    top: max(18px, env(safe-area-inset-top)) !important;
    left: max(16px, env(safe-area-inset-left)) !important;
    transform: none !important;
  }

  .type-book-fullscreen__close {
    top: max(15px, env(safe-area-inset-top)) !important;
    right: max(16px, env(safe-area-inset-right)) !important;
  }

.type-book-fullscreen__media {
  width: min(96vw, calc(72dvh * 1.55556)) !important;
  max-height: 72dvh !important;
  transform-origin:
    var(--fullscreen-origin-x, 50%)
    var(--fullscreen-origin-y, 50%) !important;
}

  .type-book-fullscreen__arrow {
    top: auto !important;
    bottom: max(18px, env(safe-area-inset-bottom)) !important;
    width: 44px !important;
    height: 44px !important;
    transform: none !important;
  }

  .type-book-fullscreen__arrow--left { left: 18px !important; }
  .type-book-fullscreen__arrow--right { right: 18px !important; }

  .case-image figcaption,
  .project-image figcaption,
  .work-card__index,
  .work-card__title,
  .spiral-card span,
  .poster-card span { display: none !important; }

  .case-gallery,
  .studio-flow-study .case-gallery,
  .flowriders-study .case-gallery {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding-inline: var(--page-margin) !important;
  }

  .case-gallery > .case-image,
  .case-gallery > .case-half,
  .case-gallery > .case-wide,
  .studio-flow-study .case-gallery > .case-image,
  .flowriders-study .case-gallery > .case-image,
  .studio-flow-square-row,
  .flowriders-pair {
    grid-column: 1 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .case-gallery .case-image:not(.flowriders-five),
  .studio-flow-study .case-gallery .case-image {
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }

  .case-gallery .case-image img,
  .studio-flow-study .case-gallery .case-image img,
  .studio-flow-square-row img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .studio-flow-square-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .studio-flow-square-row figure {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    aspect-ratio: auto !important;
  }

  .flowriders-pair {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .flowriders-pair > .case-image {
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
  }

  .flowriders-pair .case-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .gaudi-case-section__media:not(.gaudi-building-grid) {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .gaudi-case-section__media:not(.gaudi-building-grid) > .case-image {
    grid-column: 1 !important;
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }

  .gaudi-case-section__media:not(.gaudi-building-grid) > .case-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .gaudi-case-section__media:not(.gaudi-building-grid) > .case-image[data-image-file="Gaudi 6.webp"] {
    width: calc(50% - 4px) !important;
  }

  .gaudi-case-section__media:not(.gaudi-building-grid) > .case-image[data-image-file="Gaudi 11.webp"] {
    overflow: hidden !important;
    aspect-ratio: 16 / 9 !important;
  }

  .gaudi-case-section__media:not(.gaudi-building-grid) > .case-image[data-image-file="Gaudi 11.webp"] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: rotate(90deg) scale(1.78) !important;
  }

  .gaudi-building-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .codex-entry {
    min-height: 0 !important;
    padding-block: 30px !important;
    row-gap: 16px !important;
  }

  .codex-entry .project-image--fullscreen-contain,
  .codex-entry .case-image {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    aspect-ratio: auto !important;
  }

  .codex-entry .project-image--fullscreen-contain img,
  .codex-entry .case-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  .suno-playlists,
  .suno-playlists .playlist-list {
    display: block !important;
    width: 100% !important;
    grid-column: 1 / -1 !important;
    padding-inline: var(--page-margin) !important;
  }

  .suno-track {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin: 0 0 38px !important;
    padding-bottom: 28px !important;
  }

  .suno-track__header,
  .suno-track__cover,
  .suno-player {
    width: 100% !important;
    min-width: 0 !important;
    grid-column: 1 !important;
  }

  .suno-track__header h3 {
    font-size: clamp(3.2rem, 18vw, 5.4rem) !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
  }

  .suno-player .audio-row {
    grid-template-columns: 72px minmax(0, 1fr) !important;
  }

  .suno-player .audio-row input { grid-column: 2 !important; }
  .suno-progress-scramble { display: none !important; }

  .posters-spiral .poster-card {
    width: clamp(206px, 66vw, 288px) !important;
  }

  .project-row__arrow { display: none !important; }

  body.is-work-page .work-page .work-page__title,
  body.is-work-page .work-page.is-list-mode .work-page__title,
  body.is-work-page .work-mode.is-list .work-page__title,
  body.is-work-page .work-page .work-mode-switch,
  body.is-work-page .work-page.is-list-mode .work-mode-switch {
    top: calc(var(--nav-height) + 12px) !important;
  }

  .goal-box {
    height: 191px !important;
    min-height: 191px !important;
  }

  .goal-box h2,
  main .goal-box h2[data-scramble] {
    margin-block: 5px !important;
    font-size: clamp(.78rem, 3.9vw, 1.05rem) !important;
    line-height: .98 !important;
  }

  .goal-box p {
    margin-top: 5px !important;
    font-size: clamp(.52rem, 2.2vw, .64rem) !important;
    line-height: 1.22 !important;
  }

  .image-lightbox { overflow: hidden !important; }

  .image-lightbox__media,
  .image-lightbox.has-poster-info .image-lightbox__media,
  .image-lightbox.has-typeface-metadata .image-lightbox__media {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100% !important;
    max-height: none !important;
    transform: translate(-50%, -50%) !important;
  }

  .image-lightbox__images,
  .image-lightbox__images.is-pair {
    max-width: 88vw !important;
    max-height: 60dvh !important;
  }

  .image-lightbox__images .image-lightbox__img,
  .image-lightbox__images.is-pair .image-lightbox__img {
    max-height: 58dvh !important;
  }

  .image-lightbox__arrow {
    top: auto !important;
    bottom: max(20px, env(safe-area-inset-bottom)) !important;
    width: 42px !important;
    height: 42px !important;
    transform: none !important;
  }

  .image-lightbox__arrow--left { left: 18px !important; }
  .image-lightbox__arrow--right { right: 18px !important; }

  .image-lightbox__meta-item--studio,
  .image-lightbox__meta-item--category { display: block !important; }

  .image-lightbox__meta {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 10px;
    align-content: space-between;
    padding: max(58px, calc(env(safe-area-inset-top) + 48px)) 14px max(74px, calc(env(safe-area-inset-bottom) + 64px));
  }

  .image-lightbox__meta[hidden] { display: none !important; }

  .image-lightbox__meta-item {
    position: static !important;
    max-width: none !important;
    transform: none !important;
    text-align: left !important;
  }

  .image-lightbox__meta-item:nth-child(n + 4) { align-self: end; }
  .image-lightbox__meta-item--year,
  .image-lightbox__meta-item--weights { text-align: right !important; }
  .image-lightbox__meta-item--studio,
  .image-lightbox__meta-item--category { text-align: center !important; }
  .image-lightbox__meta-item dt { font-size: .43rem !important; }
  .image-lightbox__meta-item dd { font-size: .54rem !important; line-height: 1.15 !important; }

  .image-lightbox__poster-info div { width: min(42vw, 168px) !important; }
  .image-lightbox__poster-info div:nth-child(1) { top: max(16px, env(safe-area-inset-top)) !important; left: 14px !important; }
  .image-lightbox__poster-info div:nth-child(2) { bottom: max(74px, calc(env(safe-area-inset-bottom) + 64px)) !important; left: 14px !important; }
  .image-lightbox__poster-info div:nth-child(3) { right: 14px !important; bottom: max(74px, calc(env(safe-area-inset-bottom) + 64px)) !important; }

  .next-project-shell {
    height: 537vh !important;
    min-height: 537vh !important;
  }

  .next-project-shell .next-project-loco {
    position: sticky !important;
    top: var(--nav-height) !important;
    height: calc(100dvh - var(--nav-height)) !important;
    min-height: 0 !important;
  }

  .next-project-loco__scroll {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 10px !important;
    font-size: .54rem !important;
  }
}

/* Final cascade: interaction corrections must remain last. */
.cursor-dot,
.cursor-circle,
.home-effect,
.contact-home-effect { display: none !important; }

.image-lightbox__arrow,
.type-book-fullscreen__arrow {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid currentColor !important;
  border-radius: 999px !important;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.image-lightbox__arrow::before,
.type-book-fullscreen__arrow::before {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  transform: none !important;
}

.image-lightbox__arrow--left::before,
.type-book-fullscreen__arrow--left::before { content: "←" !important; }

.image-lightbox__arrow--right::before,
.type-book-fullscreen__arrow--right::before { content: "→" !important; }

@media (max-width: 760px) {
  .type-globe,
  .type-globe__canvas {
    touch-action: pan-y !important;
    overscroll-behavior-y: auto !important;
  }

  .type-globe__canvas { pointer-events: none !important; }

  .type-globe__touch-surface {
    width: min(76vw, 64dvh) !important;
    height: min(76vw, 64dvh) !important;
    aspect-ratio: auto !important;
    touch-action: none !important;
  }

  .flowriders-study .case-gallery > .flowriders-pair {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .flowriders-study .flowriders-pair > .case-image,
  .flowriders-study .flowriders-pair > figure {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
  }

  .flowriders-study .flowriders-pair > .case-image img,
  .flowriders-study .flowriders-pair > figure img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .goal-box {
    height: 191px !important;
    min-height: 191px !important;
    padding: 10px !important;
  }

  .goal-box h2,
  main .goal-box h2[data-scramble] {
    margin: 8px 0 !important;
    font-size: clamp(.95rem, 4.65vw, 1.25rem) !important;
    line-height: 1 !important;
  }

  .goal-box p {
    margin: 8px 0 0 !important;
    font-size: clamp(.58rem, 2.45vw, .7rem) !important;
    line-height: 1.32 !important;
  }

  .project-row__arrow {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity 180ms ease, visibility 180ms ease !important;
  }

  .project.is-open .project-row__arrow,
  .project-row.is-open .project-row__arrow {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* FINAL FULLSCREEN ARROWS — must remain at the bottom of this file */

.image-lightbox__arrow,
.type-book-fullscreen__arrow {
  display: grid !important;
  place-items: center !important;

  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;

  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;

  color: #111 !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

/* Both buttons use the exact same right-arrow glyph */
.image-lightbox__arrow::before,
.type-book-fullscreen__arrow::before {
  content: "→" !important;

  display: grid !important;
  place-items: center !important;

  width: 100% !important;
  height: 100% !important;

  border: 0 !important;
  background: transparent !important;

  color: inherit !important;
  font-family: var(--font-sans) !important;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;

  transform: translateY(-0.03em) !important;
  transform-origin: center !important;
}

/* Mirror the identical right arrow for Previous */
.image-lightbox__arrow--left::before,
.type-book-fullscreen__arrow--left::before {
  transform: translateY(-0.03em) scaleX(-1) !important;
}

/* Every regular fullscreen mode: always white */
.image-lightbox__arrow {
  color: #fff !important;
}

/* Type.OTF book — light mode: black */
body:not(.theme-dark) .type-book-fullscreen__arrow {
  color: #111 !important;
}

/* Type.OTF book — dark mode: white */
body.theme-dark .type-book-fullscreen__arrow {
  color: #fff !important;
}

/* MANUAL GAP BETWEEN MATÚŠ AND WILLEMS */

:root {
  /* Homepage big title */
  --home-willems-gap: 0.09em;

  /* Mobile loading screen */
  --loader-willems-gap: 0.12em;
}

/* Homepage: space before the Willems line */
.hero__name h1 > span:nth-child(2) {
  margin-top: var(--home-willems-gap) !important;
}

/* Loading screen: space before the Willems line */
@media (max-width: 760px), (pointer: coarse) {
  .loader__name > span:nth-child(3) {
    margin-top: var(--loader-willems-gap) !important;
  }
}

/* Restore cursor and reveal effects only on desktop */
@media (min-width: 761px) and (pointer: fine) {
  .cursor-dot,
  .cursor-circle,
  .home-effect,
  .contact-home-effect {
    display: block !important;
  }
}