/* Mobile-only corrections for Leonardo Firenze portfolio.
   Desktop >= 781px is intentionally unaffected.
   LF HeadingNow remains the preferred font: Teko is only a licensed open fallback
   while the original webfont is not included in the published assets. */
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@500;600&display=swap');

@media (max-width: 780px) {
  /* Load the original HeadingNow wherever the licensed webfont exists.
     Use a consistent condensed web-safe fallback on devices without it. */
  .lf20-hero.lf13-hero .lf13-headline {
    font-family: 'LF HeadingNow', 'Teko', Impact, 'Arial Narrow', sans-serif !important;
    font-weight: 500 !important;
  }

  /* Align the floating menu and every row to a shared mobile grid. */
  .v02-header .shell.header-flex {
    box-sizing: border-box;
    align-items: center;
    padding-inline: clamp(16px, 4.6vw, 24px) !important;
  }
  .v02-header .header-controls { margin-left: auto; }
  .mobile-nav {
    box-sizing: border-box;
    left: 50% !important;
    right: auto !important;
    width: min(calc(100vw - 24px), 540px) !important;
    max-width: calc(100vw - 24px);
    padding: clamp(18px, 4vw, 30px) clamp(22px, 5.6vw, 34px) 36px !important;
    counter-reset: lf-mobile-nav-item;
    transform: translate(-50%, -12px) !important;
  }
  .mobile-nav.is-open {
    transform: translate(-50%, 0) !important;
  }
  .mobile-nav a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
    counter-increment: lf-mobile-nav-item;
    padding-block: clamp(17px, 3svh, 23px);
    min-width: 0;
  }
  .mobile-nav a > span {
    display: inline-block;
    min-width: 48px;
    white-space: nowrap;
    text-align: right;
    font-size: 0 !important;
    letter-spacing: 0 !important;
  }
  .mobile-nav a > span::before {
    content: counter(lf-mobile-nav-item, decimal-leading-zero);
    color: #E6223D;
    font: 600 12px/1.2 'Mozilla Text', Arial, sans-serif;
  }
  .mobile-nav a > span::after {
    content: ' ↗';
    color: #E6223D;
    font: 600 12px/1.2 'Mozilla Text', Arial, sans-serif;
  }

  /* Archives: restore breathing room between the project name and category. */
  .v12-archive-list .archive-row--link {
    grid-template-rows: auto auto;
    row-gap: 9px;
    padding-block: 20px;
    min-height: 92px;
    align-content: center;
  }
  .v12-archive-list .archive-row__year {
    grid-row: 1 / span 2;
    align-self: start;
    padding-top: 7px;
  }
  .v12-archive-list .archive-row__name {
    grid-column: 2;
    grid-row: 1;
    line-height: 1.17;
    margin: 0;
  }
  .v12-archive-list .archive-row__category {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: 0 !important;
    font-size: 10px;
    line-height: 1.5;
  }
  .v12-archive-list .archive-row__arrow {
    grid-row: 1 / span 2;
    align-self: center;
  }

  /* Process: stop the full-bleed rail at the mobile content gutter.
     First card now starts exactly below the section heading; swipe is preserved. */
  .lf13-method-fullbleed .method-rail {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: auto !important;
    scroll-padding-inline-start: 0;
    touch-action: pan-x pan-y;
  }
  .lf13-method-fullbleed .method-track {
    padding-left: 0 !important;
    padding-right: var(--gutter) !important;
    scroll-snap-type: none;
  }
  .lf13-method-fullbleed .method-card {
    flex-basis: min(82vw, 520px);
    max-width: calc(100vw - 2 * var(--gutter));
  }
}

@media (max-width: 540px) {
  .mobile-nav {
    padding-inline: 22px !important;
  }
  .v12-archive-list .archive-row--link {
    row-gap: 10px;
    padding-block: 21px;
  }
}