/* SourcingPromo — case studies, guides, downloads, decoration methods and /resources/.
   Every rule here is prefixed `content-` so it can never reach another page's markup, and every
   value comes from tokens.css. Mobile first: one column, then the two-column reading layouts from
   960px. Nothing here needs JavaScript; the only interactive part is the download gate, which is
   the shared disclosure behaviour driven by data attributes. */

/* ---------- page rhythm ---------- */
.content-body{padding-top:0}
.content-intro{max-width:70ch;margin-top:.5rem}
.content-section-title{margin-bottom:1.25rem}
.content-after{margin-top:1.25rem}
.content-text{color:var(--ink-2);max-width:70ch;line-height:1.6}
.content-updated{margin-top:-.25rem}

/* ---------- chip rows (topics, categories, methods) ---------- */
.content-chips{display:block}
.content-chips__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.content-chips__list--plain{flex-wrap:wrap}
.content-chip{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.32rem .7rem;border:1px solid var(--line-strong);border-radius:var(--radius-pill);
  background:var(--paper);color:var(--ink-2);font-size:var(--step--1);font-weight:560;
  text-decoration:none;line-height:1.3;
}
.content-chip:hover{border-color:var(--ink);color:var(--ink);background:var(--sand)}
.content-chip__count{
  font-size:.75rem;color:var(--ink-3);font-variant-numeric:tabular-nums;
  background:var(--sand-2);border-radius:var(--radius-pill);padding:0 .4rem;
}

/* ---------- cards ---------- */
.content-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.content-grid--tight{grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:1rem}
.content-grid--docs{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.content-card{min-width:0}
.content-card__media{display:block}
.content-card__img{width:100%;height:100%;object-fit:cover}
.content-card__placeholder{width:100%;height:100%;letter-spacing:.08em}
.content-card__lead{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.content-card__meta{margin:0}
.content-card__action{margin-top:auto;padding-top:.9rem}
.content-card--method .card__body{gap:.6rem}
.content-card--doc .card__body{gap:.55rem}
.content-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:0}

/* ---------- empty states ---------- */
.content-empty{max-width:60ch;margin-inline:auto;display:flex;flex-direction:column;gap:.7rem}
.content-empty p{margin:0}
.content-empty__actions{justify-content:center;margin-top:.4rem}

/* ---------- guides (grouped on the hub, listed on a topic page) ---------- */
.content-group{border-top:1px solid var(--line);padding-top:1.5rem;margin-top:2rem}
.content-group:first-of-type{margin-top:0}
.content-group__head{display:flex;flex-direction:column;gap:.3rem}
.content-group__head h2{font-size:var(--step-2)}
.content-group__head h2 a{text-decoration:none}
.content-group__desc{max-width:66ch;margin:0}
.content-group__foot{margin-top:.9rem}
.content-guides{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.9rem}
.content-guide{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
  padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.4rem;
}
.content-guide:hover{border-color:var(--line-strong)}
.content-guide__title{font-size:var(--step-1);letter-spacing:-.01em}
.content-guide__title a{text-decoration:none}
.content-guide__answer{margin:0;color:var(--ink-2);font-size:.9375rem;line-height:1.55;max-width:70ch}
.content-guide__meta{margin:0}

/* ---------- one guide ---------- */
.content-lead{
  border-left:3px solid var(--brand);background:var(--brand-tint);
  border-radius:0 var(--radius) var(--radius) 0;padding:1rem 1.15rem;
  display:flex;flex-direction:column;gap:.35rem;max-width:72ch;
}
.content-lead__label{
  font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand-dark);margin:0;
}
.content-lead__text{margin:0;font-size:var(--step-1);line-height:1.5;color:var(--ink)}
.content-scope{
  border:1px dashed var(--line-strong);border-radius:var(--radius);
  padding:.9rem 1.05rem;max-width:72ch;background:var(--sand);
}
.content-scope__title{font-size:var(--step--1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.3rem}
.content-scope p{margin:0;color:var(--ink-2);font-size:.9375rem;line-height:1.55}

/* ---------- two-column reading layouts ---------- */
.content-guide-layout,
.content-case,
.content-method,
.content-topic{display:grid;gap:clamp(1.5rem,4vw,2.75rem)}
.content-guide-layout__main,
.content-case__main,
.content-method__main,
.content-topic__main{min-width:0}
@media (min-width:960px){
  .content-guide-layout{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
  .content-case,
  .content-method{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
  .content-topic{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr)}
  .content-guide-layout__aside,
  .content-case__aside,
  .content-method__aside,
  .content-topic__aside{position:sticky;top:5.5rem;align-self:start}
}
.content-prose{max-width:var(--maxw-narrow)}
.content-split{display:grid;gap:1rem}
@media (min-width:720px){.content-split{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}}

/* ---------- blocks inside a single record ---------- */
.content-block{display:flex;flex-direction:column;gap:.6rem;min-width:0}
.content-block h2{font-size:var(--step-2)}
.content-block h3{font-size:var(--step-1)}
.content-block__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1rem;margin-bottom:1rem}
.content-block__head h2{margin:0}
.content-client{max-width:60ch}
.content-facts{margin-top:.35rem}
.content-list{margin:0;padding-left:1.15rem;display:grid;gap:.45rem;color:var(--ink-2);max-width:72ch}
.content-list li{line-height:1.55}
.content-list--prepare{max-width:66ch}
.content-steps{list-style:none;margin:0;padding:0;display:grid;gap:.85rem;counter-reset:content-step}
.content-steps>li{
  position:relative;padding-left:2.2rem;counter-increment:content-step;
  color:var(--ink-2);line-height:1.55;max-width:70ch;
}
.content-steps>li::before{
  content:counter(content-step);position:absolute;left:0;top:0;
  width:1.55rem;height:1.55rem;border-radius:var(--radius-pill);
  background:var(--brand-tint);color:var(--brand-dark);
  font-size:.75rem;font-weight:700;display:grid;place-items:center;
}
.content-figures{list-style:none;margin:0;padding:0;display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.content-figure{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--sand)}
.content-figure__img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}

/* ---------- side panels ---------- */
.content-panel{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.7rem;min-width:0;
}
.content-panel--sand{background:var(--sand)}
.content-panel--ok{background:#E8F3EE;border-color:#CBE3D8}
.content-panel__title{font-size:var(--step-1)}
.content-links{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.content-links li{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.content-links a{font-weight:560;text-decoration:none;border-bottom:1px solid var(--line-strong);align-self:flex-start}
.content-links a:hover{border-bottom-color:var(--brand)}
.content-links__note{display:block;line-height:1.45}
.content-back{margin-top:1.5rem}

/* ---------- topic pages ---------- */
.content-topic__aside{display:flex;flex-direction:column;gap:.6rem}

/* ---------- hub blocks ---------- */
.content-hubcard{
  display:grid;gap:1.25rem;align-items:start;
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.1rem,2.5vw,1.75rem);
  background:var(--sand);
}
@media (min-width:860px){.content-hubcard{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.content-hubcard__text{display:flex;flex-direction:column;gap:.7rem}
.content-explanation,.content-explain__grid{display:grid;gap:1.25rem}
@media (min-width:720px){.content-explain__grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}}
.content-requested{padding-top:0}

/* ---------- the download gate ----------
   A button, then the email form inside the shared disclosure panel. The form reuses .form-inquiry,
   .field and .form-actions from forms.css; only the wrapper and the spacing are new. */
.content-gate{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;margin-top:.4rem}
.content-gate--direct{gap:.6rem}
.content-gate--empty{margin:0;max-width:50ch;line-height:1.5}
.content-gate__open{flex:0 0 auto}
.content-gate__meta{line-height:1.4}
.content-gate__inner{
  display:flex;flex-direction:column;gap:.9rem;margin-top:.9rem;
  border-top:1px solid var(--line);padding-top:.9rem;
}
.content-gate__note{
  margin:0;font-size:var(--step--1);line-height:1.5;color:var(--ink-2);max-width:58ch;
}
.content-gate__form{display:flex;flex-direction:column;gap:.9rem;min-width:0}
.content-gate__form .form-actions{border-top:0;padding-top:0}
.content-gate__form .field>input{max-width:26rem}

/* The disclosure panel is animated by the behaviour runtime, so nothing here may set its height. */
.content-gate [data-panel]{min-width:0}
.content-gate>[data-trigger]{cursor:pointer}

/* ---------- focus ---------- */
.content-chip:focus-visible,
.content-guide__title a:focus-visible,
.content-links a:focus-visible,
.content-gate__open:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--radius-sm)}