/*
 * Candidata opt-in da seção Artista.
 * Sem ?artista-responsive=1, estas regras não atuam. Mantém o desktop
 * aprovado intacto e refina apenas a composição de telefone.
 */

html.hero-responsive-lab.prova-responsive-lab.artista-responsive-lab.coherence-lab body::before {
  content: "TESTE \00b7  ARTISTA RESPONSIVA";
}

@media (max-width: 360px) {
  html.artista-responsive-lab #artista .artist-section__canvas {
    /* 320px: 690px; 360px: 650px. Mantém o texto dentro do papel. */
    --artist-story-h: clamp(650px, calc(1010px - 100vw), 730px);
  }
}

@media (max-width: 767px) {
  html.artista-responsive-lab #artista .artist-section__paper {
    /*
     * A curva começa cedo o suficiente para receber o retrato e termina
     * antes do bloco vinho. Assim não há mistura cinza entre as camadas.
     */
    -webkit-clip-path: url(#artist-paper-phone-refined);
    clip-path: url(#artist-paper-phone-refined);
  }

  html.artista-responsive-lab #artista .artist-section__portrait-slot {
    height: auto;
    aspect-ratio: 1070 / 1470;
  }

  html.artista-responsive-lab #artista .artist-section__portrait {
    /* Dissolve o limite inferior do PNG no vinho; não deixa o braço acabar em corte reto. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, rgba(0, 0, 0, .96) 72%, transparent 88%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 70%, rgba(0, 0, 0, .96) 72%, transparent 88%);
  }

  html.artista-responsive-lab #artista .artist-section__canvas {
    /* Os cartões passam a formar uma única diagonal editorial na transição. */
    --artist-photo-cluster-y: calc(var(--artist-hero-h) - 34vw);
  }

  html.artista-responsive-lab #artista .artist-section__inset--upper {
    right: 4%;
    width: 39%;
    aspect-ratio: 4 / 3;
  }

  html.artista-responsive-lab #artista .artist-section__inset--lower {
    /* Aproxima os dois registros entre si e do retrato, como no núcleo fotográfico desktop. */
    left: 27%;
    top: calc(var(--artist-photo-cluster-y) + 16vw);
    width: 38%;
    aspect-ratio: 4 / 3;
  }

  html.artista-responsive-lab #artista .artist-section__inset--upper .artist-section__inset-shape > img,
  html.artista-responsive-lab #artista .artist-section__inset--lower .artist-section__inset-shape > img {
    object-position: center;
    transform: none;
  }
}

@media (max-width: 600px) {
  html.artista-responsive-lab #artista .artist-section__canvas {
    /*
      Telefones: os cartões entram no término do retrato e se sobrepõem.
      A expressão converge para a geometria original aos 600 px, evitando salto.
    */
    --artist-photo-cluster-y: calc(var(--artist-hero-h) - min(46vw, calc(183px + 3.53vw)));
  }

  html.artista-responsive-lab #artista .artist-section__inset--lower {
    top: calc(var(--artist-photo-cluster-y) + max(10vw, calc(-91px + 31.2vw)));
  }
}