/*
 * iQQuip card readability — production release V1, 2026-08-24
 * Scope: approved card groups across Homepage, Products, How It Works,
 * Movement Science, Exercises, Professionals, Research, About, Contact,
 * FAQ, Manuals, Records and Legal Guarantee.
 */

/* Final missed callouts identified during the consolidated review. */
#handle-travel-note,
#mass-force-note {
  border-radius: 14px;
}

#mass-force-note {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-left: 3px solid var(--red);
  background: rgba(255, 255, 255, 0.035);
  color: #bed0dd !important;
  padding: 16px 18px;
}

/* FAQ and legal heroes: retain the approved colours with a vertical split. */
.support-hero {
  background: linear-gradient(
    to right,
    #fff 0,
    #fff 58%,
    #edf2f5 58%,
    #edf2f5 100%
  );
}

@media (max-width: 700px) {
  .support-hero {
    background: #fff;
  }
}

.principles {
  border-top: 0;
  border-bottom: 0;
  gap: clamp(12px, 1.25vw, 18px);
  min-height: auto;
  padding-top: 18px;
  padding-bottom: 18px;
}

.principles > article,
.principles > article:last-child {
  min-height: 118px;
  border: 1px solid #e0e6ea;
  border-radius: 14px;
  padding: 25px clamp(20px, 3vw, 48px);
}

.principles > article > div {
  min-width: 0;
}

@media (max-width: 1100px) {
  .principles > article,
  .principles > article:last-child {
    padding-right: 20px;
    padding-left: 20px;
  }
}

@media (max-width: 700px) {
  .principles {
    gap: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

.product-cards > article {
  border-radius: 14px;
}

.audience-grid {
  gap: clamp(12px, 1.25vw, 18px);
}

.audience-grid > article {
  margin-right: 0;
  border-radius: 14px;
}

.sequence-grid {
  gap: clamp(12px, 1.25vw, 18px);
}

.sequence-grid > article {
  margin-right: 0;
  border-radius: 14px;
}

.visual-focus-options {
  gap: clamp(12px, 1.25vw, 18px);
}

.visual-focus-options > article {
  margin: 0;
  border-radius: 14px;
}

.range-grid {
  gap: clamp(12px, 1.25vw, 18px);
}

.range-grid > article {
  margin-right: 0;
  border-radius: 14px;
}

.feature-list {
  gap: clamp(12px, 1.25vw, 18px);
}

.feature-list > article {
  border: 1px solid #ffffff3d;
  border-radius: 14px;
}

.science-glance {
  border-top: 0;
  border-bottom: 0;
  gap: clamp(12px, 1.25vw, 18px);
  padding-top: 18px;
  padding-bottom: 18px;
}

.science-glance > article,
.science-glance > article:nth-child(3n),
.science-glance > article:nth-child(-n+3) {
  border: 1px solid #dfe6ea;
  border-radius: 14px;
}

.variable-grid {
  gap: clamp(12px, 1.25vw, 18px);
}

.variable-grid > article {
  margin: 0;
  border: 1px solid #ffffff38;
  border-radius: 14px;
}

.formula-cards {
  gap: clamp(12px, 1.25vw, 18px);
}

.formula-cards > article {
  margin: 0;
  border-radius: 14px;
}

.exercise-card {
  border-radius: 14px;
}

.exercise-question {
  border-radius: 14px;
}

.exercise-next-grid > a,
.exercise-next-grid > .exercise-product-configurations {
  border-radius: 14px;
}

.shaft-modes > div {
  gap: clamp(12px, 1.25vw, 18px);
}

.shaft-modes > div > article {
  border-radius: 14px;
}

.decision-loop {
  gap: clamp(12px, 1.25vw, 18px);
}

.decision-loop > article {
  margin: 0;
  border-radius: 14px;
}

.professional-audiences {
  background: #fff;
  gap: clamp(12px, 1.25vw, 18px);
}

.professional-audiences > article,
.professional-audiences > article:last-child {
  background: var(--paper);
  border: 1px solid #dce3e8;
  border-radius: 14px;
}

.route-grid {
  gap: clamp(12px, 1.25vw, 18px);
}

.route-grid > a {
  margin-right: 0;
  border-radius: 14px;
}

.research-facts {
  gap: clamp(12px, 1.25vw, 18px);
}

.research-facts > article {
  margin: 0;
  border-radius: 14px;
}

.research-questions > div {
  gap: clamp(12px, 1.25vw, 18px);
}

.research-questions > div > article {
  margin: 0;
  border-radius: 14px;
}

.about-principles > div {
  gap: clamp(12px, 1.25vw, 18px);
}

.about-principles > div > article {
  margin: 0;
  border-radius: 14px;
}

.brand-structure > div:last-child {
  gap: clamp(12px, 1.25vw, 18px);
}

.brand-structure > div:last-child > article {
  border-radius: 14px;
}

.contact-routes > div {
  gap: clamp(12px, 1.25vw, 18px);
}

.contact-routes > div > a,
.contact-routes > div > a:last-child {
  margin: 0;
  border-radius: 14px;
}

.service-support-note {
  border-radius: 14px;
}

.hand-use-card {
  border-radius: 14px;
  overflow: hidden;
}

.start-position-visuals > figure,
.start-position-guidance {
  border-radius: 14px;
}

#start-position-cards img[src$="left-handed-foot-position-v1.png"] {
  filter: brightness(1.02) contrast(1.02);
}

@media (min-width: 1001px) {
  body.shoulder-exercise-page .exercise-breadcrumb,
  body.shoulder-exercise-page .subject-hero {
    background: linear-gradient(
      to right,
      #fff 0,
      #fff calc(100% - max(360px, 34%)),
      #eaedf0 calc(100% - max(360px, 34%)),
      #eaedf0 100%
    ) !important;
  }

  body.shoulder-exercise-page .subject-hero-visual {
    background: #eaedf0 !important;
  }
}

.execution-card {
  border-radius: 14px;
}

.dynamic-card {
  border-radius: 14px;
}

.exercise-instruction-grid-v31 > div {
  border-radius: 14px;
}

.exercise-execution-note {
  border-radius: 14px;
}

.exercise-detail {
  border-radius: 14px;
}

.exercise-familiarisation-note {
  border-radius: 14px;
}

.subject-system-note {
  border-radius: 14px;
}

.back-core-emphasis-grid article {
  border-radius: 14px;
}

.movement-direction-list {
  gap: 12px;
}

.movement-direction-list span {
  border-radius: 14px;
}

.hand-use-rule {
  border-radius: 14px;
}

.execution-shared-note {
  border-radius: 14px;
}

.inertia-grid {
  gap: clamp(12px, 1.25vw, 18px);
}

.inertia-grid > article {
  border: 1px solid #ffffff3b;
  border-radius: 14px;
}

.dynamic-core-rule,
.two-hand-setup,
.two-hand-order span {
  border-radius: 14px;
}

.choice-section {
  gap: clamp(12px, 1.25vw, 18px);
  padding: clamp(12px, 1.25vw, 18px);
  background: #fff;
}

.choice-card {
  border: 1px solid #dde4e8;
  border-radius: 14px;
}

.package-grid {
  gap: clamp(12px, 1.25vw, 18px);
}

.package-grid > article,
.passive-safety-reference,
.faq-product-card,
.record-note,
.eu-guarantee-summary {
  border-radius: 14px;
}

.faq-product-card {
  overflow: hidden;
}

.safety-grid {
  gap: clamp(12px, 1.25vw, 18px);
  border: 0;
  background: transparent;
}

.safety-grid > article {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
}

@media (max-width: 700px) {
  .inertia-grid,
  .choice-section,
  .package-grid,
  .safety-grid {
    gap: 12px;
  }

  .choice-section {
    padding: 12px;
  }

  .science-glance {
    gap: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .science-glance > article,
  .science-glance > article:nth-child(3n),
  .science-glance > article:nth-child(-n+3) {
    border: 1px solid #dfe6ea !important;
  }
}

/* How It Works — Visual Focus safety note, approved 2026-08-25. */
.visual-focus-content > .technical-note {
  border: 1px solid #d7e0e6;
  border-left: 3px solid var(--red);
  border-radius: 14px;
  background: #fff;
  padding: 14px 18px;
}

/* How It Works — Passive Safety Holder safety note, approved 2026-08-25. */
.passive-safety-copy > .technical-note {
  border: 1px solid #d7e0e6;
  border-left: 3px solid var(--red);
  border-radius: 14px;
  background: #fff;
  padding: 14px 18px;
}

/* How It Works — Range Control Ring / support-handles explanatory note, approved 2026-08-25. */
.range-section > .technical-note {
  border: 1px solid #d7e0e6;
  border-left: 3px solid var(--red);
  border-radius: 14px;
  background: #fff;
  padding: 14px 18px;
}

/* How It Works — practical adjustment video card, approved 2026-08-25. */
#height-adjustment.video-guide-card {
  border-radius: 14px;
  overflow: hidden;
}

/* How It Works — training-weight step-by-step instruction card, approved 2026-08-25. */
#weight-adjustment.video-guide-card {
  border-radius: 14px;
  overflow: hidden;
}

/* How It Works — inertial-resistance explanatory note on dark section, approved 2026-08-25. */
.inertia-page > .technical-note.dark-note {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-left: 3px solid var(--red);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  padding: 14px 18px;
}

/* Movement Science — Section 01 universal-ratio boundary note, approved 2026-08-25. */
.science-glance + .science-story .boundary-note {
  margin-top: 14px;
  border: 1px solid #d7e0e6;
  border-left: 3px solid var(--red);
  border-radius: 14px;
  background: #fff;
  padding: 14px 18px;
}

/* Movement Science — Section 02 whole-task boundary note, approved 2026-08-25. */
.shoulder-explainer-v32 + .science-story.alternate .boundary-note {
  margin-top: 14px;
  border: 1px solid #d7e0e6;
  border-left: 3px solid var(--red);
  border-radius: 14px;
  background: #fff;
  padding: 14px 18px;
}

/* Movement Science — Section 03 information & variation boundary note, approved 2026-08-25. */
.science-story.alternate + .science-story .boundary-note {
  margin-top: 14px;
  border: 1px solid #d7e0e6;
  border-left: 3px solid var(--red);
  border-radius: 14px;
  background: #fff;
  padding: 14px 18px;
}

/* Movement Science — Section 04 task-variables explanatory note on dark section, approved 2026-08-25. */
.variable-section > .technical-note.dark-note {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-left: 3px solid var(--red);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  padding: 14px 18px;
}


/* Movement Science — improve visibility of the existing seven-characteristics info callout, approved 2026-08-25. */
.training-note-v23 {
  border: 1px solid #d7e2ec;
  background: #eef4fa;
}

.training-note-v23 .training-note-icon {
  background: rgba(11, 86, 173, 0.16);
}

/* Movement Science — pain/privacy callout on dark section, approved 2026-08-25. */
.pain-boundary .privacy-note {
  margin-top: 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-left: 3px solid var(--red);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  padding: 14px 18px;
  color: #c9dbea !important;
  line-height: 1.7;
}


/* Exercises overview — configurable movement variables, approved 2026-08-25. */
.exercise-variable-grid {
  gap: clamp(12px, 1.25vw, 18px);
}

.exercise-variable-grid span {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  padding: 18px 18px 20px;
}

@media (max-width: 700px) {
  .exercise-variable-grid {
    gap: 12px;
  }
}


/* Exercises overview — professional guidance callout, approved 2026-08-25. */
.exercise-guidance:not(.subject-guidance) .exercise-guidance-note {
  border: 1px solid #d7e0e6;
  border-left: 4px solid var(--red);
  border-radius: 14px;
}


/* Exercises → Shoulder — handle-travel mechanics callout, approved 2026-08-25. */
body.shoulder-exercise-page .mechanics-rule {
  border: 1px solid #d7e0e6;
  border-left: 3px solid var(--blue);
  border-radius: 14px;
}


/* For Professionals — three equipment states explanatory note, approved 2026-08-25. */
.shaft-modes > .technical-note.dark-note {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-left: 3px solid var(--red);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  padding: 14px 18px;
}


/* Sales Terms — version/effective-date banner, approved 2026-08-25.
   Scoped to Sales Terms via its model withdrawal form so Privacy remains untouched. */
.legal-page:has(.model-form) > .terms-version {
  border: 1px solid #d7e0e6;
  border-left: 4px solid var(--v62-blue, var(--blue));
  border-radius: 14px;
}


/* Privacy — version/update banner, approved 2026-08-25.
   The German Privacy page has no separate terms-version banner and is intentionally not restructured here. */
.legal-page:not(:has(.model-form)) > .terms-version {
  border: 1px solid #d7e0e6;
  border-left: 4px solid var(--v62-blue, var(--blue));
  border-radius: 14px;
}


/* Manuals & Safety Information — stable public access callout, approved 2026-08-25. */
.documentation-status {
  border: 1px solid #d7e0e6;
  border-left: 4px solid #0068b4;
  border-radius: 14px;
  padding: 1.4rem 1.5rem;
}


/* Exercises — identical one-handed/two-handed progression callout for Shoulder and Back & Core, approved 2026-08-25. */
.hand-use-rule {
  border: 1px solid #d7e0e6;
  border-left: 3px solid var(--blue);
  border-radius: 14px;
  background: #fff;
  padding: 16px 22px;
}


/* How It Works — weight-adjustment image cards, approved 2026-08-25. */
.weight-image-card {
  border-radius: 14px;
  overflow: hidden;
}


/* Exercises — One-handed / Two-handed picture panels on Shoulder and Back & Core,
   GB / DE / NL / PL, approved 2026-08-25. */
.execution-basics .hand-use-card figure {
  border-radius: 14px;
  overflow: hidden;
}


/* For Professionals — professional-boundary hero card, approved 2026-08-25. */
.professional-hero aside {
  border-radius: 14px;
}


/* For Professionals — align the dark hero boundary card with the top of the main hero heading,
   desktop only, approved 2026-08-25. */
@media (min-width: 1001px) {
  .professional-hero aside {
    align-self: start;
    margin: 157px 7vw 60px 3vw;
  }
}


/* Research — hero evidence-boundary card: rounded and aligned with main heading,
   desktop only for alignment; GB / DE / NL / PL, approved 2026-08-25. */
.research-hero aside {
  border-radius: 14px;
}

@media (min-width: 1001px) {
  .research-hero aside {
    align-self: start;
    margin: 146px 7vw 65px 3vw;
  }
}


/* About — six-stage development-flow cards, GB / DE / NL / PL,
   approved 2026-08-25. */
.about-hero .development-stage,
.about-hero .development-production,
.about-hero .development-result {
  border-radius: 14px;
}

/* About — development-process explanatory callout ("Alternative concepts..."),
   GB / DE / NL / PL, approved 2026-08-25. */
.about-hero .development-process-note {
  margin-top: 10px;
  border: 1px solid #d7e0e6;
  border-left: 3px solid #e72b35;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  padding: 10px 14px;
}


/* About — keep the development-flow panel aligned to the English desktop
   hero baseline regardless of translated heading height, approved 2026-08-25. */
@media (min-width: 1001px) {
  .about-hero .development-flow {
    align-self: start;
    height: 650px;
    min-height: 650px;
  }
}


/* Exercises overview — align the hero figure/navigation visual to the English
   desktop top position in GB / DE / NL / PL, approved 2026-08-25.
   The grey hero column continues to follow the translated content height. */
@media (min-width: 1001px) {
  .exercises-hero-visual {
    justify-content: flex-start;
  }

  .exercises-hero-visual > .body-region-navigation {
    margin-top: 128px;
  }
}


/* Exercises overview — German desktop fine alignment to GB reference,
   approved 2026-08-25. GB / NL / PL unchanged. */
@media (min-width: 1001px) {
  html[lang="de"] .exercises-hero-visual > .body-region-navigation {
    margin-top: 109px;
  }
}


/* Exercises overview — final German desktop alignment to GB reference,
   1 px correction after screenshot comparison, approved 2026-08-25. */
@media (min-width: 1001px) {
  html[lang="de"] .exercises-hero-visual > .body-region-navigation {
    margin-top: 110px;
  }
}


/* Exercises overview — exact German desktop alignment to GB reference,
   screenshot-measured 7 px downward correction, approved 2026-08-25. */
@media (min-width: 1001px) {
  html[lang="de"] .exercises-hero-visual > .body-region-navigation {
    margin-top: 117px;
  }
}


/* Global header — keep iQQuip logo identical to GB reference across languages.
   Prevent longer translated navigation from shrinking the desktop brand item.
   Approved 2026-08-25. */
@media (min-width: 1001px) {
  .site-header > .brand {
    flex: 0 0 150px;
    width: 150px;
    min-width: 150px;
  }

  .site-header > .brand img {
    display: block;
    width: 150px;
    min-width: 150px;
    max-width: none;
    height: 54px;
    object-fit: contain;
  }
}


/* Release Gate 2 — Home hero stability, approved 2026-08-25.
   Keep desktop hero geometry identical across GB / DE / NL / PL so the
   product illustration does not jump when changing language. */
@media (min-width: 1001px) {
  .hero {
    height: 690px;
    min-height: 690px;
  }

  .hero-copy,
  .hero-visual {
    height: 690px;
    min-height: 690px;
  }

  /* German heading: keep "präzise trainieren" inside the white hero column
     while preserving the same top/left starting position. */
  html[lang="de"] .hero h1 {
    font-size: clamp(54px, 6vw, 90px);
  }
}


/* Release Gate 3 — PRO ONE / PRO WALL product-detail hero stability.
   Use the GB 650 px desktop geometry in all four languages so the product
   illustration does not move when translated copy changes height. */
@media (min-width: 1001px) {
  body:has(.facts-strip) .page-hero,
  body:has(.facts-strip) .page-hero-copy,
  body:has(.facts-strip) .page-hero-visual {
    height: 650px;
    min-height: 650px;
  }

  body:has(.facts-strip) .page-hero-visual .system-graphic {
    top: 58px;
  }
}

/* Release Gate 3 — product-detail facts directly below the hero.
   Convert the four adjacent cells to separate rounded cards on both
   PRO ONE and PRO WALL, GB / DE / NL / PL. */
.facts-strip {
  border-top: 0;
  border-bottom: 0;
  gap: 14px;
  padding: 14px 6vw;
}

.facts-strip article {
  border: 1px solid #dce3e8;
  border-radius: 14px;
  background: #fff;
  padding: 27px 2vw;
}

.facts-strip article:last-child {
  border: 1px solid #dce3e8;
}


/* Release Gate 3 — Product hero geometry V2, approved 2026-08-25.
   All Products overview + PRO ONE / PRO WALL product graphics use one fixed
   desktop top reference, independent of translated copy height. */
@media (min-width: 1001px) {
  .page-hero {
    height: auto;
    min-height: 650px;
  }

  .page-hero-copy {
    height: auto;
    min-height: 0;
  }

  .page-hero-visual {
    height: auto;
    min-height: 650px;
  }

  .page-hero-visual .system-graphic {
    top: 58px;
  }
}


/* Product hero final correction — GB / DE / NL / PL, 2026-08-25.
   The Products overview and both product-detail heroes now share one fixed
   desktop geometry. This keeps the grey visual area and product illustration
   stationary during language changes while ensuring both CTA buttons remain
   inside the hero instead of being clipped by overflow. */
@media (min-width: 1001px) {
  body:has(.page-hero .system-graphic) .page-hero,
  body:has(.page-hero .system-graphic) .page-hero-copy,
  body:has(.page-hero .system-graphic) .page-hero-visual {
    height: 650px;
    min-height: 650px;
  }

  body:has(.page-hero .system-graphic) .page-hero-copy {
    padding-top: 62px;
    padding-bottom: 38px;
  }

  body:has(.page-hero .system-graphic) .page-hero h1 {
    margin-top: 16px;
    margin-bottom: 20px;
    font-size: clamp(48px, 4.25vw, 66px);
    line-height: 0.98;
  }

  body:has(.page-hero .system-graphic) .page-hero-intro {
    font-size: clamp(17px, 1.25vw, 20px);
    line-height: 1.5;
  }

  body:has(.page-hero .system-graphic) .hero-actions {
    margin-top: 24px;
  }

  body:has(.page-hero .system-graphic) .page-hero-visual .system-graphic {
    top: 58px;
  }
}

@media (min-width: 1001px) and (max-width: 1200px) {
  body:has(.page-hero .system-graphic) .page-hero,
  body:has(.page-hero .system-graphic) .page-hero-copy,
  body:has(.page-hero .system-graphic) .page-hero-visual {
    height: 720px;
    min-height: 720px;
  }
}