/* ============================================================
   Rafael Rodoval — Print Design
   Layout de referência: Portfólio Site Prints.pdf (1440 × 8627)
   Todas as medidas abaixo saíram da medição do PDF em pixels.
   Header, rodapé e tipografia base ficam em site.css.
   ============================================================ */

:root {
  --margin: 69px;
  /* altura da tira derivada da largura da janela: mantém sempre ~40%
     da terceira foto visível, em vez de só na largura do PDF.
     38vw ≈ 547px a 1440, que é o valor do PDF encolhido o suficiente
     para a continuidade aparecer também em telas de 1280 e 1366 */
  --strip-h: clamp(430px, 38vw, 620px);
}

/* ---------- Intro ---------- */

.intro {
  display: grid;
  /* bloco de heroes fixo em 880 e colado na borda direita; a coluna
     de texto absorve a diferença de largura */
  grid-template-columns: 1fr 880px;
  padding-bottom: 150px;
}

/* coluna estreita: quebra o texto em mais linhas e garante folga
   até as imagens do hero mesmo em janelas menores que 1440 */
.intro-text {
  padding-left: 53px;
  padding-top: 578px;
  /* estreita junto com a fonte (12px): mantém as quebras aprovadas,
     sem o "I" no fim da primeira linha */
  max-width: 274px;
}

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

/* balance distribui as palavras entre as linhas: em coluna estreita
   é o que evita a última linha com uma palavra sozinha. A regra vale
   em qualquer largura, então continua valendo no tablet e no celular. */
.intro-text p {
  font-size: 12px;
  line-height: 15px;
  margin-top: 15px;
  text-wrap: balance;
}

.intro-text h1 + p { margin-top: 30px; }

.intro-text em { font-style: italic; }

/* o <picture> não conta como caixa: a grade continua sendo das fotos */
.intro-images picture { display: contents; }
.intro-images source { display: none; }

.intro-images {
  display: grid;
  grid-template-columns: 440px 440px;
}

.intro-images img {
  width: 440px;
  height: 497px;
  object-fit: cover;
}

.intro-images .hero-wide {
  grid-column: 1 / -1;
  width: 880px;
  height: 578px;
}

/* entrada do hero: só fade, uma foto por vez, e cada uma só começa
   depois de carregar — senão o fade roda numa caixa vazia */
.js .intro-images img {
  opacity: 0;
  transition: opacity 0.9s ease;
}

/* as duas de baixo entram juntas pelo scroll; o atraso só descola
   uma da outra */
.js .intro-images picture:nth-child(3) img { transition-delay: 0.15s; }

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

.js .intro-text {
  opacity: 0;
  transition: opacity 0.9s ease 0.45s;
}

.js .intro.is-ready .intro-text { opacity: 1; }

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

/* ---------- Bloco de print ---------- */

/* respiro grande depois do texto: o texto descreve a galeria ACIMA
   dele, então o intervalo de baixo precisa ser claramente maior que
   o de cima, senão o agrupamento fica ambíguo */
.print { padding-bottom: 160px; }

/* o último bloco não separa nada abaixo dele: quem controla esse
   intervalo é a margem do rodapé */
.print:last-of-type { padding-bottom: 0; }

.meta { padding-left: var(--margin); }

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

.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 41px;
  padding-right: 70px;
}

/* no PDF a primeira linha do texto começa 17px abaixo do topo do
   swatch, não alinhada com ele */
/* pretty mexe só nas últimas linhas, preservando o rio natural do
   parágrafo — melhor que balance em texto mais longo */
.meta-row p {
  font-size: 12px;
  line-height: 15px;
  max-width: 462px;
  margin-top: 13px;
  text-wrap: pretty;
}

.meta-row em { font-style: italic; }

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

/* grupo de swatches: 250px, centrado — um swatch sozinho cai
   no mesmo eixo central que o par */
.swatches {
  flex: none;
  display: flex;
  justify-content: center;
  gap: 98px;
  width: 250px;
}

/* coluna flex centrada: nome mais largo que o swap transborda dos
   DOIS lados. Com text-align num <button>, o excesso sai só pela
   direita e o nome fica descentralizado. */
.swatch {
  width: 76px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.swatch.is-static { cursor: default; }

/* swatches ficam sempre na cor original; o hover só escurece */
.swatch img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  transition: filter 0.25s ease;
}

.swatch:not(.is-static):hover img,
.swatch:not(.is-static):focus-visible img {
  filter: brightness(0.78);
}

/* rótulos mais largos que o swatch transbordam centrados, como no
   PDF — nunca quebram em duas linhas */
.swatch span {
  margin-top: 7px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}


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

@media (max-width: 767px) {
  /* galerias: uma foto por tela na altura da primeira, a arte da
     estampa, que é quadrada e aparece inteira; as outras fotos se
     ajustam a essa altura (ver gallery.css) */
  :root { --strip-h-m: 100vw; }

  /* abertura: fotos primeiro, de ponta a ponta, e o texto embaixo */
  .intro {
    display: flex;
    flex-direction: column-reverse;
    padding-bottom: 80px;
  }

  /* blocos de texto na largura da tela menos 24px de cada lado: linhas
     mais longas, que ocupam melhor o centro (ver gallery.js) */
  .intro-text {
    max-width: none;
    margin: 0;
    padding: 34px 24px 0;
  }

  .intro-images { grid-template-columns: 1fr 1fr; }

  .intro-images img {
    width: 100%;
    height: auto;
    aspect-ratio: 440 / 497;
  }

  .intro-images .hero-wide {
    width: 100%;
    height: auto;
    aspect-ratio: 880 / 578;
  }

  /* texto um pouco maior que no desktop, que no celular ficava miúdo.
     Alinhado à esquerda e sem hífen, como na Fashion: justificado o bloco
     ficava pesado. Pretty evita viúva; o bloco é centralizado pela linha
     mais longa em gallery.js */
  .intro-text p,
  .meta-row p {
    font-size: 13.5px;
    line-height: 18px;
    text-wrap: pretty;
  }

  .intro-text p { margin-top: 16px; }
  .intro-text h1 + p { margin-top: 26px; }

  /* as amostras de cor ficam no meio do caminho entre o texto e a
     próxima galeria: 56px acima e 56px abaixo */
  .print { padding-bottom: 56px; }

  .meta {
    max-width: none;
    margin: 0;
    padding: 0 24px;
  }

  .meta h2 { margin-top: 26px; }

  /* texto em cima, amostras de cor embaixo, centralizadas na página */
  .meta-row {
    flex-direction: column;
    gap: 56px;
    margin-top: 20px;
    padding-right: 0;
  }

  .meta-row p {
    max-width: none;
    margin-top: 0;
  }

  .swatches {
    align-self: center;
    gap: 56px;
    width: auto;
  }

  .swatch { width: 64px; }

  /* nome da cor na Corporate, em maiúsculas, pequeno e sem o
     espaçamento largo dos títulos */
  .swatch span {
    font-family: "corporate-a-std-urw-cond", serif;
    font-weight: 400;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .swatch img {
    width: 64px;
    height: 64px;
  }

  /* no toque, a amostra tocada fica mais escura enquanto é a escolhida */
  .swatch:not(.is-static):hover img,
  .swatch:not(.is-static):active img { filter: brightness(0.68); }
}