/* css/detail-specs.css */

/* ============================================================
   CONTAINER TEKNIS & BLUEPRINT HOISTWAY
   ============================================================ */
.tech-specs-section {
   padding: 40px 0;
   border-top: 1px solid #e5e5e5;
   overflow-x: hidden;
   width: 100%;
}

.spec-model-card {
   background: #ffffff;
   border-radius: 12px;
   padding: 24px;
   margin-bottom: 35px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
   border: 1px solid #eaeaea;
   width: 100%;
   box-sizing: border-box;
}

.spec-model-title {
   font-family: 'Montserrat', sans-serif;
   font-size: 1.25rem;
   font-weight: 800;
   color: #111111;
   margin-bottom: 20px;
   letter-spacing: 0.5px;
}

/* Grid Pembagi Blueprint (Kiri) dan Tabel (Kanan) */
.spec-layout-grid {
   display: grid;
   grid-template-columns: 34% 66%;
   gap: 24px;
   align-items: flex-start;
   width: 100%;
   min-width: 0; /* KUNCI: Mencegah elemen anak mendorong batas grid */
}

/* Wadah Blueprint / Gambar Teknis */
.spec-blueprint-col {
   width: 100%;
   min-width: 0;
   overflow: hidden;
   border-radius: 8px;
   border: 1px solid #e2e5e9;
   background: #ffffff;
   padding: 12px;
   box-sizing: border-box;
   text-align: center;
}

/* Kunci Gambar Blueprint: Tetap proporsional, tidak meluap di HP */
.spec-blueprint-col img,
.blueprint-img {
   display: block !important;
   width: 100% !important;
   max-width: 100% !important;
   height: auto !important;
   object-fit: contain;
   margin: 0 auto;
}

.blueprint-caption {
   display: block;
   text-align: center;
   font-size: 0.76rem;
   font-weight: 700;
   color: var(--color-maroon, #9c0004);
   margin-top: 10px;
   letter-spacing: 0.3px;
}

/* Wadah Tabel Teknis */
.spec-tables-col {
   width: 100%;
   min-width: 0; /* KUNCI: Menjaga wrapper tabel horizontal scroll tetap di dalam kolom */
}

.table-sub-header {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 8px;
}

.square-bullet {
   width: 12px;
   height: 12px;
   background-color: var(--color-maroon, #9c0004);
   display: inline-block;
   flex-shrink: 0;
}

.table-sub-header h4 {
   margin: 0;
   font-size: 1.05rem;
   font-weight: 800;
   color: #222222;
}

.unit-label {
   margin-left: auto;
   font-size: 0.8rem;
   color: #666666;
   font-weight: 600;
}

/* ============================================================
   WADAH SCROLL & TABEL ENGINEERING (DIMENSI & REAKSI)
   ============================================================ */
.table-responsive-box {
   width: 100%;
   max-width: 100%;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   border: 1px solid #c9cbcf;
   border-radius: 4px;
   background: #ffffff;
   margin-bottom: 14px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

.eng-table {
   width: 100% !important;
   border-collapse: collapse !important;
   border-spacing: 0 !important;
   font-size: 0.74rem !important;
   text-align: center !important;
   white-space: nowrap !important;
   margin: 0 !important;
}

.eng-table th,
.eng-table td {
   border: 1px solid #d5d7da !important;
   padding: 7px 8px !important;
   vertical-align: middle !important;
   text-align: center !important;
}

/* Header Maroon Brand */
.eng-table thead tr:first-child th,
.eng-table tr.main-maroon-th th {
   background-color: var(--color-maroon, #9c0004) !important;
   color: #ffffff !important;
   font-weight: 700 !important;
   letter-spacing: 0.3px;
}

/* Sub-Header Abu-Abu Gelap */
.eng-table tr.sub-th th,
.eng-table tr.sub-grey-th th {
   background-color: #555861 !important;
   color: #ffffff !important;
   font-weight: 600 !important;
}

/* Sub-Header Detail Tingkat 3 */
.eng-table tr.sub-detail-th th {
   background-color: #6e727c !important;
   color: #ffffff !important;
   font-weight: 500 !important;
}

/* Kolom Khusus Panjang (L) */
.eng-table .th-dark {
   background-color: #3b3d42 !important;
   color: #ffffff !important;
}

/* Baris Data Genap */
.eng-table tbody tr:nth-child(even) {
   background-color: #f8f9fa !important;
}

.eng-table tbody tr:hover {
   background-color: #fff1f1 !important;
}

/* Highlight Nilai Penting */
.eng-table .font-bold {
   font-weight: 700 !important;
   color: #111111 !important;
}

.eng-table .kw-cell {
   background-color: #fff5f5 !important;
   color: #9c0004 !important;
   font-weight: 700 !important;
}

/* ============================================================
   SUB-TIPE LIFT (ROOMLESS, OBSERVATION, HOSPITAL, FREIGHT)
   ============================================================ */
.subtypes-section {
   padding: 30px 0 10px 0;
   width: 100%;
}

.subtypes-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px;
   width: 100%;
   min-width: 0;
}

.subtype-card {
   background: #ffffff;
   border-radius: 10px;
   padding: 22px;
   border-left: 4px solid var(--color-maroon, #9c0004);
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
   border-top: 1px solid #f0f0f0;
   border-right: 1px solid #f0f0f0;
   border-bottom: 1px solid #f0f0f0;
   box-sizing: border-box;
   transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;
}

.subtype-card:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
}

.subtype-info h4 {
   font-family: 'Montserrat', sans-serif;
   font-size: 1.08rem;
   font-weight: 800;
   color: #222222;
   margin: 0 0 8px 0;
}

.subtype-info p {
   font-size: 0.88rem;
   color: #555555;
   line-height: 1.65;
   margin: 0;
   text-align: justify;
}

/* ============================================================
   RESPONSIVE MEDIA QUERIES (TABLET & HP)
   ============================================================ */
@media (max-width: 992px) {
   .spec-layout-grid {
      grid-template-columns: 1fr;
      gap: 20px;
   }

   .subtypes-grid {
      grid-template-columns: 1fr;
   }

   .spec-model-card {
      padding: 16px;
   }

   .spec-model-title {
      font-size: 1.15rem;
   }
}

@media (max-width: 576px) {
   .subtype-card {
      padding: 16px;
   }

   .subtype-info h4 {
      font-size: 1rem;
   }

   .subtype-info p {
      font-size: 0.84rem;
   }
}