/* 
 * Mobile-specific fixes for header display
 * Purpose: Adjust header size to fit video dimensions on mobile devices
 */

/* Medium to small screens */
@media (max-width: 991.98px) {
  /* Adjust header to fit video dimensions and start at top of page */
  .container-fluid.header.header-compact {
    height: auto !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    display: block !important;
    overflow: visible !important;
  }
  
  /* Ensure header row and column are visible */
  .header.header-compact .row,
  .header.header-compact .col-12 {
    height: auto !important;
    min-height: auto !important;
    display: block !important;
  }
  
  /* Display the entire video with natural dimensions */
  .hero-fullscreen {
    height: auto !important;
    width: 100% !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    display: block !important;
    overflow: visible !important;
  }
  .hero-fullscreen video {
    object-fit: contain !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    background-color: transparent !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ensure service section appears below the header */
  .container-xxl.py-5 {
    position: relative !important;
    background-color: transparent !important;
    margin-top: 0 !important;
    clear: both !important;
  }
  
  /* Fix potential overlap by ensuring header is truly full viewport */
  .header.header-compact .row,
  .header.header-compact .col-12 {
    height: auto !important;
  }
}

/* Extra small screens */
@media (max-width: 576.98px) {
  /* Ensure video is at the top of the page */
  html, body {
    margin: 0 !important;
    padding: 0 !important;
  }

  .container-fluid.header.header-compact {
    height: auto !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin-bottom: 20px !important;
  }
  
  /* Ensure the header column takes the full width and has no height restrictions */
  .header.header-compact .col-12 {
    height: auto !important;
    padding: 0 !important;
  }
  
  /* Position services section properly after the video with clear separation */
  .container-xxl.py-5:first-of-type {
    margin-top: 0 !important;
    position: relative !important;
    display: block !important;
    clear: both !important;
  }
  
  /* Adjust navbar to properly overlay the video */
  .navbar {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 1050 !important;
  }
}

/* Responsive fixes for Service and Feature sections */
@media (max-width: 991.98px) {
  /* Prevent the service-item arrow button from expanding on touch devices */
  .service-item:hover .btn-service-arrow,
  .service-item .btn-service-arrow {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    transition: none !important;
  }

  /* Disable the hover transform on mobile so cards don't jump */
  .service-item,
  .service-item:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Make service cards use full width and consistent spacing */
  #services-section .service-item {
    padding: 1rem !important;
    margin-bottom: 1rem;
    width: 100% !important;
  }

  #services-section .row {
    gap: 12px;
  }

  /* Ensure header/video doesn't overlap services */
  .hero-fullscreen,
  .hero-fullscreen video {
    max-height: 56vh !important;
  }

  /* Feature section: reduce left padding and stack columns */
  .container.feature .feature-text {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .container.feature .feature-text h1 {
    font-size: 20px !important;
  }

  /* Make columns in the feature section stack vertically on small screens */
  .container.feature .row.g-0.mx-lg-0 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  /* Feature overflow image: keep it inside its column and scale responsively */
  .feature-overflow-img {
    position: relative !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 12px !important; /* match mobile radius used in main stylesheet */
  }

  /* Reduce excessive margins to tighten layout on mobile */
  .container-xxl.py-5.service-section.service-overlap {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

/* Instagram Posts Section - Mobile Responsive Styling */
@media (max-width: 767.98px) {
  /* Instagram posts section mobile adjustments */
  #news-discounts {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Ensure images stack vertically on mobile */
  #news-discounts .row {
    gap: 1rem;
  }

  /* Add spacing between stacked images */
  #news-discounts [class*="col-"] {
    margin-bottom: 1rem;
  }

  #news-discounts [class*="col-"]:last-child {
    margin-bottom: 0;
  }

  /* Ensure images are properly sized on mobile */
  #news-discounts img {
    max-width: 100%;
    height: auto;
    margin: 0 !important;
    display: block;
  }
}

/* Small tablets and above - 2 column layout */
@media (min-width: 576px) and (max-width: 767.98px) {
  #news-discounts img {
    max-width: 100%;
    margin: 0 !important;
  }
}

/* Contactos page mobile tweaks */
@media (max-width: 767.98px) {
    .contactos-hero {
        margin-top: 1.5rem !important;
    }

    .contactos-form-card {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
        border-radius: 0.75rem;
    }

    .contactos-info-card,
    .contactos-social-card,
    .contactos-map-card {
        padding: 1.25rem !important;
    }
}



/* Insurance logos - mobile overrides */
@media (max-width: 767.98px) {
  #insurances-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #insurances-section .logo-col {
    flex: 0 0 50%; /* two logos per row on small screens */
    max-width: 50%;
    box-sizing: border-box;
  }

  #insurances-section .insurance-logo {
    max-width: 160px;
    margin: 0 auto;
    display: block;
  }
}

@media (max-width: 479.98px) {
  #insurances-section .logo-col {
    flex: 0 0 50%; /* Keep two logos per row on very small screens */
    max-width: 50%;
  }

  #insurances-section .insurance-logo {
    max-width: 120px; /* Slightly smaller logos for very small screens */
  }

  /* Especialidades page - add horizontal spacing on mobile */
  .especialidades-page .service-section {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .especialidades-page .especialidades-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100%;
  }

  .especialidades-page .especialidades-grid {
    width: 100%;
  }

  /* Index page - add horizontal spacing for service section on mobile */
  #services-section.service-section {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  #services-section .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100%;
  }
}

/* Footer Mobile Fixes */
@media (max-width: 767.98px) {
  /* Footer container adjustments */
  .footer {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .footer .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Reduce gap between footer columns */
  .footer .row.g-5 {
    row-gap: 2rem !important;
  }

  /* Footer logo sizing for mobile */
  .footer-logo {
    max-width: 200px !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Livro de reclamações image sizing */
  .livro-reclamacoes-img {
    max-width: 120px !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Footer text adjustments */
  .footer p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .footer small {
    font-size: 11px !important;
  }

  /* Footer links adjustments */
  .footer .btn.btn-link {
    font-size: 14px !important;
    padding: 4px 0 !important;
    word-wrap: break-word !important;
  }

  /* Footer contact icons sizing */
  .footer .bg-light.rounded {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    margin-right: 10px !important;
  }

  .footer .bg-light.rounded i {
    font-size: 12px !important;
  }

  /* Prevent d-flex containers from expanding icons */
  .footer .d-flex.align-items-start {
    align-items: center !important;
  }

  .footer .d-flex.align-items-start > div:first-child {
    flex: 0 0 auto !important;
  }

  .footer .d-flex.align-items-start > div:last-child {
    flex: 1 1 auto !important;
  }

  /* Footer headings */
  .footer h5 {
    font-size: 16px !important;
    margin-bottom: 1rem !important;
  }

  /* Copyright section */
  .copyright p {
    font-size: 13px !important;
    padding: 0 10px !important;
  }

  /* Contact info text wrapping */
  .footer .d-flex.align-items-start > div {
    flex: 1;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

/* Extra small mobile devices */
@media (max-width: 575.98px) {
  /* Further reduce footer spacing */
  .footer {
    padding-top: 2rem !important;
    padding-bottom: 1rem !important;
  }

  .footer .container {
    padding-bottom: 2rem !important;
  }

  /* Stack footer columns with minimal spacing */
  .footer .row.g-5 {
    row-gap: 1.5rem !important;
  }

  /* Even smaller logo on very small screens */
  .footer-logo {
    max-width: 180px !important;
  }

  /* Tighter text sizing */
  .footer p {
    font-size: 12px !important;
  }

  .footer .btn.btn-link {
    font-size: 13px !important;
  }

  /* Copyright text */
  .copyright p {
    font-size: 12px !important;
  }

  /* Even smaller contact icons on very small screens */
  .footer .bg-light.rounded {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    margin-right: 8px !important;
  }

  .footer .bg-light.rounded i {
    font-size: 11px !important;
  }
}



@media (max-width: 767.98px) {
  .service-mobile-bg {
    background-color: #F9F6F0;
  }
}

/* =============================================
   LAPTOP SHORT-VIEWPORT FIXES (e.g. 1240×544)
   Targets wide screens with limited vertical space
   ============================================= */

/* Short viewport: narrow the navbar height */
@media (min-width: 992px) and (max-height: 620px) {
  /* Reduce navbar link padding so bar is shorter */
  .navbar .navbar-brand,
  .navbar a.btn {
    height: 56px !important;
  }

  .navbar .navbar-brand img.navbar-logo {
    height: 42px !important;
  }

  .navbar .navbar-nav .nav-link {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  /* Shrink the "Marcar Consulta" CTA button vertical padding */
  .navbar .d-none.d-lg-flex a.btn {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}

/* Short viewport: reduce hero to ~70vh so content below is still visible */
@media (min-width: 992px) and (max-height: 620px) {
  .header.header-compact {
    height: 72vh !important;
  }

  .hero-fullscreen {
    height: 72vh !important;
  }

  .hero-fullscreen video {
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Scale down overlay text */
  .overlay-content h1 {
    font-size: 2.2rem !important;
    margin-bottom: 0.5rem !important;
  }

  .overlay-content p {
    font-size: 1.1rem !important;
  }

  .overlay-content {
    padding: 1.25rem !important;
  }
}

/* Short viewport: tighten section vertical padding */
@media (min-width: 992px) and (max-height: 620px) {
  /* Service cards overlap / section */
  .container-xxl.py-5.service-section.service-overlap,
  #services-section {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  .service-overlap {
    margin-top: -80px !important;
  }

  /* Service card inner padding */
  .service-item {
    padding: 0.85rem !important;
  }

  .service-item .d-flex.align-items-center.mb-4 {
    margin-bottom: 0.6rem !important;
  }

  .service-item p.mb-4 {
    margin-bottom: 0.5rem !important;
    font-size: 0.88rem !important;
  }

  /* Feature section */
  #feature-section {
    margin-top: 60px !important;
    margin-bottom: 0 !important;
  }

  .container.feature .feature-text h1 {
    font-size: 1.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .container.feature .feature-text p {
    font-size: 0.88rem !important;
    margin-bottom: 0.5rem !important;
    padding-bottom: 0 !important;
  }

  .container.feature .p-lg-5 {
    padding: 1.5rem !important;
  }

  .container.feature .p-lg-5.ps-lg-0 {
    padding-left: 0 !important;
  }

  .container.feature .p-lg-5.pe-lg-0 {
    padding-right: 0 !important;
  }

  /* Feature icons row */
  .container.feature .row.g-4 {
    --bs-gutter-y: 0.75rem !important;
  }

  .container.feature .d-flex.align-items-center .rounded-circle {
    width: 48px !important;
    height: 48px !important;
  }

  /* Instagram / news section */
  #news-discounts {
    margin-top: 100px !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  /* Insurance logos section */
  #insurances-section {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }

  #insurances-section h2 {
    font-size: 1.3rem !important;
    margin-bottom: 40px !important;
  }

  .insurance-logo {
    max-height: 45px !important;
    object-fit: contain !important;
  }

  /* Team section */
  #team-section {
    margin-top: 60px !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  #team-section h2 {
    font-size: 1.3rem !important;
    margin-bottom: 1.5rem !important;
  }

  .team-item .overflow-hidden img {
    max-height: 200px !important;
    object-fit: cover !important;
    width: 100% !important;
  }

  .team-text h6 {
    font-size: 0.9rem !important;
    margin-bottom: 0.25rem !important;
  }

  .team-text p.text-primary {
    font-size: 0.8rem !important;
    margin-bottom: 0.25rem !important;
  }

  .team-formations ul li {
    font-size: 0.78rem !important;
  }

  /* Footer */
  .container-fluid.footer.mt-5.pt-5 {
    margin-top: 1.5rem !important;
    padding-top: 2rem !important;
  }

  /* Wavy sections */
  #insurances-section .wow.fadeInUp[style*="margin-top: -20px"] {
    margin-top: 0 !important;
    margin-bottom: 40px !important;
  }
}

/* Feature section: remove left padding on mobile */
@media (max-width: 767.98px) {
  #feature-section {
    padding-left: 0 !important;
  }

  #feature-section .feature-bullets-col,
  #feature-section .feature-img-col {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  #news-discounts {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Team section: add breathing room on both sides for the carousel */
  #team-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #team-section .container.team-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  #team-section .team-carousel {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #team-section h2 {
    padding-left: 20px !important;
  }
}