/* ========================================================================== 
   School of Pharmacy: new reusable content patterns

   These .sop-* classes are global, reusable patterns. They can be used on
   Pharmacy pages outside the Workforce Hub when the same visual treatment is
   needed. Combine base classes and modifiers instead of creating a new class
   for each page.

   T4 examples:
   - Add a class to a plugin with class:{sop-card--flat}
   - Open a section with before:{<section class="sop-section">}
   - Close an injected wrapper on the final item with after:{</section>}
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sections

   Add .sop-section to a section wrapper for consistent vertical spacing.
   Combine it with .sop-section--padded and one color modifier when the section
   needs an inset panel treatment.

   Example:
   <section class="sop-section sop-section--padded sop-section--gray">...</section>
   -------------------------------------------------------------------------- */

.sop-section {
  margin-block: 3rem;
}

/* Adds responsive internal spacing; this does not add a background color. */
.sop-section--padded {
  padding: clamp(1.5rem, 4vw, 3rem);
}

/* Light neutral section background for grouping related content. */
.sop-section--gray {
  background-color: rgba(0, 0, 0, 0.035);
}

/* Dark section background. Descendant text inherits white by default. */
.sop-section--black {
  background-color: var(--vcu-black);
  color: var(--vcu-white);
}

/* --------------------------------------------------------------------------
   Eyebrow label

   Use for a short category or introductory label above a heading. Keep the
   text concise because it is displayed in uppercase.

   The class can be applied directly to a paragraph; no nested span is needed.

   Example:
   <p class="sop-eyebrow">Ways to Partner</p>
   -------------------------------------------------------------------------- */

.sop-eyebrow {
  display: inline-block;
  padding: 0.35rem 0.65rem;
  background-color: var(--vcu-gold);
  color: var(--vcu-black);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Keeps a paragraph-based eyebrow compact while separating it from content. */
p.sop-eyebrow {
  margin-block: 0 1rem;
}

/* --------------------------------------------------------------------------
   Button groups

   Add .sop-actions to a Plugin - General Content item through its class
   injector. Editors can then use the normal T4 button format; no div or span
   wrapper needs to be added in the WYSIWYG. Consecutive button paragraphs sit
   in a row when space permits and wrap cleanly on narrow screens. The first
   button keeps its Compass treatment and subsequent buttons become outlines.

   Injector:
   class:{sop-actions}

   Expected WYSIWYG output:
   <p class="t4_button"><a href="...">Primary action</a></p>
   <p class="t4_button"><a href="...">Secondary action</a></p>

   .sop-button--outline remains available when one specific button needs the
   outline treatment outside a .sop-actions group.
   -------------------------------------------------------------------------- */

.sop-actions .t4_button {
  display: inline-block;
  margin: 1.5rem 0.75rem 0 0;
}

.sop-actions .t4_button + .t4_button,
.sop-button--outline,
.sop-button--outline a {
  --cwf-button--background-color: transparent;
  --cwf-button--border-color: currentColor;
}

/* --------------------------------------------------------------------------
   Card modifiers

   Apply these through the Plugin - Card class injector. They can be combined:
   class:{sop-card--flat sop-card--accent-top}

   .sop-card--flat removes the Pharmacy global card shadow.
   .sop-card--accent-top adds a gold top rule without changing the card theme.
   -------------------------------------------------------------------------- */

.sop-card--flat.plugin-card {
  box-shadow: none;
}

.sop-card--accent-top.plugin-card {
  border-top: 0.25rem solid var(--vcu-gold);
}

/* --------------------------------------------------------------------------
   Responsive card grid

   Wrap sibling Plugin - Card items in .sop-card-grid. The grid automatically
   chooses the number of columns from the available content width, so it also
   works in a Compass main column beside sub-navigation.

   The default minimum card width is 15rem. A page-specific class may adjust
   it by setting --sop-card-min without rewriting the grid.

   Example markup:
   <div class="sop-card-grid">[Plugin - Card items]</div>

   Example override:
   .my-card-grid { --sop-card-min: 20rem; }
   -------------------------------------------------------------------------- */

.sop-card-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--sop-card-min, 15rem)), 1fr)
  );
  gap: 1rem;
}

.sop-card-grid > .plugin-card {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Metadata tags

   Use an unordered list for short, noninteractive descriptors. These are
   labels, not filtering controls. Use links or buttons instead when a tag must
   perform an action.

   Example:
   <ul class="sop-tags"><li>Applied research</li><li>Talent development</li></ul>
   -------------------------------------------------------------------------- */

.sop-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 1rem 0 0;
  list-style: none;
}

.sop-tags li {
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background-color: rgba(0, 0, 0, 0.055);
  font-size: 0.8rem;
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Checklist

   Adds a decorative gold check to each item while preserving normal list
   semantics. Use for benefits, capabilities or other affirmative lists.

   Example:
   <ul class="sop-checklist"><li>Library access at VCU</li></ul>
   -------------------------------------------------------------------------- */

.sop-checklist {
  padding: 0;
  margin: 1rem 0 0;
  list-style: none;
}

.sop-checklist li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
}

.sop-checklist li::before {
  position: absolute;
  left: 0;
  color: var(--vcu-gold);
  content: "\2713";
  font-weight: 700;
}