/* ================================================================
   ARTICLE PAGE
   Single article layout, content typography, product boxes,
   breadcrumbs, related articles.
   ================================================================ */

.article-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 60px 40px;
}

/* --- Breadcrumb --- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--clr-smoke);
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.breadcrumb a {
  color: var(--clr-smoke);
  text-decoration: none;
  transition: color var(--speed-fast);
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--clr-green);
}

.breadcrumb__sep {
  color: var(--clr-mist);
  font-size: 10px;
}

.breadcrumb__current {
  color: var(--clr-green);
}

/* --- Back link --- */
.article-back {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--clr-smoke);
  cursor: pointer;
  transition: color var(--speed-fast);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  text-decoration: none;
}

.article-back:hover,
.article-back:focus-visible {
  color: var(--clr-green);
}

/* --- Category badge --- */
.article-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius);
  background: var(--clr-green);
  color: var(--clr-chartreuse);
  margin-bottom: 18px;
}

/* --- Article heading --- */
.article-h1 {
  font-family: var(--ff-display);
  font-size: clamp(40px, 5vw, 68px);
  letter-spacing: .02em;
  line-height: .97;
  color: var(--clr-ink);
  margin-bottom: 22px;
}

.article-h1 em {
  font-style: normal;
  color: var(--clr-green);
}

/* --- Byline --- */
.article-byline {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-top: 1.5px solid var(--clr-wire-2);
  border-bottom: 1.5px solid var(--clr-wire-2);
  margin-bottom: 40px;
}

.article-byline__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.article-byline__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--clr-green);
  letter-spacing: .04em;
}

.article-byline__role {
  font-size: 11px;
  color: var(--clr-smoke);
  letter-spacing: .04em;
}

.article-byline__date {
  font-size: 11px;
  color: var(--clr-mist);
  margin-left: auto;
  font-weight: 600;
  letter-spacing: .06em;
}

/* --- Hero image --- */
.article-hero-img {
  width: 100%;
  height: 380px;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 110px;
  background: linear-gradient(160deg, var(--clr-green), var(--clr-green-deep));
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}

.article-hero-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26, 58, 42, .3), rgba(200, 240, 0, .15));
  mix-blend-mode: multiply;
}

/* --- Article body content --- */
.article-body {
  font-size: 15px;
  color: var(--clr-ink);
  line-height: 1.85;
}

.article-body h2 {
  font-family: var(--ff-display);
  font-size: 30px;
  letter-spacing: .04em;
  color: var(--clr-green);
  margin: 40px 0 14px;
}

.article-body h3 {
  font-family: var(--ff-display);
  font-size: 22px;
  letter-spacing: .04em;
  color: var(--clr-ink);
  margin: 28px 0 10px;
}

.article-body p {
  margin-bottom: 18px;
  font-family: var(--ff-serif);
  color: #3a4a3f;
}

.article-body ul,
.article-body ol {
  margin: 0 0 18px 20px;
  list-style: disc;
}

.article-body ol { list-style: decimal; }

.article-body li {
  margin-bottom: 8px;
  font-family: var(--ff-serif);
  color: #3a4a3f;
}

/* --- Pull quote --- */
.article-pullquote {
  border-left: 3px solid var(--clr-chartreuse);
  padding: 18px 28px;
  margin: 32px 0;
  background: var(--clr-green);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--ff-display);
  font-size: 22px;
  letter-spacing: .04em;
  color: var(--clr-chartreuse);
  line-height: 1.3;
}

/* --- Product recommendation box --- */
.product-box {
  background: white;
  border: 1.5px solid var(--clr-wire-2);
  padding: 20px 24px;
  margin: 20px 0;
  display: flex;
  gap: 20px;
  align-items: center;
  cursor: pointer;
  transition: all .2s;
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
}

.product-box:hover,
.product-box:focus-visible {
  border-color: var(--clr-green);
  box-shadow: 0 4px 24px rgba(26, 58, 42, .1);
}

.product-box__icon {
  width: 72px;
  height: 72px;
  background: var(--clr-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  flex-shrink: 0;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}

.product-box__icon::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(200, 240, 0, .15);
}

.product-box__info {
  flex: 1;
}

.product-box__brand {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--clr-mist);
  margin-bottom: 3px;
}

.product-box__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--clr-ink);
  margin-bottom: 4px;
  letter-spacing: .02em;
}

.product-box__price {
  font-family: var(--ff-display);
  font-size: 22px;
  letter-spacing: .04em;
  color: var(--clr-green);
}

.product-box__old-price {
  font-size: 13px;
  color: var(--clr-mist);
  font-family: var(--ff-body);
  text-decoration: line-through;
  margin-left: 6px;
}

/* --- Related articles section --- */
.related-articles {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 2px solid var(--clr-wire-2);
}

.related-articles__heading {
  font-family: var(--ff-display);
  font-size: 28px;
  letter-spacing: .05em;
  color: var(--clr-ink);
  margin-bottom: 24px;
}

/* === IN-ARTICLE IMAGES (inserted via Image Manager) === */
.art-img { display: block; height: auto; border-radius: 6px; margin: 24px auto; }
.art-img--small  { width: 33%; }
.art-img--medium { width: 66%; }
.art-img--full   { width: 100%; }
@media (max-width: 600px) { .art-img--small, .art-img--medium { width: 100%; } }