/**
 * @file
 * Branded "Case studies by business function" term landing.
 *
 * The core taxonomy_term view lists the tagged case studies as .dsp-card teasers
 * (see node--case_study--teaser.html.twig). That card CSS otherwise lives only
 * inside the Case Studies node body <style>, so here we port it into global
 * theme CSS — scoped to .page-vocabulary-business-function so it can only ever
 * affect the business-function term pages. Tokens mapped to the theme's --cx-*.
 */

/* ── Page hero ─────────────────────────────────────────────────────────────*/
.page-vocabulary-business-function .ds-breadcrumb,
.page-vocabulary-business-function .block-page-title-block,
.page-vocabulary-business-function .block-system-main-block {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 64px;
  padding-right: 64px;
}
.page-vocabulary-business-function .block-page-title-block { margin-top: 48px; }
.page-vocabulary-business-function .block-page-title-block::before {
  content: "Case studies · by business function";
  display: block;
  font-family: var(--cx-fmono);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cx-accent);
  margin-bottom: 14px;
}
.page-vocabulary-business-function .block-page-title-block .title {
  font-family: var(--cx-fhead);
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.03;
  letter-spacing: -.02em;
  color: var(--cx-white);
  margin: 0;
}
.page-vocabulary-business-function .block-system-main-block { padding-bottom: 90px; }
.page-vocabulary-business-function .view-taxonomy-term .view-header { margin: 6px 0 26px; color: var(--cx-n300); max-width: 60ch; }
.page-vocabulary-business-function .view-empty { color: var(--cx-n500); font-family: var(--cx-fmono); font-size: .9rem; padding: 24px 0 60px; }

/* ── Responsive card grid (view-content.row > views-row > a.dsp-card) ────────*/
.page-vocabulary-business-function .view-taxonomy-term .view-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 8px;
}
.page-vocabulary-business-function .view-taxonomy-term .views-row { display: block; }
@media (max-width: 1100px) {
  .page-vocabulary-business-function .view-taxonomy-term .view-content { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .page-vocabulary-business-function .view-taxonomy-term .view-content { grid-template-columns: 1fr; }
  .page-vocabulary-business-function .ds-breadcrumb,
  .page-vocabulary-business-function .block-page-title-block,
  .page-vocabulary-business-function .block-system-main-block { padding-left: 22px; padding-right: 22px; }
}

/* ── Ported .dsp-card styling (tokens mapped to --cx-*) ──────────────────────*/
@keyframes dsp-flow { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.page-vocabulary-business-function .dsp-card { position: relative; background: rgba(255,255,255,.025); border: 0; border-left: 2px solid rgba(255,255,255,.06); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; transition: transform .45s var(--cx-ease), background .35s var(--cx-ease), border-left-color .35s var(--cx-ease), box-shadow .35s var(--cx-ease); }
.page-vocabulary-business-function .dsp-card:hover { transform: translateY(-4px); background: rgba(var(--cx-accent-rgb),.06); border-left-color: var(--cx-accent); box-shadow: 0 24px 70px -32px rgba(var(--cx-accent-rgb),.6); }
.page-vocabulary-business-function .dsp-card .img { position: relative; height: 200px; background: var(--cx-card); overflow: hidden; }
.page-vocabulary-business-function .dsp-card .img .flow { position: absolute; inset: -30%; background: conic-gradient(from 30deg at 60% 40%, rgba(var(--cx-accent-rgb),0), rgba(var(--cx-accent-rgb),.32), rgba(var(--cx-accent-rgb),0), rgba(var(--cx-accent-rgb),.12), rgba(var(--cx-accent-rgb),0)); filter: blur(28px); opacity: .76; animation: dsp-flow 22s linear infinite; }
.page-vocabulary-business-function .dsp-card .img .stamp { position: absolute; left: 18px; bottom: 16px; padding: 6px 12px; background: rgba(var(--cx-ink-deep-rgb), .62); font-family: var(--cx-fmono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cx-white); }
.page-vocabulary-business-function .dsp-card .body { padding: 28px 26px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.page-vocabulary-business-function .dsp-card h3 { font-family: var(--cx-fhead); font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.2; color: var(--cx-white); margin: 0; }
.page-vocabulary-business-function .dsp-card .desc { font-size: .95rem; color: var(--cx-n300); line-height: 1.5; }
.page-vocabulary-business-function .dsp-card .meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.page-vocabulary-business-function .dsp-card .meta span { font-family: var(--cx-fmono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cx-n300); padding: 6px 10px; border-left: 1px solid rgba(var(--cx-accent-rgb),.4); background: rgba(255,255,255,.02); }
.page-vocabulary-business-function .dsp-card .go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--cx-fmono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cx-accent); }
.page-vocabulary-business-function .dsp-card .go span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; outline: 1px solid var(--cx-accent); color: var(--cx-accent); }