/**
 * @file
 * Doctor Quote component — glassmorphic card with SVG shape.
 * Reused on homepage (hero), article (body), temoignage pages.
 *
 * Figma: Quote card with notch top-right for speech bubble icon.
 * Uses quote-desktop.svg shape with preserveAspectRatio="none".
 * SVG viewBox: 434 x 201.
 *
 * Large (homepage hero): container sized by parent (≈631x225).
 * Small (article/temoignage): 433x200 fixed.
 */

/* ===== BASE ===== */
.hp-quote {
  position: relative;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* SVG background shape (glassmorphism + blue border + notch) */
.hp-quote__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Orange speech bubble icon — sits in the notch (top-right cutout)
   Figma: 57x57 container at right:0 top:0, overflow:clip. */
.hp-quote__icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 57px;
  z-index: 2;
  overflow: hidden;
}

.hp-quote__icon img,
.hp-quote__icon svg {
  position: absolute;
  left: 0;
  top: 8px;
  width: 46px;
  height: 47px;
  border-radius: 0;
  margin: 0;
}

/* Content wrapper — sits over the SVG shape
   Figma (large): profile at left:16 top:16, text at left:64 top:103 right:33 */
.hp-quote__content {
  position: relative;
  z-index: 1;
  padding: 16px;
}

.hp-quote__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 44px;
}

.hp-quote__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-blue-light);
  flex-shrink: 0;
  object-fit: cover;
  margin: 0;
}

/* Sans photo d'auteur : rond invisible de la même taille, la mise en page ne bouge pas. */
.hp-quote__avatar--empty {
  background: transparent;
}

.hp-quote__name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: -0.36px;
  color: var(--color-black);
  white-space: nowrap;
}

.hp-quote__name-label {
  font-weight: 400;
  text-transform: none;
}

.hp-quote__role {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-orange);
}

.hp-quote__text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-black);
  padding-left: 48px;
  padding-right: 17px;
  margin: 0;
}

.hp-quote__text .highlight {
  color: var(--color-blue);
}

/* ===== SMALL VARIANT — articles & temoignages (Figma 433x200) ===== */
.hp-quote--small {
  width: 433px;
  height: 200px;
  overflow: visible;
}

/* Override .art-content img rules that interfere with component images.
   .art-content img has specificity (0,1,1) so we need (0,2,0) minimum. */
.hp-quote--small img {
  border-radius: 0;
  margin: 0;
}

.hp-quote--small .hp-quote__shape {
  width: 100%;
  height: 100%;
}

.hp-quote--small .hp-quote__avatar {
  border-radius: 50%;
}

/* Notch container for small card — Figma: 57x57 at top-right */
.hp-quote--small .hp-quote__icon {
  width: 57px;
  height: 57px;
  top: 0;
  overflow: visible;
}

.hp-quote--small .hp-quote__icon img,
.hp-quote--small .hp-quote__icon svg {
  width: 46px;
  height: 47px;
  left: 0;
  top: 8px;
}

/* Content: Figma shows profile at left:16 top:16, text at left:64 top:88 right:33 */
.hp-quote--small .hp-quote__content {
  position: absolute;
  inset: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.hp-quote--small .hp-quote__header {
  padding: 16px 16px 0;
  margin-bottom: 0;
}

.hp-quote--small .hp-quote__text {
  position: absolute;
  top: 88px;
  left: 64px;
  right: 33px;
  padding: 0;
}

/* ===== AUTO-HEIGHT VARIANT — temoignage quotes (variable text length) ===== */
/* Uses an inline SVG border shape (.hp-quote--auto__border) rendered via the
   template, instead of the hp-quote__shape img. The inline SVG scales to the
   container and keeps a fixed-pixel notch in the top-right corner. */
.hp-quote--auto {
  width: 649px;
  max-width: 100%;
  height: auto;
  min-height: 200px;
  overflow: visible;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Hide the old SVG img shape */
.hp-quote--auto .hp-quote__shape {
  display: none;
}

/* Inline SVG border — fills the container */
.hp-quote--auto__border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.hp-quote--auto img {
  border-radius: 0;
  margin: 0;
}

.hp-quote--auto .hp-quote__avatar {
  border-radius: 50%;
}

.hp-quote--auto .hp-quote__icon {
  width: 57px;
  height: 57px;
  top: -1px;
  right: 0;
  overflow: visible;
  z-index: 2;
}

.hp-quote--auto .hp-quote__icon img,
.hp-quote--auto .hp-quote__icon svg {
  width: 46px;
  height: 47px;
  left: 0;
  top: 8px;
}

.hp-quote--auto .hp-quote__content {
  position: relative;
  z-index: 1;
  padding: 16px 90px 16px 16px;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 200px;
}

.hp-quote--auto .hp-quote__header {
  padding: 0;
  margin-bottom: 0;
}

.hp-quote--auto .hp-quote__text {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  padding: 0 0 0 48px;
  margin: 0;
  align-self: center;
}

/* ===== DYNAMIC VARIANT — JS-drawn shape (quote-shape.js) ===== */
/* Replaces --small and --auto for articles/temoignages/podcasts.
   Shape adapts to container width AND height. Radii stay fixed. */
.hp-quote--dynamic {
  position: relative;
  width: 649px;
  max-width: 100%;
  height: auto;
  min-height: 200px;
  overflow: visible;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.hp-quote--dynamic img {
  border-radius: 0;
  margin: 0;
}

.hp-quote--dynamic .hp-quote__shape-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.hp-quote--dynamic .hp-quote__icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 57px;
  height: 57px;
  z-index: 2;
  overflow: visible;
}

.hp-quote--dynamic .hp-quote__icon img {
  position: absolute;
  width: 46px;
  height: 47px;
  left: 0;
  top: 8px;
}

/* Spécificité (0,2,0) pour passer devant .art-content img (height: auto, margin-block)
   qui écrasait la taille de l'avatar et le déformait en ellipse. */
.hp-quote--dynamic .hp-quote__avatar {
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 50%;
}

.hp-quote--dynamic .hp-quote__content {
  position: relative;
  z-index: 1;
  padding: 16px 90px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 200px;
}

.hp-quote--dynamic .hp-quote__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}

.hp-quote--dynamic .hp-quote__text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-black);
  padding-left: 48px;
  padding-right: 0;
  margin: 0;
}

@media (max-width: 768px) {
  .hp-quote--dynamic {
    width: 100%;
    max-width: 358px;
    margin: 0 auto;
  }

  .hp-quote--dynamic .hp-quote__content {
    padding: 16px 60px 16px 16px;
    min-height: 160px;
  }

  .hp-quote--dynamic .hp-quote__text {
    padding-left: 0;
    font-size: 14px;
  }
}

/* Mobile/desktop shape swap */
.hp-quote__shape--mobile {
  display: none;
}

.hp-quote__shape--hero-mobile {
  display: none;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .hp-quote__shape--desktop {
    display: none;
  }
  .hp-quote__shape--mobile {
    display: block;
  }
  .hp-quote {
    padding: 8px 16px 16px;
  }
  .hp-quote__text {
    font-size: 12px;
    padding-left: 0;
    padding-right: 0;
  }
  .hp-quote--small {
    width: 100%;
    max-width: 358px;
    height: 200px;
    min-height: 200px;
    margin: 0 auto;
  }
  .hp-quote--small .hp-quote__text {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 12px;
  }
  .hp-quote--small .hp-quote__content {
    position: relative;
    padding: 16px;
    display: flex;
    flex-direction: column;
  }
  /* On mobile, --auto behaves like --small: fixed size, shape image instead of inline SVG */
  .hp-quote--auto {
    width: 100%;
    max-width: 358px;
    height: 200px;
    min-height: 200px;
    margin: 0 auto;
  }
  .hp-quote--auto .hp-quote--auto__border {
    display: none;
  }
  .hp-quote--auto .hp-quote__shape {
    display: block;
  }
  .hp-quote--auto .hp-quote__content {
    position: relative;
    padding: 16px;
    display: flex;
    flex-direction: column;
    min-height: auto;
  }
  .hp-quote--auto .hp-quote__text {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    padding: 12px 16px 0;
  }
}

@media (max-width: 480px) {
  .hp-quote__header {
    margin-bottom: 8px;
  }
  .hp-quote__text {
    font-size: 12px;
    padding-left: 48px;
    padding-right: 8px;
  }
  .hp-quote__name {
    font-size: 10px;
  }
  .hp-quote__role {
    font-size: 10px;
  }
  .hp-quote__icon {
    width: 40px;
    height: 40px;
  }
  .hp-quote__icon img,
  .hp-quote__icon svg {
    width: 30px;
    height: 30px;
    top: 5px;
  }
}