/* Source: patterns/pathways-find-the-right-path.css */
/* ===============================
   Pattern: Pathways Action Panel
   Supports: NOFCC Section Background block
================================ */

.pathways {
    position: relative;
    overflow: hidden;
    background-color: #faf8f4;
}

/* Full-width section shell. Background rendering is owned by textures.css. */
.nofcc-section-background.pathways,
.wp-block-nofcc-section-background.pathways,
.wp-block-cover.pathways {
    width: 100vw;
    max-width: 100vw;
    min-height: 820px !important;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0 !important;
    padding: 0;
}

/* Legacy Cover support only. */
.wp-block-cover.pathways {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Inner container support for both old Cover blocks and new custom background block */
.pathways .nofcc-section-background__inner,
.wp-block-cover.pathways .wp-block-cover__inner-container {
    position: relative;
    width: 100% !important;
    max-width: none !important;
    min-height: 820px;
    color: inherit;
}

/* Legacy Cover support */
.pathways .wp-block-cover__image-background {
    object-fit: cover;
    object-position: center center;
}

.pathways-layout {
    position: relative;
    z-index: 2;
    width: min(100% - 64px, 1120px);
    min-height: 820px;
    margin: 0 auto;
}

.pathways-intro {
    position: absolute;
    top: clamp(110px, 10vw, 150px);
    left: 0;
    max-width: 520px;
    padding: clamp(28px, 4vw, 42px);
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.pathways-intro h2 {
    max-width: 520px;
    margin: 0 0 20px;
}

.pathways-intro p {
    max-width: 500px;
    margin: 0;
    color: var(--color-muted);
}

/* Pattern-local panel styles override the default intro background. */
.pathways-intro.is-style-panel-white-90 { background: rgba(255,255,255,.90); }
.pathways-intro.is-style-panel-white-80 { background: rgba(255,255,255,.80); }
.pathways-intro.is-style-panel-white-70 { background: rgba(255,255,255,.70); }
.pathways-intro.is-style-panel-white-60 { background: rgba(255,255,255,.60); }
.pathways-intro.is-style-panel-white-50 { background: rgba(255,255,255,.50); }
.pathways-intro.is-style-panel-white-40 { background: rgba(255,255,255,.40); }
.pathways-intro.is-style-panel-white-30 { background: rgba(255,255,255,.30); }
.pathways-intro.is-style-panel-blue-90 { background: rgba(142,209,252,.90); }
.pathways-intro.is-style-panel-blue-80 { background: rgba(142,209,252,.80); }
.pathways-intro.is-style-panel-blue-70 { background: rgba(142,209,252,.70); }
.pathways-intro.is-style-panel-blue-60 { background: rgba(142,209,252,.60); }
.pathways-intro.is-style-panel-blue-50 { background: rgba(142,209,252,.50); }
.pathways-intro.is-style-panel-blue-40 { background: rgba(142,209,252,.40); }
.pathways-intro.is-style-panel-blue-30 { background: rgba(142,209,252,.30); }
.pathways-intro.is-style-panel-gold-90 { background: rgba(255,243,207,.90); }
.pathways-intro.is-style-panel-gold-80 { background: rgba(255,243,207,.80); }
.pathways-intro.is-style-panel-gold-70 { background: rgba(255,243,207,.70); }
.pathways-intro.is-style-panel-gold-60 { background: rgba(255,243,207,.60); }
.pathways-intro.is-style-panel-gold-50 { background: rgba(255,243,207,.50); }
.pathways-intro.is-style-panel-gold-40 { background: rgba(255,243,207,.40); }
.pathways-intro.is-style-panel-gold-30 { background: rgba(255,243,207,.30); }
.pathways-intro.is-style-panel-sage-90 { background: rgba(237,245,234,.90); }
.pathways-intro.is-style-panel-sage-80 { background: rgba(237,245,234,.80); }
.pathways-intro.is-style-panel-sage-70 { background: rgba(237,245,234,.70); }
.pathways-intro.is-style-panel-sage-60 { background: rgba(237,245,234,.60); }
.pathways-intro.is-style-panel-sage-50 { background: rgba(237,245,234,.50); }
.pathways-intro.is-style-panel-sage-40 { background: rgba(237,245,234,.40); }
.pathways-intro.is-style-panel-sage-30 { background: rgba(237,245,234,.30); }
.pathways-intro.is-style-panel-rose-90 { background: rgba(251,231,233,.90); }
.pathways-intro.is-style-panel-rose-80 { background: rgba(251,231,233,.80); }
.pathways-intro.is-style-panel-rose-70 { background: rgba(251,231,233,.70); }
.pathways-intro.is-style-panel-rose-60 { background: rgba(251,231,233,.60); }
.pathways-intro.is-style-panel-rose-50 { background: rgba(251,231,233,.50); }
.pathways-intro.is-style-panel-rose-40 { background: rgba(251,231,233,.40); }
.pathways-intro.is-style-panel-rose-30 { background: rgba(251,231,233,.30); }
.pathways-intro.is-style-panel-dark-90 { background: rgba(15,15,16,.90); }
.pathways-intro.is-style-panel-dark-80 { background: rgba(15,15,16,.80); }
.pathways-intro.is-style-panel-dark-70 { background: rgba(15,15,16,.70); }
.pathways-intro.is-style-panel-dark-60 { background: rgba(15,15,16,.60); }
.pathways-intro.is-style-panel-dark-50 { background: rgba(15,15,16,.50); }
.pathways-intro.is-style-panel-dark-40 { background: rgba(15,15,16,.40); }
.pathways-intro.is-style-panel-dark-30 { background: rgba(15,15,16,.30); }

.pathways-intro:is(
    [class*="is-style-panel-white-"],
    [class*="is-style-panel-blue-"],
    [class*="is-style-panel-gold-"],
    [class*="is-style-panel-sage-"],
    [class*="is-style-panel-rose-"]
),
.pathways-intro:is(
    [class*="is-style-panel-white-"],
    [class*="is-style-panel-blue-"],
    [class*="is-style-panel-gold-"],
    [class*="is-style-panel-sage-"],
    [class*="is-style-panel-rose-"]
) :where(.eyebrow, h2, p) {
    color: var(--color-charcoal);
}

.pathways-intro[class*="is-style-panel-dark-"],
.pathways-intro[class*="is-style-panel-dark-"] :where(.eyebrow, h2, p) {
    color: var(--color-white);
}

.pathway-actions {
    position: absolute;
    top: 50%;
    right: clamp(12px, 4vw, 64px);
    display: flex;
    flex-direction: column;
    width: min(100%, 440px);
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 24px 70px rgba(15, 15, 16, 0.12);
    border-top: 1px solid rgba(31, 41, 55, 0.10);
    border-bottom: 1px solid rgba(31, 41, 55, 0.10);
}

/* Pattern-local panel styles override the default translucent white panel. */
.pathway-actions.is-style-panel-white-90 { background: rgba(255,255,255,.90); }
.pathway-actions.is-style-panel-white-80 { background: rgba(255,255,255,.80); }
.pathway-actions.is-style-panel-white-70 { background: rgba(255,255,255,.70); }
.pathway-actions.is-style-panel-white-60 { background: rgba(255,255,255,.60); }
.pathway-actions.is-style-panel-white-50 { background: rgba(255,255,255,.50); }
.pathway-actions.is-style-panel-white-40 { background: rgba(255,255,255,.40); }
.pathway-actions.is-style-panel-white-30 { background: rgba(255,255,255,.30); }
.pathway-actions.is-style-panel-blue-90 { background: rgba(142,209,252,.90); }
.pathway-actions.is-style-panel-blue-80 { background: rgba(142,209,252,.80); }
.pathway-actions.is-style-panel-blue-70 { background: rgba(142,209,252,.70); }
.pathway-actions.is-style-panel-blue-60 { background: rgba(142,209,252,.60); }
.pathway-actions.is-style-panel-blue-50 { background: rgba(142,209,252,.50); }
.pathway-actions.is-style-panel-blue-40 { background: rgba(142,209,252,.40); }
.pathway-actions.is-style-panel-blue-30 { background: rgba(142,209,252,.30); }
.pathway-actions.is-style-panel-gold-90 { background: rgba(255,243,207,.90); }
.pathway-actions.is-style-panel-gold-80 { background: rgba(255,243,207,.80); }
.pathway-actions.is-style-panel-gold-70 { background: rgba(255,243,207,.70); }
.pathway-actions.is-style-panel-gold-60 { background: rgba(255,243,207,.60); }
.pathway-actions.is-style-panel-gold-50 { background: rgba(255,243,207,.50); }
.pathway-actions.is-style-panel-gold-40 { background: rgba(255,243,207,.40); }
.pathway-actions.is-style-panel-gold-30 { background: rgba(255,243,207,.30); }
.pathway-actions.is-style-panel-sage-90 { background: rgba(237,245,234,.90); }
.pathway-actions.is-style-panel-sage-80 { background: rgba(237,245,234,.80); }
.pathway-actions.is-style-panel-sage-70 { background: rgba(237,245,234,.70); }
.pathway-actions.is-style-panel-sage-60 { background: rgba(237,245,234,.60); }
.pathway-actions.is-style-panel-sage-50 { background: rgba(237,245,234,.50); }
.pathway-actions.is-style-panel-sage-40 { background: rgba(237,245,234,.40); }
.pathway-actions.is-style-panel-sage-30 { background: rgba(237,245,234,.30); }
.pathway-actions.is-style-panel-rose-90 { background: rgba(251,231,233,.90); }
.pathway-actions.is-style-panel-rose-80 { background: rgba(251,231,233,.80); }
.pathway-actions.is-style-panel-rose-70 { background: rgba(251,231,233,.70); }
.pathway-actions.is-style-panel-rose-60 { background: rgba(251,231,233,.60); }
.pathway-actions.is-style-panel-rose-50 { background: rgba(251,231,233,.50); }
.pathway-actions.is-style-panel-rose-40 { background: rgba(251,231,233,.40); }
.pathway-actions.is-style-panel-rose-30 { background: rgba(251,231,233,.30); }
.pathway-actions.is-style-panel-dark-90 { background: rgba(15,15,16,.90); }
.pathway-actions.is-style-panel-dark-80 { background: rgba(15,15,16,.80); }
.pathway-actions.is-style-panel-dark-70 { background: rgba(15,15,16,.70); }
.pathway-actions.is-style-panel-dark-60 { background: rgba(15,15,16,.60); }
.pathway-actions.is-style-panel-dark-50 { background: rgba(15,15,16,.50); }
.pathway-actions.is-style-panel-dark-40 { background: rgba(15,15,16,.40); }
.pathway-actions.is-style-panel-dark-30 { background: rgba(15,15,16,.30); }

.pathway-action {
    position: relative;
    display: block;
    padding: 26px 72px 26px 34px;
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid rgba(31, 41, 55, 0.12);
    background: transparent;
}

.pathway-action:last-child {
    border-bottom: 0;
}

.pathway-action::after {
    content: "→";
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-primary);
    font-size: 22px;
    line-height: 1;
}

.pathway-action:hover,
.pathway-action:focus {
    text-decoration: none;
    background: rgba(255, 255, 255, 0.5);
}

.pathway-action > * {
    margin-top: 0;
}

.pathway-action > p:first-child {
    margin-bottom: 10px;
    color: var(--color-muted);
    font-size: 14px;
}

.pathway-action h3 {
    margin-bottom: 10px;
}

.pathway-action p {
    max-width: 360px;
    margin-bottom: 8px;
    color: var(--color-muted);
}

.pathway-action p:last-child {
    margin-bottom: 0;
}

.pathway-action em {
    display: inline-flex;
    margin-top: 8px;
    font-style: normal;
    color: var(--color-primary);
}

/* Selected panel styles retain readable card content and action cues. */
.pathway-actions:is(
    [class*="is-style-panel-white-"],
    [class*="is-style-panel-blue-"],
    [class*="is-style-panel-gold-"],
    [class*="is-style-panel-sage-"],
    [class*="is-style-panel-rose-"]
) .pathway-action,
.pathway-actions:is(
    [class*="is-style-panel-white-"],
    [class*="is-style-panel-blue-"],
    [class*="is-style-panel-gold-"],
    [class*="is-style-panel-sage-"],
    [class*="is-style-panel-rose-"]
) .pathway-action :where(h3, p) {
    color: var(--color-charcoal);
}

.pathway-actions[class*="is-style-panel-dark-"] .pathway-action,
.pathway-actions[class*="is-style-panel-dark-"] .pathway-action :where(h3, p) {
    color: var(--color-white);
}

.pathway-actions[class*="is-style-panel-dark-"] .pathway-action > p:first-child,
.pathway-actions[class*="is-style-panel-dark-"] .pathway-action p {
    color: rgba(255, 255, 255, 0.82);
}

.pathway-actions[class*="is-style-panel-dark-"] .pathway-action em,
.pathway-actions[class*="is-style-panel-dark-"] .pathway-action::after {
    color: var(--color-white);
}

/* Gutenberg Group wrappers need the card spacing restated in the editor. */
.editor-styles-wrapper .pathway-actions {
    box-sizing: border-box;
    padding: 8px 0;
}

.editor-styles-wrapper .pathway-actions .pathway-action {
    box-sizing: border-box;
    min-height: 132px;
    padding: 26px 72px 26px 34px;
}

/* Tablet */
@media (max-width: 900px) {
    .nofcc-section-background.pathways,
    .wp-block-nofcc-section-background.pathways,
    .wp-block-cover.pathways,
    .pathways .nofcc-section-background__inner,
    .wp-block-cover.pathways .wp-block-cover__inner-container,
    .pathways-layout {
        min-height: auto !important;
    }

    .nofcc-section-background.pathways,
    .wp-block-nofcc-section-background.pathways,
    .wp-block-cover.pathways {
        padding: 88px 0 96px;
    }

    .pathways-intro,
    .pathway-actions {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        transform: none;
    }

    .pathways-layout {
        width: min(100% - 48px, 1180px);
    }

    .pathways-intro {
        margin-bottom: 40px;
        max-width: 620px;
        padding: 32px;
    }

    .pathway-actions {
        width: 100%;
        max-width: 620px;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .nofcc-section-background.pathways,
    .wp-block-nofcc-section-background.pathways,
    .wp-block-cover.pathways {
        padding: 72px 0 80px;
    }

    .pathways-layout {
        width: min(100% - 32px, 1180px);
    }

    .pathways-intro {
        padding: 26px 24px;
    }

    .pathway-action {
        padding: 26px 52px 26px 24px;
    }
}