/* =========================================================
   LIMBEST – Article page styles (all articles share this)
   ========================================================= */

.c-red { color: var(--red); }
.c-blue { color: var(--blue); }

/* Banner */
.art-hero {
  position: relative;
  margin-top: calc(var(--header-h) * -1);
  padding: calc(var(--header-h) + 56px) 0 56px;
  background: #eef0f3 url("../images/knowledge-hero-bg.jpg") center / cover no-repeat;
}
.art-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .7) 45%, rgba(255, 255, 255, 0) 85%);
}
.art-hero__inner { position: relative; }
.art-hero__label { font-size: 13px; letter-spacing: 1px; line-height: 1.6; text-transform: uppercase; color: var(--red); }
.art-hero__rule { display: block; width: 48px; height: 2px; margin: 10px 0 20px; background: var(--red); }
.art-hero__title { font-size: clamp(28px, 4vw, 44px); font-weight: 800; line-height: 1.15; text-transform: uppercase; }
.art-hero__text { max-width: 480px; margin-top: 14px; font-size: 15px; color: var(--navy); }

/* Article */
.art { padding: 40px 0 var(--space-main); }
.art__col { max-width: 760px; }

.art-tag {
  display: inline-block;
  padding: 3px 8px;
  background: #f9dcdc;
  color: var(--red);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.4;
  text-transform: uppercase;
}
.art-title { margin-top: 16px; font-size: clamp(24px, 3vw, 32px); font-weight: 700; line-height: 1.35; }

.art-cover { display: block; width: 100%; max-width: 460px; height: auto; margin: 28px 0 32px; }
.art-cover--wide { max-width: 100%; }

.art-body { font-size: 17px; line-height: 1.7; color: var(--body, #555B64); }
.art-body p { margin-top: 18px; }
.art-body .art-lead { margin-top: 0; }

.art-body h2 {
  margin-top: 40px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--blue);
}
.art-body h3 { margin-top: 28px; font-size: 18px; font-weight: 700; color: var(--blue); }
.art-body h2 + p,
.art-body h3 + p { margin-top: 12px; }

.art-terms { margin-top: 22px; }
.art-terms dt { margin-top: 18px; font-weight: 700; color: #3a4048; }
.art-terms dt:first-child { margin-top: 0; }
.art-terms dd { margin: 0; }

.art-body ol,
.art-body ul { margin: 16px 0 0; padding-left: 1.4em; }
.art-body li { padding: 2px 0; }
.art-body a { color: var(--blue); text-decoration: underline; }
.art-figure { display: block; width: 100%; height: auto; margin: 28px 0; }

@media (max-width: 600px) {
  .art-hero { padding: calc(var(--header-h) + 32px) 0 40px; }
  .art-hero::before { background: rgba(255, 255, 255, .78); }
  .art { padding-top: 28px; }
  .art-body { font-size: 16px; }
  .art-body h2 { margin-top: 32px; font-size: 18px; }
}
/* =========================================================
   Swiss grid – Article pages (desktop only)
   Left rail cols 1-3 holds the tag; content in cols 4-12;
   reading text in cols 4-10 (7 cols = comfortable line length)
   ========================================================= */
@media (min-width: 901px) {

  /* ---- Banner: text block 5 cols wide ---- */
  .art-hero__inner {
    container-type: inline-size;
    --w: 100cqw;
    --col: calc((var(--w) - 11 * var(--gutter)) / 12);
  }
  .art-hero__text {
    max-width: none;
    width: calc(var(--col) * 5 + var(--gutter) * 4);
  }

  /* ---- Article ---- */
  .art__col {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .art-tag   { grid-column: 1 / 4;  grid-row: 1; align-self: start; justify-self: start; margin-top: 10px; }
  .art-title { grid-column: 4 / 13; grid-row: 1; margin-top: 0; }
  .art-cover { grid-column: 4 / 13; grid-row: 2; }
  .art-body  { grid-column: 4 / 11; grid-row: 3; }
}