/* 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;
}

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

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

.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);
}

.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);
}

/* 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;
    }

    .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);
    }

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