/*
 * Responsive Styles for Qlick Infotech
 * Professional Mobile-First Responsive Design
 * Breakpoints: 320px, 480px, 768px, 992px, 1200px, 1400px
 */

/* ============================================
   BASE RESPONSIVE UTILITIES
   ============================================ */

/* Ensure images are responsive by default */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Responsive container adjustments */
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

/* ============================================
   EXTRA SMALL DEVICES (320px - 479px)
   Mobile Phones (Portrait)
   ============================================ */
@media (max-width: 479px) {
  /* Typography - Optimized for mobile */
  html {
    font-size: 14px;
  }

  h1, .hero-title {
    font-size: 1.75rem !important;
    line-height: 1.2;
  }

  h2, .section-title {
    font-size: 1.5rem !important;
    line-height: 1.3;
  }

  h3 {
    font-size: 1.2rem !important;
  }

  h4 {
    font-size: 1.1rem !important;
  }

  h5 {
    font-size: 1rem !important;
  }

  h6 {
    font-size: 0.9rem !important;
  }

  p, .hero-subtitle, .section-subtitle {
    font-size: 0.9rem !important;
    line-height: 1.5;
  }

  .lead {
    font-size: 1rem !important;
  }

  /* Body text */
  body {
    font-size: 0.9rem !important;
  }

  /* Section tags and badges */
  .section-tag,
  .hero-badge .badge-text {
    font-size: 0.7rem !important;
  }

  /* Container */
  .container {
    max-width: 100%;
    padding-right: 12px;
    padding-left: 12px;
  }

  /* Hero Section */
  .hero {
    min-height: 450px !important;
    padding: 80px 0 40px !important;
  }

  .hero-content {
    text-align: center;
    padding: 0 10px;
  }

  .hero-badge {
    font-size: 0.7rem !important;
    padding: 0.4rem 1rem !important;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 0.8rem !important;
    width: 100%;
  }

  .hero-buttons .btn {
    width: 100%;
    justify-content: center;
    padding: 0.9rem 1.5rem !important;
    font-size: 0.95rem !important;
  }

  .hero-features {
    flex-direction: column;
    gap: 0.8rem !important;
    margin-top: 1.5rem !important;
  }

  .hero-features .feature-item {
    font-size: 0.85rem !important;
  }

  /* Hide hero decorative elements on mobile */
  .hero-image,
  .cyber-shield,
  .floating-shape {
    display: none !important;
  }

  /* Make hero content full width when image is hidden */
  .hero .container {
    justify-content: center !important;
    align-items: center !important;
  }

  .hero-content {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Navigation */
  .navbar {
    padding: 1rem 0;
  }

  .logo img {
    width: 60px !important;
  }

  .nav-toggle {
    width: 28px !important;
    height: 22px !important;
  }

  .nav-menu a {
    font-size: 1rem !important;
  }

  /* Lists */
  ul li,
  ol li {
    font-size: 0.85rem !important;
  }

  /* Links */
  a {
    font-size: inherit;
  }

  /* Sections */
  section {
    padding: 2.5rem 0 !important;
  }

  .section-header {
    margin-bottom: 2rem !important;
  }

  /* Cards */
  .service-card,
  .about-card,
  .value-card,
  .feature-card {
    padding: 1.5rem !important;
    margin-bottom: 1rem;
  }

  .card-body {
    padding: 1.2rem !important;
  }

  .card-body h3,
  .card-title {
    font-size: 1.1rem !important;
  }

  .card-body p,
  .card-text {
    font-size: 0.85rem !important;
  }

  /* Buttons */
  .btn {
    padding: 0.7rem 1.2rem !important;
    font-size: 0.85rem !important;
  }

  .btn-lg {
    padding: 0.85rem 1.5rem !important;
    font-size: 0.9rem !important;
  }

  .btn-sm {
    padding: 0.5rem 1rem !important;
    font-size: 0.8rem !important;
  }

  /* Forms */
  .form-control,
  input,
  textarea,
  select {
    font-size: 0.95rem !important;
    padding: 0.8rem !important;
  }

  /* Footer - Compact mobile view with contact info only */
  .footer {
    padding: 2rem 0 1rem !important;
  }

  .footer-content {
    flex-direction: column;
    gap: 1rem;
  }

  /* Hide non-essential footer sections on mobile */
  .footer-about .footer-description,
  .footer-widget:not(:has(.contact-info)) {
    display: none !important;
  }

  /* Show only contact info widget */
  .footer-widget:has(.contact-info) {
    width: 100%;
  }

  /* Hide widget title on mobile for cleaner look */
  .footer-widget .widget-title {
    font-size: 1.1rem !important;
    margin-bottom: 1rem !important;
    text-align: center;
  }

  /* Compact contact items */
  .contact-info {
    display: flex;
    flex-direction: column;
    gap: 1rem !important;
  }

  .contact-item {
    padding: 0.8rem !important;
    font-size: 0.9rem !important;
  }

  .contact-icon {
    width: 35px !important;
    height: 35px !important;
    font-size: 1rem !important;
  }

  .contact-text h4 {
    font-size: 0.85rem !important;
    margin-bottom: 0.25rem !important;
  }

  .contact-text p {
    font-size: 0.85rem !important;
  }

  /* Compact footer about section */
  .footer-about {
    text-align: center;
    margin-bottom: 1rem;
  }

  .footer-logo {
    font-size: 1.3rem !important;
  }

  /* Compact social links */
  .social-links {
    justify-content: center;
    gap: 0.8rem !important;
    margin-top: 0.8rem !important;
  }

  .social-link {
    width: 35px !important;
    height: 35px !important;
    font-size: 0.9rem !important;
  }

  /* Compact footer bottom */
  .footer-bottom {
    padding: 1rem 0 !important;
    margin-top: 1.5rem !important;
  }

  .footer-bottom-content {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

  .copyright,
  .footer-credit,
  .footer-legal {
    font-size: 0.8rem !important;
  }

  .footer-section {
    width: 100%;
    text-align: center;
  }

  /* Grid Layouts */
  .grid,
  .services-grid,
  .team-grid,
  .values-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Tables */
  table {
    font-size: 0.85rem !important;
  }

  th, td {
    padding: 0.5rem !important;
  }

  /* Modals */
  .modal-content {
    margin: 1rem;
    padding: 1.5rem !important;
  }
}

/* ============================================
   SMALL DEVICES (480px - 767px)
   Mobile Phones (Landscape) & Small Tablets
   ============================================ */
@media (min-width: 480px) and (max-width: 767px) {
  html {
    font-size: 14px;
  }

  .container {
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px;
  }

  /* Typography */
  h1, .hero-title {
    font-size: 2rem !important;
    line-height: 1.2;
  }

  h2, .section-title {
    font-size: 1.65rem !important;
    line-height: 1.3;
  }

  h3 {
    font-size: 1.3rem !important;
  }

  h4 {
    font-size: 1.15rem !important;
  }

  p, .hero-subtitle, .section-subtitle {
    font-size: 0.95rem !important;
    line-height: 1.5;
  }

  body {
    font-size: 0.95rem !important;
  }

  .section-tag,
  .hero-badge .badge-text {
    font-size: 0.75rem !important;
  }

  .hero {
    min-height: 500px !important;
    padding: 100px 0 50px !important;
  }

  /* Hide hero decorative elements on small devices */
  .hero-image,
  .cyber-shield,
  .floating-shape {
    display: none !important;
  }

  /* Make hero content full width when image is hidden */
  .hero .container {
    justify-content: center !important;
    align-items: center !important;
  }

  .hero-content {
    max-width: 100% !important;
    width: 100% !important;
  }

  .hero-buttons {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem !important;
  }

  .hero-buttons .btn {
    flex: 1 1 auto;
    min-width: 150px;
  }

  .grid,
  .services-grid,
  .team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.2rem !important;
  }

  .values-grid {
    grid-template-columns: 1fr !important;
  }

  section {
    padding: 3rem 0 !important;
  }

  /* Footer - Compact view for small devices */
  .footer-about .footer-description,
  .footer-widget:not(:has(.contact-info)) {
    display: none !important;
  }

  .footer-widget:has(.contact-info) {
    width: 100%;
  }

  .footer-about {
    text-align: center;
  }

  .social-links {
    justify-content: center;
  }

  .footer-bottom-content {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
}

/* ============================================
   MEDIUM DEVICES (768px - 991px)
   Tablets (Portrait)
   ============================================ */
@media (min-width: 768px) and (max-width: 991px) {
  html {
    font-size: 15px;
  }

  .container {
    max-width: 720px;
  }

  h1, .hero-title {
    font-size: 2.5rem !important;
  }

  h2, .section-title {
    font-size: 2.1rem !important;
  }

  .hero {
    min-height: 550px !important;
    padding: 120px 0 60px !important;
  }

  /* Hide hero decorative elements on tablets */
  .hero-image,
  .cyber-shield,
  .floating-shape {
    display: none !important;
  }

  /* Make hero content full width when image is hidden */
  .hero .container {
    justify-content: center !important;
    align-items: center !important;
  }

  .hero-content {
    max-width: 100% !important;
    width: 100% !important;
  }

  .hero-buttons {
    flex-direction: row;
    gap: 1.2rem !important;
  }

  .grid,
  .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  section {
    padding: 3.5rem 0 !important;
  }

  /* Navigation - Show mobile menu */
  .nav-menu {
    position: fixed;
    right: -100%;
  }

  .nav-toggle {
    display: flex !important;
  }

  /* Footer - Compact view for tablets */
  .footer-about .footer-description,
  .footer-widget:not(:has(.contact-info)) {
    display: none !important;
  }

  .footer-widget:has(.contact-info) {
    width: 100%;
  }

  .footer-about {
    text-align: center;
  }

  .social-links {
    justify-content: center;
  }

  .footer-bottom-content {
    flex-direction: column;
    gap: 0.8rem;
    text-align: center;
  }
}

/* ============================================
   LARGE DEVICES (992px - 1199px)
   Tablets (Landscape) & Small Desktops
   ============================================ */
@media (min-width: 992px) and (max-width: 1199px) {
  html {
    font-size: 16px;
  }

  .container {
    max-width: 960px;
  }

  h1, .hero-title {
    font-size: 2.8rem !important;
  }

  h2, .section-title {
    font-size: 2.3rem !important;
  }

  .hero {
    min-height: 600px !important;
  }

  .grid,
  .services-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.8rem !important;
  }

  .team-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
  }

  section {
    padding: 4rem 0 !important;
  }
}

/* ============================================
   EXTRA LARGE DEVICES (1200px - 1399px)
   Standard Desktops
   ============================================ */
@media (min-width: 1200px) and (max-width: 1399px) {
  .container {
    max-width: 1140px;
  }

  .grid,
  .services-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
  }

  .team-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 2rem !important;
  }

  .values-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 2rem !important;
  }
}

/* ============================================
   XXL DEVICES (1400px+)
   Large Desktops & 4K Screens
   ============================================ */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }

  .grid,
  .services-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .team-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .values-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ============================================
   COMPONENT-SPECIFIC RESPONSIVE STYLES
   ============================================ */

/* About Page - Story Section */
@media (max-width: 991px) {
  .story-content {
    flex-direction: column !important;
  }

  .story-text,
  .story-image {
    width: 100% !important;
    max-width: 100% !important;
  }

  .story-image {
    margin-top: 2rem;
    height: 300px !important;
  }
}

/* Services Page - Service Cards */
@media (max-width: 767px) {
  .service-block {
    padding: 1.5rem !important;
  }

  .service-group-title {
    font-size: 1.6rem !important;
  }

  .carousel-track {
    grid-auto-columns: minmax(260px, 90%) !important;
    gap: 1rem !important;
  }

  .carousel-nav {
    display: none !important;
  }
}

/* Contact Page - Form Layout */
@media (max-width: 767px) {
  .contact-form-wrapper {
    flex-direction: column !important;
  }

  .contact-info,
  .contact-form {
    width: 100% !important;
  }

  .contact-info {
    margin-bottom: 2rem;
  }
}

/* Training Page - Course Cards */
@media (max-width: 767px) {
  .course-card {
    margin-bottom: 1.5rem;
  }

  .course-header {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .course-price {
    margin-top: 1rem;
  }
}

/* Advisory Page - Advisory Cards */
@media (max-width: 767px) {
  .advisory-grid {
    grid-template-columns: 1fr !important;
  }

  .advisory-card {
    padding: 1.5rem !important;
  }
}

/* Why Us Page - Features */
@media (max-width: 767px) {
  .feature-comparison {
    overflow-x: auto;
  }

  .comparison-table {
    min-width: 600px;
  }
}

/* Team Section */
@media (max-width: 767px) {
  .team-member {
    margin-bottom: 2rem;
  }

  .team-member-image {
    height: 250px !important;
  }
}

/* Statistics Section */
@media (max-width: 767px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  .stat-card {
    padding: 1.5rem 1rem !important;
  }

  .stat-number {
    font-size: 2rem !important;
  }
}

/* Testimonials */
@media (max-width: 767px) {
  .testimonial-card {
    padding: 1.5rem !important;
  }

  .testimonial-text {
    font-size: 0.95rem !important;
  }
}

/* CTA Sections */
@media (max-width: 767px) {
  .cta-section {
    padding: 2.5rem 1rem !important;
    text-align: center;
  }

  .cta-content {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  .cta-buttons {
    flex-direction: column;
    width: 100%;
  }

  .cta-buttons .btn {
    width: 100%;
  }
}

/* Pricing Tables */
@media (max-width: 767px) {
  .pricing-grid {
    grid-template-columns: 1fr !important;
  }

  .pricing-card {
    margin-bottom: 1.5rem;
  }
}

/* Timeline */
@media (max-width: 767px) {
  .timeline {
    padding-left: 1rem;
  }

  .timeline-item {
    padding-left: 2rem !important;
  }

  .timeline-item::before {
    left: -1rem !important;
  }
}

/* Accordion */
@media (max-width: 767px) {
  .accordion-button {
    font-size: 1rem !important;
    padding: 1rem !important;
  }

  .accordion-body {
    padding: 1rem !important;
  }
}

/* ============================================
   UTILITY CLASSES FOR RESPONSIVE DESIGN
   ============================================ */

/* Hide/Show utilities */
@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .show-mobile {
    display: none !important;
  }
}

@media (max-width: 991px) {
  .hide-tablet {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .show-tablet {
    display: none !important;
  }

  .hide-desktop {
    display: none !important;
  }
}

@media (max-width: 991px) {
  .show-desktop {
    display: none !important;
  }
}

/* Text alignment utilities */
@media (max-width: 767px) {
  .text-mobile-center {
    text-align: center !important;
  }

  .text-mobile-left {
    text-align: left !important;
  }

  .text-mobile-right {
    text-align: right !important;
  }
}

/* Spacing utilities for mobile */
@media (max-width: 767px) {
  .mb-mobile-0 { margin-bottom: 0 !important; }
  .mb-mobile-1 { margin-bottom: 0.5rem !important; }
  .mb-mobile-2 { margin-bottom: 1rem !important; }
  .mb-mobile-3 { margin-bottom: 1.5rem !important; }
  .mb-mobile-4 { margin-bottom: 2rem !important; }

  .mt-mobile-0 { margin-top: 0 !important; }
  .mt-mobile-1 { margin-top: 0.5rem !important; }
  .mt-mobile-2 { margin-top: 1rem !important; }
  .mt-mobile-3 { margin-top: 1.5rem !important; }
  .mt-mobile-4 { margin-top: 2rem !important; }

  .p-mobile-0 { padding: 0 !important; }
  .p-mobile-1 { padding: 0.5rem !important; }
  .p-mobile-2 { padding: 1rem !important; }
  .p-mobile-3 { padding: 1.5rem !important; }
  .p-mobile-4 { padding: 2rem !important; }
}

/* Flexbox utilities for mobile */
@media (max-width: 767px) {
  .flex-mobile-column {
    flex-direction: column !important;
  }

  .flex-mobile-row {
    flex-direction: row !important;
  }

  .justify-mobile-center {
    justify-content: center !important;
  }

  .align-mobile-center {
    align-items: center !important;
  }
}

/* Width utilities */
@media (max-width: 767px) {
  .w-mobile-100 {
    width: 100% !important;
  }

  .w-mobile-auto {
    width: auto !important;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  .header,
  .footer,
  .nav-toggle,
  .nav-backdrop,
  .btn,
  .hero-buttons,
  .cta-section {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  a {
    text-decoration: underline;
  }

  .container {
    max-width: 100%;
  }
}

/* ============================================
   LANDSCAPE ORIENTATION FIXES
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: 400px !important;
    padding: 60px 0 40px !important;
  }

  .hero-title {
    font-size: 2rem !important;
  }

  .hero-subtitle {
    font-size: 1rem !important;
  }

  .nav-menu {
    padding-top: 5rem !important;
  }
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .btn,
  .card,
  .service-card {
    border: 2px solid currentColor !important;
  }
}

/* Dark mode adjustments for mobile */
@media (max-width: 767px) {
  [data-theme="dark"] .hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  }

  [data-theme="dark"] .card,
  [data-theme="dark"] .service-card {
    background: rgba(30, 41, 59, 0.8);
  }
}