/* AERO MATERIALS: Vacuum Gripper and Material pages (EN and DE).
   Rebuilt from aero-materials.com/vacuum-gripper and /material, measured 2 Nov 2026 at 390px and 1440px.
   Layout numbers mirror the Squarespace fluid grid: 24 columns, 11px column gap, inside .container. */

:root {
  --fs-body: clamp(17.08px, 16.86px + 0.057vw, 17.68px);   /* move to tokens.css: normal paragraphs (not "large") */
  --surface-grey: #E6E5E5;          /* move to tokens.css: "How it works" band, "Key characteristics" box */
  --surface-grey-dark: #D9D8D8;     /* move to tokens.css: "Production Process" box */
  --line-soft: rgba(0, 0, 0, 0.15); /* move to tokens.css: table rules */
  --ink-muted: #666666;             /* move to tokens.css: "Conventional" column (live: rgba(0,0,0,.4) = 2.8:1, raised to 5.7:1) */
  --rule-thick: 5px;                /* move to tokens.css: section rule above the publications */
  --container-w: min(100vw - 2 * var(--gutter), 1400px);
}

.g24 { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); column-gap: 11px; }
.text-body { font-size: var(--fs-body); }
.text-large { font-size: var(--fs-large); }
.tagline { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.355; letter-spacing: var(--heading-tracking); color: var(--site-navy); }
.media-still { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--site-black); }

/* ---------- Vacuum Gripper ---------- */

/* Intro: continues the scroll section, whose end state shows the taglines next to the robot arm
   video (gripper-scrolly.css); here only the two paragraphs follow */
.vg-hero { padding-block: 24px 79px; background: var(--site-white); }
.vg-hero-intro { grid-row: 1; margin: 0; color: var(--site-black); }
.vg-hero-intro--left { grid-column: 1 / 12; }
.vg-hero-intro--right { grid-column: 14 / 25; }

/* How it works: heading top left next to the animation, the four steps as one row of white cards below */
.vg-steps { padding-block: 72px 96px; background: var(--surface-grey); color: var(--site-black); }
.vg-steps-head { grid-column: 1 / 9; grid-row: 1; align-self: start; display: grid; gap: 20px; }
.vg-steps-head h2 { color: var(--site-navy); }
.vg-steps-head p { margin: 0; max-width: 34ch; }
.vg-steps-head .vg-integrate-lede { color: var(--site-navy); }   /* navy on the light grey: the orange would not reach the contrast minimum */
.vg-steps-media { grid-column: 10 / 25; grid-row: 1; margin: 0; }
.vg-steps-list { grid-column: 1 / -1; grid-row: 2; margin: 48px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.vg-steps-list li { padding: 24px 24px 28px; background: var(--site-white); display: grid; gap: 10px; align-content: start; font-size: var(--fs-body); }
.vg-step-no { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: 1; color: var(--site-navy); }
.vg-steps-list h3 { color: var(--site-navy); }
.vg-steps-list p { margin: 0; }

/* Easy to integrate: navy band with the dot grid of the scroll section, three points in a row */
.vg-integrate { padding-block: 84px 92px; background-color: var(--site-navy); background-image: radial-gradient(circle, var(--dot-grid) 1.6px, transparent 2.2px); background-size: 36px 36px; color: var(--site-white); }
.vg-integrate-head { grid-column: 1 / 9; grid-row: 1 / 3; align-self: start; }
.vg-integrate-head h2 { color: var(--site-white); }
.vg-integrate-lede { margin: 20px 0 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.3; letter-spacing: var(--heading-tracking); color: var(--site-accent); }
.vg-integrate-list { grid-column: 10 / 25; grid-row: 1; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.vg-integrate-list li { padding-top: 18px; border-top: 1px solid var(--ink-soft-on-navy); display: grid; gap: 10px; align-content: start; font-size: var(--fs-body); }
.vg-integrate-list h3 { color: var(--site-white); }
.vg-integrate-list p { margin: 0; color: var(--ink-soft-on-navy); }
.vg-integrate-note { grid-column: 10 / 25; grid-row: 2; margin: 40px 0 0; font-size: var(--fs-small); color: var(--ink-soft-on-navy); }

/* What makes it different: comparison table */
.vg-compare-section { padding-block: 95px; background: var(--site-white); }
.vg-compare-section h2 { grid-column: 1 / 9; }
.vg-compare { grid-column: 10 / 25; width: 100%; border-collapse: collapse; font-size: var(--fs-body); line-height: 1.8; color: var(--site-navy); }
.vg-compare thead th { padding: 12px 24px 20px; font-family: var(--font-text); font-size: 1.4em; font-weight: 700; line-height: 1.25; text-align: left; vertical-align: middle; }
.vg-compare-brand { display: flex; align-items: center; gap: 16px; }
.vg-compare-icon { flex: none; width: auto; height: 64px; }
/* The company name stays on one line where the table has room for it next to the icon */
@media (min-width: 1000px) { .vg-compare-name { white-space: nowrap; } }
.vg-compare tbody th, .vg-compare tbody td { padding: 16px 24px; border-top: 1px solid var(--line-soft); text-align: left; vertical-align: middle; }
.vg-compare tbody th { padding-right: 32px; font-weight: 700; white-space: nowrap; }
.vg-compare td { padding: 0; font-weight: 500; }
.vg-compare .is-conventional { color: var(--ink-muted); }

/* Key characteristics: render of the smart voxel on a grey panel left, the characteristics as a
   two-column list right, the robot-arm photo as a wide band below */
.vg-features { padding-block: 88px 96px; background: var(--site-white); }
.vg-features-visual { grid-column: 1 / 10; grid-row: 1; margin: 0; display: grid; place-items: center; padding: 40px 24px; background: var(--surface-grey); }
.vg-features-render { width: auto; height: auto; max-width: 78%; max-height: 620px; }
.vg-features-text { grid-column: 11 / 25; grid-row: 1; display: grid; gap: 36px; align-content: start; }
.vg-features-list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; font-size: var(--fs-body); }
.vg-features-list > div { padding-top: 14px; border-top: 1px solid var(--site-navy); display: grid; gap: 6px; align-content: start; }
.vg-features-list dt { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-large); line-height: 1.25; letter-spacing: var(--heading-tracking); color: var(--site-navy); }
.vg-features-list dd { margin: 0; color: var(--site-black); }
.vg-features-band { grid-column: 1 / -1; grid-row: 2; width: 100%; height: auto; aspect-ratio: 1400 / 520; object-fit: cover; object-position: 30% 40%; margin-top: 56px; }

/* Closing band in orange */
.vg-cta { padding-block: 61px 48px; background: var(--site-accent); color: var(--site-white); }
.vg-cta hr { height: 1px; margin: 0 0 26px; border: 0; background: var(--site-white); }
.vg-cta h2 { margin-bottom: 32px; }
.vg-cta p { margin-bottom: 50px; font-size: var(--fs-large); }
.vg-cta .button { min-width: 323px; background: var(--site-white); color: var(--site-accent); }
.vg-cta .button:hover { color: var(--site-accent); }
.vg-cta .button:focus-visible { outline-color: var(--site-navy); }

/* AeMaVac project note with funding logo */
.vg-project { padding-block: 64px 48px; background: var(--site-white); color: var(--site-navy); font-size: var(--fs-body); }
.vg-project-text { grid-column: 1 / 13; }
.vg-project-text p { margin: 0; }
.vg-project-text p + p { margin-top: 16px; }
.vg-project-logo { grid-column: 15 / 25; align-self: start; width: 513px; max-width: calc(100% - 16px); margin: -17px 0 0 16px; }   /* the 16px offset stays inside the column */

/* ---------- Material ---------- */

/* Hero: photo with navy tint, white property box, slanted lower edge (Squarespace divider, 2vw) */
/* As the first section it sits under the transparent header (border-top from site.css); the photo reaches up behind it. */
.mat-hero { position: relative; padding-block: 39px calc(86px + 2vw); background: var(--site-navy); color: var(--site-white); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 2vw)); }
.mat-hero picture { display: block; position: absolute; inset: calc(-1 * var(--header-height)) 0 0; }   /* block: overrides display: contents (site.css) */
.mat-hero-image { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.mat-hero::before { content: ""; position: absolute; inset: calc(-1 * var(--header-height)) 0 0; z-index: 1; background: var(--site-navy); opacity: 0.15; }
.mat-hero .container { position: relative; z-index: 2; }
.mat-hero h1 { grid-column: 1 / 13; margin-bottom: 70px; }
.mat-props { grid-column: 2 / 17; grid-row: 2; padding: 55px 50px 54px; background: var(--site-white); color: var(--site-black); font-size: var(--fs-body); }
.mat-props p { margin: 0; }
.mat-props p + p { margin-top: 16px; }

/* Production process: heading, grey box, drawing on the right */
.mat-process { padding-block: 118px 203px; background: var(--site-white); }
.mat-process h2 { grid-column: 1 / 15; grid-row: 1; align-self: start; }
.mat-process-image { grid-column: 15 / 25; grid-row: 1 / 3; justify-self: end; align-self: start; width: 502px; max-width: 100%; }
.mat-process-box { grid-column: 2 / 16; grid-row: 2; align-self: start; margin-top: 31px; padding: 52px 46px 46px; background: var(--surface-grey-dark); color: var(--site-black); font-size: var(--fs-body); }
.mat-process-box p { margin: 0; }
.mat-process-box p:first-child { font-size: var(--fs-large); }
.mat-process-box p + p { margin-top: 16px; }

/* Publications: thick navy rule on top, full width text */
.mat-pubs { padding-block: 43px 48px; border-top: var(--rule-thick) solid var(--site-navy); background: var(--site-white); color: var(--site-navy); font-size: var(--fs-body); }
.mat-pubs h2 { margin-bottom: 23px; }
.mat-pubs p { margin: 0; }
.mat-pubs p + p { margin-top: 16px; }

/* Learn more: navy band, centred */
.mat-learn { display: flex; align-items: center; min-height: 542px; padding-block: 64px; text-align: center; }
.mat-learn .container { width: 100%; }
.mat-learn h2 { margin-bottom: 24px; }
.mat-learn .button { min-width: 323px; }

/* Tablet: the table needs the full content width; steps two by two, the other blocks stacked */
@media (min-width: 768px) and (max-width: 1199px) {
  .vg-steps-head, .vg-integrate-head, .vg-integrate-list, .vg-integrate-note, .vg-features-visual, .vg-features-text { grid-column: 1 / -1; grid-row: auto; }
  .vg-steps-media { grid-column: 1 / -1; grid-row: auto; margin-top: 32px; }
  .vg-steps-list { grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vg-integrate-list { margin-top: 40px; }
  .vg-features-text { margin-top: 48px; }
  .vg-features-render { max-height: 460px; }
  .vg-features-band { grid-row: auto; }
}
@media (min-width: 681px) and (max-width: 1199px) {
  .vg-compare-section h2 { grid-column: 1 / -1; }
  .vg-compare { grid-column: 1 / -1; margin-top: 32px; }
}

/* ---------- Comparison table as cards (live site switches at 680px) ---------- */
@media (max-width: 680px) {
  .vg-compare, .vg-compare tbody, .vg-compare tr, .vg-compare th, .vg-compare td { display: block; }
  .vg-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vg-compare tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; padding: 1.2rem 0; border-top: 1px solid var(--line-soft); }
  .vg-compare tbody tr + tr { margin-top: 1.2rem; }
  .vg-compare tbody th, .vg-compare tbody td { padding: 0; border: 0; }
  .vg-compare tbody th { grid-column: 1 / -1; margin-bottom: 0.8rem; font-size: 1.05em; white-space: normal; }
  .vg-compare td { font-size: 0.95em; line-height: 1.4; overflow-wrap: break-word; hyphens: auto; }
  .vg-compare td::before { content: attr(data-label); display: block; margin-bottom: 0.3rem; font-size: 0.79em; font-weight: 700; letter-spacing: 0.05em; line-height: 1.8; text-transform: uppercase; color: var(--site-navy); }
  .vg-compare td.is-conventional::before { color: var(--ink-muted); }
}

/* ---------- Mobile (Squarespace switches at 767px) ---------- */
@media (max-width: 767px) {
  .g24 { grid-template-columns: minmax(0, 1fr); }
  main .g24 > * { grid-column: 1 / -1; grid-row: auto; }

  .vg-hero { padding-block: 16px 69px; }
  .vg-hero-intro { padding-inline: 45px; }
  .vg-hero-intro--right { margin-top: 18px; }

  .vg-steps { padding-block: 40px 70px; }
  .vg-steps-media { margin-top: 24px; }
  .vg-steps-list { grid-template-columns: minmax(0, 1fr); gap: 11px; margin-top: 32px; }
  .vg-steps-list li { padding: 20px 21px 22px; }

  .vg-integrate { padding-block: 56px 60px; }
  .vg-integrate-list { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .vg-integrate-note { margin-top: 28px; }

  .vg-compare-section { padding-block: 60px; }
  .vg-compare { margin-top: 16px; }

  .vg-features { padding-block: 65px 29px; }
  .vg-features-visual { padding: 28px 16px; }
  .vg-features-render { max-height: 380px; }
  .vg-features-text { margin-top: 40px; }
  .vg-features-list { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .vg-features-band { grid-row: auto; margin-top: 40px; aspect-ratio: 4 / 3; }   /* the img, not its picture, is the grid item */

  .vg-cta { padding-block: 76px 30px; }
  .vg-cta hr { margin-bottom: 24px; }
  .vg-cta p { margin-bottom: 11px; }
  .vg-cta .button { width: 100%; min-width: 0; }

  .vg-project { padding-block: 30px; }
  .vg-project-logo { width: 335px; margin: 11px auto 0; }

  .mat-hero { padding-block: 51px calc(34px + 2vw); }
  .mat-hero h1 { margin-bottom: 10px; }
  .mat-props { padding: 21px; }

  .mat-process { padding-block: 35px 34px; }
  .mat-process-image { width: 199px; margin-top: 21px; }
  .mat-process-box { margin-top: 13px; padding: 22px 21px; }

  .mat-pubs { padding-block: 25px 30px; }
  .mat-pubs h2 { margin-bottom: 11px; }

  .mat-learn { min-height: 585px; }
  .mat-learn h2 { margin-bottom: 11px; }
  .mat-learn .button { width: 100%; min-width: 0; }
}