/* --- overrides --- */
/* overrides .card's padding */
.species-profile {
  padding: 0;
}

/* overrides for .species-photo and .intro-photo images */
.species-photo img,
.intro-photo img {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/* --- layout --- */
.species-profile {
  /* .species-primary and .species-secondary stacked on top, aligned to top */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.species-primary,
.species-secondary {
  /* display .species-primary and .species-secondary equal width */
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

/* --- secondary (aside) --- */
.species-secondary {
  /* padding to match .species .content (primary) */
  padding: 0 1.25rem;
}

.secondary-title {
  padding: 1.25rem;
  width: 100%;
}

/* new flex container for .species-photo and .species-facts */
.secondary-info {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

/* display .species-photo and .species-fact equal width */
.species-photo,
.species-facts {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

/* species photo */
.species-photo {
  /* 1px gap above */
  margin-top: 1px;
  margin-bottom: 0;
}

/* 1:2 aspect ratio */
.species-photo::before {
  content: "";
  display: block;
  padding-top: 50%;
}

.species-photo .species-name {
  font-size: 1rem;
  font-weight: 700;
}

.species-photo .scientific-name {
  margin-top: 0.25rem;
  font-style: italic;
}

/* species facts */
.species-facts {
  background-color: #cccccc;
}

.species-fact {
  position: relative;
  overflow: hidden;
  border-top: 1px solid white;
  line-height: 1.25;
  background-color: #453f3a;
}

/* left blue border */
.species-fact::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0.5rem;
  background-color: #3d9fc1;
}

/* label triggering input */
.species-fact .fact-heading {
  position: relative;
  display: block;
  /* leave room for down arrow and left blue border */
  padding: 0.75rem 1.75rem 0.625rem 1.25rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: white;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

/* down arrow icon */
.species-fact .fact-heading::after {
  content: "";
  position: absolute;
  top: 1.1875rem;
  right: 0.75rem;
  width: 7px;
  height: 8px;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  background-image: url("../img/mmc_icons.svg");
  background-position: -61px -201px;
  /* icon initially semi-transparent */
  background-size: 860px 268px;
  opacity: 0.25;
}

/* icon fully opaque on hover */
.species-fact .fact-heading:hover::after {
  opacity: 1;
}

/* hide input */
.species-fact input {
  display: none;
}

/* fact text */
.species-fact .fact-text {
  padding: 0 0.625rem 0 1.125rem;
  /* height initially collapsed */
  max-height: 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.species-fact .fact-text p {
  font-size: 0.875rem;
  color: white;
}

/* height expanded when input selected */
.species-fact input:checked + .fact-text {
  max-height: 30rem;
  padding-bottom: 0.625rem;
}

/* species map */
.species-map {
  overflow: hidden;
  margin-top: 0.75rem;
}

.species-map .hover-photo {
  position: relative;
  overflow: hidden;
}

/* figure overlay */
.species-map .hover-photo figure::before {
  content: "";
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.species-map .hover-photo img {
  display: block;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  /* remove image border for IE */
  border: 0;
}

/* hover/focus interaction */
/* fade in overlay */
.species-map .hover-photo:hover figure::before,
.species-map .hover-photo:focus figure::before {
  opacity: 0.5;
}

/* zoom in image */
.species-map .hover-photo:hover img,
.species-map .hover-photo:focus img {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

/* species photo gallery */
.species-gallery {
  /* new flex container for .frames */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  border-top: 1px solid white;
}

.species-gallery .frame {
  /* equal sized frames */
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  /* remove all borders (from .frame class), and add 1px right border */
  border: none;
  border-right: 1px solid white;
}

/* remove last right border */
.species-gallery .frame:last-of-type {
  border-right: none;
}

/* initial image size */
.species-gallery img.wide {
  max-height: 7rem;
}

.species-gallery img.tall {
  max-width: 7rem;
}

/* --- primary (article) --- */
/* redefines .content to be 3/4 of container's max-width */
.species-profile .content {
  max-width: 39.375rem;
  padding: 1.25rem;
}

.primary-title {
  /* initially hide .primary-title */
  display: none;
}

.species-intro {
  margin-top: 0;
}

.intro-photo {
  margin-top: 2rem;
}

/* 1:2 aspect ratio */
.intro-photo::before {
  content: "";
  display: block;
  padding-top: 50%;
}

/* species profile tabs */
.species-profile .tab-group {
  /* apply some seperation between tabs and intro image */
  margin-top: 2.5rem;
}

/* letter dates */
.species-profile #letters th:nth-of-type(1),
.species-profile #letters td:nth-of-type(1) {
  width: calc(100% / 3);
}

/* letter description */
.species-profile #letters th:nth-of-type(2),
.species-profile #letters td:nth-of-type(2) {
  width: calc(100% / 3 * 2);
}

/* --- media queries --- */
@media (min-width: 30em) {
  .secondary-info {
    /* display .species-photo and .species-facts side by side */
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .species-photo {
    /* 1px gap to right */
    margin-right: 1px;
  }

  /* 1:1 aspect ratio */
  .species-photo::before {
    padding-top: 100%;
  }

  /* reassign image size */
  .species-gallery img.wide {
    max-height: 10rem;
  }

  .species-gallery img.tall {
    max-width: 10rem;
  }
}

@media (min-width: 40em) {
  /* hide .secondary-title */
  .secondary-title {
    display: none;
  }

  /* show .primary-title */
  .primary-title {
    display: inherit;
  }

  .species-profile {
    /* display .species-primary and .species-secondary side by side */
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .species-profile .content {
    /* increase content padding */
    padding: 2.5rem;
  }

  .species-primary {
    /* display .species-primary 2x as wide as .species-secondary */
    -webkit-box-flex: 2;
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2;
  }

  .species-secondary {
    /* arrange .species-secondary to come after .species-primary */
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
    /* remove previously set padding */
    padding: 0;
  }

  .secondary-info {
    /* display .species-photo and .species-facts stacked on top */
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .species-gallery .frame {
    border-bottom: 1px solid white;
    /* caps flex-basis to 50% of parent (two per line) */
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 50%;
    -ms-flex: 1 0 50%;
    flex: 1 0 50%;
  }

  /* remove right border from right-most elements */
  .species-gallery .frame:nth-of-type(even) {
    border-right: none;
  }

  /* reassign image size */
  .species-gallery img.wide {
    max-height: 8rem;
  }

  .species-gallery img.tall {
    max-width: 8rem;
  }

  /* add previously removed margin */
  .species-intro {
    margin-top: 1rem;
  }

  /* remove previously set margins */
  .species-photo {
    margin: 0;
  }
}

@media (min-width: 50em) {
  .species-primary {
    /* display .species-primary 3x as wide as .species-secondary */
    -webkit-box-flex: 3;
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3;
  }

  /* visually deter click interactivity */
  .species-fact .fact-heading {
    padding-bottom: 0.25rem;
    cursor: default;
  }

  /* hide down arrow icons */
  .species-fact .fact-heading::after {
    display: none;
  }

  /* expand fact text */
  .species-fact .fact-text {
    max-height: 30rem;
    padding-bottom: 0.875rem !important;
  }

  /* reassign image size */
  .species-gallery img.wide {
    max-height: 7rem;
  }

  .species-gallery img.tall {
    max-width: 7rem;
  }
}