/* Portrait individuel — styles propres à single-portrait.php */

.article-header{background:var(--ink); color:#fff; padding:44px 48px 0;}
.header-inner{max-width:760px; margin:0 auto; padding-bottom:52px;}
.back-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Space Mono'; font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--mute-dark); margin-bottom:36px;
}
.back-link:hover{color:#fff;}
.header-inner .eyebrow{color:var(--mute-dark); margin-bottom:18px;}
.header-inner h1{
  font-family:'Anton'; text-transform:uppercase; line-height:0.98;
  font-size:clamp(34px, 5.5vw, 62px); margin-bottom:28px;
}
.subject-name{
  font-family:'Anton'; text-transform:uppercase; font-size:20px; color:#fff;
  margin-bottom:22px;
}
.meta-grid{
  display:flex; gap:26px; flex-wrap:wrap;
  padding-top:20px; border-top:1px solid rgba(255,255,255,0.15);
}
.meta-value{
  font-family:'Space Mono'; font-weight:400; font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--mute-dark);
}

.intro-photo{max-width:340px; margin:56px auto;}
.intro-photo img{width:100%; height:auto; display:block; filter:grayscale(1) contrast(1.1);}

/* colonne de lecture — le contenu vient directement des blocs Gutenberg importés */
.article-body{max-width:700px; margin:0 auto; padding:0 48px 40px;}
.article-body p{font-size:17px; line-height:1.75; color:#292929; margin-bottom:26px;}
.article-body > p:first-of-type::first-letter{
  font-family:'Anton'; font-size:3.4em; line-height:0.75; float:left;
  padding:6px 10px 0 0; color:var(--ink);
}
.article-body h2, .article-body h3{
  font-family:'Anton'; text-transform:uppercase; font-size:clamp(24px,3vw,30px);
  line-height:1.15; margin:56px 0 24px;
}
.article-body blockquote{
  border-left:3px solid var(--ink); padding:2px 0 2px 28px; margin:44px 0;
  font-family:'Archivo'; font-weight:600; font-size:clamp(17px,2.1vw,20px); line-height:1.45; color:var(--ink);
}
.article-body blockquote p{font-size:inherit; color:inherit; margin-bottom:0;}
.article-body em{font-style:italic;}
.article-body a{border-bottom:1px solid currentColor;}
.article-body img{max-width:100%; height:auto; margin:20px 0;}
.article-body figure{margin:20px 0;}

.article-body .instagram-media{margin:46px auto !important; max-width:400px !important;}
.article-body .wp-block-embed{margin:50px 0;}
.article-body .wp-block-embed iframe{width:100%;}

.end-link{margin:50px 0 10px;}

.like-row{display:flex; justify-content:center; max-width:700px; margin:40px auto; padding:0 48px;}
.like-button{
  display:inline-flex; align-items:center; gap:8px;
  background:none; border:1px solid #DDD; border-radius:2px; cursor:pointer;
  padding:10px 18px; font-family:'Space Mono'; font-size:12px; color:var(--mute);
  transition:border-color 0.2s ease, color 0.2s ease;
}
.like-button:hover{border-color:var(--ink); color:var(--ink);}
.like-button:disabled{cursor:default;}
.like-button .like-heart{font-size:14px; color:var(--mute-dark); transition:color 0.2s ease;}
.like-button:hover .like-heart{color:var(--mute);}
.like-button.liked{border-color:var(--ink); color:var(--ink);}
.like-button.liked .like-heart{color:var(--ink);}

.article-meta{
  max-width:700px; margin:0 auto; padding:36px 48px 90px;
  border-top:1px solid #ECECE8; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
}
.article-meta .tag{
  font-family:'Space Mono'; font-size:11px; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--mute); border:1px solid #DDD; border-radius:2px; padding:6px 12px;
}
.share-label{font-family:'Space Mono'; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--mute);}

.related{background:var(--offwhite); padding:80px 48px;}
.related-inner{max-width:1180px; margin:0 auto;}
.related h3{font-family:'Anton'; text-transform:uppercase; font-size:26px; margin-bottom:34px;}
.related-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:40px;}
.related-grid .card .photo{margin-bottom:18px;}
.related-grid .card h4{font-family:'Anton'; text-transform:uppercase; font-size:18px; line-height:1.1;}

@media (max-width:860px){
  .related-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .header-inner, .article-body, .article-meta, .related-inner{padding-left:24px; padding-right:24px;}
  .related-grid{grid-template-columns:1fr;}
  .article-body p{font-size:16px;}
}