/*
 * Homepage responsive ownership.
 *
 * Keep desktop component styling in home-carousel.css and home-sections.css.
 * Keep every viewport-dependent homepage layout adjustment in this file.
 * Generic source-* rules still provide shared page scaffolding; this final
 * homepage layer owns their homepage overrides. Shared navigation and footer
 * breakpoints remain in their component files.
 */

/* Wide desktop: preserve the current section rhythm and only expand dense media. */
@media (min-width:1024px) {
  .rh-carousel .section-code { font-weight:700; }
  .rh-carousel .section-code::before {
    width:2rem;
    height:2px;
    background:var(--orange);
  }
  .rh-carousel .hero-rail strong { font-weight:600; }
  .rh-carousel .hero-rail svg { color:var(--orange); }
}

@media (min-width:1600px) {
  .rh-product figure { aspect-ratio:1.4; }
  .rh-news-groups,
  .rh-news-card-grid { gap:2rem; }
  .rh-news-card-body { padding:1.5rem 1.4375rem 1.25rem; }
}

/* Desktop carousel copy stays clear of the overlaid arrow controls. */
@media (min-width:901px) and (max-width:1600px) {
  #top .rh-carousel .rh-carousel-copy { padding-inline:3rem; }
}

@media (min-width:901px) and (max-width:1100px) {
  .rh-carousel h1.hero-tagline,
  html[lang="zh"] .rh-carousel h1.hero-tagline {
    margin:1rem 0;
    font-size:1.875rem;
  }

  .rh-carousel .rh-carousel-copy > p { font-size:.875rem; }
  .rh-carousel .hero-actions { gap:.625rem; margin-top:1.25rem; }
}

@media (min-width:901px) and (max-width:1023px) {
  .rh-carousel-stage { height:36.25rem; }
  .rh-carousel .rh-carousel-copy { width:calc(100% - 3.5rem); }
  .rh-carousel h1.hero-tagline,
  html[lang="zh"] .rh-carousel h1.hero-tagline { max-width:51%; }
  .rh-carousel .rh-carousel-copy > p { max-width:49%; }
  .rh-carousel .hero-actions .button { padding-inline:.875rem; }
}

@media (max-width:1023px) {
  .rh-carousel .hero-rail a,
  .rh-carousel .hero-rail a:first-child { padding:1.125rem; gap:.75rem; }
  .rh-carousel .hero-rail a:first-child { padding-left:0; }
}

/* Touch taps keep all three hero actions on the same filled interaction state. */
@media (hover:none) {
  .rh-carousel .hero-actions .button.ghost:hover:where(:not(.rh-hover-reset)),
  .rh-carousel .hero-actions .button.ghost:active {
    border-color:var(--brand-accent-hover);
    color:var(--carbon);
    background:var(--brand-accent-hover);
  }
}

/* Compact desktop and tablet landscape. */
@media (max-width:1100px) {
  .rh-faq-shell { gap:3rem; }
  .rh-application-copy h3 { font-size:1.25rem; }
  .rh-industrial-strip { gap:1.125rem; }
  .rh-industrial-strip p { max-width:30.625rem; }

  .rh-news-groups {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:2rem 1.5rem;
  }

  .rh-news-group-product { grid-column:1 / -1; }
  .rh-news-card-grid { gap:1.5rem; }
  .rh-news-card h4 { min-height:0; }

  #homeBrands .rh-series-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.25rem;
  }

  #homeBrands .rh-series-card { min-height:12.8125rem; }
  #homeBrands .rh-series-name { font-size:1.4375rem; }
}

@media (max-width:1050px) {
  .rh-heading-note { max-width:16.25rem; }
  .rh-product-grid { gap:1.125rem; }
  .rh-product-copy h3 { font-size:1rem; }
  .rh-about-shell { gap:2.1875rem; }
  .rh-guide-item { padding-inline:1.375rem; }
}

@media (max-width:1000px) {
  :is(#homeProducts,#homeBrands,#homeApplications,#homeAbout,#homeGuide,#homeNews,#homeFaq) {
    padding-block:3.5rem;
  }

  .rh-heading { gap:1.5rem; }
}

/* Tablet and phone hero: artwork remains full stage, copy stays on the left. */
@media (max-width:900px) {
  .rh-carousel-stage {
    height:auto;
    aspect-ratio:16 / 9;
  }

  .rh-carousel:is([data-carousel-panel="pump"],[data-carousel-panel="injector"]) .rh-carousel-stage {
    height:max(26rem,56.25vw);
    aspect-ratio:auto;
  }

  .rh-carousel .rh-carousel-copy {
    width:calc(100% - 6rem);
    padding:.875rem 0;
  }

  .rh-carousel .rh-carousel-copy > .section-code {
    display:flex;
    max-width:68%;
    margin:0 0 .625rem;
    font-size:.6875rem;
    line-height:1.5;
  }

  .rh-carousel .rh-carousel-copy > p {
    display:block;
    max-width:68%;
    margin:.625rem 0 0;
    font-size:.8125rem;
    line-height:1.7;
  }

  .rh-carousel h1.hero-tagline,
  html[lang="zh"] .rh-carousel h1.hero-tagline {
    max-width:60%;
    margin:0;
    font-size:1.5rem;
    line-height:1.4;
    letter-spacing:0;
    text-wrap:balance;
  }

  .rh-carousel .hero-actions {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    max-width:68%;
    margin-top:.875rem;
    gap:.5rem;
  }

  .rh-carousel .hero-actions .button,
  .rh-carousel .hero-actions .button.ghost {
    display:inline-flex!important;
    justify-content:center;
    width:100%;
    min-height:2.25rem;
    padding:.5rem .625rem;
    gap:.375rem;
    font-size:.75rem;
    white-space:nowrap;
  }

  .rh-carousel .hero-actions .button svg {
    width:.875rem;
    height:.875rem;
    flex-basis:.875rem;
  }

  .rh-carousel-controls button { width:2rem; height:2rem; }
  .rh-carousel-prev { left:.75rem; }
  .rh-carousel-next { right:.75rem; }
  .rh-carousel-controls svg { width:1.375rem; height:1.375rem; }
}

/* First stacked-heading breakpoint: sections keep one shared left edge. */
@media (max-width:820px) {
  :is(#homeProducts,#homeBrands,#homeApplications,#homeAbout,#homeGuide,#homeNews,#homeFaq) {
    padding-block:3rem;
  }

  #top .rh-home-section .rh-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:.9375rem;
  }

  #top .rh-home-section .rh-heading > div {
    min-width:0;
    max-width:100%;
    margin-inline:0;
  }

  #top .rh-home-section .rh-heading-note {
    min-width:0;
    max-width:32.5rem;
    margin-inline:0;
  }

  .rh-product-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.625rem 1.125rem;
  }

  .rh-categories > :is(a,button) { padding:.9375rem 1rem; gap:.6875rem; }
  .rh-categories strong { font-size:1rem; }
  .rh-categories small { font-size:.5625rem; }

  .rh-about-shell {
    grid-template-columns:.8fr 1.2fr;
    gap:1.75rem;
  }

  .rh-about-image { width:43%; }
  .rh-about-copy { padding:0; }
  .rh-about-copy > p:not(.rh-eyebrow) { font-size:.8125rem; }
  .rh-guide-item { padding-inline:1.125rem; }
  .rh-guide-top { align-items:flex-start; flex-direction:column; gap:.75rem; }

  .rh-application-grid { gap:1.375rem; }
  .rh-application-copy { gap:.9375rem; padding-top:1.0625rem; }
  .rh-application-copy h3 { font-size:1.1875rem; }
  .rh-industrial-strip { flex-wrap:wrap; padding:1.375rem; }
  .rh-industrial-strip > div { flex:1; min-width:0; }
  .rh-strip-link { width:100%; justify-content:flex-end; margin-top:0; }

  .rh-faq-shell { grid-template-columns:1fr; gap:1.75rem; }
  .rh-faq-intro h2 { max-width:none; white-space:normal; }
  .rh-faq-intro > p:not(.rh-eyebrow) {
    max-width:32.5rem;
    margin-top:.9375rem;
    font-size:.8125rem;
  }
  .rh-faq-intro > .rh-text-link { margin-top:1rem; }

  .rh-news-card-body { padding:1.25rem 1.125rem 1.0625rem; }
}

@media (max-width:760px) {
  .rh-motion-ornament { width:6.25rem; height:6.25rem; opacity:.4; }
  .rh-hero-accent { inset:.75rem .75rem auto auto; width:2.125rem; height:2.125rem; }
  .rh-hero-accent::after { width:.75rem; }
  .rh-heading > div::after { width:2.25rem; margin-top:.75rem; }
  .rh-carousel .rh-carousel-copy { translate:none; }
}

@media (max-width:720px) {
  .rh-carousel .rh-carousel-copy { width:calc(100% - 5.5rem); padding:.75rem 0; }
  .rh-carousel .rh-carousel-copy > .section-code {
    max-width:70%;
    margin-bottom:.5rem;
    gap:.5625rem;
    font-size:.625rem;
  }
  .rh-carousel .rh-carousel-copy > .section-code::before { flex-basis:1.25rem; }
  .rh-carousel .rh-carousel-copy > p {
    max-width:70%;
    margin-top:.5rem;
    font-size:.75rem;
    line-height:1.65;
  }
  .rh-carousel h1.hero-tagline,
  html[lang="zh"] .rh-carousel h1.hero-tagline {
    max-width:68%;
    font-size:1.125rem;
    line-height:1.4;
  }
  .rh-carousel .hero-actions {
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:70%;
    margin-top:.75rem;
    gap:.4375rem;
  }
  .rh-carousel .hero-actions .button,
  .rh-carousel .hero-actions .button.ghost {
    min-height:2rem;
    padding:.4375rem .5rem;
    font-size:.6875rem;
  }
  .rh-carousel .hero-actions .button:last-child { grid-column:1 / -1; }
  .rh-carousel .hero-rail strong { font-size:.9375rem; line-height:1.5; }
  .rh-carousel .hero-rail small { font-size:.8125rem; line-height:1.6; }
}

/* Phone: sections, search and listing grids share one compact rhythm. */
@media (max-width:680px) {
  :is(#homeProducts,#homeBrands,#homeApplications,#homeAbout,#homeGuide,#homeNews,#homeFaq) {
    padding-block:2.5rem;
  }

  #top .rh-home-section .rh-heading {
    gap:.75rem;
    margin-bottom:1.5rem;
  }

  #homeProducts .rh-home-product-search {
    grid-template-columns:minmax(0,1fr);
    gap:.5625rem;
    margin-bottom:1.25rem;
    padding:.875rem;
  }

  .rh-home-product-search > label { font-size:.8125rem; }
  .rh-home-product-search > p { grid-column:auto; }
  .rh-home-search-control > svg {
    width:1rem;
    height:1rem;
    flex-basis:1rem;
    margin-left:.625rem;
  }
  .rh-home-search-control input {
    min-height:2.875rem;
    padding:.625rem .5rem;
    font-size:.75rem;
  }
  .rh-home-search-control button {
    min-height:2.875rem;
    padding:0 .6875rem;
    gap:.4375rem;
    font-size:.6875rem;
  }
  .rh-home-search-control button svg {
    width:.9375rem;
    height:.9375rem;
    flex-basis:.9375rem;
  }

  .rh-category-heading { gap:.75rem; margin-bottom:.5625rem; }
  .rh-category-heading > p,
  .rh-category-heading > a { font-size:.6875rem; }
  .rh-home-product-meta { align-items:flex-start; flex-direction:column; gap:.125rem; }
  #homeProducts .rh-home-product-meta small,
  #homeProducts .rh-home-product-brand { font-size:.625rem; }

  #homeNews .rh-news-intro { margin-top:.6875rem; font-size:.8125rem; }
  #homeNews .rh-heading > .rh-text-link,
  #homeBrands .rh-heading > .rh-text-link { font-size:.75rem; }
  .rh-news-groups { grid-template-columns:minmax(0,1fr); gap:2rem; }
  .rh-news-group-product { grid-column:auto; }
  .rh-news-group-product .rh-news-card-grid { grid-template-columns:minmax(0,1fr); }
  .rh-news-group-heading { margin-bottom:1.0625rem; padding:.9375rem 0; }
  .rh-news-group-heading h3 { font-size:1.0625rem; }
  .rh-news-cover { aspect-ratio:1.78; }
  .rh-news-card h4 { margin:.75rem 0 .625rem; font-size:1.125rem; }
  #homeNews .rh-news-excerpt { margin-bottom:1.375rem; font-size:.875rem; }
  .rh-news-card-body { padding:1.25rem; }
  .rh-news-meta { font-size:.6875rem; }
  .rh-news-read { font-size:.75rem; }

  #homeBrands .rh-series-grid { gap:1px; padding:1px; }
  #homeBrands .rh-series-card {
    min-height:11.5rem;
    padding:1.0625rem 1rem 1.125rem;
  }
  #homeBrands .rh-series-head { font-size:.5rem; }
  #homeBrands .rh-series-head svg { width:.9375rem; height:.9375rem; }
  #homeBrands .rh-series-brand { gap:.625rem; margin:1.6875rem 0 1.0625rem; }
  #homeBrands .rh-series-mark {
    width:2.375rem;
    height:2.375rem;
    flex-basis:2.375rem;
    font-size:.6875rem;
  }
  #homeBrands .rh-series-for { margin-bottom:.25rem; font-size:.5625rem; }
  #homeBrands .rh-series-name { font-size:clamp(.875rem,3.5vw,1.1875rem); }
  #homeBrands .rh-series-models {
    padding-top:.6875rem;
    font-size:.625rem;
    line-height:1.55;
  }
  #homeBrands .rh-series-note {
    padding-top:.9375rem;
    font-size:.6875rem;
  }
}

@media (max-width:600px) {
  .rh-home-section h2,
  .rh-about h2,
  .rh-guide h2,
  .rh-faq-intro h2 {
    font-size:1.6875rem;
    line-height:1.4;
  }

  .rh-eyebrow { margin-bottom:.625rem!important; }
  .rh-heading-note { font-size:.8125rem; }
  .rh-guide-item h3 { font-size:1.1875rem; }
  .rh-carousel .rh-carousel-copy > .section-code { gap:.625rem; }

  .rh-carousel .hero-rail a,
  .rh-carousel .hero-rail a:first-child {
    min-height:4.75rem;
    padding:1rem 0;
    gap:1rem;
    border-right:0;
    border-bottom:1px solid #FFFFFF24;
  }
  .rh-carousel .hero-rail { grid-template-columns:1fr; }
  .rh-carousel .hero-rail a:last-child { border-bottom:0; }
  .rh-carousel .hero-rail svg { width:1.375rem; height:1.375rem; }
}

@media (max-width:560px) {
  .rh-categories { margin-bottom:1.4375rem; }
  .rh-categories > :is(a,button) {
    min-height:5rem;
    padding:.75rem .5625rem;
    gap:.375rem;
  }
  .rh-category-number { display:none; }
  .rh-categories strong { font-size:.9375rem; }
  .rh-categories small { font-size:.5rem; letter-spacing:.025em; }
  .rh-categories svg { width:.9375rem; height:.9375rem; }

  .rh-product-grid { gap:1.5rem .875rem; }
  .rh-product figure { aspect-ratio:1.02; }
  .rh-product figure > img { padding:.75rem; }
  .rh-product-copy { padding-top:.75rem; }
  .rh-product-copy h3 { font-size:.9375rem; line-height:1.6; }
  .rh-product-copy p { font-size:.6875rem; }
  .rh-product-arrow {
    right:.5rem;
    bottom:.5rem;
    width:1.5625rem;
    height:1.5625rem;
  }
  .rh-product-bottom {
    align-items:flex-start;
    margin-top:1.4375rem;
    padding-top:1.125rem;
    gap:.75rem;
  }
  .rh-product-bottom > p { max-width:11.25rem; font-size:.6875rem; }
  .rh-text-link { gap:.625rem; font-size:.75rem; }

  #homeAbout.rh-about { padding-top:0; }
  .rh-about-image {
    position:relative;
    width:100%;
    height:auto;
    aspect-ratio:15 / 8;
  }
  .rh-about-image > img { object-position:center top; }
  .rh-about-image::after { background:linear-gradient(0deg,#1d2427,transparent 75%); }
  .rh-image-caption { bottom:1.6875rem; font-size:.5625rem; }
  .rh-about-shell { display:block; }
  .rh-about-copy { padding-top:1.5rem; }
  .rh-about-copy > p:not(.rh-eyebrow) { font-size:.875rem; }
  .rh-about-tags { gap:1.125rem; margin-top:1.5rem; }

  .rh-guide-grid { grid-template-columns:1fr; }
  .rh-guide-item,
  .rh-guide-item:first-child,
  .rh-guide-item:last-child {
    margin:0;
    padding:1.5rem 0;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .rh-guide-item:last-child { padding-bottom:0; border-bottom:0; }
  .rh-guide-top { flex-direction:row; align-items:center; margin-bottom:.8125rem; }

  .rh-application-grid { grid-template-columns:1fr; gap:1.75rem; }
  .rh-application-card figure { aspect-ratio:1.7; }
  .rh-application-card figure > span {
    left:1.0625rem;
    bottom:.9375rem;
    font-size:.5625rem;
  }
  .rh-application-copy { padding-top:1rem; }
  .rh-application-copy h3 { font-size:1.3125rem; }
  .rh-application-copy > svg { width:1.3125rem; height:1.3125rem; flex-basis:1.3125rem; }
  .rh-industrial-strip { margin-top:1.5625rem; padding:1.3125rem 1.125rem; gap:.875rem; }
  .rh-industrial-icon { width:2.5rem; height:2.5rem; flex-basis:2.5rem; }
  .rh-industrial-strip h3 { font-size:1.0625rem; }
  .rh-strip-link {
    padding-top:.75rem;
    border-top:1px solid #d9dfe1;
    font-size:.6875rem;
  }

  .rh-faq-intro > .rh-text-link { font-size:.8125rem; }
  .rh-faq-list summary {
    gap:.6875rem;
  }
  .rh-faq-number { font-size:.625rem; }
  .rh-faq-answer { padding:0 1.125rem 1.3125rem 1.5rem; }
}

@media (max-width:480px) {
  .rh-carousel .rh-carousel-copy { width:calc(100% - 5.5rem); padding:.625rem 0; }
  .rh-carousel .rh-carousel-copy > .section-code { max-width:72%; margin-bottom:.4375rem; }
  .rh-carousel .rh-carousel-copy > p {
    max-width:72%;
    margin-top:.4375rem;
    font-size:.6875rem;
    line-height:1.6;
  }
  .rh-carousel h1.hero-tagline,
  html[lang="zh"] .rh-carousel h1.hero-tagline {
    max-width:72%;
    font-size:1rem;
    line-height:1.4;
  }
  .rh-carousel .hero-actions {
    grid-template-columns:1fr;
    max-width:72%;
    margin-top:.625rem;
    gap:.375rem;
  }
  .rh-carousel .hero-actions .button,
  .rh-carousel .hero-actions .button.ghost {
    min-height:1.875rem;
    padding:.375rem .5625rem;
    font-size:.6875rem;
  }
  .rh-carousel .hero-actions .button:last-child { grid-column:auto; }
  .rh-carousel-controls button { width:1.75rem; height:1.75rem; }
  .rh-carousel-prev { left:.5rem; }
  .rh-carousel-next { right:.5rem; }
  .rh-carousel-controls svg { width:1.125rem; height:1.125rem; }
  .rh-carousel .hero-rail strong { font-size:.875rem; }
  .rh-carousel .hero-rail small { font-size:.75rem; }
}

@media (max-width:360px) {
  .rh-home-search-control button {
    padding-inline:.5625rem;
    gap:.3125rem;
    font-size:.625rem;
  }
}