/* Legacy products page (/legacy-products/), #9250. Ported from the approved mockup
   (_kim/projects/page-redesigns-2026-11/legacy-products/). Structure is design-system parts
   (eds-section, eds-container, eds-masthead, eds-card); this file adds only
   the grid breakpoints from DESIGN.md section 6 and the card chrome. Scoped under #legacy.
   Tokens only; px, never rem (the theme sets a 10px root font size). */

/* ---- Page chrome: the theme's title band is skipped in PHP; this page owns its width. */
body.enttec-legacy main[role="main"],
body.enttec-legacy main[role="main"] > section,
body.enttec-legacy main[role="main"] > section > article{margin:0;padding:0;max-width:none}
#legacy,#legacy *,#legacy *::before,#legacy *::after{box-sizing:border-box}
#legacy :where(h1,h2,p,ul){margin:0;padding:0}
#legacy :where(ul){list-style:none}
/* --lg-gutter: same content edge as Contact us and About (80 / 40 / 16, per the Figma frames). */
#legacy{--lg-gutter:80px;background:var(--enttec-page-bg,#fff);color:var(--enttec-text,#222);font-family:var(--enttec-font-body)}
#legacy .eds-container{padding-inline:var(--lg-gutter)}
@media (max-width:1200px){#legacy{--lg-gutter:40px}}
@media (max-width:575px){#legacy{--lg-gutter:16px}}

/* ---- Banner. 70px clears the fixed header, as on Contact us. */
#legacy .lg-banner{padding:calc(70px + var(--eds-space-lg)) 0 var(--eds-space-md)}
#legacy h1{font-size:var(--eds-h1);font-weight:500;line-height:1.1;letter-spacing:-.01em;color:var(--enttec-heading,var(--enttec-ink))}
#legacy .lg-intro{display:flex;flex-direction:column;gap:16px;margin-top:16px;max-width:720px;font-size:18px;line-height:1.5;color:var(--enttec-muted,#5B6573)}
#legacy .lg-intro a{color:var(--enttec-blue-hover,#0C91C3);text-decoration:underline;text-underline-offset:3px}
#legacy .lg-intro a:hover{text-decoration-thickness:2px}
#legacy .lg-intro a:focus-visible{outline:2px solid var(--enttec-blue);outline-offset:2px;border-radius:2px}
#legacy .lg-list{padding-top:0}
/* Tablet: the header is taller (logo row plus nav bar, 120px); phone: 56px. The title clears it. */
/* Heading + intro centred above the full-width card grid, so the 720px text column doesn't
   leave the right side empty (Kim, 2026-11-03). Phones stay left-aligned: centred paragraphs
   are hard to read in a narrow column. */
@media (min-width:576px){
  #legacy .lg-banner{text-align:center}
  /* The design-system masthead has a max-width and sits left: centre the box, not just its text. */
  #legacy .lg-banner .eds-masthead,#legacy .lg-intro{margin-left:auto;margin-right:auto}
}
@media (max-width:991px){#legacy .lg-banner{padding-top:calc(120px + var(--eds-space-md))}}
@media (max-width:575px){#legacy .lg-banner{padding-top:calc(56px + var(--eds-space-md))}}

/* ---- Grid: 2 columns from tablet up, 1 on phones (up to 575). On desktop the pair sits in a
   centred 960px block, not the full container: two cards stretched to 1280 read as empty
   (Kim, 2026-11-04, Figma "Legacy v3" 52:203). minmax(0,1fr) lets long names wrap. */
#legacy .lg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;max-width:960px;margin-inline:auto}
@media (max-width:991px){#legacy .lg-grid{gap:16px;max-width:none}}
@media (max-width:575px){#legacy .lg-grid{grid-template-columns:minmax(0,1fr);gap:16px}}
#legacy .lg-grid>li{display:flex;min-width:0}

/* ---- Card (Figma component "Legacy card (calm)" 52:188): the retired product leads, its
   replacement is a quiet footer row. Two targets, each with one meaning:
   - the card (image, name, SKU) opens the retired product's own page, where its manuals
     and firmware live: the name link stretches over the card;
   - the "Replaced by" row opens the current model; it sits above the stretched link (z-index).
   White panel, flat at rest, lifts on hover; no image zoom (Kim, 2026-11-02). */
#legacy .lg-card{position:relative;flex:1;display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--enttec-border,rgba(0,0,0,.08));border-radius:var(--eds-radius-card,12px);overflow:hidden;gap:0;
  transition:box-shadow var(--eds-dur) var(--eds-ease),transform var(--eds-dur) var(--eds-ease)}
#legacy .lg-card:hover{box-shadow:var(--eds-shadow-card-hover,var(--eds-shadow-lift));transform:translateY(var(--eds-lift-hover,-2px))}
/* Tall image panel with a small inset, so the product fills it (Kim: "way too small"). */
#legacy .lg-card .eds-card__media{position:relative;height:340px;aspect-ratio:auto;border-radius:0;box-shadow:none;background:var(--enttec-panel,#F6F8FB)}
#legacy .lg-card .eds-card__media>img{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain;padding:0;transition:none}
#legacy .lg-card:hover .eds-card__media>img{transform:none}
#legacy .lg-card:hover .eds-card__media{box-shadow:none}
#legacy .lg-card__body{display:flex;flex-direction:column;gap:4px;flex:1;padding:24px}
#legacy .lg-card__name{font:600 20px/26px var(--enttec-font-display);letter-spacing:0;color:var(--enttec-heading,#111);overflow-wrap:anywhere}
#legacy .eds-card__sku{font-size:14px;line-height:1.3;font-weight:400;color:var(--enttec-muted,#5B6573)}
#legacy .lg-card__link{color:inherit;text-decoration:none}
#legacy .lg-card__link::after{content:"";position:absolute;inset:0;z-index:0}
/* The name underlines while the card is the target, not while the footer row is hovered. */
#legacy .lg-card:hover:not(:has(.lg-replaced:hover)) .lg-card__link{text-decoration:underline;text-underline-offset:3px}
#legacy .lg-card__link:focus-visible{outline:none}
#legacy .lg-card:has(.lg-card__link:focus-visible){outline:2px solid var(--enttec-blue);outline-offset:2px}

/* ---- "Replaced by" footer row: divider above, thumb, label over name, arrow. */
#legacy .lg-replaced{position:relative;z-index:1;display:flex;align-items:center;gap:12px;padding:16px 24px;border-top:1px solid var(--enttec-border-soft,#E5E7EB);background:#fff;text-decoration:none}
#legacy .lg-replaced:focus-visible{outline:2px solid var(--enttec-blue);outline-offset:-2px}
#legacy .lg-replaced__thumb{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:4px;background:var(--enttec-panel,#F6F8FB);border-radius:6px}
#legacy .lg-replaced__thumb img{display:block;width:100%;height:100%;object-fit:contain}
#legacy .lg-replaced__text{flex:1;min-width:0;display:flex;flex-direction:column}
#legacy .lg-replaced__label{font-size:12px;line-height:1.3;color:var(--enttec-muted,#6B7280)}
#legacy .lg-replaced__name{font-size:15px;line-height:1.3;font-weight:600;color:var(--enttec-heading,#111);overflow-wrap:anywhere}
/* Link colour, not the blue hover shade: #0C91C3 at this size is under 4.5:1 on white. */
#legacy .lg-replaced>.lg-arrow{flex:none;font-size:16px;font-weight:600;color:var(--enttec-link,#0A78A3)}
#legacy .lg-replaced:hover .lg-replaced__name{text-decoration:underline;text-underline-offset:3px}
#legacy .lg-arrow{display:inline-block;transition:transform var(--eds-dur) var(--eds-ease)}
#legacy .lg-replaced:hover .lg-arrow{transform:translateX(4px)}

@media (prefers-reduced-motion:reduce){
  #legacy .lg-card,#legacy .lg-arrow{transition:none}
  #legacy .lg-card:hover{transform:none}
  #legacy .lg-replaced:hover .lg-arrow{transform:none}
}