/* ==========================================================================
   Nađa Dent — responsive.css
   Sve prelome radi CSS (ranije se radilo JavaScriptom), pa layout ne "skače"
   pri učitavanju i radi i kada JS ne uspe da se izvrši.
   Tačke preloma: 900px (biografija), 720px (mobilni header i mreže), 560px.
   ========================================================================== */

/* iOS Safari: 100vh uključuje URL traku — svh je tačniji kada postoji. */
@supports (min-height: 100svh) {
  .hero { min-height: 100svh; }
}

@media (max-width: 900px) {
  .bio-block { grid-template-columns: minmax(0, 1fr); }

  .hero-strip {
    position: static;
    padding: 0;
    margin-top: clamp(32px, 6vh, 56px);
    justify-content: center;
    text-align: center;
    gap: 10px 18px;
    line-height: 1.7;
  }

  .hero-strip .urgent { flex-basis: 100%; }

  .hero { padding-bottom: clamp(34px, 6vh, 64px); }
}

@media (max-width: 720px) {
  .head-bar {
    grid-template-columns: 1fr auto;
    column-gap: 12px;
  }

  .nav { display: none; }

  .burger { display: flex; }

  .logo { align-items: flex-start; }

  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .tile--tall { grid-row: span 2; }

  .room-wide { display: block; }

  .room-grid { display: none; }

  .bio-wrap { grid-template-columns: minmax(0, 1fr); }

  .bio-aside { position: static; }

  .bio-photo { aspect-ratio: 1.5; }

  .bio-photo img { object-position: 50% 62%; }

  .contact-intro {
    align-items: center;
    text-align: center;
  }

  .contact-intro p {
    margin-left: auto;
    margin-right: auto;
  }

}

@media (max-width: 560px) {
  .card-grid { grid-template-columns: minmax(0, 1fr); }

  .step {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .phone-btn { padding: 18px 26px; }

  .contact-cell { border-left: 0; }
}

@media (max-width: 380px) {
  .hero-title { font-size: 40px; }

  .logo-name { letter-spacing: .22em; }
}