/* Monfredo Comunicação — Portfólio Editorial
   Esqueleto inicial baseado na arquitetura aprovada do Portfólio Web.
   Nesta etapa, somente a composição, tipografia, textos e proporções dos placeholders são definidos. */

.editorial-page{background:var(--cream);min-height:100vh;}

.editorial-intro{padding:128px 0 78px;background:var(--cream);}
.editorial-intro-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:76px;align-items:center;}
.editorial-copy small,.editorial-selection-head small{font-size:12px;letter-spacing:1.3px;}
.editorial-copy h1{font:400 clamp(2.45rem,4.1vw,4.05rem)/.9 var(--font-head);letter-spacing:-1.2px;margin:11px 0 27px;}
.editorial-copy h1 span{color:var(--purple);}
.editorial-copy-text{max-width:585px;font-size:18px;font-weight:300;line-height:1.32;}
.editorial-copy-text p{margin:0 0 13px;}
.editorial-copy-text strong{font-weight:600;}

/* Placeholder do livro protagonista: formato vertical moderado, ainda sem definir a arte final. */
.editorial-hero-placeholder{margin:0;justify-self:end;width:min(100%,500px);aspect-ratio:4/5.25;border:1px solid rgba(11,11,13,.18);background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;}
.placeholder-mark{text-align:center;padding:24px;color:#777;}
.placeholder-mark span{display:block;font-size:10px;letter-spacing:1.8px;margin-bottom:12px;}
.placeholder-mark b{display:block;font:400 18px/.95 var(--font-head);color:#555;max-width:270px;}
.placeholder-mark small{display:block;font-size:11px;font-weight:300;margin-top:12px;letter-spacing:.5px;}

.editorial-selection{padding:8px 0 92px;background:var(--cream);}
.editorial-selection-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:27px;}
.editorial-selection-head p{max-width:550px;font-size:16px;font-weight:300;line-height:1.25;margin:0;}
.editorial-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:30px;row-gap:44px;}
.editorial-item{min-width:0;}
.editorial-placeholder{width:100%;aspect-ratio:16/9;border:1px solid rgba(11,11,13,.18);background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;}
.editorial-placeholder span{font-size:10px;letter-spacing:1.7px;color:#777;}
.editorial-item h2{font:500 16px/1.05 var(--font-body);letter-spacing:.05px;margin:11px 0 0;color:#111;}

@media(max-width:1000px){
  .editorial-intro{padding-top:115px;}
  .editorial-intro-grid{grid-template-columns:1fr 1fr;gap:42px;}
  .editorial-copy h1{font-size:clamp(2.35rem,5.2vw,3.4rem);}
  .editorial-copy-text{font-size:17px;}
  .editorial-hero-placeholder{width:100%;}
}

@media(max-width:620px){
  .editorial-intro{padding:105px 0 52px;}
  .editorial-intro-grid{grid-template-columns:1fr;gap:42px;}
  .editorial-copy h1{font-size:clamp(2.35rem,12vw,4rem);}
  .editorial-copy-text{font-size:17px;}
  .editorial-hero-placeholder{justify-self:stretch;width:100%;max-width:none;aspect-ratio:4/5;}
  .editorial-selection{padding:0 0 62px;}
  .editorial-selection-head{display:block;margin-bottom:24px;}
  .editorial-selection-head p{margin-top:9px;font-size:16px;}
  .editorial-grid{grid-template-columns:1fr;row-gap:32px;}
  .editorial-placeholder{aspect-ratio:16/10;}
  .editorial-item h2{font-size:16px;}
}


/* V2 — linha divisória discreta acima do rodapé */
.portfolio-footer{border-top:1px solid rgba(11,11,13,.12);}


/* V3 — APLICAÇÃO DAS FOTOS FORNECIDAS.
   Base: Esqueleto Editorial V3.
   Somente substitui os placeholders pelas imagens reais, preservando
   proporção integral das fotografias e a grade 2 x 3 existente. */
.editorial-hero-placeholder{
  aspect-ratio:auto;
  border:0;
  background:transparent;
  display:block;
  overflow:hidden;
}
.editorial-hero-placeholder img{
  display:block;
  width:100%;
  height:auto;
}
.editorial-hero-placeholder figcaption{
  font:500 16px/1.05 var(--font-body);
  letter-spacing:.05px;
  margin:11px 0 0;
  color:#111;
}

.editorial-placeholder{
  aspect-ratio:auto;
  border:0;
  background:transparent;
  display:block;
  overflow:hidden;
}
.editorial-placeholder img{
  display:block;
  width:100%;
  height:auto;
}

@media(max-width:620px){
  .editorial-hero-placeholder{
    aspect-ratio:auto;
  }
  .editorial-placeholder{
    aspect-ratio:auto;
  }
}


/* V7 — Hover suave nas imagens do portfólio */
.editorial-hero-placeholder img,
.editorial-placeholder img{
  transition:transform .45s ease;
  transform-origin:center center;
}
.editorial-hero-placeholder:hover img,
.editorial-placeholder:hover img{
  transform:scale(1.03);
}


/* V9 — subtítulo editorial */
.editorial-subtitle{ display:block; font-weight:700; font-size:1.08em; margin-bottom:1em; }



/* V11 — ajustes finos de respiro e alinhamento */
.editorial-copy-text > p:nth-child(1){ margin-top:1.5em; }
.editorial-copy-text > p:nth-child(2){ margin-top:1.5em; }
.editorial-copy-text .editorial-subtitle{ margin-top:2em; margin-bottom:2em; }



/* V14 — alinhamento final do parágrafo com a segunda imagem */
@media (min-width:1001px){
  .editorial-selection-head small{white-space:nowrap;}
  .editorial-selection-head p{
    width:calc((100% - 30px)/2);
    max-width:none;
  }
}