/* Responsive Design Enhancements for Prince IT Solution */

/* Base responsive utilities */
.container-responsive {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* Mobile-first responsive breakpoints */
@media (max-width: 639px) {
  .mobile-only {
    @apply block;
  }
  .tablet-up {
    @apply hidden;
  }
  .desktop-up {
    @apply hidden;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .mobile-only {
    @apply hidden;
  }
  .tablet-only {
    @apply block;
  }
  .tablet-up {
    @apply block;
  }
  .desktop-up {
    @apply hidden;
  }
}

@media (min-width: 1024px) {
  .mobile-only {
    @apply hidden;
  }
  .tablet-only {
    @apply hidden;
  }
  .tablet-up {
    @apply block;
  }
  .desktop-up {
    @apply block;
  }
}

/* Mobile-first responsive text */
.text-responsive-xs {
  @apply text-xs sm:text-sm;
}

.text-responsive-sm {
  @apply text-sm sm:text-base;
}

.text-responsive-base {
  @apply text-base sm:text-lg;
}

.text-responsive-lg {
  @apply text-lg sm:text-xl lg:text-2xl;
}

.text-responsive-xl {
  @apply text-xl sm:text-2xl lg:text-3xl;
}

.text-responsive-2xl {
  @apply text-2xl sm:text-3xl lg:text-4xl xl:text-5xl;
}

.text-responsive-3xl {
  @apply text-3xl sm:text-4xl lg:text-5xl xl:text-6xl;
}

/* Responsive spacing */
.spacing-responsive {
  @apply py-8 sm:py-12 lg:py-16 xl:py-20;
}

.spacing-responsive-sm {
  @apply py-4 sm:py-6 lg:py-8 xl:py-12;
}

/* Responsive grid layouts */
.grid-responsive-1 {
  @apply grid grid-cols-1;
}

.grid-responsive-2 {
  @apply grid grid-cols-1 sm:grid-cols-2;
}

.grid-responsive-3 {
  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3;
}

.grid-responsive-4 {
  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4;
}

/* Responsive flex layouts */
.flex-responsive {
  @apply flex flex-col sm:flex-row;
}

.flex-responsive-reverse {
  @apply flex flex-col-reverse sm:flex-row;
}

/* Responsive image containers */
.image-responsive {
  @apply w-full h-auto object-cover;
}

.image-responsive-square {
  @apply w-full aspect-square object-cover;
}

.image-responsive-16-9 {
  @apply w-full aspect-video object-cover;
}

/* Responsive button sizes */
.btn-responsive {
  @apply px-4 py-2 sm:px-6 sm:py-3 lg:px-8 lg:py-4;
}

.btn-responsive-sm {
  @apply px-3 py-2 sm:px-4 sm:py-2 lg:px-6 lg:py-3;
}

/* Responsive form elements */
.form-responsive {
  @apply w-full px-3 py-2 sm:px-4 sm:py-3 lg:px-6 lg:py-4;
}

/* Responsive navigation */
.nav-responsive {
  @apply hidden lg:flex;
}

.nav-mobile {
  @apply lg:hidden;
}

/* Responsive dropdown */
.dropdown-responsive {
  @apply absolute left-1/2 -translate-x-1/2 mt-4 w-[280px] sm:w-[320px] lg:w-[360px];
}

/* Responsive card layouts */
.card-responsive {
  @apply p-4 sm:p-6 lg:p-8;
}

.card-responsive-sm {
  @apply p-3 sm:p-4 lg:p-6;
}

/* Responsive hero sections */
.hero-responsive {
  @apply py-12 sm:py-16 lg:py-20 xl:py-24;
}

.hero-title-responsive {
  @apply text-3xl sm:text-4xl lg:text-5xl xl:text-6xl;
}

.hero-subtitle-responsive {
  @apply text-lg sm:text-xl lg:text-2xl xl:text-3xl;
}

/* Responsive service cards */
.service-card-responsive {
  @apply p-4 sm:p-6 lg:p-8 rounded-lg shadow-sm hover:shadow-md transition-shadow;
}

/* Responsive contact info */
.contact-info-responsive {
  @apply flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4;
}

/* Responsive footer */
.footer-responsive {
  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8;
}

/* Responsive social icons */
.social-responsive {
  @apply flex flex-wrap gap-3 sm:gap-4;
}

/* Responsive blog cards */
.blog-card-responsive {
  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8;
}

/* Responsive testimonial cards */
.testimonial-responsive {
  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8;
}

/* Responsive pricing cards */
.pricing-responsive {
  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 lg:gap-8;
}

/* Responsive team cards */
.team-responsive {
  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 lg:gap-8;
}

/* Responsive portfolio grid */
.portfolio-responsive {
  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6 lg:gap-8;
}

/* Responsive table */
.table-responsive {
  @apply overflow-x-auto;
}

.table-responsive table {
  @apply min-w-full;
}

/* Responsive modal */
.modal-responsive {
  @apply w-full max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl;
}

/* Responsive sidebar */
.sidebar-responsive {
  @apply hidden lg:block;
}

.sidebar-mobile {
  @apply lg:hidden;
}

/* Responsive breadcrumb */
.breadcrumb-responsive {
  @apply flex flex-wrap items-center gap-2 text-sm;
}

/* Responsive pagination */
.pagination-responsive {
  @apply flex flex-wrap justify-center gap-2;
}

/* Responsive search */
.search-responsive {
  @apply w-full sm:w-auto;
}

/* Responsive filters */
.filter-responsive {
  @apply flex flex-col sm:flex-row gap-4;
}

/* Responsive tabs */
.tab-responsive {
  @apply flex flex-col sm:flex-row;
}

/* Responsive accordion */
.accordion-responsive {
  @apply w-full;
}

/* Responsive carousel */
.carousel-responsive {
  @apply w-full;
}

/* Responsive video */
.video-responsive {
  @apply relative w-full h-0 pb-[56.25%];
}

.video-responsive iframe {
  @apply absolute top-0 left-0 w-full h-full;
}

/* Responsive map */
.map-responsive {
  @apply w-full h-64 sm:h-80 lg:h-96;
}

/* Responsive charts */
.chart-responsive {
  @apply w-full h-64 sm:h-80 lg:h-96;
}

/* Responsive loading states */
.loading-responsive {
  @apply flex items-center justify-center py-8 sm:py-12 lg:py-16;
}

/* Responsive error states */
.error-responsive {
  @apply text-center py-8 sm:py-12 lg:py-16;
}

/* Responsive empty states */
.empty-responsive {
  @apply text-center py-8 sm:py-12 lg:py-16;
}

/* Responsive animations */
.animate-responsive {
  @apply transition-all duration-300 ease-in-out;
}

/* Responsive hover effects */
.hover-responsive {
  @apply hover:scale-105 hover:shadow-lg transition-all duration-300;
}

/* Responsive focus states */
.focus-responsive {
  @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}

/* Responsive accessibility */
.sr-only-responsive {
  @apply sr-only sm:not-sr-only;
}

/* Responsive print styles */
@media print {
  .print-hidden {
    @apply hidden;
  }
  
  .print-visible {
    @apply block;
  }
}

/* Responsive dark mode support */
@media (prefers-color-scheme: dark) {
  .dark-mode-responsive {
    @apply bg-gray-900 text-white;
  }
}

/* Responsive reduced motion */
@media (prefers-reduced-motion: reduce) {
  .motion-reduce {
    @apply transition-none;
  }
}

/* Responsive high contrast */
@media (prefers-contrast: high) {
  .high-contrast {
    @apply border-2 border-black;
  }
}

/* Custom responsive breakpoints */
@media (min-width: 480px) {
  .xs\:block {
    @apply block;
  }
}

@media (min-width: 640px) {
  .sm\:block {
    @apply block;
  }
}

@media (min-width: 768px) {
  .md\:block {
    @apply block;
  }
}

@media (min-width: 1024px) {
  .lg\:block {
    @apply block;
  }
}

@media (min-width: 1280px) {
  .xl\:block {
    @apply block;
  }
}

@media (min-width: 1536px) {
  .2xl\:block {
    @apply block;
  }
}

/* Responsive utilities for specific components */
.nav-link-responsive {
  @apply text-sm sm:text-base lg:text-lg font-medium;
}

.button-responsive {
  @apply px-4 py-2 sm:px-6 sm:py-3 text-sm sm:text-base;
}

.input-responsive {
  @apply px-3 py-2 sm:px-4 sm:py-3 text-sm sm:text-base;
}

.card-responsive {
  @apply p-4 sm:p-6 lg:p-8;
}

.section-responsive {
  @apply py-8 sm:py-12 lg:py-16 xl:py-20;
}

.container-responsive {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* Mobile-specific optimizations */
.mobile-optimized {
  @apply text-sm leading-relaxed;
}

.mobile-touch-target {
  @apply min-h-[44px] min-w-[44px];
}

.mobile-spacing {
  @apply py-4 px-4;
}

.mobile-text {
  @apply text-sm leading-6;
}

.mobile-heading {
  @apply text-lg font-semibold leading-tight;
}

/* Tablet-specific optimizations */
.tablet-optimized {
  @apply text-base leading-relaxed;
}

.tablet-spacing {
  @apply py-6 px-6;
}

.tablet-text {
  @apply text-base leading-7;
}

.tablet-heading {
  @apply text-xl font-semibold leading-tight;
}

/* Touch-friendly elements */
.touch-friendly {
  @apply min-h-[48px] min-w-[48px] flex items-center justify-center;
}

.touch-button {
  @apply min-h-[48px] px-6 py-3 text-base font-medium;
}

.touch-link {
  @apply min-h-[44px] flex items-center px-4 py-2;
}

/* Mobile navigation optimizations */
.mobile-nav {
  @apply fixed inset-0 z-50 bg-white/95 backdrop-blur-xl;
}

.mobile-nav-item {
  @apply block w-full text-left px-6 py-4 text-lg font-medium border-b border-gray-100;
}

.mobile-nav-item:hover {
  @apply bg-gray-50;
}

/* Tablet navigation optimizations */
.tablet-nav {
  @apply flex flex-wrap items-center justify-between;
}

.tablet-nav-item {
  @apply px-4 py-2 text-base font-medium;
}

/* Responsive grid systems */
.grid-mobile {
  @apply grid grid-cols-1 gap-4;
}

.grid-tablet {
  @apply grid grid-cols-2 gap-6;
}

.grid-desktop {
  @apply grid grid-cols-3 gap-8;
}

.grid-responsive {
  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6 lg:gap-8;
}

/* Responsive flex systems */
.flex-mobile {
  @apply flex flex-col space-y-4;
}

.flex-tablet {
  @apply flex flex-row space-x-6;
}

.flex-responsive {
  @apply flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-6;
}

/* Responsive spacing systems */
.spacing-mobile {
  @apply py-4 px-4;
}

.spacing-tablet {
  @apply py-6 px-6;
}

.spacing-desktop {
  @apply py-8 px-8;
}

.spacing-responsive {
  @apply py-4 px-4 sm:py-6 sm:px-6 lg:py-8 lg:px-8;
}

/* Responsive typography systems */
.text-mobile {
  @apply text-sm leading-6;
}

.text-tablet {
  @apply text-base leading-7;
}

.text-desktop {
  @apply text-lg leading-8;
}

.text-responsive {
  @apply text-sm leading-6 sm:text-base sm:leading-7 lg:text-lg lg:leading-8;
}

/* Responsive heading systems */
.heading-mobile {
  @apply text-lg font-semibold leading-tight;
}

.heading-tablet {
  @apply text-xl font-semibold leading-tight;
}

.heading-desktop {
  @apply text-2xl font-bold leading-tight;
}

.heading-responsive {
  @apply text-lg font-semibold leading-tight sm:text-xl sm:font-semibold lg:text-2xl lg:font-bold;
}

/* Responsive image systems */
.image-mobile {
  @apply w-full h-48 object-cover;
}

.image-tablet {
  @apply w-full h-64 object-cover;
}

.image-desktop {
  @apply w-full h-80 object-cover;
}

.image-responsive {
  @apply w-full h-48 object-cover sm:h-64 lg:h-80;
}

/* Responsive form systems */
.form-mobile {
  @apply w-full px-4 py-3 text-base border border-gray-300 rounded-lg;
}

.form-tablet {
  @apply w-full px-6 py-4 text-base border border-gray-300 rounded-lg;
}

.form-responsive {
  @apply w-full px-4 py-3 text-base border border-gray-300 rounded-lg sm:px-6 sm:py-4;
}

/* Responsive button systems */
.btn-mobile {
  @apply w-full px-6 py-3 text-base font-medium rounded-lg;
}

.btn-tablet {
  @apply px-8 py-4 text-base font-medium rounded-lg;
}

.btn-responsive {
  @apply w-full px-6 py-3 text-base font-medium rounded-lg sm:w-auto sm:px-8 sm:py-4;
}

/* Responsive card systems */
.card-mobile {
  @apply p-4 rounded-lg shadow-sm;
}

.card-tablet {
  @apply p-6 rounded-lg shadow-md;
}

.card-responsive {
  @apply p-4 rounded-lg shadow-sm sm:p-6 sm:shadow-md;
}

/* Responsive modal systems */
.modal-mobile {
  @apply w-full max-w-sm mx-4;
}

.modal-tablet {
  @apply w-full max-w-md mx-6;
}

.modal-responsive {
  @apply w-full max-w-sm mx-4 sm:max-w-md sm:mx-6;
}

/* Responsive table systems */
.table-mobile {
  @apply block overflow-x-auto;
}

.table-responsive {
  @apply block overflow-x-auto sm:table;
}

/* Responsive video systems */
.video-mobile {
  @apply w-full h-48;
}

.video-tablet {
  @apply w-full h-64;
}

.video-responsive {
  @apply w-full h-48 sm:h-64 lg:h-80;
}

/* Responsive map systems */
.map-mobile {
  @apply w-full h-48;
}

.map-tablet {
  @apply w-full h-64;
}

.map-responsive {
  @apply w-full h-48 sm:h-64 lg:h-80;
}

/* Responsive chart systems */
.chart-mobile {
  @apply w-full h-48;
}

.chart-tablet {
  @apply w-full h-64;
}

.chart-responsive {
  @apply w-full h-48 sm:h-64 lg:h-80;
}

/* Responsive loading systems */
.loading-mobile {
  @apply flex items-center justify-center py-8;
}

.loading-tablet {
  @apply flex items-center justify-center py-12;
}

.loading-responsive {
  @apply flex items-center justify-center py-8 sm:py-12;
}

/* Responsive error systems */
.error-mobile {
  @apply text-center py-8;
}

.error-tablet {
  @apply text-center py-12;
}

.error-responsive {
  @apply text-center py-8 sm:py-12;
}

/* Responsive empty systems */
.empty-mobile {
  @apply text-center py-8;
}

.empty-tablet {
  @apply text-center py-12;
}

.empty-responsive {
  @apply text-center py-8 sm:py-12;
}

/* Responsive animation systems */
.animate-mobile {
  @apply transition-all duration-200 ease-in-out;
}

.animate-tablet {
  @apply transition-all duration-300 ease-in-out;
}

.animate-responsive {
  @apply transition-all duration-200 ease-in-out sm:duration-300;
}

/* Responsive hover systems */
.hover-mobile {
  @apply active:scale-95;
}

.hover-tablet {
  @apply hover:scale-105;
}

.hover-responsive {
  @apply active:scale-95 sm:active:scale-100 sm:hover:scale-105;
}

/* Responsive focus systems */
.focus-mobile {
  @apply focus:outline-none focus:ring-2 focus:ring-blue-500;
}

.focus-tablet {
  @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}

.focus-responsive {
  @apply focus:outline-none focus:ring-2 focus:ring-blue-500 sm:focus:ring-offset-2;
}

/* Responsive accessibility systems */
.sr-mobile {
  @apply sr-only;
}

.sr-tablet {
  @apply not-sr-only;
}

.sr-responsive {
  @apply sr-only sm:not-sr-only;
}

/* Responsive print systems */
@media print {
  .print-mobile {
    @apply block;
  }
  .print-tablet {
    @apply block;
  }
  .print-responsive {
    @apply block;
  }
}

/* Responsive dark mode systems */
@media (prefers-color-scheme: dark) {
  .dark-mobile {
    @apply bg-gray-900 text-white;
  }
  .dark-tablet {
    @apply bg-gray-900 text-white;
  }
  .dark-responsive {
    @apply bg-gray-900 text-white;
  }
}

/* Responsive reduced motion systems */
@media (prefers-reduced-motion: reduce) {
  .motion-mobile {
    @apply transition-none;
  }
  .motion-tablet {
    @apply transition-none;
  }
  .motion-responsive {
    @apply transition-none;
  }
}

/* Responsive high contrast systems */
@media (prefers-contrast: high) {
  .contrast-mobile {
    @apply border-2 border-black;
  }
  .contrast-tablet {
    @apply border-2 border-black;
  }
  .contrast-responsive {
    @apply border-2 border-black;
  }
}