/* ====================================================================
   RESPONSIVE STYLES - MOBILE FIRST APPROACH
   Conservative Design | Accessibility First | Bootstrap 5 Compatible
   ==================================================================== */

/* ===== MOBILE FIRST (DEFAULT) ===== */
/* Base styles are already mobile-optimized in main.css */

/* ===== SMALL DEVICES (landscape phones, 576px and up) ===== */
@media (min-width: 576px) {
  .hero-section {
    padding: var(--spacing-xl) 0;
  }
  
  .hero-title {
    font-size: calc(var(--font-size-h1) + 0.25rem);
  }
  
  .section {
    padding: calc(var(--spacing-xl) + 1rem) 0;
  }
  
  .custom-card {
    padding: calc(var(--spacing-md) + 0.5rem);
  }
  
  .team-member img {
    width: 140px;
    height: 140px;
  }
  
  .gallery-item img {
    height: 280px;
  }
}

/* ===== MEDIUM DEVICES (tablets, 768px and up) ===== */
@media (min-width: 768px) {
  .hero-title {
    font-size: calc(var(--font-size-h1) + 0.5rem);
  }
  
  .hero-subtitle {
    font-size: calc(var(--font-size-lg) + 0.25rem);
  }
  
  .section-title {
    font-size: calc(var(--font-size-h2) + 0.25rem);
  }
  
  .section-subtitle {
    font-size: calc(var(--font-size-lg) + 0.125rem);
  }
  
  .navbar-nav .nav-link {
    padding: var(--spacing-xs) var(--spacing-md);
  }
  
  .custom-card {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .custom-card img {
    height: 220px;
  }
  
  .team-member {
    margin-bottom: var(--spacing-lg);
  }
  
  .team-member img {
    width: 160px;
    height: 160px;
  }
  
  .gallery-item img {
    height: 300px;
  }
  
  .footer {
    padding: calc(var(--spacing-lg) + 1rem) 0;
  }
}

/* ===== LARGE DEVICES (desktops, 992px and up) ===== */
@media (min-width: 992px) {
  .hero-section {
    min-height: 100vh;
    padding: 0;
  }
  
  .hero-content {
    padding: var(--spacing-xl);
    padding-top: 250px;
}
  
  .hero-title {
    font-size: calc(var(--font-size-h1) + 0.75rem);
  }
  
  .hero-subtitle {
    font-size: calc(var(--font-size-lg) + 0.5rem);
  }
  
  .section {
    padding: calc(var(--spacing-xl) + 2rem) 0;
  }
  
  .section-title {
    font-size: calc(var(--font-size-h2) + 0.5rem);
  }
  
  .section-desc {
    font-size: calc(var(--font-size-base) + 0.125rem);
    max-width: 700px;
  }
  
  .custom-card {
    padding: var(--spacing-lg);
  }
  
  .custom-card img {
    height: 240px;
  }
  
  .team-member img {
    width: 180px;
    height: 180px;
  }
  
  .gallery-item img {
    height: 320px;
  }
  
  .navbar-brand {
    font-size: calc(var(--font-size-xl) + 0.125rem) !important;
  }
  
  .navbar-nav .nav-link {
    padding: var(--spacing-sm) var(--spacing-md);
  }
}

/* ===== EXTRA LARGE DEVICES (large desktops, 1200px and up) ===== */
@media (min-width: 1200px) {
  .hero-title {
    font-size: calc(var(--font-size-h1) + 1rem);
  }
  
  .hero-subtitle {
    font-size: calc(var(--font-size-lg) + 0.75rem);
  }
  
  .section-title {
    font-size: calc(var(--font-size-h2) + 0.75rem);
  }
  
  .section-desc {
    font-size: calc(var(--font-size-base) + 0.25rem);
    max-width: 800px;
  }
  
  .custom-card img {
    height: 260px;
  }
  
  .team-member img {
    width: 200px;
    height: 200px;
  }
  
  .gallery-item img {
    height: 350px;
  }
  
  .hero-content {
    padding: calc(var(--spacing-xl) + 1rem);
    padding-top: 250px;
}
  
  .custom-card {
    padding: calc(var(--spacing-lg) + 0.5rem);
  }
}

/* ===== EXTRA EXTRA LARGE DEVICES (larger desktops, 1400px and up) ===== */
@media (min-width: 1400px) {
  .hero-title {
    font-size: calc(var(--font-size-h1) + 1.25rem);
  }
  
  .hero-subtitle {
    font-size: calc(var(--font-size-lg) + 1rem);
  }
  
  .section-title {
    font-size: calc(var(--font-size-h2) + 1rem);
  }
  
  .section-desc {
    max-width: 900px;
  }
  
  .custom-card img {
    height: 280px;
  }
  
  .gallery-item img {
    height: 380px;
  }
}

/* ===== TABLET LANDSCAPE ORIENTATION ===== */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .hero-section {
    min-height: 100vh;
    padding: var(--spacing-md) 0;
  }
  
  .hero-content {
    padding: var(--spacing-md);
    padding-top: 250px;
}
  
  .section {
    padding: var(--spacing-lg) 0;
  }
  
  .custom-card img {
    height: 200px;
  }
  
  .team-member img {
    width: 140px;
    height: 140px;
  }
  
  .gallery-item img {
    height: 250px;
  }
}

/* ===== MOBILE NAVIGATION ===== */
@media (max-width: 767px) {
  .navbar-collapse {
    background: var(--neutral-white);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-light);
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
  }
  
  .navbar-nav .nav-link {
    padding: var(--spacing-sm);
    border-bottom: 1px solid var(--light-sage);
  }
  
  .navbar-nav .nav-link:last-child {
    border-bottom: none;
  }
  
  .navbar-toggler {
    border: none;
    padding: var(--spacing-xs);
  }
  
  .navbar-toggler:focus {
    box-shadow: none;
  }
}

/* ===== HERO SECTION RESPONSIVE ===== */
@media (max-width: 767px) {
  .hero-section {
    min-height: 90vh;
    padding: var(--spacing-md) 0;
  }
  
  .hero-content {
    padding: var(--spacing-md);
    text-align: center;
    margin-bottom: var(--spacing-lg);
    padding-top: 250px;
}
  
  .hero-image {
    padding: var(--spacing-sm);
  }
  
  .hero-title {
    font-size: var(--font-size-h1);
  }
  
  .hero-subtitle {
    font-size: var(--font-size-lg);
  }
  
  .hero-desc {
    font-size: var(--font-size-base);
  }
}

/* ===== SERVICES GRID RESPONSIVE ===== */
@media (max-width: 575px) {
  .services-grid .col-md-4 {
    margin-bottom: var(--spacing-md);
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .services-grid .col-md-4 {
    margin-bottom: var(--spacing-lg);
  }
}

/* ===== TEAM SECTION RESPONSIVE ===== */
@media (max-width: 575px) {
  .team-member {
    margin-bottom: var(--spacing-lg);
  }
  
  .team-member img {
    width: 100px;
    height: 100px;
  }
}

/* ===== GALLERY RESPONSIVE ===== */
@media (max-width: 575px) {
  .gallery-item {
    margin-bottom: var(--spacing-sm);
  }
  
  .gallery-item img {
    height: 200px;
  }
}

/* ===== FORMS RESPONSIVE ===== */
@media (max-width: 767px) {
  .form-control {
    margin-bottom: var(--spacing-sm);
  }
  
  .btn-primary-custom,
  .btn-secondary-custom {
    width: 100%;
    margin-bottom: var(--spacing-sm);
  }
}

/* ===== FOOTER RESPONSIVE ===== */
@media (max-width: 767px) {
  .footer {
    text-align: center;
    padding: var(--spacing-lg) 0;
  }
  
  .footer .row > div {
    margin-bottom: var(--spacing-md);
  }
}

/* ===== CARDS RESPONSIVE ===== */
@media (max-width: 767px) {
  .custom-card {
    margin-bottom: var(--spacing-lg);
  }
  
  .custom-card img {
    height: 180px;
  }
}

/* ===== PRICING RESPONSIVE ===== */
@media (max-width: 767px) {
  .price {
    font-size: var(--font-size-lg);
  }
}

/* ===== ACCESSIBILITY - REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .custom-card,
  .gallery-item img,
  .btn-primary-custom,
  .btn-secondary-custom {
    transition: none !important;
  }
  
  .custom-card:hover {
    transform: none !important;
  }
  
  .gallery-item:hover img {
    transform: none !important;
  }
  
  .btn-primary-custom:hover,
  .btn-secondary-custom:hover {
    transform: none !important;
  }
  
  /* Disable all Sal.js animations */
  [data-sal] {
    transition: none !important;
  }
}

/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: high) {
  .custom-card {
    border: 2px solid var(--neutral-black);
  }
  
  .btn-primary-custom {
    border: 2px solid var(--neutral-black);
  }
  
  .btn-secondary-custom {
    border: 2px solid var(--primary-soft-sage);
  }
  
  .form-control {
    border: 2px solid var(--neutral-dark-gray);
  }
  
  .form-control:focus {
    border: 2px solid var(--primary-soft-sage);
  }
}

/* ===== PRINT STYLES ===== */
@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.5;
  }
  
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }
  
  .hero-section,
  .navbar,
  .footer {
    display: none !important;
  }
  
  .custom-card {
    border: 1pt solid black;
    margin-bottom: 1rem;
    padding: 1rem;
    page-break-inside: avoid;
  }
  
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  .btn-primary-custom,
  .btn-secondary-custom {
    display: none !important;
  }
  
  .section {
    padding: 1rem 0;
  }
}

/* ===== DARK MODE SUPPORT ===== */

/* ===== FOCUS STYLES FOR KEYBOARD NAVIGATION ===== */
.btn-primary-custom:focus,
.btn-secondary-custom:focus,
.form-control:focus,
.navbar-nav .nav-link:focus {
  outline: 2px solid var(--primary-soft-sage);
  outline-offset: 2px;
}

/* ===== SKIP TO CONTENT LINK ===== */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--primary-soft-sage);
  color: var(--neutral-white);
  padding: 8px;
  text-decoration: none;
  border-radius: var(--border-radius-sm);
  z-index: 9999;
}

.skip-link:focus {
  top: 6px;
}

/* ===== UTILITY CLASSES FOR RESPONSIVE DESIGN ===== */
.text-center-mobile {
  text-align: center;
}

@media (min-width: 768px) {
  .text-center-mobile {
    text-align: left;
  }
}

.mb-mobile {
  margin-bottom: var(--spacing-md);
}

@media (min-width: 768px) {
  .mb-mobile {
    margin-bottom: 0;
  }
}

.full-width-mobile {
  width: 100%;
}

@media (min-width: 768px) {
  .full-width-mobile {
    width: auto;
  }
}

/* ===== CONTAINER RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 575px) {
  .container-fluid {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }
}

/* ===== SPACE PAGE RESPONSIVE ===== */
@media (max-width: 767px) {
  #space {
    min-height: 50vh;
    margin: var(--spacing-md) 0;
  }
}

@media (min-width: 768px) {
  #space {
    min-height: 60vh;
  }
}

@media (min-width: 992px) {
  #space {
    min-height: 70vh;
  }
}