/* Shared retouch for FAQ, About and Blog. Loaded after each page's scoped CSS. */

/* FAQ */
.pi-faq-page {
    --pi-faq-icon-question: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.8 9a2.4 2.4 0 1 1 3.5 2.1c-.8.5-1.3 1-1.3 2M12 17h.01'/%3E%3C/svg%3E");
    --pi-faq-icon-care: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3S6 10 6 15a6 6 0 0 0 12 0c0-5-6-12-6-12Z'/%3E%3Cpath d='m9.5 15 1.7 1.7 3.5-4'/%3E%3C/svg%3E");
    --pi-faq-icon-heal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
    --pi-faq-icon-jewel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10l4 6-9 10L3 10l4-6Z'/%3E%3Cpath d='m3 10 9 2 9-2'/%3E%3C/svg%3E");
}

.pi-faq-hero {
    min-height: 52vh !important;
}

.pi-faq-hero__content {
    padding-top: 82px !important;
    padding-bottom: 48px !important;
}

.pi-faq-catnav {
    position: relative !important;
    top: auto !important;
    padding: 24px 0 !important;
}

.pi-faq-section {
    padding: 68px 0 !important;
}

.pi-faq-section-header {
    margin-bottom: 34px !important;
}

.pi-faq-question {
    min-height: 58px !important;
    padding: 18px 20px !important;
}

.pi-faq-answer.is-open {
    padding: 0 20px 20px !important;
}

.pi-faq-alert {
    padding: 36px 28px !important;
}

.pi-faq-cta-section {
    padding: 68px 0 !important;
}

.pi-faq-catnav-icon {
    width: 20px !important;
    height: 20px !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 20px !important;
    font-size: 0 !important;
    color: transparent !important;
}

.pi-faq-catnav-icon::before {
    content: "" !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    background: #c4a574 !important;
    -webkit-mask: var(--pi-faq-icon-question) center / contain no-repeat !important;
    mask: var(--pi-faq-icon-question) center / contain no-repeat !important;
}

.pi-faq-catnav-item:nth-child(2) .pi-faq-catnav-icon::before {
    -webkit-mask-image: var(--pi-faq-icon-care) !important;
    mask-image: var(--pi-faq-icon-care) !important;
}

.pi-faq-catnav-item:nth-child(3) .pi-faq-catnav-icon::before {
    -webkit-mask-image: var(--pi-faq-icon-heal) !important;
    mask-image: var(--pi-faq-icon-heal) !important;
}

.pi-faq-catnav-item:nth-child(4) .pi-faq-catnav-icon::before {
    -webkit-mask-image: var(--pi-faq-icon-jewel) !important;
    mask-image: var(--pi-faq-icon-jewel) !important;
}

/* About */
.pi-about-hero,
.pi-blog-hero {
    padding: 76px 0 60px !important;
}

.pi-about-trust,
.pi-blog-trust {
    padding: 22px 0 !important;
}

.pi-about-section,
.pi-blog-section {
    padding: 64px 0 !important;
}

.pi-about-section-header,
.pi-blog-section-header {
    margin-bottom: 32px !important;
}

.pi-about-section-header-center,
.pi-blog-section-header-center {
    margin-bottom: 38px !important;
}

.pi-about-why-card {
    padding: 24px !important;
}

.pi-about-bridge {
    padding: 40px 28px !important;
}

.pi-about-guide-imgwrap {
    aspect-ratio: 16 / 8.5 !important;
}

.pi-about-guide-body,
.pi-blog-card-body {
    padding: 20px !important;
}

.pi-about-final-cta,
.pi-blog-final-cta {
    padding: 68px 0 !important;
}

.pi-about-btn,
.pi-blog-btn {
    min-height: 44px !important;
}

/* Blog */
.pi-blog-card-imgwrap,
.pi-blog-card-lg .pi-blog-card-imgwrap {
    aspect-ratio: 16 / 9 !important;
}

.pi-blog-card-excerpt {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
}

.pi-blog-cta-block {
    padding: 44px 28px !important;
}

@media (max-width: 1024px) {
    .pi-faq-section {
        padding: 60px 0 !important;
    }

    .pi-about-section,
    .pi-blog-section {
        padding: 58px 0 !important;
    }
}

@media (max-width: 640px) {
    .pi-faq-hero {
        min-height: 0 !important;
    }

    .pi-faq-hero__content {
        padding-top: 62px !important;
        padding-bottom: 42px !important;
    }

    .pi-faq-catnav {
        padding: 18px 0 !important;
    }

    .pi-faq-catnav-grid {
        gap: 8px !important;
    }

    .pi-faq-catnav-item {
        min-height: 44px !important;
        gap: 8px !important;
        padding: 9px 10px !important;
        border-radius: 10px !important;
    }

    .pi-faq-section {
        padding: 48px 0 !important;
    }

    .pi-faq-section-header {
        margin-bottom: 26px !important;
    }

    .pi-faq-alert {
        padding: 30px 20px !important;
    }

    .pi-faq-cta-section {
        padding: 56px 0 !important;
    }

    .pi-about-hero,
    .pi-blog-hero {
        padding: 56px 0 44px !important;
    }

    .pi-about-trust-grid,
    .pi-blog-trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px 10px !important;
    }

    .pi-about-trust-item,
    .pi-blog-trust-item {
        gap: 9px !important;
        font-size: 12px !important;
    }

    .pi-about-section,
    .pi-blog-section {
        padding: 48px 0 !important;
    }

    .pi-about-section-header,
    .pi-blog-section-header {
        margin-bottom: 26px !important;
    }

    .pi-about-bridge,
    .pi-blog-cta-block {
        padding: 32px 20px !important;
    }

    .pi-about-root .pi-about-grid-4:has(.pi-about-guide-card) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .pi-about-guide-imgwrap {
        aspect-ratio: 4 / 3 !important;
    }

    .pi-about-guide-body {
        padding: 14px !important;
    }

    .pi-about-guide-excerpt {
        display: none !important;
    }

    .pi-about-guide-title {
        font-size: 1rem !important;
    }

    .pi-blog-grid-cats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .pi-blog-cat-card {
        min-height: 68px !important;
        gap: 9px !important;
        padding: 12px !important;
    }

    .pi-blog-cat-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
    }

    .pi-blog-cat-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    .pi-blog-cat-label {
        font-size: 13px !important;
    }

    .pi-about-final-cta,
    .pi-blog-final-cta {
        padding: 56px 0 !important;
    }

    .pi-about-hero-cta .pi-about-btn,
    .pi-about-final-cta-buttons .pi-about-btn,
    .pi-blog-hero-cta .pi-blog-btn,
    .pi-blog-final-cta-buttons .pi-blog-btn {
        width: 100% !important;
    }
}