/**
 * DCCi Portal — Unified Design System
 *
 * Shared visual language for Resource Library (#3498db blue)
 * and Interactive Tools (#9b59b6 purple).
 *
 * ⚠️  All custom properties are scoped inside page classes —
 *     NOT in :root {} — to avoid overriding the portal's
 *     existing --dcci-* variables (especially --dcci-border).
 *
 * Location: wp-content/themes/dcci-portal-child/css/dcci-unified-system.css
 */

/* =========================================================
 * 0. DESIGN TOKENS — scoped to page wrapper only
 * ========================================================= */

.dcci-practice-library-page,
.dcci-tools-library-page {
    --ds-radius-md:   14px;
    --ds-radius-lg:   20px;
    --ds-white:       #ffffff;
    --ds-border:      #e5e7eb;
    --ds-text-body:   #374151;
    --ds-text-muted:  #6b7280;
    --ds-heading-col: #1a1a2e;
}

/* =========================================================
 * 1. HERO — BLOB SHAPES
 * ========================================================= */

.dcci-page-hero-blobs {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.dcci-page-hero-blob {
    position: absolute;
    opacity: 0.07;
}

.dcci-page-hero-blob--1 {
    width: 380px;
    height: 380px;
    top: -80px;
    right: -50px;
}

.dcci-page-hero-blob--2 {
    width: 260px;
    height: 260px;
    bottom: -60px;
    left: 32%;
    opacity: 0.05;
}

.dcci-page-hero-blob--3 {
    width: 160px;
    height: 160px;
    top: 24px;
    left: -24px;
    opacity: 0.04;
}

/* Hero text sits above blobs */
.dcci-main-lib__hero > *:not(.dcci-page-hero-blobs) {
    position: relative;
    z-index: 1;
}

.dcci-tlib-hero__inner {
    position: relative;
    z-index: 1;
}

/* Extra breathing room */
.dcci-main-lib__hero {
    padding: 84px 48px 76px !important;
}

.dcci-tlib-hero {
    padding: 84px 0 76px !important;
}

@media (max-width: 900px) {
    .dcci-main-lib__hero { padding: 60px 28px 56px !important; }
    .dcci-tlib-hero      { padding: 60px 0 56px !important; }
}

@media (max-width: 640px) {
    .dcci-main-lib__hero { padding: 48px 20px 44px !important; }
    .dcci-tlib-hero      { padding: 48px 0 44px !important; }
}

/* =========================================================
 * 2. FEATURED PATHWAYS SECTION
 * ========================================================= */

.dcci-featured-pathways {
    padding: 56px 0;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
}

.dcci-featured-pathways__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.dcci-featured-pathways__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.dcci-featured-pathways__heading {
    font-size: clamp(1.25rem, 2.5vw, 1.65rem);
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 8px;
    line-height: 1.25;
}

.dcci-featured-pathways__sub {
    font-size: 14.5px;
    color: #6b7280;
    margin: 0 0 32px;
    max-width: 520px;
}

.dcci-featured-pathways__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 900px) {
    .dcci-featured-pathways__grid { grid-template-columns: 1fr; gap: 14px; }
}

/* Featured pathway card */
.dcci-fp-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 20px;
    padding: 28px 26px 24px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    position: relative;
}

/* Library accent: blue */
.dcci-practice-library-page .dcci-fp-card {
    border-top: 3px solid #3498db;
}
.dcci-practice-library-page .dcci-fp-card:hover {
    border-color: #3498db;
    border-top-color: #3498db;
    box-shadow: 0 8px 28px rgba(52,152,219,0.12);
    transform: translateY(-2px);
}
.dcci-practice-library-page .dcci-featured-pathways__label { color: #2471a3; }
.dcci-practice-library-page .dcci-fp-card__cta { color: #3498db; }
.dcci-practice-library-page .dcci-fp-card__icon-blob { background: #ebf5fb; }

/* Tools accent: purple */
.dcci-tools-library-page .dcci-fp-card {
    border-top: 3px solid #9b59b6;
}
.dcci-tools-library-page .dcci-fp-card:hover {
    border-color: #9b59b6;
    border-top-color: #9b59b6;
    box-shadow: 0 8px 28px rgba(155,89,182,0.12);
    transform: translateY(-2px);
}
.dcci-tools-library-page .dcci-featured-pathways__label { color: #6c3483; }
.dcci-tools-library-page .dcci-fp-card__cta { color: #9b59b6; }
.dcci-tools-library-page .dcci-fp-card__icon-blob { background: #f3eafc; }

/* Card internals */
.dcci-fp-card__icon-wrap {
    position: relative;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dcci-fp-card__icon-blob {
    position: absolute;
    inset: -6px;
    border-radius: 40% 60% 55% 45% / 45% 55% 50% 50%;
    opacity: 0.65;
}

.dcci-fp-card__icon {
    font-size: 1.6rem;
    position: relative;
    z-index: 1;
    line-height: 1;
}

.dcci-fp-card__title {
    font-size: 17px;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0;
    line-height: 1.3;
}

.dcci-fp-card__desc {
    font-size: 14px;
    line-height: 1.65;
    color: #374151;
    margin: 0;
    flex: 1;
}

.dcci-fp-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    text-decoration: none;
    margin-top: auto;
    transition: gap .15s ease;
}

.dcci-fp-card__cta:hover { gap: 9px; }

/* =========================================================
 * 3. PATHWAY CARDS — BLOB BACKGROUNDS
 * ========================================================= */

.dcci-main-lib__pathway {
    position: relative;
    overflow: hidden;
    padding: 22px 18px !important;
    gap: 8px !important;
}

.dcci-main-lib__pathway::before {
    content: '';
    position: absolute;
    width: 110px;
    height: 110px;
    top: -28px;
    right: -28px;
    background: #ebf5fb;
    border-radius: 50% 30% 50% 30%;
    opacity: 0.7;
    pointer-events: none;
    z-index: 0;
}

.dcci-main-lib__pathway > * { position: relative; z-index: 1; }
.dcci-main-lib__pathway:nth-child(2) { margin-top: 8px; }
.dcci-main-lib__pathway:nth-child(4) { margin-top: -8px; }

.dcci-tlib-pathway {
    position: relative;
    overflow: hidden;
    padding: 24px 20px !important;
}

.dcci-tlib-pathway::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    top: -22px;
    right: -22px;
    background: #f3eafc;
    border-radius: 40% 60% 40% 60%;
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}

.dcci-tlib-pathway > * { position: relative; z-index: 1; }
.dcci-tlib-pathway:nth-child(2) { margin-top: 10px; }
.dcci-tlib-pathway:nth-child(4) { margin-top: -10px; }

@media (max-width: 640px) {
    .dcci-main-lib__pathway:nth-child(2),
    .dcci-main-lib__pathway:nth-child(4),
    .dcci-tlib-pathway:nth-child(2),
    .dcci-tlib-pathway:nth-child(4) { margin-top: 0; }
}

/* =========================================================
 * 4. "HOW PEOPLE USE THIS" — 2-COLUMN LAYOUT
 * ========================================================= */

.dcci-main-lib__howto-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
}

.dcci-main-lib__howto {
    background: #f4f9fd !important;
    border-top: 1px solid #aed6f1;
    border-bottom: 1px solid #aed6f1;
    margin-left: -20px;
    margin-right: -20px;
    border-radius: 0 !important;
    padding: 44px 40px !important;
}

.dcci-main-lib__howto-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #fff;
    border-radius: 12px;
    padding: 18px 16px;
    border: 1px solid #d6eaf8;
}

.dcci-main-lib__howto-item > span {
    font-size: 1.4rem !important;
    flex-shrink: 0;
    background: #ebf5fb;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-top: 0 !important;
}

.dcci-main-lib__howto-item strong {
    font-size: 13.5px !important;
    color: #1a5276 !important;
    margin-bottom: 5px;
    display: block;
}

.dcci-main-lib__howto-item p {
    font-size: 12.5px !important;
    line-height: 1.6 !important;
}

.dcci-tlib-howto__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    margin-top: 28px !important;
}

.dcci-tlib-howto {
    background: #faf5ff !important;
    border-top: 1px solid #d8bff0;
    border-bottom: 1px solid #d8bff0;
}

.dcci-tlib-howto__item {
    display: flex !important;
    gap: 14px !important;
    align-items: flex-start !important;
    background: #fff;
    border-radius: 12px;
    padding: 18px 16px;
    border: 1px solid #e8d5f5;
}

.dcci-tlib-howto__icon {
    font-size: 1.4rem !important;
    flex-shrink: 0;
    background: #f3eafc;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.dcci-tlib-howto__item strong {
    font-size: 13.5px !important;
    color: #3e1e67 !important;
    display: block;
    margin-bottom: 4px;
}

.dcci-tlib-howto__item p {
    font-size: 12.5px !important;
    line-height: 1.6 !important;
}

@media (max-width: 700px) {
    .dcci-main-lib__howto-grid,
    .dcci-tlib-howto__grid { grid-template-columns: 1fr !important; }
}

/* =========================================================
 * 5. CTA HIERARCHY — Secondary + Tertiary button styles
 * ========================================================= */

.dcci-lib-res-btn--save {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 6px 12px;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .15s, color .15s;
}

.dcci-lib-res-btn--save:hover { border-color: #3498db; color: #3498db; }

.dcci-lib-res-btn--mark {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: #9ca3af;
    background: transparent;
    border: none;
    padding: 2px 0;
    cursor: pointer;
    font-family: inherit;
    transition: color .15s;
}

.dcci-lib-res-btn--mark:hover { color: #374151; }
.dcci-lib-res-btn--mark.is-marked { color: #27ae60; }

.dcci-tool-card__btn--save {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 6px 14px;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .15s, color .15s;
}

.dcci-tool-card__btn--save:hover { border-color: #9b59b6; color: #9b59b6; }

/* =========================================================
 * 6. SHARED CARD POLISH
 * ========================================================= */

.dcci-main-lib__card,
.dcci-tool-card { border-radius: 14px !important; }

.dcci-tool-card {
    box-shadow: 0 2px 10px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.05) !important;
    transition: box-shadow .2s ease, transform .2s ease !important;
}

.dcci-tool-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.07) !important;
    transform: translateY(-2px) !important;
}

.dcci-tool-category-card {
    border-radius: 14px !important;
    transition: border-color .18s, box-shadow .18s, transform .18s !important;
}