/**
 * ScaleCraft Resources - archive, cards, filter, and article prose
 * Version: 1.0 (draft) | 2026-09-01
 *
 * Depends on: bureau-tokens.css. Loaded site-wide.
 *
 * Covers:
 *   .sc-res        the archive page framing + the single-post header
 *   .sc-rc         one resource card (from [sc_resource_card])
 *   .e-filter      Elementor's Taxonomy Filter widget, restyled to Bureau
 *   .sc-prose      the article body - the_content() output, mapped to the
 *                  Bureau type scale (reusable for any long-form page)
 */

/* ================================================================
   ARCHIVE / SINGLE PAGE FRAMING
   ================================================================ */

.sc-res {
  box-sizing: border-box;
  width: 100%;
  padding: var(--sc-space-6) var(--sc-grid-margin);   /* 89 / 88 */
  background-color: var(--sc-chalk);
  color: var(--sc-graphite);
}
.sc-res * { box-sizing: border-box; }
.sc-res :where(h1, h2, h3, p, span) { color: inherit; }
.sc-res :where(h1, h2, h3, p) { margin: 0; }
.sc-res__inner { max-width: var(--sc-grid-max-width); margin: 0 auto; }

/* Pine opener (archive intro + single-post header) */
.sc-res--header {
  background-color: var(--sc-pine);
  color: var(--sc-chalk);
  padding-top: var(--sc-space-6);
  padding-bottom: var(--sc-space-6);
}
.sc-res--opener {
  background-color: var(--sc-pine);
  color: var(--sc-chalk);
  padding-top: var(--sc-space-7);
  padding-bottom: var(--sc-space-7);
}

.sc-res__backlink,
.sc-res__type {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-type-l1-size);
  letter-spacing: var(--sc-type-l1-tracking);
  text-transform: uppercase;
}

/* Back link: its own row at the top, dimmed */
.sc-res__backlink {
  display: block;
  width: fit-content;
  color: var(--sc-chalk-68);
  border-bottom: 0;
  margin-bottom: var(--sc-space-6);
}
.sc-res__backlink:hover { color: var(--sc-chalk); border-bottom: 0; }

/* Type: an eyebrow label directly above the title, full-strength Chalk,
   with a short Copper rule so it reads as a tag, not part of the link */
.sc-res__type {
  display: block;
  width: fit-content;
  color: var(--sc-chalk);
  margin-bottom: var(--sc-space-3);
  padding-top: var(--sc-space-2);
  border-top: 2px solid var(--sc-copper);
}

.sc-res__title { max-width: 24ch; }
.sc-res__meta {
  margin-top: var(--sc-space-4);
  font-family: var(--sc-font-mono);
  font-size: var(--sc-type-l1-size);
  letter-spacing: var(--sc-type-l1-tracking);
  text-transform: uppercase;
  color: var(--sc-chalk-68);
}

/* archive opener copy */
.sc-res__opener-copy { max-width: 46ch; }
.sc-res__opener-copy .sc-b1 { margin-top: var(--sc-space-3); color: var(--sc-chalk-68); }


/* ================================================================
   RESOURCE CARD  ([sc_resource_card])
   ================================================================ */

.sc-rc {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--sc-graphite-14);
  background-color: var(--sc-chalk);
  text-decoration: none;
  border-bottom: 1px solid var(--sc-graphite-14);   /* beat the global a { border-bottom } */
  color: var(--sc-graphite);
  transition: border-color var(--sc-duration-state) var(--sc-ease-struck);
}
.sc-rc:hover { border-color: var(--sc-copper); color: var(--sc-graphite); }

.sc-rc__media {
  aspect-ratio: 3 / 2;
  background-color: var(--sc-stone);
  overflow: hidden;
}
.sc-rc__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sc-rc__media-ph {
  display: flex;
  align-items: flex-end;
  height: 100%;
  padding: var(--sc-space-3);
  font-family: var(--sc-font-display);
  font-size: var(--sc-type-d4-size);
  line-height: 1.1;
  color: var(--sc-graphite);
}

.sc-rc__body {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-2);
  padding: var(--sc-space-4);
  flex: 1;
}
.sc-rc__type {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-type-l1-size);
  letter-spacing: var(--sc-type-l1-tracking);
  text-transform: uppercase;
  color: var(--sc-pine);
}
.sc-rc__title {
  font-family: var(--sc-font-display);
  font-weight: 400;
  font-size: var(--sc-type-d4-size);
  line-height: var(--sc-type-d4-line-height);
  letter-spacing: var(--sc-type-d4-tracking);
  margin: 0;
  text-wrap: balance;
}
.sc-rc__excerpt {
  font-family: var(--sc-font-body);
  font-size: var(--sc-type-b3-size);
  line-height: var(--sc-type-b3-line-height);
  color: rgba(27, 31, 35, .64);
  margin: 0;
}
.sc-rc__meta {
  margin-top: auto;
  padding-top: var(--sc-space-2);
  font-family: var(--sc-font-mono);
  font-size: var(--sc-type-l1-size);
  letter-spacing: var(--sc-type-l1-tracking);
  text-transform: uppercase;
  color: rgba(27, 31, 35, .5);
}


/* ================================================================
   ELEMENTOR TAXONOMY FILTER  -> Bureau pills
   Scope with .sc-res-filters (add that class to the widget's wrapper
   in Elementor Advanced settings).
   ================================================================ */

.sc-res-filters .e-filter,
.sc-res-filters .e-filter-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sc-res-filters .e-filter-item {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-type-l1-size);
  letter-spacing: var(--sc-type-l1-tracking);
  text-transform: uppercase;
  color: var(--sc-graphite);
  background: none;
  border: 1px solid var(--sc-graphite-14);
  border-radius: 0;
  padding: var(--sc-space-2) var(--sc-space-3);
  cursor: pointer;
  transition: border-color var(--sc-duration-state) var(--sc-ease-struck),
              color var(--sc-duration-state) var(--sc-ease-struck);
}
.sc-res-filters .e-filter-item:hover {
  border-color: var(--sc-copper);
  color: var(--sc-copper);
}
.sc-res-filters .e-filter-item.e-filter-item-active,
.sc-res-filters .e-filter-item[aria-pressed="true"] {
  background-color: var(--sc-pine);
  border-color: var(--sc-pine);
  color: var(--sc-chalk);
}


/* ================================================================
   LOOP GRID spacing (belt-and-suspenders; also set columns/gap in
   the widget)
   ================================================================ */

.sc-res-grid .elementor-loop-container,
.sc-res-grid .e-loop__container,
.sc-res-grid .e-collection-loop-layout {
  gap: var(--sc-grid-gutter);
}

/* the card must fill its loop cell so the hover border and the
   push-down "Read" meta line behave */
.sc-res-grid .e-loop-item,
.sc-res-grid [data-elementor-type="loop-item"] > * { height: 100%; }


/* ================================================================
   .sc-prose  -  the_content() output mapped to Bureau type
   Add class `sc-prose` to the Elementor Post Content widget (Advanced
   -> CSS Classes). Reusable for any long-form body.
   ================================================================ */

.sc-prose {
  max-width: 68ch;                 /* ~65-72 char measure */
  font-family: var(--sc-font-body);
  font-size: var(--sc-type-b1-size);
  line-height: var(--sc-type-b1-line-height);
  color: var(--sc-graphite);
}

/* `.sc-prose` sits on the Elementor Post Content widget, which wraps
   the_content() in .elementor-widget-container. The `.sc-prose > *`
   half of each selector covers using the class on a plain container. */

/* wipe inherited bottom margins - rhythm is top-margin only */
.sc-prose > *,
.sc-prose .elementor-widget-container > * { margin-bottom: 0; }

/* flow spacing between blocks */
.sc-prose > * + *,
.sc-prose .elementor-widget-container > * + * { margin-top: var(--sc-space-4); }

.sc-prose > h2 + *, .sc-prose .elementor-widget-container > h2 + *,
.sc-prose > h3 + *, .sc-prose .elementor-widget-container > h3 + * { margin-top: var(--sc-space-3); }

.sc-prose > h2, .sc-prose .elementor-widget-container > h2 { margin-top: var(--sc-space-6); }
.sc-prose > h3, .sc-prose .elementor-widget-container > h3 { margin-top: var(--sc-space-5); }
.sc-prose > blockquote, .sc-prose .elementor-widget-container > blockquote,
.sc-prose > .wp-block-quote, .sc-prose .elementor-widget-container > .wp-block-quote,
.sc-prose > figure, .sc-prose .elementor-widget-container > figure,
.sc-prose > .wp-block-image, .sc-prose .elementor-widget-container > .wp-block-image,
.sc-prose > hr, .sc-prose .elementor-widget-container > hr,
.sc-prose > .wp-block-separator, .sc-prose .elementor-widget-container > .wp-block-separator,
.sc-prose > pre, .sc-prose .elementor-widget-container > pre,
.sc-prose > .wp-block-code, .sc-prose .elementor-widget-container > .wp-block-code { margin-top: var(--sc-space-6); }

.sc-prose > :first-child,
.sc-prose .elementor-widget-container > :first-child { margin-top: 0; }

.sc-prose h2,
.sc-prose h3,
.sc-prose h4 {
  font-family: var(--sc-font-display);
  font-weight: 400;
  color: var(--sc-graphite);
  text-wrap: balance;
}
.sc-prose h2 {
  font-size: var(--sc-type-d3-size);
  line-height: var(--sc-type-d3-line-height);
  letter-spacing: var(--sc-type-d3-tracking);
}
.sc-prose h3 {
  font-size: var(--sc-type-d4-size);
  line-height: var(--sc-type-d4-line-height);
  letter-spacing: var(--sc-type-d4-tracking);
}
.sc-prose h4 {
  font-size: var(--sc-type-b1-size);
  font-weight: 500;
  font-family: var(--sc-font-body);
}

.sc-prose a {
  color: var(--sc-pine);
  text-decoration: none;
  border-bottom: 1px solid rgba(20, 69, 61, .35);
}
.sc-prose a:hover {
  color: var(--sc-copper);
  border-bottom-color: rgba(194, 103, 58, .5);
}

.sc-prose strong { font-weight: 600; }
.sc-prose em { font-style: italic; }

.sc-prose ul,
.sc-prose ol {
  padding-left: var(--sc-space-4);
}
.sc-prose li { margin-top: var(--sc-space-2); }
.sc-prose li:first-child { margin-top: 0; }
.sc-prose ul { list-style: none; }
.sc-prose ul > li { position: relative; }
.sc-prose ul > li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--sc-space-3));
  top: 0.7em;
  width: 6px;
  height: 1px;
  background-color: var(--sc-stone);
}

.sc-prose blockquote,
.sc-prose .wp-block-quote {
  padding-left: var(--sc-space-4);
  border-left: var(--sc-border-accent);   /* 2px Copper */
  font-family: var(--sc-font-display);
  font-weight: 400;
  font-size: var(--sc-type-d4-size);
  line-height: var(--sc-type-d4-line-height);
  letter-spacing: var(--sc-type-d4-tracking);
}
.sc-prose blockquote p { margin: 0; }
.sc-prose blockquote cite,
.sc-prose .wp-block-quote cite {
  display: block;
  margin-top: var(--sc-space-2);
  font-family: var(--sc-font-body);
  font-style: normal;
  font-size: var(--sc-type-b3-size);
  color: rgba(27, 31, 35, .6);
}

.sc-prose img {
  display: block;
  width: 100%;
  height: auto;
}
.sc-prose figcaption {
  margin-top: var(--sc-space-2);
  font-size: var(--sc-type-b3-size);
  color: rgba(27, 31, 35, .6);
}

.sc-prose hr,
.sc-prose .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--sc-stone);
}

.sc-prose pre,
.sc-prose .wp-block-code {
  padding: var(--sc-space-4);
  background-color: var(--sc-graphite);
  color: var(--sc-chalk);
  font-family: var(--sc-font-mono);
  font-size: var(--sc-type-b3-size);
  line-height: 1.6;
  overflow-x: auto;
}
.sc-prose :not(pre) > code {
  font-family: var(--sc-font-mono);
  font-size: 0.9em;
  background-color: rgba(27, 31, 35, .06);
  padding: 0.1em 0.35em;
}


/* ================================================================
   SINGLE post - body wrapper + soft CTA
   ================================================================ */

.sc-res--body { padding-top: var(--sc-space-6); padding-bottom: var(--sc-space-6); }

.sc-res--cta {
  background-color: var(--sc-graphite);
  color: var(--sc-chalk);
  padding-top: var(--sc-space-7);
  padding-bottom: var(--sc-space-7);
}
.sc-res__cta { max-width: 40rem; }
.sc-res__cta .sc-d2 { margin: 0; color: var(--sc-chalk); }
.sc-res__cta-row {
  margin-top: var(--sc-space-5);
  display: flex;
  gap: var(--sc-space-4);
  flex-wrap: wrap;
  align-items: center;
}
.sc-res__cta-row .sc-btn.sc-btn-tertiary { color: var(--sc-chalk); }
.sc-res__cta-row .sc-btn.sc-btn-tertiary:hover { color: var(--sc-copper); }


/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 1024px) {
  .sc-res { padding-left: var(--sc-space-5); padding-right: var(--sc-space-5); }
}
@media (max-width: 600px) {
  .sc-res {
    padding-top: var(--sc-space-5);
    padding-bottom: var(--sc-space-5);
    padding-left: var(--sc-space-3);
    padding-right: var(--sc-space-3);
  }
  .sc-res--opener, .sc-res--cta { padding-top: var(--sc-space-6); padding-bottom: var(--sc-space-6); }
}