/* ============================================================
   ALIS Valves - Responsive Stylesheet
   Breakpoints: 1024px, 768px, 480px, 360px
============================================================ */

/* ---- 1024px ---- */
@media (max-width: 1024px) {
  :root { --page-px: 28px; }

  .header-row1__inner { height: 76px; }
  .logo__img { height: 56px; }
  .logo__main { font-size: 38px; }
  .logo__sub { font-size: 10px; }
  .primary-nav__list { gap: 18px; }
  .primary-nav__link { height: 76px; font-size: 12px; letter-spacing: .04em; }
  .primary-dropdown { top: 76px; }
  .subnav-grid { grid-template-columns: repeat(3, 1fr); }
  .subnav-col { min-height: auto; padding: 16px 12px; }
  .subnav-col + .subnav-col::before { left: -6px; }
  .subnav-col__label { font-size: 10px; white-space: normal; max-width: 100%; }
  .subnav-col__links { gap: 8px; }
  .subnav-col__link,
  .subnav-col__links > li > a { font-size: 11px; }
  .hero__title       { font-size: 38px; }
  .products__grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capabilities__grid{ grid-template-columns: repeat(2, 1fr); }
  .testimonials__grid{ grid-template-columns: repeat(2, 1fr); }
  .blogs__grid       { grid-template-columns: repeat(2, 1fr); }
  .related-grid      { grid-template-columns: repeat(2, 1fr); }
  .accessories-grid  { grid-template-columns: repeat(2, 1fr); }
  .specs-layout      { grid-template-columns: 1fr 240px 1fr; }
  .specs-layout.specs-layout--no-img { grid-template-columns: 1fr 1fr; gap: 32px; }
  .product-images-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__inner     { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer__bottom    { flex-direction: column; gap: 8px; }
  .footer-inquiry__inner { grid-template-columns: 1fr; gap: 40px; }
  .inquiry-form      { grid-template-columns: 1fr 1fr; }
  .industries__grid  { grid-template-columns: repeat(2, 1fr); }
  .page-hero__inner { min-height: 200px; padding-top: 40px; padding-bottom: 44px; border-left-width: 3px; }
  .page-hero__title { font-size: clamp(28px, 4vw, 48px); }

  /* Industry & Homepage Hero 1024px */
  .industry-hero-wrapper,
  .hero-wrapper {
    padding-top: 16px;
    padding-bottom: 0;
  }
  .industry-hero__inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .industry-hero__content {
    padding: 36px 24px;
    z-index: 10;
  }
  .industry-hero__image-wrap {
    position: relative;
    width: 100%;
    height: 400px;
    margin-top: -20px;
  }
  .industry-hero__image-overlay {
    background: linear-gradient(to bottom, var(--white) 0%, rgba(255, 255, 255, 0.5) 15%, transparent 35%);
  }
  .industry-hero__badges {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  :root { --page-px: 20px; }
  .page-hero__inner { min-height: 170px; padding-top: 36px; padding-bottom: 40px; }
  .page-hero__title { font-size: 28px; }
  .page-hero__sub   { font-size: 14.5px; }

  /* Header */
  .primary-nav  { display: none; }
  .hamburger    { display: flex; }

  /* Mobile nav panel */
  .primary-nav.is-open {
    display: flex; flex-direction: column;
    position: fixed; top: 76px; right: 0;
    width: min(320px, 85vw); height: calc(100vh - 76px);
    background: var(--white); box-shadow: var(--shadow-lg);
    z-index: 999; overflow-y: auto; padding: 16px 0;
    animation: slideIn .25s ease;
  }
  @keyframes slideIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
  }
  .primary-nav.is-open .primary-nav__list { flex-direction: column; width: 100%; }
  .primary-nav.is-open .primary-nav__link { height: auto; padding: 14px 20px; border-bottom: 1px solid var(--border); width: 100%; justify-content: space-between; }
  .primary-nav.is-open .primary-dropdown { display: none; position: static; box-shadow: none; border: none; border-radius: 0; padding: 0; animation: none; background: var(--off-white); }
  .primary-nav.is-open .primary-nav__item.is-open .primary-dropdown { display: block; }
  .primary-nav.is-open .primary-dropdown__link { padding: 10px 28px; border-bottom: 1px solid var(--border); }

  /* Sub-nav hide */
  .header-row2 { display: none; }

  /* Hero Stacking on Mobile/Tablet */
  .hero {
    padding: 0;
    margin: 0;
  }
  .hero__box {
    min-height: auto;
    height: auto;
    border-radius: 0;
  }
  .hero__slide {
    grid-template-columns: 1fr;
    min-height: auto;
    height: auto;
  }
  .hero__bg {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    width: 100%;
    height: 280px;
    min-height: 280px;
    inset: auto;
    opacity: 1;
  }
  .hero__overlay {
    display: none;
  }
  .hero__content {
    grid-column: 1;
    grid-row: 1;
    padding: 40px var(--page-px) 24px var(--page-px);
  }
  .hero__title {
    font-size: 32px;
    max-width: 100%;
  }
  .hero__subtitle {
    max-width: 100%;
  }
  .hero__controls {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    justify-content: center;
    margin-top: 24px;
    margin-bottom: 24px;
    z-index: 10;
  }

  /* Product hero */
  .product-hero__inner { grid-template-columns: 1fr; min-height: auto; padding: 20px var(--page-px) 28px var(--page-px); }
  .product-hero__content { padding: 16px 0; }
  .product-hero__card { border-radius: 0; margin-top: 20px; min-height: 320px; padding: 12px 0; }
  .product-hero__card::before { display: none; }
  .product-hero__badges { gap: 12px 14px; }
  .hero-badge { gap: 8px; }
  .hero-badge__icon { width: 38px; height: 38px; }
  .hero-badge__icon svg { width: 20px; height: 20px; }
  .hero-badge__text { font-size: 11px; }
  .product-hero__desc { margin-bottom: 24px; }
  .product-hero__actions { gap: 12px; }

  /* Layouts */
  .who__grid          { grid-template-columns: 1fr; }
  .about-intro        { grid-template-columns: 1fr; }
  .why__inner         { grid-template-columns: 1fr; }
  .why__images        { height: 260px; }
  .figures__grid      { grid-template-columns: 1fr; }
  .products__grid     { grid-template-columns: 1fr; }
  .product-card__icon { height: 220px; }
  .capabilities__grid { grid-template-columns: 1fr; }
  .testimonials__grid { grid-template-columns: 1fr; }
  .blogs__grid        { grid-template-columns: 1fr; }
  .related-grid       { grid-template-columns: repeat(2, 1fr); }
  .accessories-grid   { grid-template-columns: repeat(2, 1fr); }
  .specs-layout       { grid-template-columns: 1fr; }
  .specs-layout.specs-layout--no-img { grid-template-columns: 1fr; gap: 24px; }
  .product-images-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .woo-product-grid.products { grid-template-columns: repeat(2, 1fr) !important; }
  .products-layout    { grid-template-columns: 1fr; }
  .sidebar            { position: static; }
  .product-card__img-wrap { height: 210px; }
  .faq-grid           { grid-template-columns: 1fr; }
  .footer__inner      { grid-template-columns: 1fr; }
  .footer-inquiry__inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-inquiry__form .inquiry-form,
  .footer-inquiry__form .alis-cf7-form { padding: 28px 20px; }
  .contact-layout     { grid-template-columns: 1fr; }
  .contact-form       { grid-template-columns: 1fr; }
  .contact-cards      { grid-template-columns: 1fr; }
  .inquiry-form       { grid-template-columns: 1fr; }

  /* Tab bar scroll */
  .tab-bar { overflow-x: auto; }
  .tab-bar__inner { flex-wrap: nowrap; }
  .product-download-card { flex-direction: column; align-items: flex-start; }
  .accessory-card__img,
  .related-card__img { height: 220px; padding: 8px; }

  /* CTA banner */
  .cta-banner { padding: 48px var(--page-px); }

  /* Figure */
  .figure-item { padding: 32px 20px; }
  .industries__grid { grid-template-columns: 1fr; gap: 20px; }
  .industry-card { height: 360px; }
}

/* ---- 480px ---- */
@media (max-width: 480px) {
  :root { --page-px: 16px; }

  .hero__title         { font-size: 26px; }
  .hero__actions       { flex-direction: column; }
  .hero__controls      { gap: 10px; }
  .hero__box,
  .hero__slide         { min-height: auto; height: auto; }
  .hero__bg            { height: 200px; min-height: 200px; inset: auto; opacity: 1; }
  .hero__overlay       { display: none; }
  .hero__content       { padding: 32px var(--page-px) 16px var(--page-px); }
  .page-hero__title    { font-size: 26px; }
  .section-title       { font-size: 24px; }
  .products__grid,
  .capabilities__grid,
  .testimonials__grid,
  .blogs__grid,
  .accessories-grid,
  .related-grid,
  .product-images-grid { grid-template-columns: 1fr; }
  .product-grid        { grid-template-columns: 1fr; }
  .product-card__icon  { height: 180px; }
  .woo-product-grid.products { grid-template-columns: 1fr !important; }
  .product-card__img-wrap { height: 190px; }
  .figures__grid       { grid-template-columns: 1fr; }
  .who__card           { padding: 20px; }
  .subnav-grid         { grid-template-columns: 1fr; }
  .footer__inner       { gap: 28px; }
  .inquiry-section__title { font-size: 26px; }
  .specs-section__title   { font-size: 26px; }
  .product-hero__title    { font-size: 24px; margin-bottom: 18px; }
  .product-hero__card     { min-height: 320px; padding: 12px 0; margin-top: 20px; border-radius: 0; }
  .product-hero__img-tag  { max-height: 280px; }
  .product-hero__badges   { gap: 10px; }
  .hero-badge__text       { font-size: 10.5px; }
  .accessory-card__img,
  .related-card__img      { height: 210px; padding: 8px; }

  /* Industry Hero 480px */
  .industry-hero__content {
    padding: 32px 16px;
  }
  .industry-hero__image-wrap {
    height: 280px;
  }
  .industry-hero__badges {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .ind-badge__icon {
    width: 38px;
    height: 38px;
  }
  .ind-badge__icon svg {
    width: 18px;
    height: 18px;
  }
  .ind-badge__text {
    font-size: 10px;
  }
  .industry-hero__actions {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }
  .btn-hero-solid, .btn-hero-outline {
    width: 100%;
    justify-content: center;
  }
}

/* ---- 360px ---- */
@media (max-width: 360px) {
  :root { --page-px: 12px; }

  .hero__title      { font-size: 22px; }
  .hero__subtitle   { font-size: 16px; }
  .btn              { padding: 9px 16px; font-size: 12px; }
  .logo__main       { font-size: 28px; }
  .tab-btn          { padding: 12px 14px; font-size: 12px; }
  .figure-item__value { font-size: 32px; }
}

/* ---- Print ---- */
@media print {
  .site-header, .hero, .cta-banner, .footer { display: none !important; }
  body { font-size: 12pt; color: #000; }
  a { color: #000; text-decoration: underline; }
  .container { max-width: 100%; padding: 0; }
}