@use "sass:map";
@use "@naomi-2025/ui-core/site-config";
@use "@naomi-2025/ui-core/animators";
@use "@naomi-2025/ui-core/mq";
@use "s360-scss-toolkit";

.photo-gallery {
  &.photo-gallery--normal {
    .photo-gallery__group {
      @media (width > mq.$mq-768) {
        grid-template-columns: repeat(12, 1fr);

        &:has(> .photo-gallery__image:nth-child(1):last-child) {
          grid-template-areas:
            '. . i1 i1 i1 i1 . . . . . .'
            '. . i1 i1 i1 i1 . . . . . .'
            '. . i1 i1 i1 i1 . . . . . .';
        }

        &:has(> .photo-gallery__image:nth-child(2):last-child) {
          grid-template-areas:
            '. . i1 i1 i1 i1 .  .  .  .  .  .'
            '. . i1 i1 i1 i1 i2 i2 i2 i2 i2 i2'
            '. . i1 i1 i1 i1 .  .  .  .  .  .';
        }

        &:has(> .photo-gallery__image:nth-child(3):last-child) {
          grid-template-areas:
            '.  .  i1 i1 i1 i1 .  .  .  .  .  .'
            '.  .  i1 i1 i1 i1 i2 i2 i2 i2 i2 i2'
            '.  .  i1 i1 i1 i1 .  .  .  .  .  .'
            'i3 i3 i3 i3 i3 i3 .  .  .  .  .  .';
        }

        &:has(> .photo-gallery__image:nth-child(4)) {
          grid-template-areas:
            '.  .  i1 i1 i1 i1 .  .  .  .  .  .'
            '.  .  i1 i1 i1 i1 i2 i2 i2 i2 i2 i2'
            '.  .  i1 i1 i1 i1 i4 i4 i4 i4 .  .'
            'i3 i3 i3 i3 i3 i3 i4 i4 i4 i4 .  .'
            'ec ec ec ec ec ec i4 i4 i4 i4 .  .';
          grid-template-rows: auto auto auto auto 1fr;
        }

        + .photo-gallery__group {
          margin-top: calc(var(--empty-cell-height) * -1);
        }
      }
    }

    .photo-gallery__image {
      --img--width: 100%;

      $photos: (
        1: (ratio: '10/16', anim: '%fadein-slidedown-animator'),
        2: (ratio: '16/10', anim: '%fadein-slideleft-animator'),
        3: (ratio: '16/10', anim: '%fadein-slideright-animator'),
        4: (ratio: '10/16', anim: '%fadein-slideup-animator'),
      );

      @each $num, $config in $photos {
        &:nth-child(#{$num}) {
          @extend #{map.get($config, anim)};

          @media (width > mq.$mq-768) {
            grid-area: i#{$num};
            aspect-ratio: #{map.get($config, ratio)};
          }
        }
      }
    }
  }
}
