/* Serie Chile mobile project: the opened project begins as the exact final state of the expanded territory card. */
@media (max-width: 760px) {
  .project-lightbox {
    padding: 0 !important;
    place-items: stretch !important;
    background: rgba(30, 26, 21, .22) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  .project-lightbox-sheet {
    position: absolute !important;
    top: calc(var(--header-h, 76px) + 8px) !important;
    left: 8px !important;
    right: auto !important;
    bottom: auto !important;
    width: calc(100vw - 16px) !important;
    max-width: none !important;
    height: calc(100dvh - var(--header-h, 76px) - 16px) !important;
    max-height: none !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 1px solid rgba(52, 42, 31, .18) !important;
    background: rgba(250, 247, 239, .96) !important;
    box-shadow: 0 24px 70px rgba(36, 28, 21, .34) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    transform: translate3d(0, calc(var(--project-return-progress, 0) * -46px), 0) scale(calc(1 - var(--project-return-progress, 0) * .018)) !important;
    transform-origin: 50% 100% !important;
    transition: transform 180ms ease, box-shadow 180ms ease !important;
    overscroll-behavior: contain;
  }

  .project-lightbox.is-return-dragging .project-lightbox-sheet {
    transition: none !important;
    box-shadow: 0 -8px 34px rgba(34, 26, 19, calc(.18 - var(--project-return-progress, 0) * .08)) !important;
  }

  .project-lightbox.is-return-closing .project-lightbox-sheet {
    transform: translate3d(0, -100dvh, 0) scale(.985) !important;
    transition: transform 280ms cubic-bezier(.2,.75,.2,1) !important;
  }

  /* The expanded territory card has no floating close control. Keep the first
     project frame visually identical and use the return strip / outside tap. */
  .project-lightbox-close {
    display: none !important;
  }

  .project-ficha {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100%;
    background: rgba(250, 247, 239, .96) !important;
  }

  /* Exterior first: exact continuation of the fully expanded territory card. */
  .project-ficha > .project-ficha-gallery:first-of-type {
    order: 1 !important;
    border-bottom: 1px solid rgba(52, 42, 31, .14) !important;
  }

  .project-ficha > .project-ficha-gallery:first-of-type figure {
    margin: 0 !important;
    border: 0 !important;
  }

  .project-ficha > .project-ficha-gallery:first-of-type img {
    width: 100% !important;
    /* Expanded card target = 48% of (atlas viewport - 16px), capped at 390px.
       Atlas mobile viewport is 100dvh - 76px, hence 48dvh - 44.16px. */
    height: min(390px, calc(48dvh - 44.16px)) !important;
    min-height: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  .project-ficha > .project-ficha-gallery:first-of-type figcaption {
    display: none !important;
  }

  /* Same typography and spacing as --sheet-progress: 1 on the territory card. */
  .project-ficha-hero {
    order: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    padding: 26px !important;
    border-bottom: 1px solid rgba(52, 42, 31, .14) !important;
    background: rgba(250, 247, 239, .96) !important;
  }

  .project-ficha-hero > div:first-child {
    display: grid !important;
    gap: 5px !important;
  }

  .project-ficha-hero .section-index {
    margin: 0 !important;
    font-size: 7px !important;
    line-height: 1.2 !important;
    letter-spacing: .12em !important;
  }

  .project-ficha-hero h2 {
    margin: 0 !important;
    font-size: clamp(34px, 13vw, 58px) !important;
    line-height: .88 !important;
    font-weight: 400 !important;
  }

  .project-ficha-hero p:not(.section-index) {
    max-width: none !important;
    margin: 0 !important;
    color: var(--muted) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .project-ficha-hero dl {
    margin: 18px 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    border-top: 1px solid rgba(52, 42, 31, .13) !important;
  }

  .project-ficha-hero dl div {
    min-width: 0;
    padding: 10px 8px 8px 0 !important;
    border-right: 1px solid rgba(52, 42, 31, .1) !important;
    border-bottom: 0 !important;
  }

  .project-ficha-hero dl div:last-child {
    border-right: 0 !important;
    padding-left: 8px !important;
  }

  .project-ficha-hero dt { font-size: 7px !important; }
  .project-ficha-hero dd { font-size: 10px !important; line-height: 1.3 !important; }

  .project-ficha > :not(.project-ficha-hero):not(.project-ficha-gallery:first-of-type) {
    order: 3 !important;
  }

  .project-ficha-gallery img { width: 100% !important; height: auto !important; }

  .project-ficha-gallery figcaption {
    padding: 12px 18px 16px !important;
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .project-ficha-gallery figcaption span { font-size: 8px !important; }
  .project-ficha-gallery figcaption p { font-size: 11px !important; line-height: 1.45 !important; }

  .project-ficha-body {
    padding: 24px 20px !important;
    display: block !important;
  }

  .project-ficha-text p:not(.section-index) { font-size: 13px !important; line-height: 1.65 !important; }

  .project-ficha-matrix {
    margin-top: 22px !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .project-ficha-rules { padding: 24px 20px 36px !important; }
  .project-ficha-rules > div { grid-template-columns: 1fr !important; }

  .project-lightbox-return-zone {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 140 !important;
    width: 100% !important;
    min-height: 69px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 7.5px !important;
    padding: 15px 16px max(18px, env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-top: 1px solid rgba(52, 42, 31, .14) !important;
    background: rgba(238, 233, 223, .96) !important;
    color: rgba(36, 31, 25, .62) !important;
    box-shadow: 0 -8px 24px rgba(36, 28, 21, .06) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    touch-action: none !important;
    cursor: pointer;
  }

  .project-lightbox-return-zone > span {
    width: 46px;
    height: 3px;
    border-radius: 999px;
    background: rgba(36, 31, 25, .34);
  }

  .project-lightbox-return-zone > small {
    font-size: 8px;
    letter-spacing: .16em;
    text-transform: uppercase;
  }
}