/* ============================================
   أسامة محبوب — Responsive (Mobile-first)
   Base styles are mobile; scale up from here.
   ============================================ */

/* ---------- Small phones (<= 380px) ---------- */
@media (max-width: 380px) {
  .brand-name {
    font-size: 1.05rem;
  }

  .contact-actions {
    width: 100%;
  }

  .contact-actions .btn {
    flex: 1;
  }
}

/* ---------- Phones / small tablets ---------- */
@media (max-width: 640px) {
  .hero-bg-text--back {
    top: 10%;
  }

  .hero-bg-text--front {
    bottom: 16%;
  }

  .contact-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-actions {
    width: 100%;
  }

  .contact-actions .btn {
    flex: 1;
  }

  .media-frame img {
    height: 400px;
  }
}

/* ---------- Tablets and up ---------- */
@media (min-width: 641px) {
  .links-grid {
    gap: 1.3rem;
  }
}

/* ---------- Desktop and up ---------- */
@media (min-width: 1024px) {
  .link-card {
    padding: 1.3rem 1.7rem;
  }

  .hero-socials {
    gap: 1.1rem;
  }

  .mini-social {
    width: 52px;
    height: 52px;
  }
}

/* ---------- Very large screens ---------- */
@media (min-width: 1600px) {
  :root {
    --container: 1200px;
  }
}

/* ---------- Short landscape phones ---------- */
@media (max-height: 560px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding-bottom: 6rem;
  }

  .hero-portrait {
    width: 150px;
    margin-bottom: 1rem;
  }

  .scroll-hint {
    display: none;
  }
}