/* =============================================
   Page Content Component
   Reusable page content wrapper with consistent padding
   ============================================= */

.page-content {
  padding: 32px;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .page-content {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .page-content {
    padding: 12px;
  }
}

/* Small phones landscape (short height) */
@media (orientation: landscape) and (max-height: 430px) and (max-width: 900px) {
  .page-content {
    padding: 12px;
  }
}

@media (orientation: landscape) and (max-height: 320px) {
  .page-content {
    padding: 10px;
  }
}

/* Phone portrait (360x740) - specific optimizations */
@media (width: 360px) and (height: 740px) and (orientation: portrait) {
  .page-content {
    padding: 8px !important;
  }
}

/* Phone portrait (375x667) - specific optimizations */
@media (width: 375px) and (height: 667px) and (orientation: portrait) {
  .page-content {
    padding: 8px !important;
  }
}

/* Phone portrait (375x812) - specific optimizations */
@media (width: 375px) and (height: 812px) and (orientation: portrait) {
  .page-content {
    padding: 10px !important;
  }
}

/* Phone portrait (380x706) - specific optimizations */
@media (width: 380px) and (height: 706px) and (orientation: portrait) {
  .page-content {
    padding: 8px !important;
  }
}

/* Phone portrait (380x754) - specific optimizations */
@media (width: 380px) and (height: 754px) and (orientation: portrait) {
  .page-content {
    padding: 8px !important;
  }
}

/* Phone portrait (380x810) - range-based query */
@media (min-width: 375px) and (max-width: 385px) and (min-height: 750px) and (max-height: 820px) and (orientation: portrait) {
  .page-content {
    padding: 8px !important;
  }
}

/* Phone portrait (390x844) - specific optimizations */
@media (width: 390px) and (height: 844px) and (orientation: portrait) {
  .page-content {
    padding: 10px !important;
  }
}

/* Phone portrait (411x823) - specific optimizations */
@media (width: 411px) and (height: 823px) and (orientation: portrait) {
  .page-content {
    padding: 10px !important;
  }
}

/* Phone portrait (412x892) - specific optimizations */
@media (width: 412px) and (height: 892px) and (orientation: portrait) {
  .page-content {
    padding: 12px !important;
  }
}

/* Phone portrait (412x915) - specific optimizations */
@media (width: 412px) and (height: 915px) and (orientation: portrait) {
  .page-content {
    padding: 12px !important;
  }
}

/* Phone portrait (414x736) - specific optimizations */
@media (width: 414px) and (height: 736px) and (orientation: portrait) {
  .page-content {
    padding: 10px !important;
  }
}

/* Phone portrait (414x896) - specific optimizations */
@media (width: 414px) and (height: 896px) and (orientation: portrait) {
  .page-content {
    padding: 12px !important;
  }
}

/* Phone portrait (430x932) - specific optimizations */
@media (width: 430px) and (height: 932px) and (orientation: portrait) {
  .page-content {
    padding: 12px !important;
  }
}

/* Phone portrait (1080x2400) - specific optimizations */
@media (width: 1080px) and (height: 2400px) and (orientation: portrait) {
  .page-content {
    padding: 20px !important;
  }
}

/* 1080p width portrait - general rule */
@media (min-width: 1080px) and (orientation: portrait) {
  .page-content {
    padding: 20px !important;
  }
}

/* Landscape optimizations */
@media (orientation: landscape) and (max-height: 430px) and (max-width: 900px) {
  .page-content {
    padding: 8px !important;
  }
}

@media (orientation: landscape) and (max-height: 320px) {
  .page-content {
    padding: 6px !important;
  }
}

/* Tablet landscape (1024x505) - compact padding */
@media (width: 1024px) and (height: 505px) and (orientation: landscape),
       (min-width: 1022px) and (max-width: 1026px) and (min-height: 503px) and (max-height: 507px) and (orientation: landscape) {
  .page-content {
    padding: 12px !important;
  }
}