.pidi-ozvete{
  max-width: clamp(320px, 96vw, 1440px);
  margin: 0 auto;
  padding: 32px var(--edge) 48px;
  box-sizing: border-box;
  min-height: 90vh;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 18px;
  scroll-margin-top: var(--header-h);
  color: var(--accent);

  position: relative;
  padding-bottom: calc(0.5cm + 8px);

  --raise-ill:      24px;   
  --raise-contacts: 24px;   
  --raise-sign:     18px;   
}

.contact-intro{
  text-align: center;
  margin-bottom: clamp(10px, 3vw, 20px);
}
.intro-line{
  margin: 0;
  font-family: 'Great Vibes', cursive;
  font-style: italic;
  color: var(--accent);
  line-height: 1.06;
  font-size: clamp(26px, 4.4vw, 42px);
}
.intro-line--spaced{
  margin-top: clamp(6px, 2.5vw, 14px);
  margin-bottom: clamp(10px, 3.6vw, 18px);
}
.intro-line--cta{
  margin-top: clamp(8px, 3.8vw, 22px);
}

.ozvete-grid{
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(18px, 4vw, 40px);
}

.ozvete-ill{
  display: grid; place-items: center;
  margin-top: calc(-1 * var(--raise-ill));
}
.ozvete-contacts{
  width: 100%;
  margin-top: calc(-1 * var(--raise-contacts));
}
.contact-sign{
  text-align: center;
  margin: calc(-1 * var(--raise-sign)) auto 0;
  font-family: 'Great Vibes', cursive;
  font-style: italic;
  font-size: clamp(26px, 4.4vw, 40px);
  color: var(--accent);
  background-image: linear-gradient(120deg,#b58e3b 0%,#d1ae63 20%,#ffffff 35%,#d1ae63 50%,#b58e3b 70%,#b58e3b 100%);
  background-size: 200% auto;
  animation: pidi-foil 9s linear infinite;
  background-clip: text;
}
@supports (-webkit-background-clip: text){
  .contact-sign{ -webkit-text-fill-color: transparent; }
}
@supports (background-clip: text){
  .contact-sign{ color: transparent; }
}

.ill-svg{
  width: min(92%, 620px);
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.10));
}
.pen{ animation: ill-float 5.5s ease-in-out infinite; transform-origin: 85% 70%; }
.ribbon.shimmer{ animation: pidi-foil 9s linear infinite; }

.contact-block{
  display: grid;
  gap: clamp(14px, 2.6vw, 20px);
  max-width: 620px;
  margin: 0 auto;
}
.contact-row{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(140,110,68,.45);
  border-radius: 12px;
  background: #faf8f2;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.contact-row--spaced{ margin-top: clamp(12px, 3vw, 20px); }
.contact-row .ico{
  width: clamp(26px, 3.2vw, 36px);
  height: clamp(26px, 3.2vw, 36px);
  color: var(--accent);
  display: grid; place-items: center;
}
.contact-row .ico svg{ width: 100%; height: 100%; display: block; }
.contact-link{
  font: 500 18px/1.5 'Raleway', sans-serif;
  color: var(--accent);
  text-decoration: none;
  word-break: break-word;
}
.contact-link:focus-visible{
  outline: 2px dashed var(--accent);
  outline-offset: 3px;
}

.contact-note{
  position: absolute !important;
  left: var(--edge);
  right: var(--edge);
  bottom: 0.5cm;     
  margin: 0 !important;
  font-size: 8px;
  line-height: 1.5;
  color: rgba(140,110,68,.85);
  text-align: left;
}

@media (min-width: 1025px){
  .ozvete-grid{
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: clamp(24px, 6vw, 80px);
  }
  .ozvete-ill{ justify-self: start; }
  .ozvete-contacts{ justify-self: stretch; }
  .contact-link{ font-size: 20px; }

  .pidi-ozvete{
    --raise-ill:      20px;
    --raise-contacts: 20px;
    --raise-sign:     14px;
  }
}

@keyframes ill-float{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%    { transform: translateY(-4px) rotate(-3deg); }
}
@keyframes pidi-foil{
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}
@media (prefers-reduced-motion: reduce){
  .pen{ animation: none; }
  .ribbon.shimmer, .contact-sign{ animation: none; }
}

.ozvete-ill img{
  max-width: min(520px, 100%);
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.12));
}
@media (min-width: 1025px){
  .ozvete-ill img{ max-width: 560px; }
}

@media (max-width: 480px){
  .pidi-ozvete .contact-row a[href^="mailto:"]{
    font-size: 16px;
    line-height: 1.2;
  }

  .pidi-ozvete{
    --raise-ill:      28px;
    --raise-contacts: 28px;
    --raise-sign:     20px;
  }
}
.pidi-ozvete{
  --ill-up-desktop:      60px;  
  --contacts-up-desktop: 40px;  
  --sign-up-desktop:     40px;  

  --ill-up-mobile:       70px;
  --contacts-up-mobile:  40px;
  --sign-up-mobile:      20px;
}

.pidi-ozvete .ozvete-grid > .ozvete-ill{
  transform: translateY(calc(-1 * var(--ill-up-desktop))) !important;
  transition: transform .2s ease;
}
.pidi-ozvete .ozvete-grid > .ozvete-contacts{
  transform: translateY(calc(-1 * var(--contacts-up-desktop))) !important;
  transition: transform .2s ease;
}
.pidi-ozvete .contact-sign{
  transform: translateY(calc(-1 * var(--sign-up-desktop))) !important;
  transition: transform .2s ease;
}

@media (max-width: 768px){
  .pidi-ozvete .ozvete-grid > .ozvete-ill{
    transform: translateY(calc(-1 * var(--ill-up-mobile))) !important;
  }
  .pidi-ozvete .ozvete-grid > .ozvete-contacts{
    transform: translateY(calc(-1 * var(--contacts-up-mobile))) !important;
  }
  .pidi-ozvete .contact-sign{
    transform: translateY(calc(-1 * var(--sign-up-mobile))) !important;
  }
}