/**
 * Gipsy Services Frontend - Responsive Styles
 * Breakpoints: Desktop Large (3000px+), Laptop (1440px), Tablet (860px), Mobile (640px)
 */

/* ======================
   DESKTOP LARGE (3000px+)
   ====================== */

@media (min-width: 3000px) {
  .hero-title {
    font-size: 14rem;
    margin-bottom: 3rem;
  }

  .hero-subtitle {
    font-size: 87px;
    margin-bottom: 5rem;
  }

  .search-form {
    max-width: 1000px;
  }

  #companyInput {
    padding: 2rem 2.5rem;
    padding-right: 6rem;
    font-size: 1.6rem;
  }

  .submit-btn {
    width: 4rem;
    height: 4rem;
    right: 1rem;
  }

  .results-container {
    max-width: 1600px;
    padding: 3rem;
  }

  .company-title {
    font-size: 4rem;
  }

  .player-section {
    padding: 2rem;
  }

  .player-icon {
    width: 4rem;
    height: 4rem;
  }

  .play-btn {
    width: 4rem;
    height: 4rem;
  }

  .waveform-container {
    height: 80px;
  }

  .analysis-content {
    padding: 3rem;
  }

  .analysis-text h2 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
  }

  .analysis-text h3 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
  }

  .analysis-text p {
    font-size: 1.3rem;
    margin-bottom: 2rem;
  }
}

/* ======================
   LAPTOP (1440px - 2999px)
   ====================== */

@media (min-width: 1440px) and (max-width: 2999px) {
  .hero-title {
    font-size: 10rem;
  }

  .hero-subtitle {
    font-size: 87px;
  }

  /* .search-form {
    max-width: 1000px;
  } */

  #companyInput {
    padding: 2.5rem 2rem;
    padding-right: 5rem;
    font-size: 2.5rem;
  }

  .submit-btn {
    width: 3.5rem;
    height: 3.5rem;
  }

  .results-container {
    max-width: 1200px;
    padding: 2rem;
  }

  .company-title {
    font-size: 9rem;
  }

  .player-section {
    padding: 1.5rem;
  }

  .waveform-container {
    height: 146px;
  }

  .analysis-content {
    padding: 2rem;
  }
}

/* ======================
   TABLET (860px - 1439px)
   ====================== */

@media (min-width: 1173px) and (max-width: 1439px) {
  .input-container {
    padding: 1.5rem;
  }

  .hero-title {
    font-size: 7rem;
    margin-bottom: 2rem;
  }

  .hero-subtitle {
    font-size: 1.3rem;
    margin-bottom: 3rem;
  }

  .search-form {
    max-width: 600px;
  }

  #companyInput {
    padding: 3rem 2rem;
    padding-right: 5rem;
    font-size: 3rem;
  }

  .submit-btn {
    width: 3rem;
    height: 3rem;
    right: 0.3rem;
  }

  .results-container {
    max-width: 800px;
    padding: 1.5rem;
  }

  .results-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .company-title {
    font-size: 6.5rem;
    order: 1;
    line-height: normal;
  }

  .back-btn {
    order: 0;
  }

  .action-buttons {
    order: 2;
  }

  .player-section {
    padding: 1.2rem;
  }

  .player-info {
    margin-bottom: 1.2rem;
  }

  .player-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .play-btn {
    width: 2.5rem;
    height: 2.5rem;
  }

  .waveform-container {
    height: 140px;
  }

  .analysis-content {
    padding: 1.5rem;
  }

  .analysis-text h2 {
    font-size: 3.8rem;
    margin-bottom: 1.2rem;
  }

  .analysis-text h3 {
    font-size: 1.7rem;
    margin-bottom: 1rem;
  }

  .analysis-text p {
    font-size: 1.2rem;
    margin-bottom: 1.2rem;
  }
}

@media (min-width: 860px) and (max-width: 1172px) {
  .hero-title {
    font-size: 4rem;
    margin-bottom: -1.3rem;
    line-height: 115px;
  }
  .hero-title .wanna {
    font-size: 180px;
    margin-bottom: 20px;
  }
  .hero-title .see-how {
    font-size: 164px;
  }
  .hero-title .far-your {
    font-size: 86px;
    line-height: 60px;
  }
  .hero-title .could-go {
    font-size: 130px;
  }

  .hero-subtitle {
    font-size: 4rem;
    margin-bottom: 2rem;
  }
  .search-form {
    max-width: 100%;
  }

  .input-group {
    border-radius: 50px;
  }

  #companyInput {
    padding: 1rem 1.2rem;
    padding-right: 3.5rem;
    font-size: 2.4rem;
  }
  .form-container {
    width: 745px;
    margin: -39px auto 0px auto;
  }
}

@media (min-width: 641px) and (max-width: 859px) {
  .hero-title {
    font-size: 4rem;
    margin-bottom: -1.3rem;
    line-height: 115px;
  }
  .hero-title .wanna {
    font-size: 180px;
    margin-bottom: 20px;
  }
  .hero-title .see-how {
    font-size: 164px;
  }
  .hero-title .far-your {
    font-size: 86px;
    line-height: 60px;
  }
  .hero-title .could-go {
    font-size: 130px;
  }

  .hero-subtitle {
    font-size: 4rem;
    margin-bottom: 2rem;
  }
  .search-form {
    max-width: 100%;
  }

  .input-group {
    border-radius: 50px;
  }

  #companyInput {
    padding: 1rem 1.2rem;
    padding-right: 3.5rem;
    font-size: 2.4rem;
  }
  .form-container {
    width: 745px;
    margin: -39px auto 0px auto;
  }
}

/* ======================
   MOBILE (640px and below)
   ====================== */

@media (max-width: 640px) {
  #inputScreen {
    padding: 1rem;
  }
  #outputScreen {
    display: block;
  }
  .input-container {
    padding: 0;
  }

  .hero-title {
    font-size: 4rem;
    margin-bottom: -1.3rem;
    line-height: 115px;
  }
  .hero-title .wanna {
    font-size: 90px;
    margin-bottom: 20px;
  }
  .hero-title .see-how {
    font-size: 79px;
  }
  .hero-title .far-your {
    font-size: 43px;
    line-height: 1px;
  }
  .hero-title .could-go {
    font-size: 64px;
  }

  .hero-subtitle {
    font-size: 1.9rem;
    margin-bottom: 2rem;
  }

  .search-form {
    max-width: 100%;
  }

  .input-group {
    border-radius: 50px;
  }

  #companyInput {
    padding: 1rem 1.2rem;
    padding-right: 3.5rem;
    font-size: 1.5rem;
  }
  .form-container {
    width: 375px;
    margin: -65px auto -38px auto;
  }
  .submit-btn {
    width: 2.5rem;
    height: 2.5rem;
    right: 0.25rem;
  }

  .results-container {
    padding: 1rem;
  }

  .results-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  .company-title {
    font-size: 4rem;
    line-height: 4rem;
    order: 1;
  }

  .back-btn {
    order: 0;
    font-size: 0.9rem;
  }

  .action-buttons {
    order: 2;
  }

  .action-btn {
    width: 2rem;
    height: 2rem;
  }

  .player-section {
    padding: 1rem;
    margin-bottom: 1.5rem;
  }

  .player-info {
    margin-bottom: 1rem;
  }

  .player-icon {
    width: 2rem;
    height: 2rem;
  }

  .player-details {
    gap: 0;
  }

  .player-label {
    font-size: 0.95rem;
  }

  .player-company {
    font-size: 1.2rem;
    line-height: normal;
  }

  .player-controls {
    gap: 0.8rem;
  }

  .play-btn {
    width: 2.5rem;
    height: 2.5rem;
  }

  .waveform-container {
    height: 100px;
  }

  .time-display {
    font-size: 0.75rem;
  }

  .analysis-content {
    padding: 1rem;
  }

  .analysis-text h2 {
    font-size: 2.3rem;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
  }

  .analysis-text h3 {
    font-size: 1.7rem;
    margin-bottom: 0.8rem;
    margin-top: 1.2rem;
    line-height: normal;
  }

  .analysis-text p {
    font-size: 1.3rem;
    margin-bottom: 1rem;
  }

  .error-container {
    padding: 1rem;
  }

  .error-title {
    font-size: 1.5rem;
  }

  .error-message {
    font-size: 1rem;
  }

  .retry-btn {
    padding: 0.8rem 1.5rem;
    font-size: 0.9rem;
  }

  .loading-content {
    padding: 1rem;
  }

  .loading-text {
    font-size: 1rem;
  }
}

/* ======================
   LANDSCAPE MOBILE
   ====================== */

@media (max-width: 640px) and (orientation: landscape) {
  .hero-title {
    font-size: 3rem;
    margin-bottom: 1rem;
  }

  .hero-subtitle {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
  }

  .results-container {
    padding: 0.5rem;
  }

  .player-section {
    padding: 0.8rem;
  }

  .analysis-content {
    padding: 0.8rem;
  }
}

/* ======================
   HIGH DPI DISPLAYS
   ====================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hero-title {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .company-title {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ======================
   PRINT MEDIA
   ====================== */

@media print {
  .hero-title {
    font-size: 3rem;
    color: #000;
  }

  .company-title {
    font-size: 2rem;
    color: #000;
  }

  .analysis-text h2 {
    color: #000;
  }

  .analysis-text p {
    color: #000;
  }
}