/* ============================================================
   medO — Legal document page (conditions d’utilisation /
   politique de confidentialité)  (MDS Templates plugin)
   Figma 4465-39659 (desktop 1920) / 5410-33482 (mobile 414).

   Loaded only on posts that contain the [mds_legal] shortcode.
   Typography always comes from the DS classes in the markup
   (.h2, .text-p2 + .fw-*) — this file carries layout, colour
   and documented deviations only.
   ============================================================ */

/* page-scoped border-box: the hero and the document column pair % widths
   with padding, and the DS does not set a global box-sizing */
[class^="legal-"], [class*=" legal-"] { box-sizing: border-box; }

/* 1420 content container, sized as a % of the 1920 design width and centred */
.legal-in {
  width: calc(100% - 2 * var(--section-gutter)); /* 1420 cap, gutters below it */
  max-width: var(--section-container);
  margin-inline: auto;
}

/* the mail link in the contact block is Figma's primary/Default #10a7e2, which
   is NOT the DS --primary-default (#0c67e9) — kept as its own property rather
   than silently snapped to the token */
.legal-page { --legal-link: #10a7e2; }

/* Breadcrumbs — the container alignment and the 20px trail height that used to
   be patched here are now part of the .breadcrumbs component itself, so every
   page gets them. .legal-crumbs stays on the markup as a hook, styling nothing. */

/* ============================================================
   1. Hero (4465-39665) — one flattened background per breakpoint
   (#172a4b base + the 2138×1218 glow, composited); the medO mark
   stays vector so it holds up at every width.

   --legal-hero-bg / --legal-hero-bg-mobile are set inline by the
   template from the ACF image fields. They must carry ABSOLUTE
   urls: a relative one inside a custom property resolves against
   this stylesheet, not the document. mds_legal_img_url() always
   returns an absolute URL, so the render path is safe.
   ============================================================ */
.legal-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 450px;
  background: var(--legal-hero-bg, url("../img/legal-hero.jpg")) center / cover no-repeat;
  color: var(--neutrals-100-white);
}
.legal-hero-mark {
  position: absolute;
  top: 50%;
  right: 0; /* mark box is flush with the frame edge at 1920 */
  transform: translateY(-50%);
  width: 22.206%; /* 426.348/1920 */
  aspect-ratio: 426.348 / 430.7;
  opacity: 0.62;
  pointer-events: none;
}
.legal-hero-mark img { display: block; width: 100%; height: 100%; }
.legal-hero .legal-in { position: relative; } /* title paints over the mark */

/* ============================================================
   2. Document body (4465-39688) — 942px reading column centred
   inside the 1420 container
   ============================================================ */
.legal-body {
  padding-block: var(--spacing-step-11); /* 64px */
  background: var(--neutrals-100-white);
}
.legal-doc {
  max-width: 942px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-8); /* 32px */
  color: var(--neutrals-950);
}
.legal-block {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-4); /* 8px */
}
.legal-block-title { margin: 0; }
.legal-block-text p,
.legal-block-text ul { margin: 0; }
/* Figma separates the paragraphs of a block with one empty line rather than a
   spacing step, so the gap tracks the P2 line-height (26px / 24px mobile) */
.legal-block-text p + p,
.legal-block-text p + ul,
.legal-block-text ul + p { margin-top: var(--typography-line-height-p2); }
.legal-block-text ul {
  list-style: disc;
  padding-left: 27px; /* bullet indent from the Figma text node */
}
.legal-link {
  color: var(--legal-link);
  text-decoration: none;
}
.legal-link:hover { text-decoration: underline; }

/* ============================================================
   Mobile (414) — matches the chrome breakpoint
   ============================================================ */
@media (max-width: 1023px) {
  .legal-in { width: 88.406%; } /* 366/414 */

  .legal-hero {
    min-height: 325px;
    background-image: var(--legal-hero-bg-mobile, url("../img/legal-hero-mobile.jpg"));
  }
  .legal-hero-mark {
    width: 65.942%; /* 273/414 */
    right: 2.657%; /* 11/414 */
    aspect-ratio: 273 / 275;
    transform: translateY(calc(-50% + 3px)); /* Figma sits the mark 3px below centre */
  }
  /* the title wraps over three lines inside a 297px box in Figma */
  .legal-hero-title { max-width: 81.148%; } /* 297/366 */

  .legal-body { padding-block: var(--spacing-step-10); } /* 48px */
  .legal-doc { max-width: none; }
}