/*
Theme Name: Dreizehngrad
Theme URI: https://git.13-data.de/dreizehngrad/13-grad.com/theme-2025
Author: 13 GRAD - Domenik Moehl
Description: WordPress Block Theme for 13 GRAD
Version: 0.0.1
Requires PHP: 7.4
Text Domain: dreizehngrad
*/



p.no-underline.has-aktiv-grotesk-font-family a {
  text-decoration: none !important;
}

.visible-above-featured {
  z-index: 10;
}

.stack-space-between {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  min-height: 100vh;
}

.flex-1 {
  flex-grow: 1 !important;
  flex-shrink: 1 !important;
  flex-basis: auto !important;
}

.wp-block-column {
  position: relative;
  flex-grow: 1 !important;
  max-width: 100% !important;
}

/* Force hiding in portrait mode */
@media (orientation: portrait) {
  .hide-in-portrait {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

/* Force hiding in landscape mode */
@media (orientation: landscape) {
  .hide-in-landscape {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

/* Hide element with .hide-on-front only on the front page */
body.home .hide-on-front {
  display: none !important;
}



@media only screen and (orientation: portrait) {
  .custom-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Text in button Home */
.my-image-overlay {
  position: relative;
  display: block;
}

.my-image-overlay img {
  width: 100%;
  height: auto;
  display: block;
}

.my-image-overlay::before {
  content: "Work";
  position: absolute;
  bottom: 18px;
  left: 18px;
  color: white;
  font-size: 24px;
  font-weight: 500;
  z-index: 2;
  pointer-events: none;
}

.my-image-overlay::after {
  content: "";
  position: absolute;
  bottom: 18px;
  right: 18px;
  width: 27px;
  height: 35px;
  background: url('/wp-content/uploads/2025/06/arrow_forward.svg') no-repeat center/contain;
  z-index: 2;
  pointer-events: none;
}


@media screen and (orientation: portrait) {
  .single-post .entry-content p,
  .single-post .entry-content h1,
  .single-post .entry-content h2,
  .single-post .entry-content h3,
  .single-post .entry-content h4,
  .single-post .entry-content h5,
  .single-post .entry-content h6 {
    width: 80vw !important;
    max-width: 80vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
  }

  .single-post .entry-content img,
  .single-post .entry-content video,
  .single-post .entry-content iframe,
  .single-post .entry-content figure {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    height: auto !important;
  }

  .single-post .entry-content figure figcaption {
    width: 80vw !important;
    max-width: 80vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
  }

  .single-post .entry-content .wp-block-column {
    width: 100% !important;
  }

  .single-post .entry-content .is-layout-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .single-post .entry-content .wp-container-core-group-is-layout-339c5409 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }

  /* Speziell für Gruppen mit .reverse-portrait */
  .single-post .entry-content .reverse-portrait {
    display: flex !important;
    flex-direction: column !important; /* Elemente untereinander */
  }

  .single-post .entry-content .reverse-portrait .wp-block-column:nth-child(1) {
    order: 2 !important; /* linke Spalte nach unten */
  }

  .single-post .entry-content .reverse-portrait .wp-block-column:nth-child(2) {
    order: 1 !important; /* rechte Spalte nach oben */
  }
}





@media screen and (orientation: portrait) {
  .portrait-6 {
    padding-top: 6px !important;
  }
  .portrait-18 {
    padding-top: 18px !important;
  }
  .portrait-30 {
    padding-top: 30px !important;
  }
  .portrait-50 {
    padding-top: 50px !important;
  }
  .portrait-80 {
    padding-top: 80px !important;
  }

  .portrait-pb-6 {
    padding-bottom: 6px !important;
  }
  .portrait-pb-18 {
    padding-bottom: 18px !important;
  }
  .portrait-pb-30 {
    padding-bottom: 30px !important;
  }
  .portrait-pb-50 {
    padding-bottom: 50px !important;
  }
  .portrait-pb-80 {
    padding-bottom: 80px !important;
  }

}