/* ============================================================
   medO FAQ — page styles  (MDS Templates plugin)
   Figma 5536-53186 (desktop 1920) / 5654-15210 (mobile 414).

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

/* page-scoped border-box: several blocks pair a % width or a min-height with
   padding, and the DS does not set a global box-sizing */
[class^="faq-"], [class*=" faq-"] { box-sizing: border-box; }

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

/* ============================================================
   1. Hero (5536-53785) — single flattened background
   ============================================================ */
.faq-hero {
  display: flex;
  align-items: center;
  min-height: 450px;
  /* the template sets --faq-hero-bg from the ACF image (falls back to the
     bundled Figma export), so uploads swap the art without touching CSS */
  background: var(--faq-hero-bg, url("../img/faq-hero.jpg")) center / cover no-repeat;
  color: var(--neutrals-100-white);
}
.faq-hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-6); /* 16px */
}

/* ============================================================
   2. Topics — the three product FAQ groups (5536-53213)
   ============================================================ */
.faq-topics { padding-block: var(--spacing-step-10); } /* 48px */
.faq-groups {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-11); /* 64px */
}
.faq-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-8); /* 32px */
}
.faq-group-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-step-7); /* 24px */
}

/* two equal columns; marcus draws its pair 8px tighter than alys/acto */
.faq-cols {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-step-7); /* 24px */
  width: 100%;
}
.faq-cols-tight { gap: var(--spacing-step-6); } /* 16px — 702+16+702 */
.faq-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-7); /* 24px between the product head and its list */
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-6); /* 16px */
}

/* product head — logo chip over a gradient caption (marcus splits pro/patient) */
.faq-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 31px; /* Figma 31px, between --spacing-step-8 and -9 */
}
/* the product wordmark sits in an outlined pill; Figma calls it
   Button/Secondary/Blue but it is a static label — no icon, no hover */
.faq-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding-inline: var(--spacing-step-7); /* 24px */
  /* stroke as an inset shadow, not a border: Figma draws it inside the 241px
     pill, a border would widen it to 243 */
  box-shadow: inset 0 0 0 1px #017dc8; /* same stroke as .btn-secondary */
  border-radius: var(--radius-round);
}
.faq-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 29px;
}
.faq-logo img { display: block; }
/* outer box + wordmark leaf, both straight off the Figma product-logo component */
.faq-logo-marcus { width: 193px; }
.faq-logo-marcus img { width: 192.546px; height: 24px; }
.faq-logo-alys { width: 141px; }
.faq-logo-alys img { width: 141px; height: 29px; }
.faq-logo-acto { width: 152px; }
.faq-logo-acto img { width: 150.202px; height: 24px; }

/* gradient caption — colour only, the size rides on the .h6 in the markup */
.faq-head-label {
  background: linear-gradient(90deg, #017dc8 0%, #0064c6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── accordions — DS .accordion-md plus the Figma outline ── */
/* Figma rings every card with 1px --gradient-primary-light. It is drawn as an
   inset shadow, not a border: a border would push the DS's 60px collapsed
   height to 62px, because Figma strokes sit inside the box. */
.faq-acc {
  box-shadow:
    var(--dropshadow-positioning-3xs) var(--dropshadow-positioning-sm)
      var(--dropshadow-blur-2xs-2) var(--opacity-dark-4),
    inset 0 0 0 1px var(--gradient-primary-light);
}
.faq-acc[open] {
  box-shadow:
    0 var(--dropshadow-positioning-2md) var(--dropshadow-blur-md-2)
      var(--opacity-dark-6),
    inset 0 0 0 1px var(--gradient-primary-light);
}

/* Figma colours the open card's minus icon the same --primary-default as its
   title (verified on the DS Accordion component set itself, State=Open/Light:
   title AND toggle vector are both #0c67e9). The DS stylesheet instead pulls
   the open toggle back to --neutrals-950, so it is released here to inherit the
   summary colour again — which also keeps the closed-but-hovered blue.
   NOTE: components.css line ~588 contradicts the DS component for every
   accordion on the site, not just this page. Fix belongs there. */
.accordion.faq-acc[open] .accordion-toggle { color: inherit; }

/* Figma writes each answer as ONE text block, so the rhythm is a blank line
   (24px) between paragraphs and after a list, while an intro line runs straight
   into the list it introduces */
.faq-acc .accordion-body p { margin: 0; }
.faq-acc .accordion-body ul,
.faq-acc .accordion-body ol {
  margin: 0;
  padding-left: var(--spacing-step-7); /* 24px */
}
.faq-acc .accordion-body p + p,
.faq-acc .accordion-body ul + p,
.faq-acc .accordion-body ol + p { margin-top: var(--spacing-step-7); }

/* ── acto: the accordion column pairs with a photo panel ── */
.faq-acto-cols { align-items: stretch; }
.faq-media {
  flex: 1 1 0;
  min-width: 0;
  order: 2; /* mobile puts the photo first; desktop sends it to the right */
  border-radius: 16px; /* Figma 16px, above --radius-md */
  background: var(--faq-acto-bg, url("../img/faq-acto-media.jpg")) center / cover no-repeat;
}
.faq-acto-list { order: 1; }
/* the "Voir la FAQ complète" button only exists on the Figma mobile frame.
   It is wrapped rather than class-modified so the button itself stays a plain
   mds_button() render. */
.faq-acto-more { display: none; }

/* ============================================================
   3. CTA band (5536-53403) — one flattened image, colour baked in
   ============================================================ */
.faq-cta-band {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 376px;
  padding: var(--spacing-step-10) var(--spacing-step-7); /* 48px 24px */
  overflow: hidden;
  background: var(--faq-cta-bg, url("../img/faq-cta.jpg")) center / cover no-repeat;
  color: var(--neutrals-100-white);
}
/* Figma sizes this block 391px but lets the title run past it on one line, so
   the copy is left unconstrained rather than wrapped at 391 */
.faq-cta-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-4); /* 8px */
}

/* ============================================================
   Mobile — 414 frame (5654-15210)
   ============================================================ */
@media (max-width: 1023px) {
  .faq-in {
    width: 88.406%; /* 366/414 */
    max-width: none;
  }

  .faq-hero {
    min-height: 325px;
    background-image: var(--faq-hero-bg-mobile, url("../img/faq-hero-mobile.jpg"));
  }

  .faq-groups { gap: var(--spacing-step-10); } /* 48px */
  /* stacked, every pair of columns breathes at 24px */
  .faq-cols,
  .faq-cols-tight {
    flex-direction: column;
    gap: var(--spacing-step-7); /* 24px */
  }

  .faq-media {
    order: 0;
    flex: none;
    width: 100%;
    aspect-ratio: 366 / 291;
    border-radius: 0; /* the mobile frame drops the rounding */
    background-image: var(--faq-acto-bg-mobile, url("../img/faq-acto-media-mobile.jpg"));
  }
  .faq-acto-more { display: block; }

  /* the band goes full-bleed and swaps to the portrait crop */
  .faq-cta .faq-in {
    width: 100%;
  }
  .faq-cta-band {
    /* Figma stacks title / copy / button at the top of the mobile band
       instead of pinning the button to the bottom */
    justify-content: flex-start;
    gap: var(--spacing-step-7); /* 24px */
    min-height: 552px;
    background-image: var(--faq-cta-bg-mobile, url("../img/faq-cta-mobile.jpg"));
  }
}