/* Factory page — generated by the conservative CSS/JS modular refactor. */

.page-hero--factory {background-image:
    linear-gradient(135deg, rgba(26, 74, 31, 0.88) 0%, rgba(45, 122, 53, 0.72) 100%),
    url("/assets/images/factory.jpg");
  background-image:
    linear-gradient(135deg, rgba(26, 74, 31, 0.88) 0%, rgba(45, 122, 53, 0.72) 100%),
    image-set(url("/assets/images/performance-optimized/factory.jpg.webp") type("image/webp") 1x, url("/assets/images/factory.jpg") type("image/jpeg") 1x);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;}

.factory-stats-bar {background: var(--white); border-bottom: 1px solid var(--border); padding: 0; box-shadow: 0 2px 12px rgba(0,0,0,0.06);}

.factory-stats-row {display: flex; align-items: stretch; justify-content: space-around; flex-wrap: wrap;}

.fstat {display: flex; align-items: center; gap: 14px; padding: 22px 24px;}

.fstat i {font-size: 1.8rem; color: var(--green-main);}

.fstat strong {display: block; font-family: var(--font-head); font-size: 1.3rem; font-weight: 800; color: var(--text-dark);}

.fstat span {font-size: 0.8rem; color: var(--text-light);}

.fstat-divider {width: 1px; background: var(--border); align-self: stretch; margin: 12px 0;}

@media (max-width: 900px) {
.factory-stats-row {justify-content: flex-start;}

.fstat-divider {display: none;}
}

.factory-base-header {text-align: center; margin-bottom: 40px;}

.base-badge {display: inline-block; background: var(--green-main); color: var(--white); font-size: 0.78rem; font-weight: 700; padding: 4px 14px; border-radius: 20px; margin-bottom: 10px; letter-spacing: 1px;}

.base-badge-2 {background: var(--accent);}

.factory-base-header h2 {font-family: var(--font-head); font-size: 1.8rem; font-weight: 800; margin-bottom: 6px;}

.factory-base-header p {color: var(--text-light);}

.factory-intro-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start;}

.factory-intro-grid-reverse {direction: rtl;}

.factory-intro-grid-reverse > * {direction: ltr;}

.factory-intro-text p {color: var(--text-mid); line-height: 1.8;}

.factory-specs {margin-top: 24px; display: flex; flex-direction: column; gap: 12px;}

.fspec-item {display: flex; align-items: flex-start; gap: 12px;}

.fspec-item i {color: var(--green-main); margin-top: 3px; width: 16px; flex-shrink: 0;}

.fspec-item strong {display: block; font-size: 0.82rem; font-weight: 700; color: var(--text-dark);}

.fspec-item span {font-size: 0.82rem; color: var(--text-mid);}

@media (max-width: 860px) {
.factory-intro-grid {grid-template-columns: 1fr;}

.factory-intro-grid-reverse {direction: ltr;}
}

.factory-gallery {}

.gallery-main-wrap {position: relative; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 10px;}

.gallery-main-wrap img {width: 100%; height: 300px; object-fit: cover; transition: opacity 0.3s ease;}

.gallery-zoom-btn {position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; background: rgba(0,0,0,0.5); color: var(--white); border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.9rem; transition: var(--transition);}

.gallery-zoom-btn:hover {background: var(--green-main);}

.gallery-thumbs {display: flex; gap: 8px;}

.gthumb {flex: 1; border-radius: 6px; overflow: hidden; border: 2px solid transparent; cursor: pointer; transition: var(--transition); padding: 0;}

.gthumb img {width: 100%; height: 64px; object-fit: cover; display: block;}

.gthumb.active,
.gthumb:hover {border-color: var(--green-main);}

.process-flow {display: flex; align-items: flex-start; gap: 0; flex-wrap: wrap; justify-content: center;}

.process-step {background: var(--white); border-radius: var(--radius); padding: 20px 14px; text-align: center; box-shadow: var(--shadow); width: 120px; flex-shrink: 0; transition: var(--transition);}

.process-step:hover {transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--green-main);}

.process-num {font-family: var(--font-head); font-size: 0.7rem; font-weight: 800; color: var(--green-main); letter-spacing: 1px; margin-bottom: 6px;}

.process-icon {font-size: 1.6rem; color: var(--green-main); margin-bottom: 8px;}

.process-step h4 {font-size: 0.82rem; font-weight: 700; margin-bottom: 6px;}

.process-step p {font-size: 0.72rem; color: var(--text-light); line-height: 1.5;}

.process-arrow {color: var(--green-light); font-size: 1rem; padding: 0 4px; align-self: center; margin-top: -20px;}

@media (max-width: 900px) {
.process-flow {gap: 12px;}

.process-arrow {display: none;}

.process-step {width: calc(25% - 12px);}
}

@media (max-width: 600px) {
.process-step {width: calc(50% - 12px);}
}

.lab-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;}

.lab-card {background: var(--white); border-radius: var(--radius); padding: 24px 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border: 1px solid var(--border); transition: var(--transition);}

.lab-card:hover {border-color: var(--green-main); transform: translateY(-4px);}

.lab-icon {font-size: 1.8rem; color: var(--green-main); margin-bottom: 10px;}

.lab-card h4 {font-size: 0.95rem; font-weight: 700; margin-bottom: 8px;}

.lab-card p {font-size: 0.85rem; color: var(--text-mid); line-height: 1.65;}

@media (max-width: 700px) {
.lab-grid {grid-template-columns: 1fr 1fr;}
}

.lightbox {position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;}

.lightbox[hidden] {display: none;}

.lightbox-overlay {position: absolute; inset: 0; background: rgba(0,0,0,0.88);}

.lightbox-content {position: relative; z-index: 1; max-width: 90vw; max-height: 90vh;}

.lightbox-content img {max-width: 100%; max-height: 80vh; border-radius: var(--radius); display: block;}

.lightbox-close {position: absolute; top: -40px; right: 0; color: var(--white); font-size: 1.4rem; background: none; border: none; cursor: pointer;}

.lightbox-caption {color: rgba(255,255,255,0.8); text-align: center; margin-top: 12px; font-size: 0.88rem;}