@import "./mixins";

.profile {
  @add-mixin body-font;

  /* contains splash image, header, and stats */
  & .intro {
    color: var(--white);
    margin: 0 auto;
    width: 100%;

    /* hero image */
    & .splash {
      @add-mixin absolute-expand;
      z-index: var(--background);

      /* the image itself */
      & .image {
        @add-mixin absolute-expand;
        background-position: 50%;
        background-size: cover;
        /* filter: saturate(80%) contrast(130%); */
      }

      /* gradient overlay */
      & .gradient {
        /* positioning */
        @add-mixin absolute-expand;
        /* theming */
        background-color: rgba(25, 25, 40, 0.4);
        background:
          linear-gradient(
            color(var(--black) a(0.666)) -5%,
            color(var(--black) a(0.333) 33.333%),
            var(--black) 100%),
          radial-gradient(
            color(var(--black) a(0.5)) 33.333%,
            color(var(--black) a(0.875))
          );
      }
    }

    /* main stats container */
    & .header {
      padding: 1vh var(--gutter) 2.5vh var(--gutter);
      min-height: 20.5rem;

      /* tweakpoint: horizontal layout on big screens */
      @media (min-width: 1100px) {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      /* add shadow to text for legibility */
      & * {
        text-shadow: 0 1px 0.5em var(--black);
      }
    }

    /* geo profile header layout */
    & .geo-header {
      margin-top: 0;
      margin-bottom: 2rem;

      /* tiny screen layout */
      @media (max-width: 659px) {
        flex-direction: column;

        /* enforce 100% width */
        & .authorities-block {
          min-width: 100%;
          max-width: 100%;

          /* center authorities section */
          & .authorities-section {
            margin-left: auto;
            margin-right: auto !important;
          }
        }

        /* hide map */
        & .map-comuna {
          display: none;
        }
      }

      /* tweakpoint to squeeze a bit more before the layout breaks */
      @media (min-width: 660px) and (max-width: 699px) {
        & .map-comuna {
          right: -2rem;
        }
      }

      /* adjust layout on small screens */
      @add-mixin for-lg {
        display: flex;
        justify-content: space-around;

        & .featured-datum-splash-container {
          position: absolute;
          top: -1rem;
          left: var(--gutter);
          right: var(--gutter);
          margin: 0;
        }

        & .authorities-block {
          width: calc(100% - 10rem);
          display: flex;

          & .authorities-section {
            min-width: 16rem;
            max-width: 100%;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem !important;

            & .person-item {
              display: inline-block;
              min-width: 16rem;
              max-width: 100%;
              margin-right: 0.5rem;
            }
          }
        }

        & .map-comuna {
          width: 10rem;
        }

        & .authorities-block,
        & .map-comuna {
          /* make space for the stats */
          margin-top: 11rem;
        }
      }

      /* big screen layout */
      @add-mixin from-lg {

        & .featured-datum-splash-container {
          margin-left: 1rem;
          margin-right: 1rem;
        }

        /* limit width on officals & map */
        & > *:first-child,
        & > *:last-child {
          flex: 1 0 16rem;
          max-width: 20rem;
        }
        /* squishy width on centered stats */
        & > *:nth-child(2) {
          flex: 3 2 40rem;
        }

        /* offset map */
        & .svg-map {
          max-width: 17rem;
          margin-left: auto;
        }
        & .map-comuna {
          /* darken background */
          background-image: radial-gradient(
            closest-side,
            color(var(--dark-3) a(0.4)),
            transparent
          );
        }
      }


      /* 💩💩💩 BEGIN REGIONAL MAP FUDGING 💩💩💩 */

      /* region defaults */
      & .map-region {
        position: absolute;
        transform: scale(0.5);
        top: -11rem;
        right: -2.5rem;
      }

      /* adjust positioning on non-country profile */
      & .svg-map + .map-region {
        top: -8rem;
        right: -5rem;
      }

      @add-mixin from-lg {
        & .map-region {
          transform: scale(0.75);
        }
        & .svg-map + .map-region {
          top: -3rem;
          left: 11vw;
        }
      }

      @add-mixin from-xl {
        & .map-region {
          transform: scale(1);
        }
        & .svg-map + .map-region {
          left: 12vw;
        }
      }
      /* 💩💩💩 END REGIONAL MAP FUDGING 💩💩💩 */


      /* horizontal stats layout */
      & .featured-datum-splash-container {
        text-align: center;

        & > .featured-datum-splash {
          display: inline-block;
          vertical-align: top; /* override blueprint */
          width: calc(33.33% - 1rem);
          max-width: 11rem;

          &:not(:last-child) {
            margin-right: 1rem;
          }
        }
      }
    }

    /* main stats row; nested within header */
    & .datum-full-width {
      width: 100%;
      text-align: center;

      @add-mixin for-xs {
        & .featured-datum-splash:not(:last-of-type) {
          margin-bottom: 3rem;
        }
      }

      @add-mixin from-xs {
        display: flex;
        width: 100%;
        max-width: 50rem;
        margin: 1rem auto;
        justify-content: space-around;
        align-items: center;

        /* even width columns */
        & .featured-datum-splash {
          flex: 1 1 33.333%;

          /* space out stats */
          &:not(:last-of-type) {
            margin-right: 1.5rem;
          }
        }
      }
    }

    /* map */
    & .map-region {
      position: absolute;
      z-index: 0;
      right: 0;
      top: 0;
      pointer-events: none;

      & .d3plus-geomap-paths {
        & .d3plus-Shape {
          pointer-events: all;
          cursor: pointer;
          transition: fill 0.5s ease;
          &:hover {
            fill: var(--white);
          }
        }
      }
    }
  }
}
