/* ============================================================
   Rafael Rodoval — Fashion
   Layout de referência: Portfólio Site Moda.pdf (1440 × 3674)
   Tira, bullets e ampliação em gallery.css; header, rodapé e
   tipografia base em site.css.
   ============================================================ */

/* primeira tira a 155px do topo, como na Social Media e na Branding */
.fa { padding-top: 18px; }

/* a altura da tira sai da largura da própria galeria (cqw), para
   caber o mesmo número de fotos inteiras do PDF em qualquer tela */
.galleries { container-type: inline-size; }

/* abertura: 3 fotos inteiras lado a lado (1215 × 1600) */
#collection { --strip-h: calc(100cqw / 3 * 1600 / 1215); }

/* ilustrações: 4 inteiras lado a lado (1200 × 1600) */
#illustrations { --strip-h: calc(100cqw / 4 * 1600 / 1200); }

/* RROD e CORA: mesma altura das tiras da Print Design, com a próxima
   foto cortada na borda indicando que a tira continua */
#rrod,
#cora { --strip-h: clamp(430px, 38vw, 620px); }

/* respiro grande depois do texto, como na Print Design: o texto
   descreve a galeria ACIMA dele */
.look { padding-bottom: 160px; }
.look:last-of-type { padding-bottom: 0; }

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

/* bloco de texto centralizado na página, linhas alinhadas à esquerda */
.look-text {
  max-width: 540px;
  margin: 0 auto;
  box-sizing: content-box;
  padding: 0 46px;
}

.fa h1,
.fa h2 {
  font-family: "corporate-a-std-urw-cond", serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 24px;
  letter-spacing: 0.3em;
  /* 35px da Print Design menos os 3.5px de meia-entrelinha */
  margin-top: 31.5px;
}

.fa p {
  max-width: 540px;
  font-size: 12px;
  line-height: 15px;
  margin-top: 15px;
  text-wrap: pretty;
}

.fa h1 + p,
.fa h2 + p { margin-top: 15.5px; }

.fa em { font-style: italic; }

/* os textos têm pontos de quebra marcados (­) para o celular; no
   desktop eles ficam desligados e as linhas quebram como sempre */
.fa p {
  -webkit-hyphens: none;
  hyphens: none;
}

/* ---------- Entrada da abertura ---------- */

/* só fade, cada foto depois de carregar; uma um pouco depois da outra */
.js #collection .strip img {
  opacity: 0;
  transition: opacity 0.9s ease;
}

.js #collection .strip img:nth-child(2) { transition-delay: 0.12s; }
.js #collection .strip img:nth-child(3) { transition-delay: 0.24s; }

.js #collection .strip img.is-loaded { opacity: 1; }

/* sem fresta branca entre as fotos durante o fade (ver social-media.css) */
#collection .strip img { margin-right: -1px; }

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

/* o branco das fotos da abertura e das ilustrações assume o creme da
   página (multiply). A mesclagem é da faixa inteira, não de cada foto:
   as fotos se sobrepõem 1px (anti-fresta, acima) e, mescladas uma a
   uma, a sobreposição multiplicava duas fotos e virava uma linha
   escura. A galeria recebe o creme como fundo porque isola a mesclagem */
#collection .galleries,
#illustrations .galleries { background: var(--page); }

#collection .strip,
#illustrations .strip { mix-blend-mode: multiply; }

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

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

  /* uma foto por tela, na proporção de cada galeria (ver gallery.css) */
  #collection { --strip-h-m: calc(100vw * 1600 / 1215); }
  #illustrations,
  #rrod,
  #cora { --strip-h-m: calc(100vw * 1600 / 1200); }

  /* com uma foto por tela não há emenda entre fotos */
  #collection .strip img { margin-right: 0; }

  .look { padding-bottom: 80px; }

  /* texto na largura da tela menos 24px de cada lado, alinhado à
     esquerda e sem hífen: justificado, o bloco ficava pesado nesta
     página. Pretty evita viúva */
  .look-text {
    box-sizing: border-box;
    max-width: none;
    padding: 0 24px;
  }

  .fa h1,
  .fa h2 { margin-top: 26px; }

  .fa p {
    max-width: none;
    font-size: 13.5px;
    line-height: 18px;
    margin-top: 16px;
    text-wrap: pretty;
  }

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