/* =====================================================
   CONSTRUCCION UNITS - FIXES
   ===================================================== */
/* Responsive hero headers for product unit pages */
@media (max-width: 991px) {
  /* Fix text overlay absolute positioning */
  .row1, .row123, .row2000, .row200, .row2, .row3, .row40, .row4 {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 30px 20px !important;
    background: #e67e22 !important; /* Construction Orange */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 10;
  }

  /* Make typography responsive */
  .letra1, .letra10 { font-size: 1.1rem !important; word-wrap: break-word; color: #fff !important; display: block; }
  .letra2, .letra20 { font-size: 2rem !important; word-wrap: break-word; line-height: 1.2 !important; display: block; margin: 10px 0; color: #fff !important; font-weight: bold; }
  .letra3, .letra30 { font-size: 1.1rem !important; word-wrap: break-word; color: #fff !important; display: block; }

  /* Reduce massive backgrounds */
  div[class^="n5"], div[class^="M"], div[class^="P"], div[class^="F"], div[class^="S"], 
  .rodillol, .oruga1, .m1650, .exca1, .exca2, .moto1, .moto2, .sr1, .sv250, .sv300,
  .steiger, .maiz, .caña, .A8000, .disco, .rd, .rd1, .nava, .H142RU, .H162RU, .forraje, .FH10, .rollo, .RB4651, .RB5651, .STD, .lb {
      height: 35vh !important;
      background-position: center center !important;
  }
}

/* Modern Card style for PDFs (created via JS) */
.modern-pdf-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 20px;
}
.modern-pdf-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.modern-pdf-card img {
    border-bottom: 3px solid #e67e22;
}
.btn-ver-mas-pdf {
    display: inline-block;
    border: 2px solid #e67e22;
    background: transparent;
    color: #e67e22;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 15px;
}
.modern-pdf-card:hover .btn-ver-mas-pdf,
.btn-ver-mas-pdf:hover {
    background: #e67e22 !important;
    color: #fff !important;
    text-decoration: none;
}

/* =====================================================
   GLOBAL FIXES FOR CONSTRUCTION UNIT CONTENT
   ===================================================== */

/* 1. Fix missing container and negative margins breaking mobile view */
.page-section.portfolio {
    overflow-x: hidden;
}
.page-section.portfolio > .row,
.page-section.portfolio > div > .row {
    max-width: 1200px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px;
    padding-right: 15px;
}

/* 2. Fix hardcoded 260px margin on main image causing layout explosion */
.img-fec {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
    width: 100% !important;
    max-width: 800px !important;
}

/* 3. Improve readability for specification boxes on mobile */
@media (max-width: 1199px) {
    .project .project-text {
        padding: 2rem 1.5rem !important;
    }
    .project .project-text p {
        font-size: 1.1rem !important;
        line-height: 1.6 !important;
        color: rgba(255,255,255,0.8) !important;
    }

    /* FIX TERRIBLE STYLES.CSS MEDIA QUERIES */
    /* styles.css uses position absolute and 6px fonts on mobile for these utility classes! */
    .text-black-50, .text-white-50, .text-white-500, .text-whit {
        position: static !important;
        margin-left: 0 !important;
        top: auto !important;
        font-size: 1rem !important;
        display: block !important;
        text-align: left !important;
    }

    /* styles.css puts 100px margin on .no-gutter which squishes everything on mobile! */
    .no-gutter {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}