@use "@naomi-2025/ui-core/site-config";
@use "@naomi-2025/ui-core/content-containers";
@use "@naomi-2025/ui-core/mq";
@use "@naomi-2025/ui-core/text-styles";
@use "s360-scss-toolkit";
@use "@naomi-2025/ui-core/maps";

$_site-footer-border-radius: clamp(60px, 5vw, 120px);

.site-footer {
  @include content-containers.bleed-safe-area;

  margin-bottom: calc(site-config.spacer(2) + var(--menu-local-tasks-height, 0px));
  background-color: var(--bg-color);
  color: var(--color);
  border-radius: var(--site-footer--border-radius);
  padding-block: site-config.spacer(3);

  [data-site-mode="at-work"] & {
    @include maps.map-to-css-vars(maps.$color-scheme-south-beach);
  }

  [data-site-mode="at-play"] & {
    @include maps.map-to-css-vars(maps.$color-scheme-sunset);

    border-radius:
      0 #{ $_site-footer-border-radius } #{ $_site-footer-border-radius } #{ $_site-footer-border-radius } /
      0 #{ $_site-footer-border-radius } 0 #{ $_site-footer-border-radius };
  }

  &__content {
    @include content-containers.bleed-safe-area-content;

    display: grid;
    row-gap: site-config.spacer(0);
    column-gap: site-config.$column-gap;
    grid-template-areas:
      "sf-follow-us   sf-follow-us"
      "sf-footer-menu sf-corp-menu"
      "sf-copr        sf-copr";

    @media (width > mq.$mq-768) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-areas:
        "sf-follow-us sf-follow-us sf-footer-menu sf-corp-menu"
        "sf-copr      sf-copr      sf-copr        sf-copr";
    }

    @media (width > mq.$mq-1024) {
      grid-template-columns: repeat(12, 1fr);
      grid-template-areas:
        "sf-follow-us sf-follow-us sf-follow-us sf-follow-us sf-follow-us sf-footer-menu sf-footer-menu sf-footer-menu sf-corp-menu sf-corp-menu sf-corp-menu sf-copr";
    }
  }

  &__copyright {
    @extend %text-style-small-copy;

    grid-area: sf-copr;
    text-align: right;
  }

  &__follow-us {
    grid-area: sf-follow-us;
  }

  &__footer-menu {
    grid-area: sf-footer-menu;
  }

  &__corporate-menu {
    grid-area: sf-corp-menu;
  }
}
