/* ============================================================================
   RESPONSIVE: ORIENTATION-BASED MEDIA QUERIES
   ============================================================================ */

/* Portrait orientation (typically mobile/tablet vertical) */
@media (orientation: portrait) {
  .navbar {
    display: none;
  }

  .profile-photo {
    margin-block-start: -4.375rem;
    inline-size: 8.75rem;
    block-size: 8.75rem;
  }

  .profile-info {
    padding-inline: 1rem;
    gap: 1rem;
  }

  .profile-details {
    padding-block: 0.75rem;
  }

  .profile-name {
    font-size: 1.875rem;
  }

  .profile-title {
    font-size: 0.9375rem;
  }

  .banner-link-item {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }

  .tab-link {
    padding-inline: 1rem;
    padding-block: 0.75rem;
    font-size: 0.8125rem;
  }

  .section-title {
    font-size: 1.875rem;
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }

  .about-container {
    grid-template-columns: 1fr;
  }

  .project-detail-container {
    flex-direction: column;
    gap: 1rem;
  }

  .project-detail-left {
    flex: 0 0 auto;
    inline-size: 100%;
  }

  .project-detail-title {
    font-size: 1.75rem;
  }
}

/* Landscape orientation (typically desktop/tablet horizontal) */
@media (orientation: landscape) and (max-height: 500px) {
  .profile-photo {
    margin-block-start: -4.375rem;
    inline-size: 7.5rem;
    block-size: 7.5rem;
  }

  .profile-name {
    font-size: 1.875rem;
  }
}

/* Home responsive */
@media (max-width: 600px) {
  .search-form {
    flex-direction: column;
    background: transparent;
    border: none;
    padding: 0;
    gap: 12px;
    box-shadow: none;
  }

  .search-form:focus-within {
    box-shadow: none;
  }

  .input-wrapper {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 12px;
  }

  .source-prefix-btn {
    border-right: 1px solid var(--border);
    border-radius: 8px 8px 0 0;
  }

  .cta-button {
    width: 100%;
    padding: 14px;
  }

  .home-container {
    padding: 40px 16px;
    gap: 50px;
  }
}

/* Project detail responsive */
@media (max-width: 900px) {
  .project-detail-card { padding: 1.5rem 0.5rem; }
  .project-detail-container { flex-direction: column; gap: 1.5rem; }
  .project-detail-left, .project-detail-right { min-width: 0; }
}