/* ── Grid ── */
    .gallery-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--spacing-100);
      /* max-width: 1100px; */
      margin: 0 auto;
    }

    .item {
        flex: 0 0 calc((100% - var(--spacing-100) * 2) / 3);
    }

    /* Second row: 2 centred items 
                CHECAR!  */
/*                 
    .gallery-grid .item:nth-child(4) { grid-column: 1 / 2; }
    .gallery-grid .item:nth-child(5) { grid-column: 2 / 3; } */

    

    /* ── Item ── */
    .item {
      position: relative;
      aspect-ratio: 4 / 5;
      border-radius: var(--borderradius-xxs);
      overflow: hidden;
      background: var(--c-grey-15);
      border: 1px solid var(--c-grey-15);
      cursor: pointer;
      outline: none;
    }
    .item:focus-visible {
      box-shadow: 0 0 0 3px var(--cbrand-accent);
    }

    .item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform var(--transition), filter var(--transition);
    }

    /* Overlay */
    .item-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(   rgba(0,0,0,0) 50%, rgba(0,0,0,0.85) 100%);
      opacity: 0;
      transition: opacity var(--transition);
      display: flex;
      align-items: flex-end;
      padding: var(--spacing-125);
    }
    .item-overlay-label {
      font-family: var(--fontfamily-body);
      font-size: var(--font-size-body);
      font-weight: var(--font-weight-regular);
      font-style: normal;
      line-height: 130%; 
      hyphens: auto;
      letter-spacing: 0.10em;
      color: var(--c-grey-02);
    }

    .zoom-icon {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--c-black);
      border: 1px solid var(--c-grey-15);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: scale(0.7);
      transition: opacity var(--transition), transform var(--transition);
    }
    .zoom-icon svg { width: 16px; height: 16px; fill: none; stroke: var(--c-grey-15); stroke-width: 2; stroke-linecap: round; }

    .item:hover img,
    .item:focus-visible img { transform: scale(1.06); filter: brightness(0.88); }
    .item:hover .item-overlay,
    .item:focus-visible .item-overlay { opacity: 1; }
    .item:hover .zoom-icon,
    .item:focus-visible .zoom-icon { opacity: 1; transform: scale(1); }

    /* ── Modal ── */
    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(43,43,43,0.92);
      backdrop-filter: blur(14px);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 300ms ease;
    }
    .modal-backdrop.open {
      opacity: 1;
      pointer-events: all;
    }

    .modal-box {
      position: relative;
      max-width: min(680px, 92vw);
      width: 100%;
      background: var(--c-grey-75);
      border: 1px solid var(--c-grey-15);
      border-radius: calc(var(--borderradius-xxs) + 4px);
      overflow: hidden;
      transform: scale(0.88) translateY(24px);
      transition: transform 380ms cubic-bezier(0.22,1,0.36,1);
    }
    .modal-backdrop.open .modal-box {
      transform: scale(1) translateY(0);
    }

    .modal-img-wrap {
      aspect-ratio: 1 / 1;
      width: 100%;
      overflow: hidden;
      background: var(--c-black);
    }
    .modal-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .modal-footer {
      padding: 18px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid var(--c-grey-50);
    }
    .modal-caption {
      font-family: var(--fontfamily-body);
      font-size: var(--font-size-body);
      font-weight: var(--font-weight-regular);
      font-style: normal;
      line-height: 130%; 
      hyphens: auto;
      letter-spacing: 0.2em;
      color: var(--c-white);
    }
    .modal-counter {
      font-size: var(--font-size-body);
      letter-spacing: 0.12em;
      color: var(--c-grey-15);
    }

    /* Nav arrows */
    .modal-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: var(--c-grey-75);
      border: 1px solid var(--c-grey-15);
      color: var(--c-grey-02);
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 200ms, border-color 200ms;
      z-index: 2;
    }
    .modal-nav:hover { background: var(--cbrand-accent); border-color: var(--cbrand-accent); }
    .modal-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    .modal-prev { left: -18px; }
    .modal-next { right: -18px; }

    .modal-close {
      position: absolute;
      top: 14px;
      right: 14px;
      z-index: 10;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--c-grey-75);
      border: 1px solid var(--c-grey-15);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 200ms;
    }
    .modal-close:hover { background: var(--c-black); }
    .modal-close svg { width: 16px; height: 16px; fill: none; stroke: var(--c-grey-02); stroke-width: 2.2; stroke-linecap: round; }

    /* Stagger reveal on load */
    .item {
      opacity: 0;
      transform: translateY(22px);
      animation: fadeUp 0.55s var(--transition) forwards;
    }
    .item:nth-child(1) { animation-delay: 0.05s; }
    .item:nth-child(2) { animation-delay: 0.12s; }
    .item:nth-child(3) { animation-delay: 0.19s; }
    .item:nth-child(4) { animation-delay: 0.26s; }
    .item:nth-child(5) { animation-delay: 0.33s; }

    @keyframes fadeUp {
      to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 880px) {
      .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .gallery-grid .item:nth-child(4),
      .gallery-grid .item:nth-child(5) {
        grid-column: auto;
      }
      .item {
        flex: 0 0 calc((100% - var(--spacing-100)) / 2);
      }
    }

    @media (max-width: 480px) {
      .gallery-grid {
        grid-template-columns: 1fr;
      }
      .item {
        flex: 0 0 100%;
      }
    }