/*
Theme Name:     Executive Education HHL
Theme URI:      https://kronfink.de
Description:    Generatepress child theme.
Author:         Hendrik Meibeck
Author URI:     https://hendrikmeibeck.com
Template:       generatepress
Version:        0.1.0
*/

/* Fluid Typography Scale */

h1,
.la-h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem);
  font-weight: 700;
  margin-bottom: 3rem;
}

h2,
.la-h2 {
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  font-weight: 700;
}

h3,
.la-h3 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}

h4,
.la-h4 {
  font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem);
}

h5,
.fs-h5 {
  font-size: clamp(1rem, 0.9rem + 0.8vw, 1.4rem);
}

h6,
.la-h6 {
  font-size: clamp(0.875rem, 0.8rem + 0.6vw, 1.2rem);
}

p,
.la-p {
  font-size: clamp(0.75rem, 0.7rem + 0.5vw, 1rem);
}

html {
  max-width: 2560px;
  margin: auto;
  background: var(--base);
}

/* secondary menu fixes */
.secondary-navigation > div.inside-navigation {
  padding: 0px 20px;
}

nav#secondary-navigation > div {
  padding: 0 40px;
}

#menu-secondary-nav > li > a {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Logo fixes */
.site-logo {
  padding: 10px 0px;
  max-width: 70%;
}

/* Fullwidth escape containers */

:root {
  --wrapper-padding-inline: 0rem;
  --wrapper-max-width: 1280px;

  --section-padding-block: 3rem;
}

img {
  max-width: 100%;
  display: block;
}

section {
  padding-block: var(--section-padding-block);
}

.wrapper {
  max-width: var(--wrapper-max-width);
  margin-inline: auto;
  padding-inline: var(--wrapper-padding-inline);
}

/* remove the padding so images can take up the entire height */
.container--fw-split-screen {
  padding-block: 0;
  > img {
    max-height: 800px;
  }
}

/* match the section padding for the text blocks for
consistency */
.container--fw-split-screen > :not(img) {
  padding-block: var(--section-padding-block);
  padding-inline: var(--wrapper-padding-inline);
}

/* footer nav - legals */
.legals > ul li:not(:last-child):after {
  content: "|";
  padding-left: 0.5em;
}

/* Team slider */
.team-slider {
  grid-auto-columns: 250px;
  scroll-behavior: smooth;
  scroll-snap-type: x;
  scroll-padding-left: 2rem;
}

.team-slider__card {
  scroll-snap-align: start;
}

@media (min-width: 1025px) {
  .container--fw-split-screen {
    /* outermost columns emulate the spacing from the .wrapper
     while the two inner columns divide the rest of the space
     into two equal parts */
    display: grid;
    gap: 3rem;
    grid-template-columns:
      minmax(var(--wrapper-padding-inline), 1fr)
      minmax(0, calc(var(--wrapper-max-width) / 2))
      minmax(0, calc(var(--wrapper-max-width) / 2))
      minmax(var(--wrapper-padding-inline), 1fr);

    /* for positioning the pseudo-elements
       to fill in the rest of the background*/
    position: relative;
  }

  /* Variante: 33/66 Aufteilung */
  .container--fw-split-screen-33-66 {
    grid-template-columns:
      minmax(var(--wrapper-padding-inline), 1fr)
      minmax(0, calc(var(--wrapper-max-width) * 0.33))
      minmax(0, calc(var(--wrapper-max-width) * 0.67))
      minmax(var(--wrapper-padding-inline), 1fr);
  }

  /* Bild auf der linken Seite in 33/66 */
  .container--fw-split-screen-33-66 > img:first-child {
    grid-column: 1 / 3;
  }

  /* Text auf der rechten Seite in 33/66 */
  .container--fw-split-screen-33-66 > :not(img):last-child {
    grid-column: 3 / 4;
  }

  /* Variante: 66/33 Aufteilung */
  .container--fw-split-screen-66-33 {
    grid-template-columns:
      minmax(var(--wrapper-padding-inline), 1fr)
      minmax(0, calc(var(--wrapper-max-width) * 0.67))
      minmax(0, calc(var(--wrapper-max-width) * 0.33))
      minmax(var(--wrapper-padding-inline), 1fr);
  }

  /* Bild auf der linken Seite in 66/33 */
  .container--fw-split-screen-66-33 > img:first-child {
    grid-column: 1 / 3;
  }

  /* Text auf der rechten Seite in 66/33 */
  .container--fw-split-screen-66-33 > :not(img):last-child {
    grid-column: 3 / 4;
  }

  /* ensure the image fill up the entire space available */
  .container--fw-split-screen > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* if the image is on the left, it covers the entire left half */
  .container--fw-split-screen > img:first-child {
    grid-column: 1 / 3;
  }

  /* if the image is on the right, it covers the entire right half */
  .container--fw-split-screen > img:last-child {
    grid-column: 3 / -1;
  }

  /* make sure text doesn't touch the edge of the viewport 
   and the content is vertically centered */
  .container--fw-split-screen > :not(img) {
    display: grid;
    align-content: center;
    justify-items: start;
  }

  /* if the non-image is first, place it in the second column
     (first column is empty to emulate the .wrapper) */
  .container--fw-split-screen > :not(img):first-child {
    padding-left: 0;
    grid-column: 2 / 3;
  }

  /* if the non-image is last, place it in the third column
     (fourth column is empty to emulate the .wrapper) */
  .container--fw-split-screen > :not(img):last-child {
    padding-right: 0;
    grid-column: 3 / 4;
  }

  /* at large screens, ensure the background color
     goes to the edge of the page */
  .container--fw-split-screen > :not(img)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
  }

  /* ensures the background color fills the entire left side */
  .container--fw-split-screen > :not(img):first-child::before {
    grid-column: 1 / 2;
  }

  /* ensures the background color fills the entire right side */
  .container--fw-split-screen > :not(img):last-child::before {
    grid-column: 4 / 5;
    z-index: -1;
  }
}

@media (max-width: 1024px) {
  /* Secondary Menü fixes */
  nav#secondary-navigation > div {
    padding: 4px;
  }

  #menu-secondary-nav > li > a {
    gap: 4px;
  }

  .secondary-navigation .main-nav ul li a {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Standardfall ohne reverse: Text steht rechts im Desktop → rechts Padding */
  .container--fw-split-screen > :not(img):last-child,
  .container--fw-split-screen-33-66 > :not(img):last-child,
  .container--fw-split-screen-66-33 > :not(img):last-child {
    padding-left: 20px;
  }

  .container--fw-split-screen > :not(img):first-child,
  .container--fw-split-screen-33-66 > :not(img):first-child,
  .container--fw-split-screen-66-33 > :not(img):first-child {
    padding-right: 20px;
  }

  /* Spezialfall: container hat column-reverse in mobile */
  .container--fw-split-screen.is-column-reverse,
  .container--fw-split-screen-33-66.is-column-reverse,
  .container--fw-split-screen-66-33.is-column-reverse {
    flex-direction: column-reverse;
  }

  /* Reverse: Jetzt ist das "first-child" unten → eigentlich rechts im Desktop → rechts Padding */
  .container--fw-split-screen.is-column-reverse > :not(img):first-child,
  .container--fw-split-screen-33-66.is-column-reverse > :not(img):first-child,
  .container--fw-split-screen-66-33.is-column-reverse > :not(img):first-child {
    padding-left: 20px;
    padding-right: 0;
  }

  /* Reverse: Jetzt ist das "last-child" oben → eigentlich links im Desktop → links Padding */
  .container--fw-split-screen.is-column-reverse > :not(img):last-child,
  .container--fw-split-screen-33-66.is-column-reverse > :not(img):last-child,
  .container--fw-split-screen-66-33.is-column-reverse > :not(img):last-child {
    padding-right: 20px;
    padding-left: 0;
  }
}