/* =========================================================
   BLOK: KONTAKT I DOJAZD
   ========================================================= */

.on-contact-cta {
  position: relative;
  overflow: hidden;

  padding-block: clamp(5rem, 7vw, 7rem);

  background:
    radial-gradient(
      circle at 18% 48%,
      rgba(211, 179, 106, 0.045),
      transparent 30rem
    ),
    radial-gradient(
      circle at 82% 50%,
      rgba(255, 255, 255, 0.018),
      transparent 34rem
    ),
    var(--color-background);
}


/* =========================================================
   LINIA SEKCJI
   ========================================================= */

.on-contact-cta::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;

  height: 1px;

  content: "";

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.08),
      transparent
    );
}


/* =========================================================
   LAYOUT
   ========================================================= */

.on-contact-cta__layout {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(20rem, 0.9fr)
    minmax(0, 1.1fr);

  gap: clamp(2.75rem, 4.5vw, 4.75rem);

  align-items: center;
}


/* =========================================================
   POŚWIATA ZA MAPĄ
   ========================================================= */

.on-contact-cta__layout::after {
  position: absolute;

  top: 50%;
  right: 0;

  z-index: 0;

  width: min(38rem, 48vw);
  height: 24rem;

  content: "";
  pointer-events: none;

  background:
    rgba(211, 179, 106, 0.05);

  border-radius: 50%;

  filter: blur(7rem);

  opacity: 0.6;

  transform:
    translateY(-50%);
}


/* =========================================================
   TREŚĆ
   ========================================================= */

.on-contact-cta__content {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 38rem;

  padding-left: 1.5rem;
}


/* pionowa złota linia */

.on-contact-cta__content::before {
  position: absolute;

  top: 0.1rem;
  bottom: 0.35rem;
  left: 0;

  width: 1px;

  content: "";

  background:
    linear-gradient(
      180deg,
      var(--color-accent) 0%,
      rgba(211, 179, 106, 0.3) 42%,
      rgba(211, 179, 106, 0.05) 72%,
      transparent 100%
    );
}


/* =========================================================
   EYEBROW
   ========================================================= */

.on-contact-cta__content
.section-eyebrow {
  display: block;

  margin-bottom: 0.9rem;

  color: var(--color-accent);

  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.13em;
  text-transform: uppercase;
}


/* =========================================================
   TYTUŁ
   ========================================================= */

.on-contact-cta__title {
  max-width: 11ch;

  margin: 0 0 1.25rem;

  color: var(--color-text);

  font-size:
    clamp(2.65rem, 4vw, 4.2rem);

  font-weight: 700;
  line-height: 1.03;

  letter-spacing: -0.045em;

  text-wrap: balance;
}


/* =========================================================
   OPIS
   ========================================================= */

.on-contact-cta__description {
  max-width: 32rem;

  margin: 0;

  color: var(--color-text-muted);

  font-size:
    clamp(0.96rem, 1.15vw, 1.05rem);

  line-height: 1.75;
}


/* =========================================================
   DANE KONTAKTOWE
   ========================================================= */

.on-contact-cta__details {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 0.75rem;

  margin-top: 2.4rem;
}


/* =========================================================
   KAFEL KONTAKTOWY
   ========================================================= */

.on-contact-cta__detail {
  position: relative;

  display: flex;
  flex-direction: column;

  gap: 0.5rem;

  min-width: 0;

  padding:
    1.15rem 1.2rem;

  font-style: normal;

  border:
    1px solid
    rgba(255, 255, 255, 0.075);

  border-radius:
    var(--radius-small);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.024),
      transparent 65%
    ),
    rgba(255, 255, 255, 0.01);

  transition:
    transform
      400ms
      cubic-bezier(0.22, 1, 0.36, 1),

    border-color
      300ms ease,

    background-color
      300ms ease,

    box-shadow
      400ms
      cubic-bezier(0.22, 1, 0.36, 1);
}


/* złoty detal */

.on-contact-cta__detail::before {
  position: absolute;

  top: -1px;
  left: 1rem;

  width: 2.6rem;
  height: 1px;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--color-accent),
      transparent
    );

  opacity: 0.7;
}


@media (hover: hover) {

  .on-contact-cta__detail:hover {
    border-color:
      rgba(211, 179, 106, 0.26);

    background-color:
      rgba(255, 255, 255, 0.018);

    box-shadow:
      0 1rem 2rem
      rgba(0, 0, 0, 0.1);

    transform:
      translateY(-0.15rem);
  }

}


/* =========================================================
   ETYKIETA KAFELKA
   ========================================================= */

.on-contact-cta__detail-label {
  color:
    var(--color-accent);

  font-size:
    0.65rem;

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


/* =========================================================
   WARTOŚĆ KAFELKA
   ========================================================= */

.on-contact-cta__detail-value {
  display: flex;
  flex-direction: column;

  gap: 0.1rem;

  width: fit-content;

  margin: 0;

  color:
    var(--color-text);

  font-family:
    inherit;

  font-size:
    0.94rem;

  font-weight:
    600;

  line-height:
    1.5;

  text-decoration:
    none;
}


a.on-contact-cta__detail-value {
  transition:
    color 250ms ease;
}


a.on-contact-cta__detail-value:hover {
  color:
    var(--color-accent);
}


/* =========================================================
   DWA NUMERY TELEFONU
   ========================================================= */

.on-contact-cta__phones {
  display: grid;

  gap: 0.3rem;
}


.on-contact-cta__phone {
  position: relative;

  padding-left: 0.85rem;
}


.on-contact-cta__phone::before {
  position: absolute;

  top: 50%;
  left: 0;

  width: 0.3rem;
  height: 0.3rem;

  content: "";

  border-radius: 50%;

  background:
    var(--color-accent);

  opacity: 0.72;

  transform:
    translateY(-50%);
}


/* =========================================================
   PRZYCISKI
   ========================================================= */

.on-contact-cta__buttons {
  display: flex;
  flex-wrap: wrap;

  gap: 0.75rem;

  margin-top: 1.75rem;
}


/* =========================================================
   MAPA — WRAPPER
   ========================================================= */

.on-contact-cta__map-shell {
  position: relative;
  z-index: 1;

  min-width: 0;

  min-height:
    clamp(30rem, 36vw, 35rem);

  overflow: hidden;

  isolation: isolate;

  border:
    1px solid
    rgba(255, 255, 255, 0.11);

  border-radius:
    var(--radius-medium);

  background:
    #101419;

  box-shadow:
    0 2rem 5rem
      rgba(0, 0, 0, 0.27),

    0 0 0 1px
      rgba(211, 179, 106, 0.015);

  transition:
    transform
      500ms
      cubic-bezier(0.22, 1, 0.36, 1),

    border-color
      350ms ease,

    box-shadow
      500ms
      cubic-bezier(0.22, 1, 0.36, 1);
}


@media (hover: hover) {

  .on-contact-cta__map-shell:hover {
    border-color:
      rgba(211, 179, 106, 0.32);

    box-shadow:
      0 2.5rem 6rem
        rgba(0, 0, 0, 0.34),

      0 0 3rem
        rgba(211, 179, 106, 0.035);

    transform:
      translateY(-0.2rem);
  }

}


/* =========================================================
   GOOGLE MAPS IFRAME
   ========================================================= */

/*
 * Nie przesuwamy mapy.
 * Nie robimy żadnej sztucznej czarnej maski.
 *
 * Duży panel ON-SERWIS nakładany na mapę przykrywa
 * natywną plakietkę Google w lewym górnym rogu.
 */

.on-contact-cta__map-frame {
  position: absolute;

  inset: -1%;

  width: 102%;
  height: 102%;

  border: 0;

  background:
    #101419;

  filter:
    grayscale(0.2)
    saturate(0.9)
    brightness(0.88)
    contrast(1.04);

  transform:
    scale(1.01);

  transition:
    filter
      650ms ease,

    transform
      1000ms
      cubic-bezier(0.22, 1, 0.36, 1);
}


@media (hover: hover) {

  .on-contact-cta__map-shell:hover
  .on-contact-cta__map-frame {
    filter:
      grayscale(0.06)
      saturate(1)
      brightness(0.94)
      contrast(1.02);

    transform:
      scale(1.018);
  }

}


/* =========================================================
   DELIKATNA WARSTWA NAD MAPĄ
   ========================================================= */

.on-contact-cta__map-shade {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(8, 10, 12, 0.08),
      transparent 38%,
      transparent 75%,
      rgba(8, 10, 12, 0.04)
    ),
    linear-gradient(
      180deg,
      rgba(8, 10, 12, 0.03),
      transparent 38%,
      transparent 76%,
      rgba(8, 10, 12, 0.1)
    );
}


/* delikatny vignette */

.on-contact-cta__map-shade::after {
  position: absolute;

  inset: 0;

  content: "";

  pointer-events: none;

  box-shadow:
    inset 0 0 3rem
    rgba(8, 10, 12, 0.08);
}


/* =========================================================
   DUŻY BOX LOKALIZACJI
   ========================================================= */

/*
 * Celowo zaczyna się dokładnie od lewego górnego
 * rogu mapy i ma na tyle duże wymiary,
 * żeby przykryć natywną wizytówkę Google.
 */

/* =========================================================
   KARTA INFORMACYJNA NA MAPIE
   ========================================================= */

.on-contact-cta__map-badge {
  position: absolute;

  top: 0.9rem;
  left: 0.9rem;

  z-index: 5;

  display: grid;

  width: min(18.5rem, calc(100% - 1.8rem));

  min-height: 0;

  align-content: start;

  gap: 0.24rem;

  padding: 0.95rem 1.05rem;

  pointer-events: none;

  border:
    1px solid
    rgba(211, 179, 106, 0.24);

  border-radius:
    var(--radius-small);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.018),
      transparent 62%
    ),
    rgba(9, 12, 15, 0.96);

  box-shadow:
    0 1rem 2.5rem
    rgba(0, 0, 0, 0.32);

  backdrop-filter:
    blur(0.85rem);

  -webkit-backdrop-filter:
    blur(0.85rem);
}


/* złoty detal na górze */

.on-contact-cta__map-badge::before {
  position: absolute;

  top: -1px;
  left: 1rem;

  width: 3.5rem;
  height: 1px;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--color-accent),
      transparent
    );
}


/* delikatna poświata */

.on-contact-cta__map-badge::after {
  position: absolute;

  top: 20%;
  right: -1.5rem;

  width: 3rem;
  height: 60%;

  content: "";

  pointer-events: none;

  background:
    rgba(211, 179, 106, 0.055);

  filter:
    blur(1.5rem);
}


/* =========================================================
   GOOGLE MAPS LABEL
   ========================================================= */

.on-contact-cta__map-badge-label {
  margin-bottom:
    0.2rem;

  color:
    var(--color-accent);

  font-size:
    0.6rem;

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;
}


/* =========================================================
   NAZWA FIRMY NA MAPIE
   ========================================================= */

.on-contact-cta__map-badge strong {
  color:
    var(--color-text);

  font-family:
    var(--font-heading);

  font-size:
    1.05rem;

  font-weight:
    700;

  line-height:
    1.3;
}


/* =========================================================
   NOTATKA
   ========================================================= */

.on-contact-cta__map-note {
  color:
    rgba(244, 242, 237, 0.78);

  font-size:
    0.73rem;

  line-height:
    1.45;
}


/* =========================================================
   ADRES NA MAPIE
   ========================================================= */

.on-contact-cta__map-address {
  color:
    var(--color-text-muted);

  font-size:
    0.72rem;

  line-height:
    1.5;
}


/* =========================================================
   GODZINY NA MAPIE
   ========================================================= */

.on-contact-cta__map-hours {
  width: fit-content;

  margin-top:
    0.2rem;

  padding-top:
    0.45rem;

  color:
    rgba(244, 242, 237, 0.7);

  font-size:
    0.69rem;

  line-height:
    1.45;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.08);
}


/* =========================================================
   OTWÓRZ W GOOGLE MAPS
   ========================================================= */

.on-contact-cta__map-link {
  position: absolute;

  right: 1.25rem;
  bottom: 1rem;

  z-index: 5;

  display: inline-flex;

  gap: 0.6rem;
  align-items: center;

  padding:
    0.78rem 0.95rem;

  color:
    var(--color-text);

  font-size:
    0.64rem;

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    0.065em;

  text-decoration:
    none;

  text-transform:
    uppercase;

  border:
    1px solid
    rgba(211, 179, 106, 0.2);

  border-radius:
    var(--radius-small);

  background:
    rgba(9, 12, 15, 0.96);

  box-shadow:
    0 0.8rem
    2rem
    rgba(0, 0, 0, 0.34);

  backdrop-filter:
    blur(0.7rem);

  -webkit-backdrop-filter:
    blur(0.7rem);

  transition:
    color
      250ms ease,

    border-color
      250ms ease,

    box-shadow
      350ms ease,

    transform
      350ms
      cubic-bezier(0.22, 1, 0.36, 1);
}


.on-contact-cta__map-link:hover {
  color:
    var(--color-accent);

  border-color:
    rgba(211, 179, 106, 0.55);

  box-shadow:
    0 1rem 2.5rem
      rgba(0, 0, 0, 0.38),

    0 0 2rem
      rgba(211, 179, 106, 0.05);

  transform:
    translateY(-0.15rem);
}


.on-contact-cta__map-link
span:last-child {
  color:
    var(--color-accent);

  transition:
    transform
    250ms ease;
}


.on-contact-cta__map-link:hover
span:last-child {
  transform:
    translate(
      0.15rem,
      -0.15rem
    );
}


/* =========================================================
   FALLBACK MAPY
   ========================================================= */

.on-contact-cta__map-fallback {
  position: absolute;

  inset: 0;

  display: grid;
  place-items: center;

  padding: 2rem;

  color:
    var(--color-text-muted);

  text-align:
    center;

  background:
    #101419;
}


/* =========================================================
   ANIMACJE — STAN POCZĄTKOWY
   ========================================================= */

.on-contact-cta.is-animated
.on-contact-cta__content
.section-eyebrow,

.on-contact-cta.is-animated
.on-contact-cta__title,

.on-contact-cta.is-animated
.on-contact-cta__description,

.on-contact-cta.is-animated
.on-contact-cta__detail,

.on-contact-cta.is-animated
.on-contact-cta__buttons,

.on-contact-cta.is-animated
.on-contact-cta__map-shell {
  opacity: 0;
}


/* =========================================================
   ANIMACJA EYEBROW
   ========================================================= */

.on-contact-cta.is-animated.is-visible
.on-contact-cta__content
.section-eyebrow {
  animation:
    contactFadeUp
    550ms
    cubic-bezier(0.22, 1, 0.36, 1)
    40ms
    forwards;
}


/* =========================================================
   ANIMACJA TYTUŁU
   ========================================================= */

.on-contact-cta.is-animated.is-visible
.on-contact-cta__title {
  animation:
    contactTitleIn
    750ms
    cubic-bezier(0.22, 1, 0.36, 1)
    100ms
    forwards;
}


/* =========================================================
   ANIMACJA OPISU
   ========================================================= */

.on-contact-cta.is-animated.is-visible
.on-contact-cta__description {
  animation:
    contactFadeUp
    700ms
    cubic-bezier(0.22, 1, 0.36, 1)
    190ms
    forwards;
}


/* =========================================================
   ANIMACJA DANYCH
   ========================================================= */

.on-contact-cta.is-animated.is-visible
.on-contact-cta__detail {
  animation:
    contactDetailIn
    650ms
    cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
}


.on-contact-cta.is-animated.is-visible
.on-contact-cta__detail:nth-child(1) {
  animation-delay:
    280ms;
}


.on-contact-cta.is-animated.is-visible
.on-contact-cta__detail:nth-child(2) {
  animation-delay:
    350ms;
}


.on-contact-cta.is-animated.is-visible
.on-contact-cta__detail:nth-child(3) {
  animation-delay:
    420ms;
}


/* =========================================================
   ANIMACJA PRZYCISKÓW
   ========================================================= */

.on-contact-cta.is-animated.is-visible
.on-contact-cta__buttons {
  animation:
    contactFadeUp
    650ms
    cubic-bezier(0.22, 1, 0.36, 1)
    480ms
    forwards;
}


/* =========================================================
   ANIMACJA MAPY
   ========================================================= */

.on-contact-cta.is-animated.is-visible
.on-contact-cta__map-shell {
  animation:
    contactMapIn
    900ms
    cubic-bezier(0.22, 1, 0.36, 1)
    150ms
    forwards;
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes contactFadeUp {

  from {
    opacity: 0;

    transform:
      translateY(1rem);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


@keyframes contactTitleIn {

  from {
    opacity: 0;

    transform:
      translateY(1.2rem)
      scale(0.985);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }

}


@keyframes contactDetailIn {

  from {
    opacity: 0;

    transform:
      translateY(0.9rem)
      scale(0.985);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }

}


@keyframes contactMapIn {

  from {
    opacity: 0;

    transform:
      translateX(1.5rem)
      scale(0.985);
  }

  to {
    opacity: 1;

    transform:
      translateX(0)
      scale(1);
  }

}


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

@media (max-width: 61.99rem) {

  .on-contact-cta {
    padding-block:
      5rem;
  }


  .on-contact-cta__layout {
    grid-template-columns:
      1fr;

    gap:
      3.25rem;
  }


  .on-contact-cta__layout::after {
    top: auto;
    right: 5%;
    bottom: 5%;

    width: 80%;
    height: 22rem;

    transform: none;
  }


  .on-contact-cta__content {
    max-width:
      44rem;
  }


  .on-contact-cta__title {
    max-width:
      13ch;

    font-size:
      clamp(2.5rem, 7vw, 3.75rem);
  }


  .on-contact-cta__description {
    max-width:
      38rem;
  }


  .on-contact-cta__details {
    max-width:
      38rem;
  }


  .on-contact-cta__map-shell {
    min-height:
      30rem;
  }


  .on-contact-cta__map-badge {
    width:
      min(
        23rem,
        64%
      );
  }

}


/* =========================================================
   TELEFON
   ========================================================= */

@media (max-width: 39.99rem) {

  .on-contact-cta {
    padding-block:
      4rem;
  }


  .on-contact-cta__layout {
    gap:
      2.5rem;
  }


  .on-contact-cta__layout::after {
    display:
      none;
  }


  .on-contact-cta__content {
    padding-left:
      0;
  }


  .on-contact-cta__content::before {
    display:
      none;
  }


  .on-contact-cta__content
  .section-eyebrow {
    margin-bottom:
      0.75rem;

    font-size:
      0.7rem;
  }


  .on-contact-cta__title {
    max-width:
      12ch;

    font-size:
      clamp(2.15rem, 10vw, 2.8rem);

    line-height:
      1.07;

    letter-spacing:
      -0.035em;
  }


  .on-contact-cta__description {
    font-size:
      0.92rem;

    line-height:
      1.7;
  }


  /* dane */

  .on-contact-cta__details {
    grid-template-columns:
      1fr;

    gap:
      0.7rem;

    margin-top:
      2rem;
  }


  .on-contact-cta__detail {
    padding:
      1rem 1.05rem;
  }


  /* przyciski */

  .on-contact-cta__buttons {
    display:
      grid;

    margin-top:
      1.5rem;
  }


  .on-contact-cta__buttons
  .button {
    width:
      100%;
  }


  /* mapa */

  .on-contact-cta__map-shell {
    min-height:
      23rem;
  }


  .on-contact-cta__map-frame {
    inset:
      -1%;

    width:
      102%;

    height:
      102%;

    filter:
      grayscale(0.18)
      saturate(0.92)
      brightness(0.88)
      contrast(1.04);
  }


  /*
   * Na telefonie panel jest prawie na całą szerokość.
   * Dzięki temu natywny panel Google również
   * zostaje przykryty.
   */

  .on-contact-cta__map-badge {
    top: 0.7rem;
    left: 0.7rem;

    width:
      min(
        17rem,
        calc(100% - 1.4rem)
      );

    padding:
      0.85rem 0.9rem;
  }


  .on-contact-cta__map-badge-label {
    font-size:
      0.56rem;
  }


  .on-contact-cta__map-badge strong {
    font-size:
      0.95rem;
  }


  .on-contact-cta__map-note,
  .on-contact-cta__map-address,
  .on-contact-cta__map-hours {
    font-size:
      0.68rem;
  }


  .on-contact-cta__map-link {
    right:
      0.75rem;

    bottom:
      0.75rem;

    max-width:
      calc(100% - 1.5rem);

    padding:
      0.72rem 0.8rem;

    font-size:
      0.61rem;
  }

}


/* =========================================================
   BARDZO MAŁY TELEFON
   ========================================================= */

@media (max-width: 27.99rem) {

  .on-contact-cta {
    padding-block:
      3.5rem;
  }


  .on-contact-cta__title {
    font-size:
      clamp(2rem, 11vw, 2.5rem);
  }


  .on-contact-cta__description {
    font-size:
      0.9rem;
  }


  .on-contact-cta__detail {
    padding:
      0.95rem 1rem;
  }


  .on-contact-cta__map-shell {
    min-height:
      21.5rem;
  }


  .on-contact-cta__map-badge {
    top: 0.6rem;
    left: 0.6rem;

    width:
      min(
        15.5rem,
        calc(100% - 1.2rem)
      );

    padding:
      0.8rem 0.85rem;
  }


  .on-contact-cta__map-link {
    right:
      0.6rem;

    bottom:
      0.6rem;

    left:
      0.6rem;

    justify-content:
      center;

    max-width:
      none;

    padding:
      0.72rem 0.75rem;

    text-align:
      center;
  }

}


/* =========================================================
   REDUKCJA RUCHU
   ========================================================= */

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

  .on-contact-cta.is-animated
  .on-contact-cta__content
  .section-eyebrow,

  .on-contact-cta.is-animated
  .on-contact-cta__title,

  .on-contact-cta.is-animated
  .on-contact-cta__description,

  .on-contact-cta.is-animated
  .on-contact-cta__detail,

  .on-contact-cta.is-animated
  .on-contact-cta__buttons,

  .on-contact-cta.is-animated
  .on-contact-cta__map-shell {
    opacity:
      1;

    animation:
      none;
  }


  .on-contact-cta__detail,
  .on-contact-cta__map-shell,
  .on-contact-cta__map-frame,
  .on-contact-cta__map-link {
    transition:
      none;
  }


  .on-contact-cta__detail:hover,
  .on-contact-cta__map-shell:hover,
  .on-contact-cta__map-link:hover {
    transform:
      none;
  }

}