/*
Theme Name: Bridge Child
Theme URI: http://bridgelanding.qodeinteractive.com/
Description: A child theme of Bridge Theme
Author: Qode Interactive
Author URI: https://qodeinteractive.com
Version: 1.0.0
Text Domain: bridge
Template: bridge
*/

/* 
 * HERO *
*/

.hero {
  background: linear-gradient(to bottom, #e4cece, #ad9190);
  height: clamp(600px, 75vh, 620px);
  padding: 0 20px;
  overflow: hidden;
}

.hero-inner {
  max-width: 1300px;
  margin: 0 auto;
  height: 100%;
  display: grid;
  grid-template-columns: 0.75fr 1.0fr;
  align-items: end;
padding-top: clamp(0px, 3vh, 30px);
  gap: 5px;
}

/* Bild */
.hero-image {
  display: flex;
  align-items: flex-end;
  height: 100%;
  position: relative; /* wichtig für shadow */
}

.hero-image img {
  width: 92%;
}

/* Bild Shadow (Fix für "Torso") */
.hero-image::after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  height: 60px;

  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,0.25) 0%,
    rgba(0,0,0,0.12) 40%,
    rgba(0,0,0,0) 75%
  );

  filter: blur(10px);
  pointer-events: none;
}

/* Content */
.hero-content {
  color: #fff;
  padding-bottom: clamp(160px, 12vh, 180px);
}

.hero-content p{
  color: #fff;
}

/* H1 */
.hero-content h1 {
  font-family: 'd7 - Lora-SemiBold', sans-serif;
  font-size: 52px;
  line-height: 1.15;
  margin-bottom: 16px;
  color:#fff;

  text-shadow: 4px 3px 45px rgba(0, 0, 0, 0.45);
}

/* Text */
.hero-content p {
  font-family: 'd7 - PontanoSans-Regular', sans-serif;
  font-size: 22px;
  line-height: 1.6;
  margin-bottom: 16px;

  text-shadow: 3px 2px 35px rgba(0, 0, 0, 0.35);
}

/* Button */
.hero-btn {
  display: inline-block;
  padding: 14px 30px;
  background: #ffffff;
  color: #000;
  border-radius: 30px;
  text-decoration: none;
  font-family: 'd7 - Lora-SemiBold', sans-serif;
  font-size: 18px;

  box-shadow: 0px 8px 20px rgba(0,0,0,0.2);
  transition: all 0.25s ease;
}

/* HOVER */
.hero-btn:hover {
  background: #000;
  color: #fff;

  transform: translateY(-4px);
  box-shadow: 0px 16px 30px rgba(0,0,0,0.35);

  animation: heroBtnWobble 0.4s ease;
}

/* WOBBLE ANIMATION */
@keyframes heroBtnWobble {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-6px); }
  70%  { transform: translateY(-3px); }
  100% { transform: translateY(-4px); }
}

/* =========================
   TABLET (bis 1100px)
========================= */
@media (max-width: 1100px) {

  .hero-inner {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .hero-image img {
    width: 100%;
  }

  .hero-content {
    padding-bottom: 120px;
  }

  .hero-content h1 {
    font-size: 42px;
  }

  .hero-content p {
    font-size: 20px;
  }
}


/* =========================
   MOBILE (bis 768px)
========================= */
@media (max-width: 768px) {

  .hero {
    height: auto;
    padding: 10px 20px 40px;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    align-items: center;
    gap: 30px;
  }

  /* Bild oben */
  .hero-image {
    justify-content: center;
  }

  .hero-image img {
    width: 75%;
  }

  /* stärkerer Shadow für Mobile */
  .hero-image::after {
    bottom: -25px;
    width: 80%;
    height: 50px;

    background: radial-gradient(
      ellipse at center,
      rgba(0,0,0,0.25) 0%,
      rgba(0,0,0,0.1) 50%,
      rgba(0,0,0,0) 80%
    );

    filter: blur(8px);
  }

  /* Content */
  .hero-content {
    padding: 0;
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
  }

  .hero-content h1 {
    font-size: 34px;
  }

  .hero-content p {
    font-size: 18px;
  }

  .hero-btn {
    margin-top: 10px;
  }
}