/* design/articles.css */
.article-page{
  max-width: 1000px;
  margin: 24px auto 80px;
  padding: 0 16px;
}

.article-hero-photo{
  margin: 4px 0 18px;
  display: grid;
}
.article-hero-photo img{
  width: 100%;
  max-height: 640px;          /* keeps the tall photo pleasant on desktop */
  object-fit: cover;
  border-radius: 22px;
  border: 2px solid #f4f2cc;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

/* body text */
.article-body{
  margin: 0 auto;
  max-width: 72ch;
  font-size: 18px;
  line-height: 1.7;
}
.article-body p{ margin: 0 0 1.05em; }

/* product tiles inside article */
.article-illustrations{
  margin: 26px auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px){
  .article-illustrations{ grid-template-columns: 1fr; }
}

/* Full-bleed winter hero with soft veil.
   Paths are from /design to /images → ../images/... */
.article-hero-full{
  background-image:
    url("../images/sapin-white.png"),
    url("../images/sapin.jpeg");   /* optional fallback if present */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;    /* nice on desktop; mobiles ignore */
  min-height: 85vh;
  display: flex;
  align-items: center;
  padding: clamp(24px, 6vw, 64px) 0;
}

.article-hero-full .container{
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px;
}

.article-hero-full h1{
  margin: 0 0 .5em;
  font-family: "Almendra Display", serif;
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 600;
}

.article-hero-full p{
  line-height: 1.65;
  margin: 0 0 1em;
}