/* ===================================================================
   ATQAN — frontend/css/features/responsive.css
   Monochrome Landscape Viewport Optimizations (Pure Google Forms)
   =================================================================== */

@media (max-width: 960px) {
  #form-container {
    gap: 12px;
    padding: 0;
  }

  .m3-card {
    border-radius: var(--radius-card);
    padding: 16px 20px;
  }

  body {
    padding: 16px 12px 100px 12px;
    background-color: var(--md-bg);
  }

  .font-mushaf {
    font-size: 2rem !important;
    line-height: 3.5rem !important;
  }
}

/* Mobile Landscape-Specific Layout Adjustments */
@media (max-height: 540px) and (orientation: landscape) {
  body {
    padding: 8px 12px 64px 12px !important;
    background-color: var(--md-bg);
    overflow-y: hidden !important; /* Completely prevent body vertical scrolling */
  }

  #form-container {
    gap: 8px !important;
    max-width: 720px;
    height: calc(100vh - 72px);
    justify-content: center;
  }

  .m3-card {
    padding: 10px 16px !important;
    border-radius: 16px !important; /* M3 Large instead of XL to save vertical space */
  }

  .form-question-card {
    padding: 10px 16px !important;
  }

  .form-header-card {
    border-radius: 16px !important;
    padding: 8px !important;
  }

  .logo {
    height: 36px !important;
  }

  .question-title {
    font-size: 14px !important;
    margin-bottom: 8px !important;
    line-height: 1.2 !important;
  }

  .m3-radio-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px !important;
  }

  .m3-radio-item {
    padding: 6px 12px !important;
    font-size: 13px !important;
  }

  .m3-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px !important;
  }

  .chip-label {
    padding: 4px 10px !important;
    font-size: 12px !important;
  }

  /* Mushaf step layout adjustments */
  .mushaf-card {
    height: 100%;
    max-height: calc(100vh - 80px);
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 16px !important;
    box-sizing: border-box;
  }

  .mushaf-card .card-header {
    margin-bottom: 6px !important;
    gap: 8px;
  }

  .mushaf-card .card-header .question-title {
    font-size: 13px !important;
  }

  .surah-badge {
    font-size: 13px !important;
    padding: 3px 12px !important;
  }

  .m3-stepper {
    margin-bottom: 6px !important;
    padding: 2px 8px !important;
  }

  .progress-line {
    height: 2px !important;
  }

  .step-dot {
    width: 10px !important;
    height: 10px !important;
  }

  .step-dot.active {
    transform: scale(1.15) !important;
  }

  #guidance-banner {
    margin-bottom: 6px !important;
    padding: 6px 12px !important;
    gap: 8px !important;
  }

  #guidance-banner p {
    font-size: 11px !important;
  }

  #guidance-banner .material-symbols-rounded {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
  }

  .mushaf-container {
    background-color: transparent !important;
    padding: 8px 0 !important;
    min-height: unset !important;
    margin-bottom: 8px !important;
    border: none !important;
    box-shadow: none !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .surah-header-box {
    margin-bottom: 6px !important;
    padding: 4px 12px !important;
  }

  .surah-info-name {
    font-size: 11px !important;
  }

  .surah-info-verses, .surah-info-type {
    font-size: 9px !important;
  }

  .font-mushaf {
    font-size: 1.45rem !important;
    line-height: 2.2rem !important;
  }

  #recording-status, #voice-checking-loader {
    margin-bottom: 4px !important;
  }

  .rec-indicator-row {
    margin-bottom: 4px !important;
    gap: 6px !important;
  }

  .rec-dot {
    width: 8px !important;
    height: 8px !important;
  }

  .rec-label, .voice-checking-label {
    font-size: 11px !important;
  }

  #vad-meter, .md3-linear-progress.indeterminate {
    height: 4px !important;
    margin-bottom: 4px !important;
  }

  .fab-wrapper {
    padding: 0 !important;
  }

  .m3-fab {
    width: 44px !important;
    height: 44px !important;
  }

  .m3-fab .material-symbols-rounded {
    font-size: 20px !important;
  }

  .fab-wave-layer {
    width: 44px !important;
    height: 44px !important;
  }

  #pinned-bottom-bar {
    padding: 8px 16px !important;
    height: 52px;
  }
}