/* ============================================================
   DCC-i CPD Pathways: index, cards, landing page (Stage 2b, 2b.1 layout refinements)
   File: css/dcci-pathways.css
   Every selector is scoped under .dcci-pw. Tokens follow the
   My Learning journey (css/dcci-learner-journey.css): deep purple
   #3E1E67, pink #e91e63, Montserrat, rounded, calm backgrounds.
   ============================================================ */

.dcci-pw-wrap { max-width: 1320px; margin: 0 auto; padding: 32px 24px 64px; box-sizing: border-box; }

.dcci-pw {
	--pw-purple: #3E1E67;
	--pw-purple-mid: #8d2f88;
	--pw-pink: #e91e63;
	--pw-pink-deep: #c2185b;
	--pw-ink: #2e1250;
	--pw-muted: #6b6580;
	--pw-line: rgba(62, 30, 103, 0.12);
	--pw-soft: #faf7fd;
	--pw-green: #1e7a4d;
	font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--pw-ink);
}
.dcci-pw *, .dcci-pw *::before, .dcci-pw *::after { box-sizing: border-box; }
.dcci-pw a:focus-visible, .dcci-pw button:focus-visible { outline: 3px solid var(--pw-pink); outline-offset: 3px; border-radius: 6px; }
.dcci-pw-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Index hero ── */
.dcci-pw-hero { background: #fff; border: 1px solid var(--pw-line); border-radius: 24px; padding: 32px 36px; margin: 0 0 24px; }
.dcci-pw-eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pw-pink-deep); }
.dcci-pw-hero__title { margin: 0 0 12px; font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.15; font-weight: 800; color: var(--pw-ink); }
.dcci-pw-hero__lead { margin: 0; max-width: 70ch; font-size: 1.02rem; line-height: 1.65; color: #4a3a5c; }

/* ── Pillar chips ── */
.dcci-pw-filter ul { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.dcci-pw-filter__chip {
	--pw-pillar: var(--pw-purple);
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px;
	border-radius: 999px; background: #fff; border: 2px solid var(--pw-line);
	color: var(--pw-ink) !important; font-weight: 700; font-size: .92rem; text-decoration: none !important;
	border-left: 6px solid var(--pw-pillar);
}
.dcci-pw-filter__chip:hover { border-color: var(--pw-pillar); }
.dcci-pw-filter__chip.is-active { background: var(--pw-pillar); border-color: var(--pw-pillar); color: #fff !important; }
.dcci-pw-filter__n { display: inline-block; min-width: 24px; padding: 1px 7px; border-radius: 999px; background: rgba(62, 30, 103, .08); font-size: .8rem; text-align: center; }
.dcci-pw-filter__chip.is-active .dcci-pw-filter__n { background: rgba(255, 255, 255, .25); }

/* 2b.1: pillars with no pathways yet stay listed but step back: smaller,
   lighter, no pillar-colour emphasis on hover. A selected empty pillar
   keeps the normal active style so the learner can see where they are. */
.dcci-pw-filter__chip.is-empty:not(.is-active) {
	min-height: 36px; padding: 5px 12px; font-size: .85rem; font-weight: 600;
	background: transparent; color: var(--pw-muted) !important;
	border-width: 1px; border-left-width: 3px; border-color: var(--pw-line);
	border-left-color: var(--pw-line); /* fallback where color-mix is unsupported */
	border-left-color: color-mix(in srgb, var(--pw-pillar) 40%, transparent);
}
.dcci-pw-filter__chip.is-empty:not(.is-active):hover { border-color: rgba(62, 30, 103, .22); border-left-color: color-mix(in srgb, var(--pw-pillar) 40%, transparent); background: #fff; }
.dcci-pw-filter__chip.is-empty .dcci-pw-filter__n { background: transparent; opacity: .75; }
/* 2b.2: a SELECTED empty pillar is clearly selected but not solid-filled:
   soft pillar tint, pillar-coloured border, text darkened for contrast. */
.dcci-pw-filter__chip.is-empty.is-active {
	background: #faf7fd; /* fallback where color-mix is unsupported */
	background: color-mix(in srgb, var(--pw-pillar) 10%, #fff);
	border-color: var(--pw-pillar);
	color: #2e1250 !important; /* fallback */
	color: color-mix(in srgb, var(--pw-pillar) 55%, #2e1250) !important;
}
.dcci-pw-filter__chip.is-empty.is-active .dcci-pw-filter__n { background: rgba(62, 30, 103, .08); }

/* ── Sections ── */
.dcci-pw-section { margin: 0 0 36px; }
.dcci-pw-h2 { margin: 0 0 16px; font-size: 1.25rem; font-weight: 800; color: var(--pw-ink); }
.dcci-pw-empty { padding: 24px; border-radius: 16px; background: var(--pw-soft); border: 1px dashed var(--pw-line); }
.dcci-pw-empty p { margin: 0 0 8px; }
.dcci-pw-empty a, .dcci-pw-aside a, .dcci-pw-more a, .dcci-pw-link { font-weight: 700; color: var(--pw-purple); }
.dcci-pw-aside { margin: 12px 0 0; padding: 18px 22px; border-radius: 16px; background: var(--pw-soft); border: 1px solid var(--pw-line); }
.dcci-pw-aside p { margin: 0; line-height: 1.6; }
.dcci-pw-more { margin: 12px 0 0; }

/* ── Card grid ── */
.dcci-pw-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1100px) { .dcci-pw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .dcci-pw-grid { grid-template-columns: 1fr; } }

/* 2b.1: one or two cards should not look stranded in a three-column grid.
   One card becomes a wide card (image beside text); two share a comfortable
   two-column row; three or more use the normal grid above. Same card markup. */
.dcci-pw-grid--n1 { grid-template-columns: 1fr; max-width: 980px; }
.dcci-pw-grid--n1 .dcci-pw-card { flex-direction: row; }
.dcci-pw-grid--n1 .dcci-pw-card__cover { flex: 0 0 42%; aspect-ratio: auto; min-height: 240px; }
.dcci-pw-grid--n1 .dcci-pw-card__body { padding: 24px 28px; }
.dcci-pw-grid--n1 .dcci-pw-card__title { font-size: 1.3rem; }
.dcci-pw-grid--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1000px; }
@media (max-width: 760px) {
	.dcci-pw-grid--n1 .dcci-pw-card { flex-direction: column; }
	.dcci-pw-grid--n1 .dcci-pw-card__cover { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
	.dcci-pw-grid--n1 .dcci-pw-card__body { padding: 18px 20px 20px; }
}
@media (max-width: 680px) { .dcci-pw-grid--n2 { grid-template-columns: 1fr; } }

.dcci-pw-card { display: flex; flex-direction: column; margin: 0; background: #fff; border: 1px solid var(--pw-line); border-radius: 20px; overflow: hidden; transition: box-shadow .15s ease, transform .15s ease; }
.dcci-pw-card:hover { box-shadow: 0 10px 26px rgba(46, 18, 80, .10); transform: translateY(-2px); }
.dcci-pw-card__cover { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #f3edf7, #fdeef4); }
.dcci-pw-card__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dcci-pw-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 18px 20px 20px; }
.dcci-pw-card__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.dcci-pw-chip { --pw-pillar: var(--pw-purple); display: inline-block; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--pw-line); border-left: 5px solid var(--pw-pillar); font-size: .78rem; font-weight: 700; color: var(--pw-ink) !important; text-decoration: none !important; }
.dcci-pw-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #f3edf7; font-size: .78rem; font-weight: 800; color: var(--pw-purple); }
.dcci-pw-card--in-progress .dcci-pw-badge { background: #fdeef4; color: var(--pw-pink-deep); }
.dcci-pw-card--complete .dcci-pw-badge { background: #eaf6ee; color: var(--pw-green); }
.dcci-pw-card--coming-soon .dcci-pw-badge { background: #fff4e0; color: #7a4a00; }
.dcci-pw-card__title { margin: 0 0 8px; font-size: 1.08rem; line-height: 1.3; font-weight: 800; }
.dcci-pw-card__title a { color: var(--pw-ink) !important; text-decoration: none !important; }
.dcci-pw-card__title a:hover { text-decoration: underline !important; text-underline-offset: 3px; }
.dcci-pw-card__summary { margin: 0 0 10px; font-size: .95rem; line-height: 1.55; color: #4a3a5c; }
.dcci-pw-card__facts { margin: 0 0 12px; font-size: .86rem; font-weight: 700; color: var(--pw-muted); }
.dcci-pw-card__progress { margin: 0 0 12px; }
.dcci-pw-bar { height: 8px; border-radius: 999px; background: #efe9f5; overflow: hidden; }
.dcci-pw-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--pw-purple-mid), var(--pw-pink)); }
.dcci-pw-card__count { margin: 6px 0 0; font-size: .85rem; font-weight: 700; color: var(--pw-muted); }
.dcci-pw-card__action { margin: auto 0 0; padding-top: 6px; }

/* ── Buttons ── */
.dcci-pw-btn, .dcci-pw button.dcci-pw-btn {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 20px;
	border-radius: 999px; border: 2px solid var(--pw-purple); background: #fff; color: var(--pw-purple) !important;
	font: inherit; font-weight: 800; font-size: .95rem; text-decoration: none !important; cursor: pointer; line-height: 1.2;
}
.dcci-pw-btn:hover { background: var(--pw-soft); }
.dcci-pw-btn--primary, .dcci-pw button.dcci-pw-btn--primary { background: var(--pw-pink-deep); border-color: var(--pw-pink-deep); color: #fff !important; }
.dcci-pw-btn--primary:hover, .dcci-pw button.dcci-pw-btn--primary:hover { background: #ad1457; border-color: #ad1457; }
.dcci-pw .dcci-pse-form { display: inline-block; margin: 0; }

/* ── Landing ── */
.dcci-pw-admin { margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: #fff7e6; border: 1px solid rgba(148, 67, 10, .25); font-size: .9rem; }
.dcci-pw-crumbs ol { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: .88rem; color: var(--pw-muted); }
.dcci-pw-crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.dcci-pw-crumbs a { color: var(--pw-purple); font-weight: 700; }
.dcci-pw-land-hero { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0 0 20px; background: #fff; border: 1px solid var(--pw-line); border-radius: 24px; overflow: hidden; }
.dcci-pw-land-hero--img { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.dcci-pw-land-hero__img img { display: block; width: 100%; height: 100%; min-height: 240px; object-fit: cover; }
.dcci-pw-land-hero__body { padding: 28px 32px; }
.dcci-pw-land-hero__title { margin: 0 0 12px; font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1.15; font-weight: 800; color: var(--pw-ink); }
.dcci-pw-land-hero__lead { margin: 0 0 16px; font-size: 1.05rem; line-height: 1.6; color: #4a3a5c; }
.dcci-pw-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dcci-pw-facts li { padding: 7px 13px; border-radius: 999px; background: #f3edf7; font-weight: 700; font-size: .88rem; }
@media (max-width: 860px) { .dcci-pw-land-hero--img { grid-template-columns: 1fr; } .dcci-pw-land-hero__body { padding: 22px 20px; } }

.dcci-pw-access { position: relative; margin: 0 0 32px; padding: 22px 24px; border-radius: 20px; background: var(--pw-soft); border: 1px solid var(--pw-line); }
.dcci-pw-access p { margin: 0 0 10px; line-height: 1.6; }
.dcci-pw-badge--lg { font-size: .88rem; padding: 6px 14px; }
.dcci-pw-access__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.dcci-pw-access__note { font-size: .92rem; color: #4a3a5c; }
.dcci-pw-access .dcci-pse-notice { margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; background: #fff7e6; border: 1px solid rgba(148, 67, 10, .25); }
.dcci-pw-access .dcci-pse-anchor { display: block; position: relative; top: -90px; visibility: hidden; height: 0; }

.dcci-pw-intro { max-width: 75ch; font-size: 1.02rem; line-height: 1.7; }
.dcci-pw-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 760px) { .dcci-pw-cols { grid-template-columns: 1fr; } }
.dcci-pw-list { margin: 0; padding-left: 20px; line-height: 1.7; }

.dcci-pw-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dcci-pw-stage { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; background: #fff; border: 1px solid var(--pw-line); border-radius: 16px; }
.dcci-pw-stage__n { flex: 0 0 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #f3edf7; color: var(--pw-purple); font-weight: 800; }
.dcci-pw-stage.is-done .dcci-pw-stage__n { background: #eaf6ee; color: var(--pw-green); }
.dcci-pw-stage__title { margin: 4px 0 4px; font-size: 1rem; font-weight: 800; }
.dcci-pw-stage__title a { color: var(--pw-ink); }
.dcci-pw-stage__done { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: #eaf6ee; color: var(--pw-green); font-size: .75rem; font-weight: 800; vertical-align: middle; }
.dcci-pw-stage__prompt { margin: 0; color: #4a3a5c; line-height: 1.55; }

.dcci-pw-related { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dcci-pw-related li { padding: 10px 14px; background: #fff; border: 1px solid var(--pw-line); border-radius: 12px; }
.dcci-pw-related__kind { display: inline-block; min-width: 70px; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--pw-muted); }
.dcci-pw-related a { font-weight: 700; color: var(--pw-purple); }

@media (prefers-reduced-motion: reduce) { .dcci-pw-card, .dcci-pw-card:hover { transition: none; transform: none; } }