/* =========================================================
   GCGF – GOLFNOW GREENFEE-BANNER

   Desktop:
   Logos links
   Überschrift und Angebote mittig
   Buchungsbutton rechts

   Tablet:
   Logos links
   Inhalte und Button rechts untereinander

   Smartphone:
   vollständige Stapelung
   ========================================================= */

.gcgf-golfnow-banner {
  --gcgf-golfnow-green: #679938;
  --gcgf-golfnow-green-dark: #527c2d;
  --gcgf-golfnow-blue: #003f74;
  --gcgf-golfnow-text: #29332d;

  position: relative;
  isolation: isolate;

  display: grid;

  grid-template-columns:
    130px
    minmax(0, 1fr)
    245px;

  grid-template-areas:
    "brand copy action"
    "brand offers action";

  align-items: center;
  column-gap: 38px;
  row-gap: 13px;

  width: 100%;
  margin: 30px 0 0;
  padding: 27px 31px;

  overflow: hidden;

  /*
   * Vollflächiger hellgrüner Hintergrund.
   * Es wird kein Hintergrundfoto mehr benötigt.
   */

  background:
    radial-gradient(
      circle at 92% 50%,
      rgba(154, 198, 92, 0.18) 0%,
      rgba(154, 198, 92, 0.08) 28%,
      rgba(154, 198, 92, 0) 55%
    ),
    linear-gradient(
      115deg,
      #fbfcf8 0%,
      #f5f9f0 48%,
      #edf5e5 100%
    );

  border: 1px solid rgba(103, 153, 56, 0.24);
  border-radius: 20px;

  box-shadow:
    0 13px 30px rgba(39, 63, 34, 0.10);
}


/* Dezente Lichtfläche über den gesamten Banner */

.gcgf-golfnow-banner::after {
  content: "";

  position: absolute;
  z-index: -1;

  top: -90px;
  right: 8%;

  width: 420px;
  height: 300px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.52) 0%,
      rgba(255, 255, 255, 0) 70%
    );

  pointer-events: none;
}


/* =========================================================
   LOGO-BEREICH
   ========================================================= */

.gcgf-golfnow-brand {
  grid-area: brand;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  align-self: stretch;

  min-width: 0;
}


/* Golfclub Gifhorn oben */

.gcgf-golfnow-club-logo {
  display: block;

  width: auto;
  max-width: 80px;
  height: auto;
  max-height: 70px;

  margin: 0;

  border: 0;
  box-shadow: none;

  object-fit: contain;
}


/* Trennlinie */

.gcgf-golfnow-brand-divider {
  display: block;

  width: 100%;
  max-width: 108px;
  height: 1px;

  margin: 12px auto;

  background: rgba(103, 153, 56, 0.31);
}


/* GolfNow darunter */

.gcgf-golfnow-logo {
  display: block;

  width: 100%;
  max-width: 114px;
  height: auto;

  margin: 0;

  border: 0;
  box-shadow: none;

  object-fit: contain;
}


/* =========================================================
   ÜBERSCHRIFT
   ========================================================= */

.gcgf-golfnow-copy {
  grid-area: copy;

  align-self: end;

  min-width: 0;
}


/* Kicker */

.gcgf-golfnow-kicker {
  margin: 0 0 6px;

  color: var(--gcgf-golfnow-green);

  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.015em;
}


/* Headline */

.gcgf-golfnow-copy h3 {
  max-width: none;

  margin: 0 !important;
  padding: 0 !important;

  color: var(--gcgf-golfnow-blue);

  font-size: clamp(26px, 1.9vw, 31px);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.015em;
  text-transform: none;
}


/* =========================================================
   ANGEBOTSGRAFIK

   Quelldatei: 600 × 184 Pixel

   Desktop und Tablet:
   bewusst deutlich kleiner als die Originalbreite.

   Keine CSS-Vergrößerung und keine Transformation.
   ========================================================= */

.gcgf-golfnow-offers {
  grid-area: offers;

  display: flex;
  align-items: flex-start;
  justify-content: flex-start;

  align-self: start;

  min-width: 0;
}

.gcgf-golfnow-offers img {
  display: block;

  /*
   * 330 px ist für Desktop ein guter Kompromiss:
   * sichtbar, aber deutlich unter der Originalbreite.
   */

  width: 330px;
  max-width: 100%;
  height: auto;

  margin: 0;

  border: 0;
  box-shadow: none;

  object-fit: contain;

  /*
   * Keine Browser-Skalierung über transforms.
   */

  transform: none;
  filter: none;
}


/* =========================================================
   BUCHUNGSBUTTON
   ========================================================= */

.gcgf-golfnow-action {
  grid-area: action;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  min-width: 0;
}

.gcgf-golfnow-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;

  min-width: 225px;
  min-height: 50px;

  padding: 12px 20px;

  color: #ffffff !important;
  background: var(--gcgf-golfnow-green);

  border: 1px solid var(--gcgf-golfnow-green);
  border-radius: 999px;

  box-shadow:
    0 8px 18px rgba(82, 124, 45, 0.20);

  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  white-space: nowrap;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.gcgf-golfnow-button:hover {
  color: #ffffff !important;
  background: var(--gcgf-golfnow-green-dark);

  border-color: var(--gcgf-golfnow-green-dark);

  box-shadow:
    0 10px 21px rgba(82, 124, 45, 0.25);

  transform: translateY(-1px);
}

.gcgf-golfnow-button:focus-visible {
  color: #ffffff !important;

  outline: 3px solid rgba(103, 153, 56, 0.32);
  outline-offset: 4px;
}


/* Pfeil */

.gcgf-golfnow-button-arrow {
  display: block;

  width: 19px;
  height: 19px;
  flex: 0 0 19px;

  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition: transform 0.2s ease;
}

.gcgf-golfnow-button:hover
.gcgf-golfnow-button-arrow {
  transform: translateX(3px);
}


/* =========================================================
   TABLET / KLEINERE DESKTOPBREITEN
   ========================================================= */

@media only screen and (max-width: 1050px) {

  .gcgf-golfnow-banner {
    grid-template-columns:
      125px
      minmax(0, 1fr);

    grid-template-areas:
      "brand copy"
      "brand offers"
      "brand action";

    align-items: start;
    column-gap: 30px;
    row-gap: 14px;

    padding: 26px 29px;
  }

  .gcgf-golfnow-brand {
    align-self: center;
  }

  .gcgf-golfnow-copy {
    align-self: end;
  }

  .gcgf-golfnow-copy h3 {
    font-size: 25px;
  }

  .gcgf-golfnow-offers img {
    width: 320px;
  }

  .gcgf-golfnow-action {
    justify-content: flex-start;

    margin-top: 2px;
  }

  .gcgf-golfnow-button {
    min-width: 240px;
  }

}


/* =========================================================
   TABLET HOCH
   ========================================================= */

@media only screen and (max-width: 780px) {

  .gcgf-golfnow-banner {
    grid-template-columns:
      110px
      minmax(0, 1fr);

    column-gap: 24px;

    padding: 24px;
  }

  .gcgf-golfnow-club-logo {
    max-width: 76px;
    max-height: 66px;
  }

  .gcgf-golfnow-logo {
    max-width: 105px;
  }

  .gcgf-golfnow-brand-divider {
    max-width: 100px;
  }

  .gcgf-golfnow-copy h3 {
    font-size: 23px;
  }

  .gcgf-golfnow-offers img {
    width: 300px;
  }

}


/* =========================================================
   SMARTPHONE

   Die mobile Aufteilung bleibt bewusst wie bisher.
   ========================================================= */

@media only screen and (max-width: 620px) {

  .gcgf-golfnow-banner {
    grid-template-columns: 1fr;

    grid-template-areas:
      "brand"
      "copy"
      "offers"
      "action";

    gap: 22px;

    margin-top: 26px;
    padding: 22px 20px;

    background:
      radial-gradient(
        circle at 50% 85%,
        rgba(154, 198, 92, 0.15) 0%,
        rgba(154, 198, 92, 0) 52%
      ),
      linear-gradient(
        145deg,
        #fbfcf8 0%,
        #f0f7e9 100%
      );

    border-radius: 18px;
  }

  .gcgf-golfnow-banner::after {
    display: none;
  }


  /* Logos */

  .gcgf-golfnow-brand {
    width: 100%;
  }

  .gcgf-golfnow-club-logo {
    max-width: 86px;
    max-height: 74px;
  }

  .gcgf-golfnow-brand-divider {
    max-width: 180px;

    margin: 14px auto;
  }

  .gcgf-golfnow-logo {
    max-width: 145px;
  }


  /* Überschrift */

  .gcgf-golfnow-copy {
    text-align: center;
  }

  .gcgf-golfnow-kicker {
    font-size: 12px;
  }

  .gcgf-golfnow-copy h3 {
    max-width: none;

    font-size: 23px;
    line-height: 1.2;
  }


  /* Angebote */

  .gcgf-golfnow-offers {
    justify-content: center;
  }

  .gcgf-golfnow-offers img {
    width: 100%;
    max-width: 360px;
  }


  /* Button */

  .gcgf-golfnow-action {
    justify-content: stretch;

    margin-top: 0;
  }

  .gcgf-golfnow-button {
    width: 100%;
    min-width: 0;
    min-height: 52px;

    padding: 13px 18px;

    white-space: normal;
  }

}


/* =========================================================
   SEHR KLEINE SMARTPHONES
   ========================================================= */

@media only screen and (max-width: 390px) {

  .gcgf-golfnow-banner {
    padding-right: 17px;
    padding-left: 17px;
  }

  .gcgf-golfnow-copy h3 {
    font-size: 21px;
  }

  .gcgf-golfnow-offers img {
    max-width: 320px;
  }

  .gcgf-golfnow-button {
    font-size: 13px;
  }

}


/* =========================================================
   REDUZIERTE BEWEGUNG
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .gcgf-golfnow-button,
  .gcgf-golfnow-button-arrow {
    transition: none;
  }

  .gcgf-golfnow-button:hover {
    transform: none;
  }

  .gcgf-golfnow-button:hover
  .gcgf-golfnow-button-arrow {
    transform: none;
  }

}