/* GENERATED by packages/design-system/scripts/build-wp.mjs in lonestar-launchpad-com. Do not edit; regenerate. */
.lslp-resource-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lslp-space-6);
  align-items: start;                 /* cards size to their own content */
}@media (max-width: 1024px){
 .lslp-resource-grid { grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 767px){
 .lslp-resource-grid { grid-template-columns: 1fr; }}


/* COMPONENT: resource-card */
.lslp-resource-card {
  position: relative;              /* anchors the title link's card-wide hit area */
  display: flex;
  flex-direction: column;
  gap: var(--lslp-space-4);
  padding: var(--lslp-space-5);
  background: var(--lslp-surface);
  /* A 1px rule replaces the live card's rejected box-shadow. */
  border: 1px solid var(--lslp-line);
}
.lslp-resource-card__title {
  font-family: var(--lslp-font-serif);
  font-size: var(--lslp-h3-size);
  line-height: var(--lslp-h3-line);
  letter-spacing: var(--lslp-h3-tracking);
  font-weight: var(--lslp-h3-weight);
  color: var(--lslp-navy);
}
.lslp-resource-card__title a { text-decoration: none; }
/* The title link covers the whole card, so the card is clickable without
   adding a second link to the same target for screen readers to announce. */
.lslp-resource-card__title a::after { content: ""; position: absolute; inset: 0; }
.lslp-resource-card__title a:hover { text-decoration: underline; }
.lslp-resource-card__desc {
  font-size: var(--lslp-body-sm-size);
  line-height: var(--lslp-body-sm-line);
  color: var(--lslp-text-muted);
}

/* --- resource-card: optional slots -----------------------------------------
   Added for the Resource Library hub, where the card carries a logo, topic
   tags, a delivery mode and an explicit CTA. The resource template simply
   omits them, so this is additive — one definition, two consumers.

   NOTE: this component now has two callers and has outgrown a file named for
   the resource page. It wants promoting to a shared layer. Logged, not done.
   --------------------------------------------------------------------------- */
.lslp-resource-card__logo {
  display: block;
  width: auto;
  max-width: 60px;
  max-height: 60px;
  height: auto;
}
.lslp-resource-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lslp-space-2);
}
/* Outlined, not filled — the filled chips were the remaining "coloured block". */
.lslp-resource-card__tag {
  padding: 2px var(--lslp-space-2);
  border: 1px solid var(--lslp-line);
  font-family: var(--lslp-font-mono);
  font-size: var(--lslp-mono-size);
  font-weight: var(--lslp-mono-weight);
  color: var(--lslp-text-muted);
}
.lslp-resource-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lslp-space-3);
  margin-top: auto;                /* pin to the bottom, whatever the height */
  padding-top: var(--lslp-space-4);
  border-top: 1px solid var(--lslp-line);
}
/* --- resource-card: archive slots ------------------------------------------
   Added for the archive/listing template (blog, category, tag, search), where
   the card leads with a featured image and carries a byline. Additive again —
   the hub and the resource template simply omit them. THIRD consumer now.
   --------------------------------------------------------------------------- */
.lslp-resource-card__media {
  margin: calc(var(--lslp-space-5) * -1) calc(var(--lslp-space-5) * -1) 0;
}
.lslp-resource-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.lslp-resource-card__byline {
  font-family: var(--lslp-font-mono);
  font-size: var(--lslp-mono-size);
  color: var(--lslp-text-muted);
}

.lslp-resource-card__mode {
  font-family: var(--lslp-font-mono);
  font-size: var(--lslp-mono-size);
  color: var(--lslp-text-muted);
}

/* --- resource-card: category accent ----------------------------------------
   Category colour rides the border and the eyebrow — never a fill. Matches the
   design system's "category by eyebrow, never by fill" and the punchlist's
   "keep the category colors as accents/outlines". The accent arrives as a
   custom property set per card, so a fifth category needs no new rule here.
   --------------------------------------------------------------------------- */
.lslp-resource-card { border-color: var(--lslp-accent, var(--lslp-line)); }
.lslp-resource-card .lslp-category { color: var(--lslp-accent, var(--lslp-red)); }

/* Card head: logo left, category eyebrow right. The eyebrow is suppressed while
   a category filter is active — it only repeats what the filter already says. */
.lslp-resource-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--lslp-space-4);
}

/* --- Tag list (tag archives are real destinations — cards link to them) ----- */
.lslp-resource-card__tag a { color: inherit; text-decoration: none; }
.lslp-resource-card__tag:hover { border-color: var(--lslp-navy); }

/* ===========================================================================
   resource-card--hub — the hub comps. White card, hairline border, an 8px bar
   in the category accent across the top; logo left, category right; title;
   star-separated topics; the excerpt clamped to three lines; Cost - Format;
   Quick view + View resource. The card is not one big link: it has two
   actions, so the title and the buttons are the links.
   =========================================================================== */
.lslp-resource-card--hub {
  gap: var(--lslp-space-3);
  padding: var(--lslp-space-5);
  border: 1px solid var(--lslp-line);
  border-top: 8px solid var(--lslp-accent, var(--lslp-navy));
}
.lslp-resource-card--hub .lslp-resource-card__title a::after { content: none; }
.lslp-resource-card--hub .lslp-resource-card__logo { max-width: 56px; max-height: 48px; }
.lslp-resource-card__cat {
  margin: 0;
  font-family: var(--lslp-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lslp-accent, var(--lslp-red));
}
.lslp-resource-card--hub .lslp-resource-card__head { align-items: center; min-height: 48px; }
.lslp-resource-card--hub .lslp-resource-card__title {
  font-size: var(--lslp-h4-size);
  line-height: 1.2;
  font-weight: 600;
}
.lslp-resource-card__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--lslp-font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--lslp-slate);
}
/* The ★ trails its tag inside a non-breaking item, so it can end a line but never
   start one. */
.lslp-resource-card__topics li { white-space: nowrap; }
.lslp-resource-card__topics li:not(:last-child)::after {
  content: "★";
  margin-inline: var(--lslp-space-3);
  color: var(--lslp-red);
}
.lslp-resource-card--hub .lslp-resource-card__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;                 /* no padding here: a clamped box shows its 4th line in it */
  font-size: 15px;
  line-height: 1.45;
  color: var(--lslp-ink);
}
.lslp-resource-card__meta { display: flex; flex-wrap: wrap; gap: var(--lslp-space-2) var(--lslp-space-7); margin: 0; }
.lslp-resource-card--hub .lslp-resource-card__meta { margin-top: var(--lslp-space-1); padding-top: var(--lslp-space-4); border-top: 1px solid var(--lslp-line); }
.lslp-resource-card__meta dt {
  font-family: var(--lslp-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lslp-slate);
}
.lslp-resource-card__meta dd { margin: 2px 0 0; font-size: 15px; font-weight: 700; color: var(--lslp-navy); }
.lslp-resource-card__meta a { color: inherit; }
.lslp-resource-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lslp-space-3);
  margin-top: auto;
  padding-top: var(--lslp-space-4);
}
.lslp-resource-card__actions > [hidden] { display: none; }
.lslp-resource-card__actions > [hidden] + .lslp-btn { grid-column: 1 / -1; }
.lslp-resource-card--hub .lslp-btn,
.lslp-quickview .lslp-btn {
  padding: var(--lslp-space-3);
  white-space: nowrap;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* ---------------------------------------------------------------------------
   Quick view — the card expands IN PLACE (resource_cards.png): a full fill in
   the category accent, white type, the excerpt truncated at the last whole line
   that fits (the script measures it), Close + View resource.

   TRANSITION: the 8px accent bar grows down to fill the card (clip-path on a fill
   layer, 300ms ease-out) while the two faces cross-fade (opacity). Close reverses
   it. Only clip-path, opacity and colour change: nothing is laid out again, and the
   card keeps its size because the back face sits over the front. Under
   prefers-reduced-motion it's instant.

   BRAND OVERRIDE, deliberate and documented (guides/brand.md, "Category fills"):
   the no-fill rule is for grid cards at rest. This is a transient, user-invoked
   state, and the client's comp specifies the fill. Every accent carries white
   text at AA or better: red 5.9:1, text-gold 5.1:1, slate 7.5:1, navy 14.5:1.
   --------------------------------------------------------------------------- */
/* The front face groups topics · excerpt · meta; it keeps the card's rhythm. */
.lslp-resource-card__front { display: flex; flex-direction: column; gap: var(--lslp-space-3); }
.lslp-resource-card__more[hidden] { display: none; }

/* The fill layer covers the whole card, borders included, and at rest is clipped to
   exactly the 8px top bar, so it IS the bar. Expanded, the clip opens downward. */
.lslp-resource-card--hub { --qv-t: 300ms; }
.lslp-resource-card--hub::before {
  content: "";
  position: absolute;
  inset: -8px -1px -1px -1px;               /* over the 8px top border and the 1px sides */
  z-index: 0;
  background: var(--lslp-accent, var(--lslp-navy));
  clip-path: inset(0 0 calc(100% - 8px) 0);
  transition: clip-path var(--qv-t) ease-out;
  pointer-events: none;
}
.lslp-resource-card--hub > * { position: relative; z-index: 1; }
.lslp-resource-card--hub.is-expanded::before { clip-path: inset(0 0 0 0); }

/* Faces: the back is laid over the front inside one box, so the card never changes
   size. The front keeps its place in the flow (it sets the height) and fades out. */
.lslp-resource-card__faces { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.lslp-resource-card__front { flex: 1 1 auto; transition: opacity var(--qv-t) ease-out, visibility 0s linear 0s; }
.lslp-resource-card__more {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lslp-space-3);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--qv-t) ease-out, visibility 0s linear var(--qv-t);
}
.lslp-resource-card--hub.is-expanded .lslp-resource-card__front {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--qv-t) ease-out, visibility 0s linear var(--qv-t);
}
.lslp-resource-card--hub.is-expanded .lslp-resource-card__more {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--qv-t) ease-out, visibility 0s linear 0s;
}

/* Colour changes ride the same 300ms (paint only, no layout). */
.lslp-resource-card--hub .lslp-resource-card__title a,
.lslp-resource-card--hub .lslp-resource-card__cat,
.lslp-resource-card--hub .lslp-resource-card__actions .lslp-btn {
  transition: color var(--qv-t) ease-out, background-color var(--qv-t) ease-out, border-color var(--qv-t) ease-out;
}
.lslp-resource-card--hub.is-expanded .lslp-resource-card__topics,
.lslp-resource-card--hub.is-expanded .lslp-resource-card__topics li::after { color: var(--lslp-white); }
.lslp-resource-card--hub.is-expanded .lslp-resource-card__title a,
.lslp-resource-card--hub.is-expanded .lslp-resource-card__cat { color: var(--lslp-white); }
/* Logos are arbitrary artwork (some reversed, some on their own ground), so they sit
   on a white tile rather than being recoloured. */
.lslp-resource-card--hub.is-expanded .lslp-resource-card__logo { outline: 4px solid var(--lslp-white); background: var(--lslp-white); }

/* The text box is sized by the script to exactly N whole lines (N = what fits), and
   line-clamp puts the ellipsis on line N. Sized to whole lines, nothing half-shows. */
.lslp-resource-card__full {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: none;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--lslp-white);
}
.lslp-resource-card--hub.is-expanded .lslp-resource-card__toggle {
  background: var(--lslp-white);
  border-color: var(--lslp-white);
  color: var(--lslp-ink);
}
/* A white edge on View resource: invisible weight on red/gold/slate, and on the navy
   (Readiness) card it is the comp's outline button — without naming a category. */
.lslp-resource-card--hub.is-expanded .lslp-resource-card__view { border-color: var(--lslp-white); }
.lslp-resource-card--hub.is-expanded .lslp-btn:focus-visible { outline-color: var(--lslp-white); }

@media (prefers-reduced-motion: reduce) {
  .lslp-resource-card--hub { --qv-t: 0ms; }
}

/* Phone: card meta and topics lift from 11px to 12px. */
@media (max-width: 767px) {
  .lslp-resource-card__topics, .lslp-resource-card__meta dt { font-size: 12px; }
}