/* =========================================================
   ANALYSIS PAGE
   isolated styles for MODX
========================================================= */

/* RESET */

.analysis-page,
.analysis-page * {
    box-sizing: border-box;
}

.analysis-page img {
    max-width: 100%;
    display: block;
}

.analysis-page button {
    font: inherit;
}

/* ROOT */

.analysis-page {

    --analysis-bg: #f4f7fb;
    --analysis-card: #ffffff;

    --analysis-text: #0f172a;
    --analysis-muted: #667085;

    --analysis-border: #e7edf5;

    --analysis-primary: #2563eb;

    --analysis-shadow:
        0 10px 30px rgba(15,23,42,.05);

    background: var(--analysis-bg);

    color: var(--analysis-text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        sans-serif;

    padding: 40px 0;
}

/* =========================================================
   LAYOUT
========================================================= */

.analysis-page .analysis-layout {

    width: min(1600px, calc(100% - 40px));

    margin: auto;

    display: grid;

    grid-template-columns:
        minmax(340px, 430px)
        minmax(0, 1fr);

    gap: 40px;

    align-items: start;
}

/* =========================================================
   SIDEBAR
========================================================= */

.analysis-page .analysis-sidebar {

    position: sticky;

    top: 24px;

    background: var(--analysis-card);

    border-radius: 32px;

    border: 1px solid var(--analysis-border);

    padding: 34px;

    box-shadow: var(--analysis-shadow);
}

/* BADGE */

.analysis-page .analysis-badge {

    display: inline-flex;

    align-items: center;

    padding: 8px 14px;

    border-radius: 999px;

    background: #eef4ff;

    color: var(--analysis-primary);

    font-size: 13px;

    font-weight: 500;

    margin-bottom: 24px;
}

/* TITLE */

.analysis-page .analysis-sidebar h1 {

    margin:
        0 0 24px;

    font-size:
        clamp(20px, 2vw, 40px);

    line-height: .95;

    letter-spacing: -.05em;

    font-weight: 700;

    word-break: normal;

    overflow-wrap: break-word;
}

.analysis-page .analysis-sidebar h1 span {

    display: block;
}

/* SHORT */

.analysis-page .analysis-short {

    margin:
        0 0 34px;

    font-size: 17px;

    line-height: 1.8;

    color: var(--analysis-muted);
}

/* META */

.analysis-page .analysis-meta {

    display: flex;

    gap: 28px;

    margin-bottom: 36px;
}

.analysis-page .analysis-meta strong {

    display: block;

    font-size: 26px;

    line-height: 1;
}

.analysis-page .analysis-meta span {

    display: block;

    margin-top: 8px;

    font-size: 14px;

    color: var(--analysis-muted);
}

/* BUTTON */

.analysis-page .analysis-btn {

    width: 100%;

    border: none;

    border-radius: 18px;

    background: var(--analysis-text);

    color: white;

    padding: 18px;

    font-size: 16px;

    font-weight: 500;

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}

.analysis-page .analysis-btn:hover {

    transform: translateY(-2px);

    opacity: .96;

    box-shadow:
        0 16px 32px rgba(15,23,42,.12);
}

/* =========================================================
   CONTENT
========================================================= */

.analysis-page .analysis-content {

    background: white;

    border-radius: 32px;

    border: 1px solid var(--analysis-border);

    padding: 42px;

    box-shadow: var(--analysis-shadow);

    min-width: 0;
}

/* =========================================================
   TABS
========================================================= */

.analysis-page .tabs {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 44px;
}

.analysis-page .tab-btn {

    border: none;

    background: #f3f4f6;

    color: #475467;

    padding: 13px 18px;

    border-radius: 14px;

    cursor: pointer;

    font-size: 15px;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.analysis-page .tab-btn:hover {

    background: #e5e7eb;
}

.analysis-page .tab-btn.active {

    background: var(--analysis-text);

    color: white;
}

/* =========================================================
   TAB CONTENT
========================================================= */

.analysis-page .tab-content {
    display: none;
}

.analysis-page .tab-content.active {
    display: block;
}

/* =========================================================
   HERO
========================================================= */

.analysis-page .hero-block {

    background:
        linear-gradient(
            135deg,
            #f8fbff,
            #f2f6fc
        );

    border-radius: 30px;

    border: 1px solid var(--analysis-border);

    padding: 40px;

    margin-bottom: 54px;
}

.analysis-page .hero-label {

    display: inline-flex;

    padding: 8px 14px;

    border-radius: 999px;

    background: white;

    border: 1px solid var(--analysis-border);

    color: var(--analysis-primary);

    font-size: 13px;

    margin-bottom: 24px;
}

.analysis-page .hero-content h2 {

    margin:
        0 0 24px;

    font-size:
        clamp(30px, 2.5vw, 48px);

    line-height: .95;

    letter-spacing: -.05em;
}

.analysis-page .hero-content p {

    margin: 0;

    max-width: 65ch;

    font-size: 17px;

    line-height: 1.9;

    color: var(--analysis-muted);
}

/* =========================================================
   SECTIONS
========================================================= */

.analysis-page .content-section {

    margin-bottom: 64px;
}

.analysis-page .section-heading {

    margin-bottom: 30px;
}

.analysis-page .section-heading h3 {

    margin:
        0 0 18px;

    font-size:
        clamp(28px, 2vw, 40px);

    line-height: 1.05;

    letter-spacing: -.04em;
}

.analysis-page .section-heading p {

    margin: 0;

    max-width: 75ch;

    font-size: 16px;

    line-height: 1.9;

    color: var(--analysis-muted);
}

/* =========================================================
   GRID
========================================================= */

.analysis-page .content-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

/* =========================================================
   CARDS
========================================================= */

.analysis-page .info-card {

    background: #f9fafb;

    border-radius: 24px;

    border: 1px solid var(--analysis-border);

    padding: 28px;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.analysis-page .info-card:hover {

    transform: translateY(-2px);

    box-shadow:
        0 14px 28px rgba(15,23,42,.06);
}

.analysis-page .info-card h4 {

    margin:
        0 0 14px;

    font-size: 24px;

    line-height: 1.1;
}

.analysis-page .info-card p {

    margin: 0;

    line-height: 1.8;

    color: var(--analysis-muted);
}

/* =========================================================
   FEATURES
========================================================= */

.analysis-page .feature-list {

    display: flex;

    flex-direction: column;

    gap: 18px;
}

.analysis-page .feature-item {

    padding: 24px;

    border-radius: 22px;

    background: #f9fafb;

    border: 1px solid var(--analysis-border);
}

.analysis-page .feature-item span {

    display: block;

    margin-bottom: 10px;

    font-size: 19px;

    font-weight: 600;
}

.analysis-page .feature-item p {

    margin: 0;

    line-height: 1.8;

    color: var(--analysis-muted);
}

/* =========================================================
   STEPS
========================================================= */

.analysis-page .steps-list {

    display: flex;

    flex-direction: column;

    gap: 20px;
}

.analysis-page .step-item {

    display: flex;

    gap: 18px;

    align-items: flex-start;

    padding: 26px;

    border-radius: 24px;

    background: #f9fafb;

    border: 1px solid var(--analysis-border);
}

.analysis-page .step-number {

    width: 42px;

    height: 42px;

    min-width: 42px;

    border-radius: 50%;

    background: var(--analysis-text);

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 600;
}

.analysis-page .step-info h4 {

    margin:
        0 0 10px;

    font-size: 21px;
}

.analysis-page .step-info p {

    margin: 0;

    line-height: 1.8;

    color: var(--analysis-muted);
}

/* =========================================================
   CHECK LIST
========================================================= */

.analysis-page .check-list {

    list-style: none;

    margin: 0;

    padding: 0;
}

.analysis-page .check-list li {

    padding: 20px 0;

    border-bottom:
        1px solid var(--analysis-border);

    line-height: 1.8;
}

/* =========================================================
   RESULTS
========================================================= */

.analysis-page .results-gallery {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}

.analysis-page .preview-image {

    width: 100%;

    border-radius: 22px;

    border: 1px solid var(--analysis-border);

    cursor: pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.analysis-page .preview-image:hover {

    transform: scale(1.02);

    box-shadow:
        0 18px 36px rgba(15,23,42,.08);
}

/* =========================================================
   WARNING
========================================================= */

.analysis-page .warning-block {

    margin-top: 40px;

    padding: 28px;

    border-radius: 24px;

    background: #fff8f1;

    border: 1px solid #fde7c7;
}

.analysis-page .warning-block strong {

    display: block;

    margin-bottom: 10px;

    font-size: 18px;
}

.analysis-page .warning-block p {

    margin: 0;

    line-height: 1.8;

    color: #92400e;
}

/* =========================================================
   FAQ
========================================================= */

.analysis-page .faq-item {

    border-bottom:
        1px solid var(--analysis-border);
}

.analysis-page .faq-question {

    width: 100%;

    border: none;

    background: none;

    text-align: left;

    padding: 24px 0;

    cursor: pointer;

    position: relative;

    font-size: 18px;

    font-weight: 500;

    color: var(--analysis-text);
}

.analysis-page .faq-question::after {

    content: "+";

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    font-size: 24px;
}

.analysis-page .faq-item.active .faq-question::after {

    content: "−";
}

.analysis-page .faq-answer {

    display: none;

    padding-bottom: 24px;

    line-height: 1.9;

    color: var(--analysis-muted);
}

.analysis-page .faq-item.active .faq-answer {

    display: block;
}

/* =========================================================
   IMAGE MODAL
========================================================= */

.analysis-page .image-modal {

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,.82);

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    visibility: hidden;

    transition: .25s ease;

    z-index: 99999;
}

.analysis-page .image-modal.active {

    opacity: 1;

    visibility: visible;
}

.analysis-page .modal-image {

    max-width: 90%;

    max-height: 90vh;

    border-radius: 24px;
}

.analysis-page .modal-close {

    position: absolute;

    top: 30px;

    right: 40px;

    color: white;

    font-size: 44px;

    cursor: pointer;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 1200px) {

    .analysis-page .analysis-layout {

        grid-template-columns: 1fr;
    }

    .analysis-page .analysis-sidebar {

        position: static;
    }

    .analysis-page .content-grid,
    .analysis-page .results-gallery {

        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {

    .analysis-page {

        padding: 20px 0;
    }

    .analysis-page .analysis-layout {

        width: calc(100% - 20px);

        gap: 20px;
    }

    .analysis-page .analysis-sidebar,
    .analysis-page .analysis-content {

        padding: 24px;

        border-radius: 24px;
    }

    .analysis-page .hero-block {

        padding: 26px;
    }

    .analysis-page .analysis-sidebar h1 {

        font-size: 36px;
    }

    .analysis-page .hero-content h2 {

        font-size: 34px;
    }

    .analysis-page .section-heading h3 {

        font-size: 30px;
    }

    .analysis-page .tabs {

        gap: 8px;
    }

    .analysis-page .tab-btn {

        width: 100%;
    }
}