/*
 * ==========================================================================
 * #PAGE: Increase Site Speed — ZHM-X v5.0.1
 * ==========================================================================
 *
 * ONLY layout, positioning, and page-specific context.
 * All colors, fonts, sizes, shadows → _canonical-ui.css
 */

/* ═══════════════════════════════════════════════════════════════════════
   1. PAGE WRAPPER & UTILITIES
   ═══════════════════════════════════════════════════════════════════════ */

.sc-speed-page {
    background-color: var(--comp-surface-base);
}

.sc-speed-page,
.sc-speed-page *,
.sc-speed-page *::before,
.sc-speed-page *::after {
    box-sizing: border-box;
}

.sc-speed-page .sc-container {
   width: 100%;
        display: inline-block;
  
}

/* ═══════════════════════════════════════════════════════════════════════
   2. SECTION SPACING
   ═══════════════════════════════════════════════════════════════════════ */

.sc-speed-page .sc-section {
    padding: var(--sys-spacing-3xl) 0;
}

.sc-speed-page .sc-section-title {
    margin-bottom: var(--sys-spacing-3xl);
    text-align: center;
}

.sc-speed-page .sc-section-title p {
    max-width: 800px;
    margin: var(--sys-spacing-md) auto 0;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. HERO SECTION — Page-Specific
   ═══════════════════════════════════════════════════════════════════════ */

.sc-speed-page .sc-hero {
    position: relative;
    padding: var(--sys-spacing-3xl) var(--sys-spacing-lg);
    background-image: url('https://siteeman.ir/wp-content/uploads/2025/07/increase-site-speed-bg.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--sys-color-neutral-0);
    text-align: center;
}

.sc-speed-page .sc-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: var(--sys-color-primary-darker);
    opacity: 0.7;
    backdrop-filter: blur(3px);
}

.sc-speed-page .sc-hero .sc-container {
    position: relative;
    z-index: 2;
}

.sc-speed-page .sc-hero .sc-subtitle {
    max-width: 700px;
    margin: 0 auto var(--sys-spacing-xl);
    color: rgba(255, 255, 255, 0.9);
    text-align: justify;
    animation: sc-fadeInUp 1s ease-out 0.3s both;
}

.sc-speed-page .sc-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sys-spacing-md);
    animation: sc-fadeInUp 1s ease-out 0.6s both;
}

/* ═══════════════════════════════════════════════════════════════════════
   4. CHECKLIST GRID — Layout Only
   ═══════════════════════════════════════════════════════════════════════ */

.sc-speed-page .sc-checklist-grid {
    display: grid;
    gap: var(--sys-spacing-sm);
    grid-template-columns: repeat(2, 1fr);
}

.sc-speed-page .sc-checklist-item {
    display: flex;
    align-items: center;
    gap: var(--sys-spacing-md);
    padding: var(--sys-spacing-lg);
    text-align: right;
}

.sc-speed-page .sc-checklist-item .sc-icon-container {
    flex-shrink: 0;
    color: var(--sys-color-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   5. NOTE & CTA BOXES — Layout Only
   ═══════════════════════════════════════════════════════════════════════ */

.sc-speed-page .sc-note-section {
    padding: var(--sys-spacing-2xl) 0;
    text-align: center;
}

.sc-speed-page .sc-note-box {
    display: inline-block;
    max-width: 800px;
    padding: var(--sys-spacing-2xl);
}

.sc-speed-page .sc-cta-box {
    /*padding: var(--sys-spacing-2xl);*/
    text-align: center;
}

.sc-speed-page .sc-cta-box p {
    max-width: 600px;
    margin: var(--sys-spacing-md) auto var(--sys-spacing-xl);
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   6. ANIMATIONS (PAGE-SPECIFIC)
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes sc-fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes sc-fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════
   7. RESPONSIVE — Layout Only
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
    .sc-speed-page .sc-checklist-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
}

@media (min-width: 1200px) {
    .sc-speed-page .sc-checklist-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 767px) {

    /* کارت‌ها — تک ستون */
    .sc-speed-page .sc-checklist-grid {
        grid-template-columns: 1fr;
    }

    /* CTA — فاصله از سکشن بالا */
    .sc-speed-page .sc-cta-box-section {
        padding-top: var(--sys-spacing-2xl);
    }

    /* دکمه‌های CTA — کنار هم */
    .sc-speed-page .z-cta-box__actions {
        flex-direction: row !important;
        flex-wrap: nowrap;
        gap: var(--sys-spacing-sm);
    }

    .sc-speed-page .z-cta-box__actions .zbtn {
        flex: 1;
        min-width: 0;
        padding: var(--sys-spacing-sm) var(--sys-spacing-md);
        /*font-size: var(--size-small);*/
        white-space: nowrap;
    }

    .sc-speed-page .sc-hero-buttons {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--sys-spacing-sm);
    }

    .sc-speed-page .sc-checklist-item {
        flex-direction: column;
        gap: var(--sys-spacing-sm);
        padding: var(--sys-spacing-md);
        text-align: center;
    }

    .sc-speed-page .sc-checklist-item .sc-icon-container {
        margin-bottom: var(--sys-spacing-xs);
    }
}