/*==================================================
Mitochondria Mechanism Section
Base Layout
==================================================*/

html {
    overflow-x: clip;   /* به‌جای hidden */
}

body {
    margin: 0;
    overflow-x: clip;   /* به‌جای hidden */
}


/* ==========================================================
   SECTION
   ========================================================== */

.mitochondria-section {
    position: relative;

    width: 100%;

    padding-block: var(--section-space);

}


/* ==========================================================
   CONTAINER
   ========================================================== */

.mitochondria-container {
    width: 100%;

    max-width: var(--container-md);

    margin-inline: auto;

    padding-inline: var(--space-inline);
}


/* ==========================================================
   HEADING
   ========================================================== */

.mitochondria-heading {
    width: 100%;

    max-width: 768px;

    margin-inline: auto;

    text-align: center;

    position: relative;

    z-index: 2;
}


.mito-eyebrow {
    display: inline-block;

    margin-bottom: 1rem;

    padding: 6px 16px;

    background: rgba(var(--accent-rgb), .12);
    color: var(--primary);

    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;

    border-radius: 999px;
}

.mitochondria-heading h2 {
    margin: 0 0 1.6rem;

    font-family: var(--font-heading);

    font-weight: var(--title-weight);

    font-size: var(--h2-title-size);

    line-height: 1.2;

    letter-spacing: -.03em;

    color: var(--text);
}


.mitochondria-heading p {
    margin: 0;

    font-family: var(--font-body);

    font-weight: var(--body-weight);

    font-size: var(--hero-desc-size);

    line-height: 1.9;

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


/* ==========================================================
   CONTENT GRID + CONNECTOR LINE
   ========================================================== */

.mitochondria-content {
    position: relative;

    z-index: 2;

    width: 100%;

    display: grid;

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

    gap: 1.25rem;

    margin-top: clamp(40px, 6vw, 70px);
}


/* خط نقطه‌چین اتصال‌دهنده بین کارت‌ها (فقط دسکتاپ) */

.mito-connector {
    position: absolute;

    top: 100px;                    /* هم‌تراز با مرکز تصاویر */
    right: calc(16.66% - 1px);
    left: calc(16.66% - 1px);

    height: 2px;

    background: repeating-linear-gradient(
        90deg,
        rgba(var(--primary-rgb), .35) 0,
        rgba(var(--primary-rgb), .35) 8px,
        transparent 8px,
        transparent 16px
    );

    z-index: 0;
}


/* ==========================================================
   CARD — base
   ========================================================== */

.mitochondria-card {
    position: relative;

    z-index: 1;

    display: flex;

    flex-direction: column;

    gap: .85rem;

    overflow: hidden;

    padding: 1.5rem;

    background: var(--background);

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

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

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.mitochondria-card:hover {
    transform: translateY(-6px);

    border-color: rgba(var(--primary-rgb), .35);

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


/* شماره مرحله (badge) */

.mito-card-number {
    position: absolute;

    top: -18px;
    right: 20px;

    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 15px;
    color: #fff;

    border-radius: var(--radius-round);

    box-shadow: 0 6px 16px rgba(var(--primary-rgb), .35);

    z-index: 3;
}


/* رنگ‌بندی هر مرحله (شماره + خط بالای کارت) */

.mito-step-1 {
    border-top: 3px solid #1a7a63;
}
.mito-step-1 .mito-card-number {
    background: linear-gradient(135deg, #3aa892, #1a7a63);
}

.mito-step-2 {
    border-top: 3px solid #e6772c;
}
.mito-step-2 .mito-card-number {
    background: linear-gradient(135deg, #ff9d5c, #e6772c);
}

.mito-step-3 {
    border-top: 3px solid #3b5fe0;
}
.mito-step-3 .mito-card-number {
    background: linear-gradient(135deg, #6a8dff, #3b5fe0);
}


/* کارت میانی برجسته (مرحله ۲ - تولید ATP) */

.mito-featured {
    transform: translateY(-14px);

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

.mito-featured:hover {
    transform: translateY(-20px);
}


/* ==========================================================
   CARD IMAGE
   ========================================================== */

.mito-card-img {
    width: 100%;

    aspect-ratio: 1 / 1;               /* بخش تصویر کاملاً مربعی */

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background-color: #f5f5f5;

    border-radius: 16px 16px 0 0;
}

.mito-card-img img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;               /* تصویر کامل، بدون کراپ */
}


/* ==========================================================
   CARD TEXT
   ========================================================== */

.mito-card-text {
    padding: 20px;
}

.mito-card-text h3 {
    margin: 0 0 .7rem;

    font-family: var(--font-heading);

    font-weight: var(--font-weight-h3);

    font-size: 1.2rem;

    line-height: 1.5;

    color: var(--text);
}


.mito-card-text p {
    margin: 0;

    font-family: var(--font-body);

    font-weight: var(--body-weight);

    font-size: var(--font-size-p);

    line-height: 1.75;

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


/* ==========================================================
   SCROLL REVEAL ANIMATION
   ========================================================== */

.reveal-up {
    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity .6s ease,
        transform .6s ease;
}

.reveal-up.is-visible {
    opacity: 1;

    transform: translateY(0);
}

/* کارت میانی باید حتی بعد از reveal هم -14px بمونه */
.mito-featured.reveal-up.is-visible {
    transform: translateY(-14px);
}


/* ==========================================================
   SCIENTIFIC NOTE
   ========================================================== */

.mitochondria-note {
    position: relative;

    z-index: 2;

    margin-top: clamp(50px, 7vw, 80px);

    padding: clamp(25px, 4vw, 45px);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1.3rem;

    text-align: center;

    background: var(--glass-bg);

    backdrop-filter: blur(var(--blur-sm));

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

    border-inline-start: 4px solid var(--accent-strong);

    border-radius: var(--radius-lg);
}


.mitochondria-note strong {
    display: block;

    font-family: var(--font-heading);

    font-weight: var(--heading-weight);

    font-size: var(--font-size-h3);

    color: var(--text);
}


.mitochondria-note p {
    margin: 0;

    max-width: 576px;

    font-family: var(--font-body);

    font-weight: var(--body-weight);

    line-height: 1.85;

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


.mitochondria-note .link-button {
    margin: 0;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 992px) {

    .mitochondria-scroll-area {
        height: 280vh;
    }

    .mitochondria-visual {
        top: 70px;                    /* ارتفاع navbar تبلت */
        height: calc(100vh - 110px);  /* 70px بالا + 40px پایین */
    }

    .mitochondria-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* خط اتصال فقط برای چیدمان سه‌ستونه دسکتاپ معنا داره */
    .mito-connector {
        display: none;
    }

    /* برجستگی کارت میانی فقط در چیدمان سه‌ستونه دسکتاپ حفظ بشه */
    .mito-featured,
    .mito-featured:hover,
    .mito-featured.reveal-up.is-visible {
        transform: none;
    }

    .mito-featured:hover {
        transform: translateY(-6px);
    }

}


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

@media (max-width: 768px) {

    .mitochondria-scroll-area {
        height: 220vh;
    }

    .mitochondria-visual {
        top: 60px;                    /* ارتفاع navbar موبایل */
        height: 70svh;
    }

}


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

@media (max-width: 576px) {

    .mitochondria-heading h2 {
        font-size: 1.85rem;

        line-height: 1.3;
    }

    .mitochondria-heading p {
        font-size: .95rem;
    }

    .mitochondria-scroll-area {
        height: 200vh;
    }

    .mitochondria-visual {
        top: 50px;
        height: 65svh;
    }

    .mitochondria-content {
        grid-template-columns: 1fr;
    }

    .mitochondria-card {
        flex-direction: row;

        align-items: flex-start;
    }

    .mito-card-img {
        width: 110px;
        height: 110px;

        min-width: 110px;

        aspect-ratio: unset;

        border-radius: 12px;
    }

    .mito-card-number {
        top: -10px;
        right: 10px;

        width: 36px;
        height: 36px;

        font-size: 13px;
    }

}


/* ==========================================================
   VERY SMALL MOBILE
   ========================================================== */

@media (max-width: 380px) {

    .mitochondria-heading h2 {
        font-size: 1.65rem;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .mitochondria-card {
        transition: none;
    }

    .reveal-up {
        opacity: 1;

        transform: none;

        transition: none;
    }

    .mito-featured.reveal-up.is-visible {
        transform: none;
    }

}