/* REUSABLE COMPONENTS & CLASSES */

/* CONTAINERS */
.container {
  max-width: 129rem;
  margin: 0 auto;
}

.grid {
  display: grid;
  column-gap: calc(var(--gap-normal) * 4);
  row-gap: calc(var(--gap-medium) / 2);
}

.grid--2-cols {
  grid-template-columns: repeat(2, 1fr);
}

.grid--custom-cols {
  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  grid-gap: var(--gap-medium);
}

.grid--blog-cols {
  grid-template-columns: repeat(auto-fit, minmax(42rem, 1fr));
  row-gap: var(--gap-medium);
  column-gap: 0;
}

.grid--2-rows {
  grid-template-rows: repeat(2, min-content);
}

.grid--3-rows {
  grid-template-rows: repeat(3, 1fr);
}

.grid--3-rows-min {
  grid-template-rows: repeat(3, min-content);
}

.grid--4-rows {
  grid-template-rows: repeat(4, min-content);
}

.grid-cta {
  display: grid;
  grid-template-columns: 60% 40%;
}

.grid-text {
  grid-template-columns: 1fr 64% 1fr;
  text-align: center;
  justify-items: center;
  row-gap: calc(var(--gap-normal) / 2);
}

.flex {
  display: flex;
}

.section-hero {
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 0;
}

/* CONTENT POSITIONING */
.hero-textbox {
  grid-column: 1 / 4;
  grid-row: 1 / -1;
}

.form-content-position {
  grid-column: 1 / span 2;
}

.content-sb {
  justify-content: space-between;
}

.content-center {
  align-items: center;
}

.cta-position {
  gap: var(--gap-small);
  margin-top: var(--margin-normal);
}

.logo-box-position {
  justify-content: center;
  align-items: flex-end;
  gap: var(--gap-large);
}

.absolute-position {
  position: absolute;
  top: 0;
}

.justify-center {
  justify-items: center;
}

/* SPACING */
.section-padding {
  padding: var(--padding-section);
}

.section-padding--sm {
  padding: var(--padding-section-small);
}

.section-margin--large {
  margin-top: var(--margin-large);
}

.textbox p:first-child {
  margin-bottom: var(--margin-default);
}

.padding-hero {
  padding: var(--padding-hero-textbox);
}

.padding-content {
  padding: 0 4rem 0 0;
}

/* HEADINGS */
.subheading {
  display: block;
  width: max-content;
  font-size: var(--font-small);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  line-height: var(--lheight-subheading);
  letter-spacing: var(--space-subheading);
  margin-bottom: calc(var(--margin-normal) / 2);
  padding: var(--padding-subheading);
  border-radius: var(--radius-large);
  font-family: var(--font-alaska);
}

.subheading--section {
  color: var(--color-subheading);
  background-color: var(--color-subheading-alpha);
}

.subheading--card {
  color: var(--color-accent);
  background-color: var(--color-accent-alpha);
}

h1,
h2,
h3,
h4 {
  font-weight: var(--weight-medium);
  font-family: var(--font-alaska);
}

h1,
h2,
h3 {
  letter-spacing: var(--space-heading);
}

.heading-primary {
  font-size: var(--font-heading--1);
  line-height: var(--lheight-heading--1);
}

.heading-secondary {
  font-size: var(--font-heading--2);
  line-height: var(--lheight-heading--2);
  margin-bottom: var(--margin-default);
}

.heading-tertiary {
  font-size: var(--font-heading--3);
  margin-bottom: var(--margin-small);
}

.heading-quaternary {
  font-size: var(--font-heading--4);
}

.section-featured p, .section-featured h4 {
  color: var(--color-text-complementary);
  filter: opacity(0.5);
  font-family: var(--font-arial);
}

/* CARD LAYOUT */
.card {
  background-color: var(--color-light-grey--1);
  border-radius: var(--radius-default);
  overflow: hidden;
}

.card-content {
  display: grid;
  row-gap: var(--gap-small);
  padding: var(--padding-card-content);
}

.card-image {
  display: block;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.card a {
  justify-self: center;
  margin-top: var(--margin-default);
}

.card-description {
  margin-bottom: var(--margin-normal);
}

/* CARD LAYOUT - NEWS */
.card-news {
  border: var(--border-default);
  min-height: 48rem;
  transition: var(--transition-default);
  background-color: transparent;
}

.card-news:hover {
  box-shadow: var(--shadow-medium);
}

.card-news h4 {
  margin-bottom: var(--margin-default);
}

.card-news--image {
  height: 32rem;
}

.section-news--cards {
  grid-gap: 0;
}

/* ITEMS */
.attribute-list {
  flex-direction: column;
  gap: var(--gap-small);
  font-family: var(--font-alaska);
  font-weight: var(--weight-normal);
}

.attribute-link:link,
.attribute-link:visited {
  padding: 0;
  color: var(--color-quaternary);
  border-bottom: 0.1rem solid currentColor;
  padding-bottom: var(--padding-xsmall);
}

.attribute-link:active,
.attribute-link:hover {
  color: var(--color-primary-dark);
  border-bottom-color: transparent;
}

.required-icon {
  font-size: calc(var(--font-small) - 0.1rem);
  color: var(--color-indicator);
}

.form-input--email {
  padding: var(--padding-small) var(--padding-normal);
  border-radius: var(--radius-large);
  border: var(--border-hover);
}

.form-input--email:focus {
  outline: none;
  background-color: var(--color-subheading-alpha);
}

.hero-slideshow {
  width: 100%;
  grid-column: 3 / -1;
  grid-row: 1 / -1;
  z-index: -100;
  background-size: cover;
  background-repeat: no-repeat;
  object-position: center;
  overflow: hidden;
  transition: var(--transition-default);
  backface-visibility: hidden;
}

.hero-bg {
  grid-column: 3 / -1;
  grid-row: 1 / -1;
  z-index: -20;
  width: 100%;
  height: 100.2%;
}

.nav-link-active, .nav-link-active--lang {
  background-color: var(--color-light-grey--1);
  border-radius: calc(var(--radius-small) - 0.3rem);
}

.nav-link-active--lang {
  padding: var(--padding-link);
}

.page-active {
  color: var(--text-paragraph);
  cursor: default;
  pointer-events: none;
}

.breadcrumb a {
  padding: var(--padding-small);
}

.breadcrumb a:not(.page-active) {
  color: var(--color-quaternary);
}

/* LOGOS */
.section-featured {
  align-items: center;
}

/* IMAGES */
.hero-image {
  height: 32rem;
  width: 100%;
  margin-top: var(--height-header);
}

.article-image {
  height: 40rem;
  border-radius: var(--radius-img--blog);
}

/* VIDEOS */
video {
  width: 100%;
  height: auto;
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-dark);
  margin-top: calc(var(--margin-large) + 0.4rem);
}

/* ITERATIVE PSEUDO ELEMENTS */
.hero-feature::before,
.attribute-list--item::before,
.section-how--cards .card-how:last-child li::before {
  display: inline-block;
  content: "";
  height: var(--size-icon-list);
  width: var(--size-icon-list);
  margin-right: var(--margin-small);
 /* vertical-align: bottom; */

  /* For older browsers */
  background-image: url("../../icons/checkmark-orange.b6b9a917f921.svg");
  background-size: cover;

  /* For newer browsers - masking */
  @supports (-webkit-mask-image: url()) or (mask-image: url()) {
    background-color: var(--color-quaternary);
    -webkit-mask-image: url("../../icons/checkmark-orange.b6b9a917f921.svg");
    -webkit-mask-size: cover;
    mask-image: url("../../icons/checkmark-orange.b6b9a917f921.svg");
    mask-size: cover;
    background-image: none;
  }
}

.header-buttons--login::before,
.header-buttons--portal::before {
  display: inline-block;
  content: "";
  height: calc(var(--size-icon-default) - 0.4rem);
  width: calc(var(--size-icon-default) - 0.4rem);
  margin-right: calc(var(--margin-small) + 0.5rem);
  vertical-align: baseline;

  background-image: url("../../icons/locker-black.9e51e5b2632c.svg");
  background-size: cover;

  @supports (-webkit-mask-image: url()) or (mask-image: url()) {
    background-color: currentColor;
    -webkit-mask-image: url("../../icons/locker-black.9e51e5b2632c.svg");
    -webkit-mask-size: cover;
    mask-image: url("../../icons/locker-black.9e51e5b2632c.svg");
    mask-size: cover;
    background-image: none;
  }
}

.header-buttons--login::after,
.header-buttons--portal::after {
  display: block;
  content: "";
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(72%, 30%);
  z-index: -100;
}

.contact-link::before {
  display: inline-block;
  content: "";
  margin-right: var(--margin-small);
  vertical-align: text-top;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: var(--color-quaternary);
}

.contact-link--mail::before {
  height: 1.5rem;
  width: 1.6rem;

  /* For older browsers */
  background-image: url("../../icons/email-white.a00dcb28e5c9.svg");
  background-size: cover;

  /* For newer browsers - masking */
  @supports (-webkit-mask-image: url()) or (mask-image: url()) {
    -webkit-mask-image: url("../../icons/email-white.a00dcb28e5c9.svg");
    mask-image: url("../../icons/email-white.a00dcb28e5c9.svg");
    background-image: none;
  }
}

.contact-link--phone::before {
  height: 1.5rem;
  width: 1.2rem;
  margin-left: var(--margin-small);

  background-image: url("../../icons/mobile-white.c536df45945d.svg");
  background-size: cover;

  @supports (-webkit-mask-image: url()) or (mask-image: url()) {
    -webkit-mask-image: url("../../icons/mobile-white.c536df45945d.svg");
    mask-image: url("../../icons/mobile-white.c536df45945d.svg");
    background-image: none;
  }
}

.contact-link span {
  border-bottom: var(--border-transparent);
  padding-bottom: var(--padding-xsmall);
  transition: var(--transition-default);
}

/* HELPER CLASSES FOR TEXTS */
.text-strong {
  font-weight: var(--weight-bold);
}

.text-italic {
  font-style: italic;
}

.description-color {
  color: var(--text-paragraph);
}

/* MESSAGES */
.messages {
  position: absolute;
  z-index: 2;
  top: 20%;
  left: 50%;
  transform: translate(-50%, 0);
  padding: 0;
  margin: 0 auto;
}

.messages li {
  position: relative;
  list-style-type: none;
  display: flex;
  align-items: center;
  margin-bottom: var(--padding-small-gap);
  padding: var(--padding-normal) var(--padding-normal);
  font-size: var(--font-default);
  box-shadow: var(--shadow-light);
}

.messages li:last-child { margin-bottom: 0; }

.messages .success {
  color: var(--color-secondary);
  background-color: var(--color-tertiary);
  border: var(--border-default);
}

.messages .error {
  color: var(--color-indicator);
  background-color: var(--color-light-grey);
  border: var(--border-default);
}