/* ===== Base reset you likely already have ===== */
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }

/* ===== HERO styles ===== */
.hero{
  /* Background image area */
  --hero-bg: url("../images/banner-gut.jpg");
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 45%), /* left gradient for text legibility */
    var(--hero-bg);
  background-size: cover;
  background-position: center;
  color: #fff;
  position: relative;
}

/* maintain a nice visual height, but let it grow with content */
.hero{ min-height: 64vh; }

/* inner container with two columns */
.hero__inner{
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 48px);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr; /* more room for copy */
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
}

/* Left: copy */
.hero__copy{
  /* lock max width so it never overlaps the media column */
  max-width: 720px;
}

.hero__title{
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 .5em 0;
  /* fluid type */
  font-size: clamp(28px, 5vw, 64px);
  letter-spacing: -0.02em;
}

.hero__subtitle{
  margin: 0 0 1.2em 0;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.5;
  color: #f3f3f3;
  max-width: 52ch;
}

.hero__btn{
  display: inline-block;
  background: #e63946;
  color: #fff;
  padding: 14px 22px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(230,57,70,.28);
  transition: transform .12s ease, box-shadow .12s ease;
}
.hero__btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 28px rgba(230,57,70,.34); }

/* Right: media */
.hero__media{
  justify-self: end;
  width: min(600px, 40vw);        /* keeps image from crowding text */
  max-width: 100%;
}
.hero__media img{
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 36px rgba(0,0,0,.35));
}

/* ===== RESPONSIVE ===== */

/* Large tablets and below: give text a bit more room if needed */
@media screen and (max-width: 1060px){
  .hero__inner{
    grid-template-columns: 1.2fr 0.8fr;
  }
  .hero__media{ width: min(520px, 42vw); }
}

/* Tablets: tighten spacing, keep columns but shrink image */
@media screen and (max-width: 900px){
  .hero__inner{ gap: 24px; }
  .hero__media{ width: min(460px, 45vw); }
}

/* Mobile: stack vertically; image below copy */
@media screen and (max-width: 700px){
  .hero{
    /* stronger overlay for small screens so text stays readable */
    background-image:
      linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 50%, rgba(0,0,0,0) 100%),
      var(--hero-bg);
      min-height: 0vh;
  }
  .hero__inner{
    grid-template-columns: 1fr;
    text-align: left;        /* keep copy aligned left as requested */
  }
  .hero__copy{
    max-width: none;
  }
  .hero__media{
    justify-self: center;
    width: min(420px, 92vw);
  }
}