/* Mobile View Fixes for Srbijaautoput Website */

/* ===== HIDE DECORATIVE LINES ON MOBILE ===== */
@media screen and (max-width: 991px) {
  /* Hide corner screen borders */
  .screen-lines,
  .screen-top-line,
  .screen-botton-line,
  .left-top-corner,
  .right-top-corner,
  .left-botton-corner,
  .right-botton-corner {
    display: none !important;
  }

  /* Hide hero decorative lines */
  .hero-lines-grid,
  .hero-line-block {
    display: none !important;
  }

  /* Hide footer decorative lines */
  .footer-lines-grid,
  .footer-line-block {
    display: none !important;
  }

  /* Fix icon sizing and ensure proper display */
  .icon-32-tablet-28,
  img[class*="icon"] {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    filter: none !important;
    opacity: 1 !important;
  }

  /* Ensure SVG icons display with correct colors - no filters */
  svg, img[src$=".svg"] {
    filter: none !important;
    -webkit-filter: none !important;
    mix-blend-mode: normal !important;
  }

  /* Ensure logo displays properly */
  .logo-symbol, .logo img {
    width: 80px !important;
    height: 80px !important;
    filter: none !important;
  }

  /* Ensure menu logo is visible */
  .menu-logo {
    width: 60px !important;
    height: 60px !important;
  }
}

/* ===== GLOBAL MOBILE FIXES ===== */
@media screen and (max-width: 767px) {

  /* Prevent horizontal scrolling */
  body {
    overflow-x: hidden;
    width: 100%;
  }

  html {
    overflow-x: hidden;
  }

  /* Make all images responsive and full width on mobile */
  img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  /* Ensure all image containers are full width */
  div[class*="image"],
  div[class*="Image"],
  picture {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Fix container widths */
  .w-layout-blockcontainer {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

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

  .default-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ===== HERO SECTION MOBILE FIXES ===== */
  .hero-section {
    min-height: auto !important;
    height: auto !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  .hero {
    gap: 24px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .hero-content {
    padding: 20px 16px !important;
  }

  .hero-image {
    width: 100% !important;
    height: auto !important;
    min-height: 300px !important;
    object-fit: cover !important;
    max-width: 100% !important;
    display: block !important;
  }

  .hero-project-image {
    width: 100% !important;
    height: auto !important;
    min-height: 300px !important;
    object-fit: cover !important;
  }

  .hero-content-background {
    width: 100% !important;
    height: auto !important;
    min-height: 300px !important;
  }

  /* ===== PROJECT IMAGES MOBILE FIXES ===== */
  .project-image-block {
    width: 100% !important;
    height: auto !important;
    min-height: 250px !important;
    order: 2 !important; /* Move image below on mobile */
    max-width: 100% !important;
    overflow: hidden !important;
    display: block !important;
    position: relative !important;
  }

  .project-image,
  .project-image-block img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    min-height: 250px !important;
    max-width: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
  }

  /* More specific targeting for project images */
  .projectstiem .project-image-block img,
  .projectstiem2 .project-image-block img {
    width: 100% !important;
    height: auto !important;
    min-height: 250px !important;
    object-fit: cover !important;
    display: block !important;
  }

  .projectstiem,
  .projectstiem2 {
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .projectslist {
    gap: 32px !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Force project info card to appear first */
  .project-info-card {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ===== ABOUT SECTION IMAGES ===== */
  .about-image-block {
    width: 100% !important;
    height: auto !important;
    min-height: 250px !important;
    max-width: 100% !important;
  }

  .about-image-block img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  .about-video-block {
    width: 100% !important;
    height: 250px !important;
    max-width: 100% !important;
  }

  .about-video-block video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .about-column-block {
    flex-direction: column !important;
  }

  .about-blocks-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* ===== MENU/NAV FIXES ===== */
  .menu-image-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }

  .menu-image {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    max-width: 100% !important;
  }

  .nav {
    padding: 12px 16px;
  }

  .menu-button {
    padding: 8px 12px;
  }

  /* ===== SERVICE CARDS ===== */
  .service-card {
    height: auto !important;
    min-height: 400px !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .service-card-background {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    z-index: 1 !important;
    overflow: hidden !important;
  }

  .service-card-image,
  .service-card img {
    width: 100% !important;
    height: 100% !important;
    min-height: 400px !important;
    object-fit: cover !important;
    max-width: 100% !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Target service card images more specifically */
  .service-card .service-card-background img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
  }

  .service-card-linear {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7)) !important;
  }

  .service-card-content {
    padding: 24px 16px !important;
    position: relative !important;
    z-index: 3 !important;
    background: rgba(7, 24, 57, 0.85) !important;
    margin-top: auto !important;
  }

  .services-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ===== BIG BUTTONS ===== */
  .big-button,
  .icon-big-button {
    padding: 24px 16px;
    min-height: auto;
  }

  .three-big-buttons-grid {
    gap: 16px;
  }

  .big-buttons-wrapper {
    gap: 16px;
  }

  /* ===== NAVIGATION CARDS ===== */
  .navigation-card {
    height: auto !important;
    min-height: 400px !important;
    width: 100% !important;
  }

  .navigation-card-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    max-width: 100% !important;
  }

  .navigation-card-background {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .navigation-cards-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* ===== FULL WIDTH IMAGES ===== */
  .full-project-image-wrapper {
    width: 100% !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  .full-project-image {
    width: 100% !important;
    height: auto !important;
    min-height: 250px !important;
    object-fit: cover !important;
    max-width: 100% !important;
    display: block !important;
  }

  /* ===== CONTACT FORM ===== */
  .contact-grid {
    flex-direction: column !important;
    gap: 0 !important;
  }

  .contact-block-image {
    width: 100% !important;
    height: 250px !important;
    max-width: 100% !important;
    position: relative !important;
  }

  .contact-block-image img,
  .contact-block-image .absolute-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: relative !important;
    max-width: 100% !important;
  }

  .contact-form {
    padding: 24px 16px !important;
    width: 100% !important;
  }

  /* ===== TYPOGRAPHY ADJUSTMENTS ===== */
  h1 {
    font-size: 36px;
    letter-spacing: -1.5px;
  }

  h2 {
    font-size: 28px;
    letter-spacing: -1px;
  }

  h3 {
    font-size: 24px;
    letter-spacing: -0.8px;
  }

  .h1 {
    font-size: 36px !important;
    letter-spacing: -1.5px !important;
  }

  .h2 {
    font-size: 28px !important;
    letter-spacing: -1px !important;
  }

  .h3 {
    font-size: 24px !important;
    letter-spacing: -0.8px !important;
  }

  /* ===== SPACING ADJUSTMENTS ===== */
  .section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .section-top-padding {
    padding-top: 40px;
  }

  .section-bottom-padding {
    padding-bottom: 40px;
  }

  .margin-bottom-80-mobile-64 {
    margin-bottom: 40px !important;
  }

  .margin-bottom-64-mobile-48 {
    margin-bottom: 32px !important;
  }

  /* ===== PROJECT INFO CARDS ===== */
  .project-info-card {
    padding: 24px 16px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .project-info-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
  }

  .project-main-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .project-info-blocks {
    gap: 16px;
    display: flex;
    flex-direction: column;
  }

  .project-info-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .project-buttons {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: 16px;
  }

  .project-buttons .primary-button,
  .project-buttons .secondary-button {
    width: 100%;
    justify-content: center;
  }

  /* ===== LOGOS GRID ===== */
  .logos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .logo-block {
    padding: 16px;
  }

  /* ===== THREE BLOCKS GRID ===== */
  .three-blocks-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* ===== TEXT BLOCKS ===== */
  .text-blocks-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* ===== HIGHLIGHT ITEMS ===== */
  .highlight-items {
    flex-direction: column;
    gap: 32px;
  }

  .highlight-item {
    width: 100%;
  }

  /* ===== FOOTER ===== */
  .footer {
    padding: 40px 16px;
  }

  .footer-content {
    flex-direction: column;
    gap: 32px;
  }

  .footer-menu {
    flex-direction: column;
    gap: 24px;
  }

  /* ===== BUTTONS ===== */
  .primary-button,
  .secondary-button {
    padding: 12px 20px;
    font-size: 12px;
  }

  /* ===== FORM INPUTS ===== */
  .form-inputs-row {
    flex-direction: column;
  }

  .form-input {
    width: 100%;
  }

  .input {
    padding: 12px 16px;
    font-size: 14px;
  }

  /* ===== FIX OVERFLOW ISSUES ===== */
  .hero-content-wrapper,
  .hero-project,
  .about-blocks-grid,
  .services-grid,
  .navigation-cards-grid {
    overflow: hidden;
  }

  /* ===== VIDEO BACKGROUND FIX ===== */
  .w-background-video {
    width: 100%;
    height: 100%;
  }

  .w-background-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ===== ABOUT BANNER ===== */
  .about-banner {
    flex-direction: column !important;
    height: auto !important;
    width: 100% !important;
  }

  .about-banner-image {
    width: 100% !important;
    height: auto !important;
    min-height: 250px !important;
    object-fit: cover !important;
    max-width: 100% !important;
  }

  .about-banner-background {
    width: 100% !important;
    height: auto !important;
    min-height: 250px !important;
  }

  .about-banner-content {
    padding: 24px 16px !important;
    width: 100% !important;
  }

  .about-overview-block {
    width: 100% !important;
  }

  /* ===== PROJECT IMAGES WRAPPER ===== */
  .project-images-wrapper {
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
  }

  .second-project-image,
  .third-project-image {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  .second-project-image img,
  .third-project-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    min-height: 250px !important;
  }

  /* ===== ENSURE NO HORIZONTAL SCROLL ===== */
  * {
    max-width: 100%;
  }

  /* Force all background images to work properly */
  [style*="background-image"] {
    background-size: cover !important;
    background-position: center !important;
  }

  /* Fix any inline styles that might break mobile */
  img[style] {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  /* Ensure all flex containers stack on mobile */
  .projectslistwrapper,
  .projectslist {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* AGGRESSIVE FIX: Override all possible srcset and sizes attributes */
  .service-card-image[srcset],
  .service-card img[srcset],
  .project-image[srcset],
  .project-image-block img[srcset] {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }

  /* Force all images within these containers to display */
  .service-card *,
  .project-image-block *,
  .service-card-background * {
    max-width: 100% !important;
  }

  /* Ensure containers don't collapse */
  .services-grid > *,
  .projectslist > * {
    min-height: 250px !important;
  }

  /* Remove any transform or filter that might hide images */
  .service-card img,
  .project-image-block img {
    transform: none !important;
    filter: none;
  }

  /* CRITICAL FIX: Ensure service card images render in absolute containers */
  .services-grid .service-card {
    position: relative !important;
  }

  .services-grid .service-card .service-card-background {
    position: absolute !important;
    inset: 0 !important;
  }

  .services-grid .service-card img.service-card-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* CRITICAL FIX: Ensure project images are visible and not cut off */
  .projectslistwrapper .project-image-block {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .projectslistwrapper .project-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  /* ===== ICON INFO BLOCKS ===== */
  .icon-info-blocks-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* ===== IMPROVED TEXT VISIBILITY ===== */
  /* Ensure all text is readable with proper contrast */
  .service-card-content h3,
  .service-card-content p,
  .service-card-content .h3,
  .service-card-content .regular-m {
    color: #f2f2f2 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
  }

  /* Ensure service card content is always on top and visible */
  .service-card-content {
    min-height: 180px !important;
  }

  .services-card-text {
    width: 100% !important;
  }

  .services-card-text h3,
  .services-card-text .h3 {
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
  }

  .services-card-text p,
  .services-card-text .regular-m {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  /* ===== FIX ICON DISPLAY ON SERVICE CARDS ===== */
  .service-card-content img[src*="svg"],
  .service-card-content .icon-32-tablet-28 {
    display: block !important;
    margin-bottom: 16px !important;
    filter: brightness(1) !important;
  }

  /* ===== ENSURE ALL CONTAINERS ARE VISIBLE ===== */
  .container-content,
  .default-container .container-content,
  .wide-container .container-content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ===== FIX TEXT READABILITY ===== */
  body {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  p, .regular-s, .regular-m, .regular-l {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* ===== IMPROVE BUTTON VISIBILITY ===== */
  .primary-button,
  .secondary-button,
  .big-button {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 16px !important;
  }

  .button-text-wrapper {
    text-align: center !important;
  }

  /* ===== FAQ GRID ===== */
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* ===== CENTER HEADING BLOCKS ===== */
  .center-heading-block-wrapper {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .left-heading-block-wrapper {
    flex-direction: column;
    gap: 20px;
  }

  /* ===== CHIPS ===== */
  .chips {
    padding: 6px 12px;
    font-size: 11px;
  }
}

/* ===== SMALLER MOBILE (320px - 480px) ===== */
@media screen and (max-width: 480px) {

  h1, .h1 {
    font-size: 28px !important;
    letter-spacing: -1.2px !important;
  }

  h2, .h2 {
    font-size: 24px !important;
    letter-spacing: -0.8px !important;
  }

  h3, .h3 {
    font-size: 20px !important;
    letter-spacing: -0.6px !important;
  }

  .hero-image {
    height: 250px;
  }

  .project-image,
  .about-image-block {
    min-height: 200px;
  }

  .section {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .w-layout-blockcontainer {
    padding-left: 12px;
    padding-right: 12px;
  }
}