/* ==========================================================================
   Mobile Recent Works & Services Directory (< 1024px)
   ========================================================================== */
@media (max-width: 1023.98px) {
  /* ==========================================================================
     Recent Works Section (< 1024px)
     - Remove list and grid view switcher icons
     - Keep project images in horizontal rows (like laptop), scaled relatively to fit
     - Position project number box (01, 02...) and View on Behance button above images
     ========================================================================== */
  /* Remove divider, Recent works header, view switcher, and see all projects button */
  .f3-intro-divider-row,
  .f3-featured-tag-row,
  .f3-view-switcher {
    display: none;
  }

  

  .f3-works-grid-container {
    padding-bottom: 44px;
  }

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

  .f3-gallery-project-block {
    width: 100%;
    position: relative;
    padding-top: 53px;
    padding-bottom: 38px;
  }

  .f3-gallery-project-block.f3-scroll-reveal {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity 0.44s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.44s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }

  .f3-gallery-project-block.f3-scroll-reveal.is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .f3-gallery-hairline-divider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0;
  }

  .f3-gallery-project-title {
    display: block;
    position: absolute;
    top: 14px;
    left: 0;
    height: 22px;
    line-height: var(--type-aero-c-line, 22px);
    color: #faf9fc;
    margin: 0;
    padding: 0;
    z-index: 10;
    white-space: nowrap;
    pointer-events: none;
  }

  .f3-gallery-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 9px;
    width: calc(100% + 50px);
    max-width: 100vw;
    margin-left: -25px;
    margin-right: -25px;
    padding-left: 25px;
    padding-right: 25px;
    box-sizing: border-box;
    position: static;
  }

  .f3-gallery-row::-webkit-scrollbar {
    display: none;
  }

  .f3-gallery-row::after {
    content: '';
    flex: 0 0 16px;
    pointer-events: none;
  }

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

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

  /* Card Wrap transparent to flex so subbar orders cleanly to top/bottom */
  .f3-gallery-card-wrap {
    display: contents;
  }

  /* Subbar containing number box (bottom left) + View on Behance button (bottom right) */
  .f3-gallery-subbar {
    position: absolute;
    bottom: 0;
    top: auto;
    left: 0;
    right: 0;
    width: 100%;
    height: 22px;
    margin: 0;
    padding: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    pointer-events: auto;
  }

  /* Mobile: replace view on behance button with an arrow-only button pointing top right */
  .f3-gallery-subbar .f3-featured-more-link {
    width: 22px;
    min-width: 22px;
    height: 22px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 0;
  }

  .f3-gallery-subbar .f3-featured-more-link::before {
    content: '';
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
  }

  .f3-gallery-subbar .f3-featured-more-link span:not(.btn-arrow) {
    display: none;
  }

  .f3-gallery-subbar .f3-featured-more-link .btn-arrow {
    font-size: 12px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-0.5px);
  }

  /* Image card items in horizontal row, uniform height matching first row (Milano Cortina) */
  .f3-gallery-item {
    display: block;
    height: var(--f3-gallery-mobile-height) !important;
    flex: 0 0 auto;
    position: relative;
    overflow: hidden;
    border-radius: 0;
  }

  .f3-gallery-media,
  .f3-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Row 1: USSS Milano Cortina (2 images: 975/766 + 748/890) */
  .f3-gallery-card-usss-1 .f3-gallery-item {
    flex: 0 0 auto;
    width: calc(var(--f3-gallery-mobile-height) * 975 / 766);
    aspect-ratio: 975 / 766;
  }

  .f3-gallery-card-usss-2 .f3-gallery-item {
    flex: 0 0 auto;
    width: calc(var(--f3-gallery-mobile-height) * 748 / 890);
    aspect-ratio: 748 / 890;
  }

  /* Row 2: Memphis Grizzlies (3 images: 1616/1264 + 748/890 + 962/891, swipeable) */
  .f3-gallery-card-memphis-1 .f3-gallery-item {
    flex: 0 0 auto;
    width: calc(var(--f3-gallery-mobile-height) * 1616 / 1264);
    aspect-ratio: 1616 / 1264;
  }

  .f3-gallery-card-memphis-2 .f3-gallery-item {
    flex: 0 0 auto;
    width: calc(var(--f3-gallery-mobile-height) * 748 / 890);
    aspect-ratio: 748 / 890;
  }

  .f3-gallery-card-memphis-3 .f3-gallery-item {
    flex: 0 0 auto;
    width: calc(var(--f3-gallery-mobile-height) * 962 / 891);
    aspect-ratio: 962 / 891;
  }

  /* Row 3: NK Hoops (2 images: 748/890 + 1800/1408) */
  .f3-gallery-card-nk-2 .f3-gallery-item {
    flex: 0 0 auto;
    width: calc(var(--f3-gallery-mobile-height) * 748 / 890);
    aspect-ratio: 748 / 890;
  }

  .f3-gallery-card-nk-1 .f3-gallery-item {
    flex: 0 0 auto;
    width: calc(var(--f3-gallery-mobile-height) * 1800 / 1408);
    aspect-ratio: 1800 / 1408;
  }

  /* Row 4: Uniros (3 images: 1800/1400 + 748/890 + 1800/1408, swipeable) */
  .f3-gallery-card-uniros-1 .f3-gallery-item {
    flex: 0 0 auto;
    width: calc(var(--f3-gallery-mobile-height) * 1800 / 1400) !important;
    aspect-ratio: 1800 / 1400;
    order: 2;
  }

  .f3-gallery-card-uniros-2 .f3-gallery-item {
    flex: 0 0 auto;
    width: calc(var(--f3-gallery-mobile-height) * 748 / 890);
    aspect-ratio: 748 / 890;
    order: 1;
  }

  .f3-gallery-card-uniros-3 .f3-gallery-item {
    flex: 0 0 auto;
    width: calc(var(--f3-gallery-mobile-height) * 1800 / 1408);
    aspect-ratio: 1800 / 1408;
    order: 3;
  }

  /* Mobile: place Uniros 2 at start of row before Uniros 1 */
  .f3-gallery-card-uniros-2 {
    order: 1;
  }

  .f3-gallery-card-uniros-1 {
    order: 2;
  }

  .f3-gallery-card-uniros-3 {
    order: 3;
  }

  .f3-gallery-row-4::after {
    order: 99;
  }

  /* ==========================================================================
     Mobile Services Directory Blocks & Horizontal Carousel (< 1024px)
     ========================================================================== */

  /* Horizontal Scroll Indicator Underneath Blocks */

  /* Mobile: remove HCMC time above the quote */
  .f3-intro-left-col,
  .f3-intro-status,
  .f3-intro-status-dot {
    display: none;
  }

  /* Mobile: move contact action rows block downward by 15px, keeping headline & section spacing intact */
  .f3-contact-right-col {
    margin-top: 15px;
  }

  /* Mobile: space from action rows (Drop a message) to dual clocks bar calibrated to 120px */
  .f3-contact-hero-stage {
    padding-top: 50px;
    padding-bottom: 154px;
    /* 84px + 36px split-layout padding = 120px exact to clocks */
  }

  /* Mobile: 25px padding from the clock's end to the end of the black section */
  .f3-section-contact {
    padding-bottom: 25px;
  }

  /* Mobile: align dual clocks (MY TIME / YOUR TIME) in CTA section to the right */
  .f3-contact-corners-bar {
    align-items: flex-end;
    text-align: right;
  }

  .f3-contact-corner {
    justify-content: flex-end;
  }

  /* About Page Mobile Layout: Full-bleed #e5e5e6 backdrop with centered scaled portrait */

} /* End @media (max-width: 1023.98px) */