/* Portrait overlay card */
      .overlay-card {
        position: absolute;
        bottom: 1.5rem;
        left: 1.5rem;
        right: 1.5rem;
        background: white;
        padding: 1.5rem;
        border-left: 4px solid #ff7a00;
        border-radius: 0.8rem;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
      }

      body.dark .overlay-card {
        background: #111;
        color: white;
      }

      .overlay-card p {
        margin: 0;
        font-size: 1.4rem;
        font-weight: 700;
      }

      .overlay-card .sub {
        color: #777;
        font-weight: 400;
      }

      body.dark .overlay-card .sub {
        color: #aaa;
      }

      .overlay-card .accent {
        color: #ff7a00;
      }

      /* Abstract block hover overlay */
      .abstract {
        background: #facc15;
      }

      body.dark .abstract {
        background: #1b1b1b;
      }

      .hover-fade {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
        opacity: 0;
        display: flex;
        justify-content: flex-end;
        flex-direction: column;
        padding: 1.5rem;
        transition: opacity 0.4s ease;
      }

      .abstract:hover .hover-fade {
        opacity: 1;
      }

      .hover-fade span {
        color: white;
        font-weight: bold;
        font-size: 1rem;
      }

      /* Extra row (desktop only) */
      .gallery-extra {
        display: none;
      }

      @media (min-width: 768px) {
        .gallery-extra {
          margin-top: 1.5rem;
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 1.5rem;
          height: 300px;
        }
      }

      .extra-item {
        position: relative;
        overflow: hidden;
      }

      .extra-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .extra-item.card {
        background: white;
        border: 1px solid #eee;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      body.dark .extra-item.card {
        background: #000;
        border-color: #2b2b2b;
      }

      .tiny-text {
        font-size: 0.65rem;
        color: #666;
      }

      .bubble {
        width: 4rem;
        height: 4rem;
        object-fit: cover;
        border-radius: 100%;
        filter: grayscale(100%);
        align-self: center;
      }

      .extra-item.wide {
        grid-column: span 2;
      }