/* ============================================================
   Rafael Rodoval — Social Media
   Layout de referência: Portfólio Site Social Media.pdf (1440 × 14027)
   Header, rodapé e tipografia base ficam em site.css.
   ============================================================ */

/* grade começa a 155px do topo, como no PDF (o header tem 137) */
.sm { padding-top: 18px; }

/* coluna de texto de 390px à esquerda, grade de imagens ocupando o
   resto até 46px da borda direita — medidas do PDF */
.client {
  display: grid;
  grid-template-columns: 390px minmax(0, 1fr);
  padding-right: 46px;
}

/* entre clientes um respiro maior que os 33px entre grupos de posts
   do mesmo cliente: a troca de cliente se lê pelo espaço */
.client + .client { margin-top: 120px; }

/* sem texto fixo: cada texto rola junto com as imagens do cliente, sem
   parar. Fixar e soltar muda a velocidade de repente, e isso aparece
   como um pulo. O texto fica ~655px abaixo do início das imagens do
   cliente, como no PDF. */
.client-aside {
  padding-left: 51px;
  padding-top: 649.5px;
}

/* ---------- Texto ---------- */

/* coluna estreita: ~135px de respiro até a grade, que começa em 390 */
.page-intro,
.client-text { max-width: 205px; }

/* a intro começa logo abaixo da primeira tela: ao carregar só aparecem
   as imagens, e ela entra com a rolagem (a seção começa em 155px) */
#que-seja .client-aside { padding-top: 0; }
.page-intro { padding-top: calc(100vh - 115px); }

.sm h1,
.sm h2 {
  font-family: "corporate-a-std-urw-cond", serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.3em;
}

.sm p {
  font-size: 12px;
  line-height: 15px;
  margin-top: 15px;
  text-wrap: pretty;
}

/* nomes longos (DR. MAYARA ABRAHÃO, CATALÃO EYE INSTITUTE) quebram
   em duas linhas: 24px dá respiro entre elas. Os 3.5px que isso soma
   acima e abaixo do título saem das margens em volta, para nada se
   mover nos títulos de uma linha só. */
.sm h2 { line-height: 24px; }

.sm h1 + p { margin-top: 30px; }
.sm h2 + p { margin-top: 15.5px; }

.page-intro + .client-text { margin-top: 156.5px; }

/* ---------- Imagens ---------- */

.group { display: grid; }
.group + .group { margin-top: 33px; }

.group.posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.group.stories { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* proporção fixa em todas: alguns arquivos têm 1px de diferença de
   altura, o que abriria uma fresta branca entre as linhas */
.group img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* colunas com largura fracionada: durante o fade de entrada as bordas
   suavizadas de duas fotos vizinhas não cobrem o pixel inteiro e aparece
   uma linha branca fina. Cada foto avança 1px sobre a vizinha (à direita
   e abaixo) e o grupo corta o que passa da borda */
.group { overflow: hidden; }

.group img {
  width: calc(100% + 1px);
  margin-right: -1px;
  margin-bottom: -1px;
}

.group.posts img { aspect-ratio: 900 / 1210; }
.group.stories img { aspect-ratio: 1000 / 1778; }

/* entrada: só fade, quando a imagem entra na tela e já carregou;
   dentro da linha, uma coluna um pouco depois da outra */
.js .group img {
  opacity: 0;
  transition: opacity 0.9s ease;
}

.js .group.posts img:nth-child(3n+2),
.js .group.stories img:nth-child(2n) { transition-delay: 0.08s; }
.js .group.posts img:nth-child(3n) { transition-delay: 0.16s; }

.js .group img.is-loaded { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .js .group img { opacity: 1; transition: none; }
}

/* ============================================================
   Celular
   ============================================================ */

@media (max-width: 767px) {
  .sm { padding-top: 10px; }

  /* texto de cada cliente antes das imagens dele; grade de ponta a
     ponta, 3 colunas nos posts como um perfil do Instagram */
  .client {
    display: block;
    padding-right: 0;
  }

  .client + .client { margin-top: 80px; }

  .client-aside,
  #que-seja .client-aside {
    padding: 0 16px 26px;
  }

  .page-intro,
  .client-text { max-width: 330px; }

  /* a intro aparece logo no topo, não depois da primeira tela */
  .page-intro { padding-top: 0; }

  .page-intro + .client-text { margin-top: 64px; }

  .group + .group { margin-top: 16px; }
}

/* ============================================================
   Celular: galerias e stories (bloco .sm-m no HTML)
   No desktop o bloco não aparece; no celular é a grade que some.
   ============================================================ */

.sm-m { display: none; }

@media (max-width: 767px) {
  .sm > .client { display: none; }
  .sm-m { display: block; }

  /* posts em 900 × 1210: uma foto por tela, inteira (ver gallery.css) */
  .sm-gal { --strip-h-m: calc(100vw * 1210 / 900); }

  /* texto como na Print Design e na Fashion: largura da tela menos 24px
     de cada lado, alinhado à esquerda, centralizado pela linha mais
     longa (gallery.js). Como na Fashion, o trabalho vem primeiro e o
     texto logo abaixo dele; o próximo cliente começa depois de um
     respiro maior */
  .sm-text { padding: 0 24px; }

  .sm-gal + .sm-text,
  .story + .sm-text { margin-top: 26px; }

  .sm-text + .sm-gal,
  .sm-text + .story { margin-top: 80px; }

  /* os stories da Que Seja continuam a Que Seja: respiro menor */
  .sm-text + #que-seja-stories { margin-top: 48px; }

  .story + .sm-gal { margin-top: 80px; }

  .sm-m p {
    font-size: 13.5px;
    line-height: 18px;
    margin-top: 16px;
    text-wrap: pretty;
  }

  .sm-m h1 + p,
  .sm-m h2 + p { margin-top: 20px; }

  /* ---------- Stories (stories.js) ---------- */

  .story { padding: 0 24px; }

  .story-frame {
    position: relative;
    aspect-ratio: 1000 / 1778;
    border-radius: 10px;
    overflow: hidden;
    background: #111;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  /* véu no topo para as barrinhas e o nome aparecerem em qualquer foto */
  .story-frame::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 18%;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0));
    pointer-events: none;
  }

  .story-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    -webkit-user-drag: none;
    pointer-events: none;
  }

  .story-slide.is-current { opacity: 1; }

  .story-bars {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    gap: 4px;
  }

  .story-bars span {
    flex: 1;
    height: 2px;
    border-radius: 1px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.35);
  }

  .story-bars i {
    display: block;
    height: 100%;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left;
  }

  .story-head {
    position: absolute;
    top: 22px;
    left: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 400;
  }

  .story-avatar {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.2);
    font-family: "corporate-a-std-urw-cond", serif;
    font-size: 11px;
    letter-spacing: 0.06em;
  }

  .story-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}