/**
 * Perkasa Networks - Responsive Styles
 * Mobile-First Media Queries
 * Breakpoints: 320px (base), 768px (tablet), 1024px (desktop), 1440px (large desktop)
 */

/* ===== BASE STYLES (Mobile First - 320px+) ===== */
/* All base styles are defined in main.css */

/* ===== MOBILE SPECIFIC STYLES ===== */
@media (max-width: 767px) {
  /* Container adjustments for mobile */
  .container {
    padding: 0 var(--space-4);
  }
  
  /* Typography adjustments */
  h1 {
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
  }
  
  h2 {
    font-size: var(--text-2xl);
  }
  
  h3 {
    font-size: var(--text-xl);
  }
  
  .section-title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-8);
  }
  
  .section-subtitle {
    font-size: var(--text-base);
    margin-bottom: var(--space-6);
  }
  
  /* Section spacing for mobile */
  .section {
    padding: var(--space-12) 0;
  }
  
  .section-lg {
    padding: var(--space-16) 0;
  }
  
  /* Grid adjustments */
  .grid-cols-4,
  .grid-cols-3,
  .grid-cols-2 {
    grid-template-columns: 1fr;
  }
  
  /* Flex adjustments */
  .flex-mobile-col {
    flex-direction: column;
  }
  
  /* Spacing adjustments */
  .gap-mobile-4 {
    gap: var(--space-4);
  }
  
  /* Text alignment */
  .text-mobile-center {
    text-align: center;
  }
  
  /* Hide on mobile */
  .hidden-mobile {
    display: none !important;
  }
  
  /* Show only on mobile */
  .show-mobile {
    display: block !important;
  }
}

/* ===== TABLET STYLES (768px - 1023px) ===== */
@media (min-width: 768px) {
  /* Container improvements */
  .container {
    padding: 0 var(--space-6);
  }
  
  /* Typography scaling */
  h1 {
    font-size: var(--text-4xl);
  }
  
  h2 {
    font-size: var(--text-3xl);
  }
  
  .section-title {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-12);
  }
  
  /* Grid layouts for tablet */
  .grid-cols-2-tablet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .grid-cols-3-tablet {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  /* Package cards - 2 columns on tablet */
  .packages-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }
  
  /* Flex layouts */
  .flex-tablet-row {
    flex-direction: row;
  }
  
  .flex-tablet-col {
    flex-direction: column;
  }
  
  /* Two-column layouts */
  .two-col-tablet {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
  }
  
  /* Hide on tablet */
  .hidden-tablet {
    display: none !important;
  }
  
  /* Show only on tablet */
  .show-tablet {
    display: block !important;
  }
}

/* ===== DESKTOP STYLES (1024px - 1439px) ===== */
@media (min-width: 1024px) {
  /* Container max-width and padding */
  .container {
    max-width: 1200px;
    padding: 0 var(--space-8);
  }
  
  /* Typography scaling */
  h1 {
    font-size: var(--text-5xl);
  }
  
  h2 {
    font-size: var(--text-4xl);
  }
  
  .section-title {
    font-size: var(--text-4xl);
  }
  
  /* Section spacing */
  .section {
    padding: var(--space-20) 0;
  }
  
  .section-lg {
    padding: var(--space-32) 0;
  }
  
  /* Grid layouts for desktop */
  .grid-cols-3-desktop {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  .grid-cols-4-desktop {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  
  /* Package cards - 4 columns on desktop */
  .packages-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-8);
  }
  
  /* Navigation layouts */
  .nav-desktop {
    display: flex;
    align-items: center;
    gap: var(--space-8);
  }
  
  /* Two-column layouts with better spacing */
  .two-col-desktop {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
  }
  
  /* Three-column layouts */
  .three-col-desktop {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
  }
  
  /* Hero section specific */
  .hero-content {
    max-width: 50%;
  }
  
  /* Gallery grid */
  .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }
  
  /* FAQ two-column layout */
  .faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
  }
  
  /* Hide on desktop */
  .hidden-desktop {
    display: none !important;
  }
  
  /* Show only on desktop */
  .show-desktop {
    display: block !important;
  }
}

/* ===== LARGE DESKTOP STYLES (1440px+) ===== */
@media (min-width: 1440px) {
  /* Larger container */
  .container {
    max-width: 1400px;
    padding: 0 var(--space-12);
  }
  
  /* Enhanced typography */
  h1 {
    font-size: var(--text-6xl);
  }
  
  .section-title {
    font-size: var(--text-5xl);
  }
  
  /* Increased section spacing */
  .section {
    padding: var(--space-24) 0;
  }
  
  .section-lg {
    padding: var(--space-32) 0;
  }
  
  /* Enhanced grid layouts */
  .packages-grid {
    gap: var(--space-10);
  }
  
  .gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-8);
  }
  
  /* Better spacing for large screens */
  .two-col-desktop {
    gap: var(--space-16);
  }
  
  .three-col-desktop {
    gap: var(--space-12);
  }
}

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

/* Responsive Display Classes */
@media (max-width: 767px) {
  .d-mobile-none { display: none !important; }
  .d-mobile-block { display: block !important; }
  .d-mobile-flex { display: flex !important; }
  .d-mobile-grid { display: grid !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .d-tablet-none { display: none !important; }
  .d-tablet-block { display: block !important; }
  .d-tablet-flex { display: flex !important; }
  .d-tablet-grid { display: grid !important; }
}

@media (min-width: 1024px) {
  .d-desktop-none { display: none !important; }
  .d-desktop-block { display: block !important; }
  .d-desktop-flex { display: flex !important; }
  .d-desktop-grid { display: grid !important; }
}

/* Responsive Text Alignment */
@media (max-width: 767px) {
  .text-mobile-left { text-align: left !important; }
  .text-mobile-center { text-align: center !important; }
  .text-mobile-right { text-align: right !important; }
}

@media (min-width: 768px) {
  .text-tablet-left { text-align: left !important; }
  .text-tablet-center { text-align: center !important; }
  .text-tablet-right { text-align: right !important; }
}

@media (min-width: 1024px) {
  .text-desktop-left { text-align: left !important; }
  .text-desktop-center { text-align: center !important; }
  .text-desktop-right { text-align: right !important; }
}

/* Responsive Spacing */
@media (max-width: 767px) {
  .p-mobile-2 { padding: var(--space-2) !important; }
  .p-mobile-4 { padding: var(--space-4) !important; }
  .py-mobile-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
  .py-mobile-8 { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }
  .px-mobile-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
  
  .m-mobile-0 { margin: 0 !important; }
  .m-mobile-4 { margin: var(--space-4) !important; }
  .mt-mobile-4 { margin-top: var(--space-4) !important; }
  .mb-mobile-4 { margin-bottom: var(--space-4) !important; }
  .mb-mobile-8 { margin-bottom: var(--space-8) !important; }
}

@media (min-width: 768px) {
  .p-tablet-6 { padding: var(--space-6) !important; }
  .p-tablet-8 { padding: var(--space-8) !important; }
  .py-tablet-8 { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }
  .py-tablet-12 { padding-top: var(--space-12) !important; padding-bottom: var(--space-12) !important; }
  .px-tablet-6 { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
  .px-tablet-8 { padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }
}

@media (min-width: 1024px) {
  .p-desktop-8 { padding: var(--space-8) !important; }
  .p-desktop-12 { padding: var(--space-12) !important; }
  .py-desktop-12 { padding-top: var(--space-12) !important; padding-bottom: var(--space-12) !important; }
  .py-desktop-16 { padding-top: var(--space-16) !important; padding-bottom: var(--space-16) !important; }
  .px-desktop-8 { padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }
  .px-desktop-12 { padding-left: var(--space-12) !important; padding-right: var(--space-12) !important; }
}

/* ===== RESPONSIVE GRID SYSTEM ===== */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--space-4) * -0.5);
}

.col {
  flex: 1;
  padding: 0 calc(var(--space-4) * 0.5);
  margin-bottom: var(--space-4);
}

/* Mobile columns */
@media (max-width: 767px) {
  .col-mobile-12 { flex: 0 0 100%; max-width: 100%; }
  .col-mobile-6 { flex: 0 0 50%; max-width: 50%; }
  .col-mobile-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-mobile-3 { flex: 0 0 25%; max-width: 25%; }
}

/* Tablet columns */
@media (min-width: 768px) and (max-width: 1023px) {
  .col-tablet-12 { flex: 0 0 100%; max-width: 100%; }
  .col-tablet-6 { flex: 0 0 50%; max-width: 50%; }
  .col-tablet-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-tablet-3 { flex: 0 0 25%; max-width: 25%; }
}

/* Desktop columns */
@media (min-width: 1024px) {
  .col-desktop-12 { flex: 0 0 100%; max-width: 100%; }
  .col-desktop-6 { flex: 0 0 50%; max-width: 50%; }
  .col-desktop-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-desktop-3 { flex: 0 0 25%; max-width: 25%; }
  .col-desktop-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
}

/* ===== RESPONSIVE IMAGES ===== */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

.img-responsive {
  width: 100%;
  height: auto;
}

/* ===== RESPONSIVE EMBEDS ===== */
.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9 aspect ratio */
}

.embed-responsive iframe,
.embed-responsive video,
.embed-responsive embed,
.embed-responsive object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 4:3 aspect ratio */
.embed-responsive-4by3::before {
  padding-top: 75%;
}

/* 1:1 aspect ratio */
.embed-responsive-1by1::before {
  padding-top: 100%;
}

/* ===== PRINT STYLES ===== */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  a,
  a:visited {
    text-decoration: underline;
  }
  
  a[href]::after {
    content: " (" attr(href) ")";
  }
  
  .hidden-print {
    display: none !important;
  }
  
  .container {
    max-width: none !important;
    padding: 0 !important;
  }
}