/* Color pallette and standard font-size */
:root {
  /* Theme Colors */
  --primary-color: #007db1;
  --primary-25-color: #bfdfec;
  --primary-50-color: #80bed8;
  --primary-75-color: #409ec5;
  --primary-110-color: #00719f;
  --secondary-color: #aa0061;
  --secondary-25-color: #eabfd8;
  --secondary-50-color: #d580b0;
  --secondary-75-color: #bf4089;
  --secondary-110-color: #990057;
  --tertiary-color: #004f71;
  --tertiary-25-color: #bfd3dc;
  --tertiary-50-color: #80a7b8;
  --tertiary-75-color: #407b95;
  --tertiary-110-color: #004766;

  /* Grayscale Colors */
  --white-color: #fff;
  --gray-lightest-color: #ececeb;
  --gray-lighter-color: #d4d4d4;
  --gray-light-color: #d9d9d6;
  --gray-color: #888b8d;
  --gray-dark-color: #979797;
  --gray-darker-color: #63666a;
  --gray-darkest-color: #222731;
  --black-color: #000000;

  /* Status Colors */
  --info-color: #00b2eb;
  --info-10-color: #e6f7fd;
  --info-110-color: #00a0d4;
  --success-color: #7ccc6c;
  --success-10-color: #f2faf0;
  --success-110-color: #70b861;
  --warning-color: #f1c262;
  --warning-10-color: #fef9ef;
  --warning-110-color: #d9af58;
  --danger-color: #e4002b;
  --danger-10-color: #fce6ea;
  --danger-110-color: #cd0027;

  /* Abbott Color Palette */
  --abbott-primary-blue: #009cde;
  --abbott-dark-blue: #002a3a;
  --abbott-medium-blue: #004f71;
  --abbott-light-blue: #5bc2e7;
  --abbott-mint: #64ccc9;
  --abbott-cv-link: var(--primary-color);
  --abbott-purple: #470a68;
  --abbott-magenta: #aa0061;
  --abbott-red: #e4002b;
  --abbott-orange: #ff6900;
  --abbott-gold: #eeb33b;
  --abbott-yellow: #ffd100;
  --abbott-medium-green: #00b140;
  --abbott-light-green: #7ccc6c;
  --abbott-charcoal: #222731;
  --abbott-dark-gray: #63666a;
  --abbott-medium-gray: #888b8d;
  --abbott-light-gray: #d9d9d6;

  /* Accessible Color Palette - Light Mode  */
  --lt-mode-primary-blue: #007acc;
  --lt-mode-dark-blue: #00224a;
  --lt-mode-medium-blue: #004a81;
  --lt-mode-light-blue: #007fa4;
  --lt-mode-mint: #008085;
  --lt-mode-purple: #460a78;
  --lt-mode-magenta: #e70073;
  --lt-mode-red: #de000f;
  --lt-mode-orange: #d64000;
  --lt-mode-gold: #b65e00;
  --lt-mode-yellow: #83613a;
  --lt-mode-medium-green: #008924;
  --lt-mode-light-green: #3e6a24;
  --lt-mode-charcoal: #222731;
  --lt-mode-dark-gray: #636664;
  --lt-mode-medium-gray: #888b8d;
  --lt-mode-light-gray: #d9d9d6;

  /* Accessible Color Palette - Dark Mode  */
  --dk-mode-primary-blue: #009cde;
  --dk-mode-dark-blue: #006aff;
  --dk-mode-medium-blue: #007bbd;
  --dk-mode-light-blue: #00d9ff;
  --dk-mode-mint: #06fbf3;
  --dk-mode-purple: #b70aff;
  --dk-mode-magenta: #f1008a;
  --dk-mode-red: #ff002b;
  --dk-mode-orange: #ff7200;
  --dk-mode-gold: #ff9f0f;
  --dk-mode-yellow: #ffe000;
  --dk-mode-medium-green: #00a832;
  --dk-mode-light-green: #91f781;
  --dk-mode-charcoal: #222731;
  --dk-mode-dark-gray: #63666a;
  --dk-mode-medium-gray: #888b8d;
  --dk-mode-light-gray: #d9d9d6;

  /* XIENCE Colors */
  --xience-plum: #462563;
  --xience-lavender: #a180dc;

  --button-bg-color: var(--dk-mode-light-blue);
  --button-border-color: #ffffff;
  --button-color: #ffffff;
  --callout-color: var(--dk-mode-light-blue);
  --max-content-width: 1920px;
  --main-column-width: 1680px;
  
  /* Font Stacks */
  --body-font-stack: brandon-grotesque, Calibri, Arial, Helvetica, sans-serif;
  --heading-font-stack: brandon-grotesque, Calibri, Arial, Helvetica, sans-serif;
  --body-font-size: 18px;
  --footer-font-size: 12px;
  --social-media-icons-font-size: 24px;

  /* Layout Properties */
  /* Grid Columns */
  --min-column-width: 520px;

  /* Flex */
  --threshold: 30rem;
  --s1: 1rem;
}

* {
  /* background: rgb(0 100 0 / 0.1) !important; */
}

body {
  color: #ffffff;
  line-height: 1.2;
}

.text-invert {
  color: var(--abbott-charcoal);
}

/* Layout */
main {
  display: grid;
  grid-template-columns: [main-start] clamp(20px, 6vw, 90px) [content-start] 1fr [content-end] clamp(20px, 6vw, 90px) [main-end];
  background-color: var(--abbott-medium-blue);
}

main > * {
  grid-column: content;
}

header {
  display: grid;
  grid-template-columns: 1fr;
  background-color: var(--abbott-dark-blue);
  width: 100%;
  position: static;
}

.logo-header {
  background-color: var(--abbott-dark-blue);
  width: min(var(--max-content-width), 100%);
  margin: auto;
  padding: clamp(20px, 6vw, 40px);
}

.logo-header img {
  width: clamp(125px, 11vw, 200px);
}

main {
  background-image: url(//vascular.abbott.com/rs/111-OGY-491/images/vas-ampunation-bg.jpg);
  background-position: top left;
  background-size: 100% 100%;
  /* scroll-snap-type: y proximity;
  scroll-padding-top: 0; */
}

nav:not(.footer-nav) {
  width: min(var(--max-content-width), 100%);
  padding-block: 2rem;
  position: relative;
  top: initial;
  z-index: 1;
}

article {
  display: grid;
  background-color: transparent;
  height: auto;
  min-height: 100vh;
  padding-block: 40px;
  /* scroll-snap-align: start; */
}

article.fullwidth {
  grid-column: main;
}

article.fullwidth > * {
  padding-inline: clamp(20px, 6vw, 80px);
}

article#gallery {
  grid-template-columns: 1fr;
  grid-template-rows: min-content 1fr;
  justify-content: center;
  min-height: calc(100vh - 130px);
  /* max-height: auto; */
  padding-block: 0px;
}

article#references {
  grid-column: main;
  background-image: url(//vascular.abbott.com/rs/111-OGY-491/images/vas-ampunation-bg-references.jpg);
  background-size: cover;
  padding-block-start: 8rem;
  height: auto;
  min-height: auto;
}

article.photo-bg {
  background-color: #ffffff;
  background-image: url(//vascular.abbott.com/rs/111-OGY-491/images/vas-ampunation-bg-contribution.jpg);
  background-position: center;
  background-size: cover;
}

article.blade__short {
  height: auto;
  min-height: auto;
  padding-block-end: 6rem;
}

article > div {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: left;
  align-content: center;
  width: min(var(--max-content-width), 100%);
  height: 100%;
}

.grid-columns {
  grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
}

.flex-cols {
  display: flex;
  flex-flow: row wrap;
  justify-content: start;
  align-items: center;
}

footer {
  grid-column: main;
  padding: 40px clamp(20px, 6vw, 80px);
}

footer .inner {
  width: min(var(--main-column-width), 100%);
}

/* Navigation */
a.mobile_btn {
  display: none;
  width: 64px;
  height: 100%;
  background: url('https://vascular.abbott.com/rs/111-OGY-491/images/mobile_hamburger_menu.png') no-repeat center;
  position: absolute;
  right: 24px;
  background-size: 75%;
}

nav.top-nav {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 40px;
  padding-block: 2rem;
}

nav.top-nav h1 {
  flex-basis: 0;
}
nav.top-nav ul {
  display: inline-flex;
  flex-flow: row wrap;
  gap: 60px;
}

nav.top-nav ul li {
  font-weight: 500;
  text-transform: uppercase;
}

nav.top-nav ul a {
  text-shadow: var(--dk-mode-light-blue) 1px 0 10px;
}
nav.top-nav a:hover {
  color: var(--dk-mode-light-blue);
  text-shadow: none;
}

@media screen and (max-width: 1226px) {
  .grid-columns {
    margin-block: 2rem;
  }

  /* .grid-columns:nth-child(2) {
    display: flex;
    flex-flow: column;
  }

  .grid-columns:nth-child(2) > .flow {
    display: contents;
  }

  .all-cta {
    order: 3;
  } */

}

/* Image Carousel */
article#gallery > div {
  align-content: start;
  padding-inline: 0px;
}

#gallery figure {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "gallery-image";
  align-content: center;
  /* flex: 1; */
  cursor: pointer;
  transition: transform 0.3s;
  overflow: hidden;
  aspect-ratio: 0.68;

}

#gallery figure * {
  grid-area: gallery-image;
  transform: scale 0.5s
}

#gallery figure a {
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, .1);
}

#gallery figure img {
  object-fit: cover;
  object-position: top center;
  aspect-ratio: 0.68;
}

#gallery .gallery-caption {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 600;
  text-transform: uppercase;
  margin-block-start: auto;
  margin-block-end: 2rem;
  padding-left: 40px;
  visibility: visible;
  transform: visibility 0.3s
}

#gallery figure:hover {
  transform: scale(1.1);
  /* flex: 1.1; */
  overflow: hidden;
  z-index: 1000;
}

#gallery figure:hover .gallery-caption {
  visibility: hidden;
  transform: visibility 0.3s
}

#gallery .nav-cta {
  display: none;
  /* margin-block-start: clamp(1rem, 6vw, 4rem); */
}

.gallery {
  display: none;
  height: 45vmin;
}

.flickity-viewport {
  height: 100%;
}

#gallery .carousel .gallery-caption {
  position: absolute;
  bottom: 2rem;
}

/* carousel height */
.carousel {
  --flow-space: 0px;
  height: calc(100vh - 110px - 4rem - 28px);
  max-height: 605px;
}

/* cell inherit height from carousel */
.carousel-cell {
  height: 100%;
}

@media screen and (min-width: 640px) {
  article#gallery {
    grid-template-rows: min-content 1fr 4rem;
  }

  nav.top-nav {
    padding-block: 4rem;
  }

  .carousel {
    /* max-height: 45vmin; */
  }
  
  .flickity-viewport {
    /* height: 45vmin; */
  }
  #gallery .nav-cta {
    display: block;
  }
  
}

@media screen and (min-width: 1280px) {
  .carousel {
    display: none;
  }

  .gallery {
    display: flex;
    justify-content: center;
    width: 100vw;
    height: 50vmin;
  }
}
@media screen and (max-width: 1007px) {

  /* Mobile Menu Styles */
  nav.top-nav .menu-nav--open ul {
    gap: 0;
  }

  nav.top-nav .menu-nav--open ul li {
    flex-grow: 1;
    border: none;
  }

  nav.top-nav ul.menu-nav__items li a {
    color: var(--abbott-primary-blue);
    text-shadow: none;
    width: 100%;
  }

}

@media screen and (max-width: 580px) {
  .grid-columns {
    --min-column-width: 300px;
    /* margin-block-start: 0px; */
  }

  article {
    /* padding-block-start: 0px; */
  }

  article#contribution {
    background-position-x: left;
  }
}

/* BTS Video */
video {
  max-height: calc(100vh - 10rem);
  width: 100%;
  max-width: 1360px;
  aspect-ratio: 16 / 10;
}


/* Typography */
h1 {
  font-size: clamp(28px, 5vw, 48px);
}

h2,
h3 {
  color: var(--callout-color);
  font-size: clamp(54px, 6vw, 62px);
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
  max-width: 16ch;
}

h2 span,
h3 span {
  display: block;
  color: #ffffff;
  font-family: Georgia, serif;
  font-size: 55%;
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  text-transform: none;
}

.text-invert h2,
.text-invert h3 {
  color: var(--abbott-dark-blue);
}
.text-invert h2 span,
.text-invert h3 span {
  color: var(--abbott-charcoal);
}

h3 {
  font-size: 34px;
}

h3 span {
  font-size: 60%;
}
h4 {
  color: var(--callout-color);
  font-weight: 400;
  text-transform: uppercase;
}

h5 {
  font-size: 12px;
  font-weight: 600;
}

p {
  max-width: 100ch;
}

.large,
blockquote {
  font-size: 20px;
  max-width: 60ch;
  text-wrap: pretty;
}

.all-caps {
  text-transform: uppercase;
}

.callout {
  display: block;
  color: var(--callout-color);
  font-size: 38px;
  font-weight: 600;
  text-transform: uppercase;
}

.clt-inline {
  display: inline-block;
}

.block-caption {
  font-size: 42px;
  line-height: 1.1;
  text-transform: uppercase;
}

.block-caption span {
  display: block;
  color: var(--callout-color);
  font-size: 120%;
  font-weight: 600;
}

.block-caption strong {
  display: block;
}

.block-caption strong sup {
  font-weight: 400;
}

blockquote {
  font-style: italic;
  line-height: 1.2;
  padding-left: 6rem;
  position: relative;
}

blockquote::before {
  content: "“";
  color: var(--callout-color);
  font-size: 180px;
  font-style: normal;
  font-weight: 600;
  line-height: 0.8;
  position: absolute;
  left: 0px;
}

.references {
  --flow-space: 0px;
  margin-inline-start: 0px;
  padding-inline-start: 12px;
}

.references li {
  font-family: var(--body-font-stack);
  font-size: 12px;
  line-height: 1.2;
}

.references li::marker {
  font-weight: 600;
}


/* Buttons and Links */
button,
.button:not(.flickity-button) {
  border: 1px solid var(--button-border-color);
  border-radius: 1.25em;
  font-size: clamp(20px, 5vw, 26px);
  text-align: center;
  padding: 10px 1.25em;
}

button:hover,
.button:not(.flickity-button):hover {
  --button-color: var(--callout-color);
  --button-bg-color: #ffffff;
}

.nav-cta {
  text-align: center;
  margin-inline: auto;
}
.nav-cta a {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: currentColor;
  font-weight: 500;
  text-transform: uppercase;
}

.nav-cta a img {
  display: inline-block;
  width: 30px;
}

img.arrow-up {
  transform: rotate(90deg);
}

img.arrow-down {
  transform: rotate(-90deg);
}