/* ===== SHARED STYLES FOR INDIVIDUAL GENERATOR RANGE PAGES ===== */

/* Breadcrumb */
.pg-breadcrumb { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; color: rgba(255,255,255,0.45); flex-wrap: wrap; margin-bottom: 0; }
.pg-breadcrumb a { color: rgba(255,255,255,0.65); transition: color 0.25s ease; }
.pg-breadcrumb a:hover { color: #06b6d4; }
.pg-breadcrumb i { font-size: 0.58rem; color: rgba(255,255,255,0.3); }

/* Page Hero */
.pg-hero { background: #0a2558; background-image: radial-gradient(ellipse at 15% 50%, rgba(6,182,212,0.14) 0%, transparent 60%), linear-gradient(135deg, #0a2558 0%, #061840 100%); padding: 48px 0 52px; border-bottom: 3px solid #06b6d4; }
.pg-hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.pg-hero-photo-wrap { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 28px; display: flex; align-items: center; justify-content: center; min-height: 280px; }
.pg-hero-photo { width: 100%; max-height: 340px; object-fit: contain; }
.pg-hero-info {}
.pg-range-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 10px; }
.pg-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(6,182,212,0.14); border: 1px solid rgba(6,182,212,0.35); color: #06b6d4; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 13px; border-radius: 100px; margin-bottom: 14px; }
.pg-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1.9rem, 3.5vw, 2.6rem); font-weight: 800; color: #ffffff; line-height: 1.08; margin-bottom: 14px; }
.pg-desc { font-size: 0.95rem; color: rgba(255,255,255,0.68); line-height: 1.7; margin-bottom: 22px; max-width: 480px; }
.pg-highlights { display: flex; flex-direction: column; gap: 9px; margin-bottom: 26px; }
.pg-highlight { display: flex; align-items: center; gap: 9px; font-size: 0.87rem; color: rgba(255,255,255,0.8); }
.pg-highlight i { color: #06b6d4; font-size: 0.7rem; flex-shrink: 0; }
.pg-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* Spec Table Section */
.spec-section { padding: 72px 0; }
.spec-section:nth-child(odd) { background: #f8fafc; }
.spec-section:nth-child(even) { background: #ffffff; }
.spec-section-header { margin-bottom: 28px; }
.spec-section-title { font-family: 'Barlow Condensed', sans-serif; font-size: 1.6rem; font-weight: 800; color: #0a2558; margin-bottom: 6px; }
.spec-section-sub { font-size: 0.88rem; color: #64748b; }

/* The key: table-layout fixed + word-break ensures no horizontal scroll on any screen */
.spec-tbl-wrap { border-radius: 10px; border: 1px solid #e2e8f0; overflow: hidden; }
.spec-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }

/* First column (parameter name) */
.spec-tbl thead th:first-child { background: #071d47; text-align: left; width: 19%; }
.spec-tbl tbody td:first-child { text-align: left; font-weight: 600; color: #0a2558; background: rgba(10,37,88,0.03); border-right: 2px solid #e2e8f0; white-space: nowrap; }

/* Header row */
.spec-tbl thead th { background: #0a2558; color: #ffffff; padding: 11px 10px; font-size: 0.76rem; font-weight: 700; text-align: center; border-right: 1px solid rgba(255,255,255,0.1); word-break: break-word; line-height: 1.35; }
.spec-tbl thead th:last-child { border-right: none; }

/* Data cells */
.spec-tbl tbody td { padding: 9px 10px; font-size: 0.76rem; color: #1e293b; border-bottom: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0; text-align: center; word-break: break-word; line-height: 1.4; }
.spec-tbl tbody td:last-child { border-right: none; }
.spec-tbl tbody tr:last-child td { border-bottom: none; }
.spec-tbl tbody tr:nth-child(even) td { background: #f8fafc; }
.spec-tbl tbody tr:nth-child(even) td:first-child { background: rgba(10,37,88,0.05); }
.spec-tbl tbody tr:hover td { background: rgba(6,182,212,0.05); }
.spec-tbl tbody tr:hover td:first-child { background: rgba(6,182,212,0.09); }

.spec-note { font-size: 0.77rem; color: #64748b; margin-top: 14px; display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.spec-note i { color: #1a56db; margin-top: 1px; flex-shrink: 0; }

/* Feature cards below spec table */
.pg-features { padding: 64px 0; background: #0a2558; background-image: radial-gradient(ellipse at 80% 30%, rgba(6,182,212,0.1) 0%, transparent 55%); }
.pg-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pg-feature-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 26px 22px; }
.pg-feature-icon { width: 46px; height: 46px; background: rgba(6,182,212,0.15); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #06b6d4; font-size: 1.1rem; margin-bottom: 14px; }
.pg-feature-card h4 { font-size: 0.95rem; font-weight: 700; color: #ffffff; margin-bottom: 8px; }
.pg-feature-card p { font-size: 0.83rem; color: rgba(255,255,255,0.6); line-height: 1.6; }

/* Related ranges */
.pg-related { padding: 60px 0; background: #f0f9ff; }
.pg-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
.pg-related-card { background: #ffffff; border-radius: 10px; padding: 18px; box-shadow: 0 4px 24px rgba(0,0,0,0.09); border-bottom: 3px solid #1a56db; text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease; display: block; }
.pg-related-card:hover { transform: translateY(-3px); box-shadow: 0 8px 40px rgba(0,0,0,0.15); }
.pg-related-kva { font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #0891b2; background: rgba(6,182,212,0.1); padding: 3px 9px; border-radius: 100px; display: inline-block; margin-bottom: 8px; }
.pg-related-name { font-family: 'Barlow Condensed', sans-serif; font-size: 1.05rem; font-weight: 800; color: #0a2558; line-height: 1.2; }

/* CTA Banner */
.pg-cta { background: linear-gradient(135deg, #0a2558 0%, #1e40af 100%); padding: 60px 0; }
.pg-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.pg-cta h2 { font-family: 'Barlow Condensed', sans-serif; font-size: 2rem; font-weight: 800; color: #ffffff; margin-bottom: 6px; }
.pg-cta p { color: rgba(255,255,255,0.7); font-size: 0.93rem; }
.pg-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }

/* Responsive */
@media (max-width: 900px) {
  .pg-hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .pg-hero-photo-wrap { max-width: 420px; margin: 0 auto; }
  .pg-features-grid { grid-template-columns: 1fr 1fr; }
  .pg-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pg-hero { padding: 36px 0 40px; }
  .spec-section { padding: 48px 0; }
  .pg-features-grid { grid-template-columns: 1fr; }
  .pg-related-grid { grid-template-columns: 1fr 1fr; }
  .pg-cta-inner { flex-direction: column; }
  .pg-cta-actions { width: 100%; }
  .pg-cta-actions .btn { flex: 1; justify-content: center; }
  /* Slightly smaller font on very small screens */
  .spec-tbl thead th, .spec-tbl tbody td { font-size: 0.68rem; padding: 7px 7px; }
  .spec-tbl thead th:first-child, .spec-tbl tbody td:first-child { width: 28%; }
}

/* ===== PUMP PAGE VARIANTS ===== */

/* Teal hero border for pump pages */
.pg-hero.pump-hero { border-bottom-color: var(--teal); }
.pg-hero.pump-hero { background-image: radial-gradient(ellipse at 15% 50%, rgba(13,148,136,0.14) 0%, transparent 60%), linear-gradient(135deg, #0a2558 0%, #061840 100%); }

/* Teal badge */
.pg-badge.teal { background: rgba(13,148,136,0.14); border-color: rgba(13,148,136,0.35); color: var(--teal); }

/* Teal related pump cards */
.pg-related-card.pump-card { border-bottom-color: var(--teal); }
.pg-related-kva.teal { color: var(--teal); background: rgba(13,148,136,0.1); }

/* 2-column spec table (used on pump pages instead of multi-model table) */
.spec-tbl-2col thead th:first-child { width: 38%; text-align: left; }
.spec-tbl-2col thead th:last-child { width: 62%; text-align: left; }
.spec-tbl-2col tbody td { text-align: left; }
.spec-tbl-2col tbody td:first-child { white-space: normal; }

/* Applications grid for pump pages */
.pump-apps { padding: 72px 0; background: var(--white); }
.pump-apps .section-tag { color: var(--teal); }
.apps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.app-item { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 14px; border-radius: var(--radius); border: 1.5px solid var(--mid); text-align: center; transition: all var(--transition); }
.app-item:hover { border-color: var(--teal); box-shadow: var(--shadow); transform: translateY(-2px); }
.app-icon { width: 44px; height: 44px; background: rgba(13,148,136,0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--teal); font-size: 1.05rem; flex-shrink: 0; }
.app-label { font-size: 0.82rem; font-weight: 600; color: var(--navy); line-height: 1.3; }

@media (max-width: 900px) { .apps-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .apps-grid { grid-template-columns: repeat(2, 1fr); } }