/* InnoFlow Instruments — product family hierarchy styles.
 * Rendered by product-hierarchy.js (family pages, family/model grids).
 * Reuses the site's existing tokens and component classes (.section-heading,
 * .pd-chips, .pd-actions, .product-card, .product-grid, .button …).
 */

/* Internal patch marker (must never be visible). */
.ph-marker { display: none !important; }

/* ── Home page product grid override ──────────────────────────────────────
 * The bundle default is 5 columns (repeat(5,1fr)) which makes cards too
 * small. On the home page our ph-grid replaces it with 3 columns so that
 * images are significantly larger and the layout stays balanced.
 * The .product-grid selector below must be at least as specific as the
 * bundle rule it overrides (both are a single class, so source-order wins –
 * this file is loaded after the bundle's CSS). */
.ph-grid.product-grid:not(.cat-grid):not(.related) {
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Taller image area for home-page cards (default is 16/11 ≈ 1.45:1). */
.ph-grid.product-grid:not(.cat-grid):not(.related) .product-card-media img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--bg-alt, #f4f6f9);
  padding: 16px;
}

/* Slightly more generous card body padding at this larger card size. */
.ph-grid.product-grid:not(.cat-grid):not(.related) .product-card-body {
  padding: 20px 22px;
}
.ph-grid.product-grid:not(.cat-grid):not(.related) .product-card-body h3 {
  font-size: 16.5px;
}

@media (max-width: 900px) {
  .ph-grid.product-grid:not(.cat-grid):not(.related) {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (max-width: 520px) {
  .ph-grid.product-grid:not(.cat-grid):not(.related) {
    grid-template-columns: 1fr;
  }
}

/* Family page hero (replaces the bundle's pd-header on family routes). */
.cat-hero {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 44px;
  align-items: start;
  padding: 30px 0 10px;
}
.cat-hero-media {
  background: #f4f6f9;
  border: 1px solid #e5eaf1;
  border-radius: 12px;
  overflow: hidden;
}
.cat-hero-media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
.cat-hero-info h1 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  line-height: 1.15;
  margin: 8px 0 12px;
  color: #1b2a4a;
}
.cat-summary {
  color: #52607a;
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0 0 16px;
}
.cat-hero-info .pd-chips { margin: 0 0 18px; }

/* Models grid section on the family page. */
.cat-models { padding: 8px 0 0; }
.cat-grid .product-card { margin-bottom: 8px; }

/* ── Family-page model grid: larger cards (match home ph-grid look) ── */
.cat-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
}
.cat-grid .product-card-media img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--bg-alt, #f4f6f9);
  padding: 16px;
}
.cat-grid .product-card-body {
  padding: 20px 22px;
}
.cat-grid .product-card-body h3 {
  font-size: 16.5px;
}
@media (max-width: 900px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
}
@media (max-width: 520px) {
  .cat-grid { grid-template-columns: 1fr !important; }
}

/* Empty state (family has no models yet). */
.cat-empty {
  text-align: center;
  padding: 56px 24px;
  background: #f8fafc;
  border: 1px dashed #d7dee8;
  border-radius: 12px;
}
.cat-empty h3 { color: #1b2a4a; margin: 0 0 10px; }
.cat-empty p { color: #52607a; max-width: 560px; margin: 0 auto 20px; line-height: 1.65; }

@media (max-width: 760px) {
  .cat-hero { grid-template-columns: 1fr; gap: 22px; }
}

/* Header nav dropdown hierarchy (family → its models).
 * Overrides the bundle's flat product list inside .dropdown / .drawer-sub. */
.dropdown .ph-nav-group + .ph-nav-group,
.drawer-sub .ph-nav-group + .ph-nav-group {
  border-top: 1px solid var(--border-light);
  margin-top: 4px;
  padding-top: 3px;
}
.dropdown .ph-nav-family,
.topbar-item .dropdown .ph-nav-family,
.drawer-sub .ph-nav-family {
  display: block;
  font-weight: 600;
  color: var(--navy-700, #1b2a4a);
  padding: 10px 18px 3px;
  border-bottom: none;
}
.dropdown .ph-nav-model,
.topbar-item .dropdown .ph-nav-model,
.drawer-sub .ph-nav-model {
  display: block;
  padding: 6px 18px 7px 34px;
  font-size: 13px;
  color: var(--muted, #52607a);
  border-bottom: none;
  white-space: normal;
}
.drawer-sub .ph-nav-family { padding: 10px 6px 3px; }
.drawer-sub .ph-nav-model { padding: 7px 6px 7px 28px; }
.dropdown .ph-nav-model:hover,
.topbar-item .dropdown .ph-nav-model:hover,
.drawer-sub .ph-nav-model:hover {
  color: var(--navy-700, #1b2a4a);
  background: var(--bg-alt, #f4f6f9);
}

/* Hide the bundle's flat product links inside patrolled containers.
 * (The bundle's own links stay in the DOM — React may re-render them — they are
 * merely not visible; our hierarchy is appended as foreign siblings.)
 * Guards use data-* attributes: React re-renders reset className it manages,
 * so a class-based guard would be wiped and cause a re-append loop. */
.main-nav .dropdown[data-ph] > a,
.drawer-sub[data-ph] > a,
.topbar-item .dropdown[data-ph] > a[href^="/products/"],
.topbar-item .dropdown[data-ph] > .dd-label:not(.ph-patrolled-label) { display: none; }

/* Footer Products column (flat list hidden, hierarchy shown). */
.footer-col ul.ph-footer-nav { margin-top: 4px; }
.footer-col ul.ph-footer-nav .ph-nav-family { display: block; font-weight: 600; color: #fff; padding: 2px 0; }
.footer-col ul.ph-footer-nav .ph-nav-model {
  display: block;
  padding: 3px 0 3px 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}
.footer-col ul.ph-footer-nav .ph-nav-model:hover { color: #fff; }
.footer-col ul.ph-footer-nav > li { margin-top: 8px; }

/* Breadcrumb rendered by the patch (mirrors the bundle's own <ol>). */
.ph-bc { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 12px 0; font-size: 13.5px; }
.ph-bc li { display: inline-flex; align-items: center; gap: 4px; }
.ph-bc a { color: var(--navy-700, #1b2a4a); text-decoration: none; }
.ph-bc a:hover { text-decoration: underline; }
.ph-bc li[aria-current="page"] { color: var(--muted, #52607a); }
.ph-bc svg { color: var(--muted, #52607a); }

/* Inline inquiry form on product detail pages (between the content and footer). */
.ph-inquiry {
  margin-top: 48px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light, #e5eaf1);
}
.ph-inquiry .inquiry-form-wrap { max-width: 780px; }
.ph-inquiry .field input[name="product"] { background: var(--bg-alt, #f4f6f9); font-weight: 600; }

/* ── Inquiry form on product detail pages ─────────────────────────────────
 * Reuses the bundle's .inquiry-layout / .inquiry-form-wrap / .inquiry-side /
 * .side-card classes so the detail-page form looks identical to the site's
 * main /inquiry form. Only responsive tweaks and the select field styling
 * are provided here. */
.ph-inquiry .inquiry-form-wrap { padding: 28px; }
.ph-inquiry .form-grid .field { margin: 0; }
.ph-inquiry select[name="product"] {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--ink, #1c2740);
  border: 1px solid var(--border, #d8dee6);
  border-radius: 6px;
  background: #fff;
  appearance: auto;
}
.ph-inquiry .side-card p a { color: var(--blue-600, #2563eb); }
@media (max-width: 960px) {
  .ph-inquiry .inquiry-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ph-inquiry .inquiry-layout { gap: 24px; }
  .ph-inquiry .form-grid { grid-template-columns: 1fr; }
}

/* Desktop Products dropdown: two-column mega menu.
 * Left column = product families, right column = models of the hovered family
 * (fixed right panel, first family active by default). */
.main-nav .dropdown[data-ph] {
  width: 660px;
  max-width: calc(100vw - 32px);
  min-width: 0;
  padding: 0;
  overflow: visible;
}
.ph-mega { display: flex; }
.ph-mega-list { flex: 0 0 262px; padding: 6px 0; border-right: 1px solid var(--border-light); }
.ph-mega-row { position: relative; }
.ph-mega-row > .ph-nav-family {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--ink, #1c2740);
  border-bottom: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.ph-mega-row:hover > .ph-nav-family,
.ph-mega-row.ph-active > .ph-nav-family {
  background: var(--bg-alt, #f4f6f9);
  color: var(--navy-700, #1b2a4a);
}
.ph-mega-chev { color: var(--muted, #52607a); flex: 0 0 auto; margin-left: 8px; }
.ph-mega-row:hover .ph-mega-chev,
.ph-mega-row.ph-active .ph-mega-chev { color: var(--navy-700, #1b2a4a); }
.ph-mega-panels { flex: 1 1 auto; background: #fff; padding: 16px 22px 18px; min-width: 0; }
.ph-mega-panel { display: none; }
.ph-mega-panel.ph-active { display: block; animation: phFadeIn 0.18s ease; }
@keyframes phFadeIn { from { opacity: 0; transform: translateX(4px); } to { opacity: 1; transform: none; } }
.ph-mega-title {
  margin: 0 0 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #52607a);
}
.ph-mega-panel .ph-nav-model {
  display: block;
  padding: 7px 0;
  font-size: 14px;
  color: var(--ink, #1c2740);
  border-bottom: 1px dashed var(--border-light, #e5eaf1);
  white-space: normal;
}
.ph-mega-panel .ph-nav-model:hover { color: var(--navy-700, #1b2a4a); background: none; }
.ph-mega-all { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--navy-700, #1b2a4a); }
.ph-mega-empty { color: var(--muted, #52607a); font-size: 13.5px; margin: 0; }
.ph-nav-group-label {
  display: block;
  padding: 9px 18px 2px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted, #52607a);
  border-bottom: none;
}
@media (max-width: 1200px) {
  .main-nav .dropdown[data-ph] { width: 580px; }
  .ph-mega-list { flex-basis: 230px; }
}