/* Equipment Type landing page (NDLP-21)
   Shared template styling for /personnel-carriers, /forklift-material-handling,
   /sweeper-scrubber, /aerial-work-platforms. Laid out to match
   NDP_Equipment-Type_01_Clean.psd. Brand red #eb1b23, dark #231f1f. */

/* Constrain to the same content column as the home page (.ndlp-container). */
.ET_page { color: #231f1f; max-width: 1172px; margin: 0 auto; padding: 32px 16px 0; }
.ET_page section { box-sizing: border-box; }
.ET_red { color: #eb1b23; }

/* Shared red button */
.ET_redButton {
    display: inline-block; background: #eb1b23; color: #fff; text-decoration: none;
    font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    padding: 14px 28px; border-radius: 2px; transition: background .15s;
}
.ET_redButton:hover { background: #c4151c; color: #fff; }

/* Shared section heading */
.ET_sectionHeading { font-size: 1.9em; font-weight: 800; margin: 0 0 24px; }
.ET_sectionHeadingLeft { text-align: left; }
.ET_sectionHeadingCenter { text-align: center; }

/* ---- Hero: text left, composite image right, light background ---- */
.ET_hero {
    display: flex; align-items: center; gap: 32px;
    background: #ececec; padding: 48px 40px; flex-wrap: wrap;
}
.ET_heroText { flex: 1 1 380px; }
.ET_heroHeadline { font-size: 2.7em; line-height: 1.1; font-weight: 800; margin: 0 0 16px; }
.ET_heroSubheadline { font-size: 1.25em; font-style: italic; color: #eb1b23; font-weight: 600; }
.ET_heroMedia { flex: 1 1 420px; text-align: center; }
.ET_heroImage { max-width: 100%; height: auto; }

/* ---- Support bar: white text on black, red diagonal accent ---- */
.ET_supportBar {
    position: relative; background: #111; color: #f5f5f5; overflow: hidden;
    padding: 18px 40px; font-size: 1.05em;
}
.ET_supportBar::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 90px;
    background: #eb1b23; transform: skewX(-20deg); transform-origin: top right;
    margin-right: -30px;
}
.ET_supportBarText { position: relative; z-index: 1; max-width: 75%; }

/* ---- Intro: text + CTA left, feature image right ---- */
.ET_intro {
    display: flex; align-items: center; gap: 40px;
    padding: 56px 8px; flex-wrap: wrap;
}
.ET_introText { flex: 1 1 420px; }
.ET_introHeading { font-size: 1.9em; font-weight: 800; margin: 0 0 16px; }
.ET_introCopy { font-size: 1.05em; line-height: 1.65; color: #444; margin: 0 0 24px; }
.ET_introMedia { flex: 1 1 380px; text-align: center; }
.ET_introImage { max-width: 100%; height: auto; }

/* ---- Brand grid: cards left (3-up), sidebar right ---- */
.ET_brandGrid { padding: 16px 8px 56px; }
.ET_brandGridLayout { display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start; }
.ET_brandCards {
    flex: 3 1 560px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.ET_brandCard {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    border: 1px solid #e0e0e0; border-radius: 3px; padding: 24px 16px 16px;
    text-decoration: none; color: #231f1f; background: #fff; transition: box-shadow .15s, border-color .15s;
}
.ET_brandCard:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.12); border-color: #eb1b23; }
.ET_brandCardLogo { height: 80px; display: flex; align-items: center; justify-content: center; }
.ET_brandCardLogo img { max-height: 80px; max-width: 100%; }
.ET_brandCardText { font-weight: 700; font-size: .85em; text-transform: uppercase; letter-spacing: .02em; margin-top: 12px; border-top: 1px solid #eee; padding-top: 12px; width: 100%; }
.ET_brandSidebar { flex: 1 1 240px; min-width: 220px; }
.ET_sidebarHeading { font-size: 1.25em; font-weight: 800; margin: 0 0 14px; }
.ET_sidebarCopy { line-height: 1.7; color: #444; }
.ET_viewAllBrands { display: inline-block; margin-top: 14px; color: #eb1b23; font-weight: 700; text-transform: uppercase; font-size: .85em; text-decoration: none; }
.ET_viewAllBrands:hover { text-decoration: underline; }

/* ---- Replacement parts: black heading band + light 2-col rows ---- */
.ET_parts { margin: 0 0 8px; }
.ET_partsHeadingBar { background: #111; padding: 28px 40px; text-align: center; }
.ET_partsHeading { color: #fff; font-size: 1.7em; font-weight: 800; margin: 0; text-transform: uppercase; }
.ET_partsBody { background: #efefef; padding: 40px 40px 48px; }
.ET_partsIntro { text-align: center; max-width: 1000px; margin: 0 auto 36px; line-height: 1.65; color: #333; }
.ET_partsGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 48px; }
.ET_partRow { display: flex; gap: 20px; align-items: flex-start; }
.ET_partRowImage { flex: 0 0 96px; }
.ET_partRowImage img { width: 96px; height: 96px; object-fit: contain; background: #fff; border: 1px solid #e2e2e2; padding: 6px; }
.ET_partTitle { color: #eb1b23; font-size: 1.15em; font-weight: 700; margin: 0 0 8px; }
.ET_partCopy { line-height: 1.6; color: #444; font-size: .98em; }

/* ---- FAQs: 2-column expanded ---- */
.ET_faqs { padding: 56px 8px; }
.ET_faqList { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 56px; max-width: 1200px; margin: 0 auto; }
.ET_faqQuestion { color: #eb1b23; font-weight: 700; font-size: 1.1em; margin: 0 0 8px; }
.ET_faqAnswer { line-height: 1.6; color: #444; }

/* Closing CTA reuses the home page .ndlp-why styles (content.css). */

/* ---- Responsive ---- */
@media (max-width: 1000px) {
    .ET_brandCards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
    .ET_hero, .ET_supportBar, .ET_partsHeadingBar, .ET_partsBody { padding-left: 20px; padding-right: 20px; }
    .ET_heroHeadline { font-size: 2em; }
    .ET_partsGrid, .ET_faqList { grid-template-columns: 1fr; }
    .ET_supportBarText { max-width: 100%; }
    .ET_supportBar::after { display: none; }
}
@media (max-width: 520px) {
    .ET_brandCards { grid-template-columns: 1fr; }
}