/* ═══════════════════════════════════════════
   SAHAR PARTS - ABOUT PAGE STYLES
   All --sab-* map to --sp-about-* from database settings.
   ═══════════════════════════════════════════ */

@keyframes sabFadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.about-page {
    --sab-bg: var(--sp-about-page_bg, #f8f9fa);
    --sab-text: var(--sp-about-page_text_color, #333333);
    --sab-font: var(--sp-about-page_font_family, inherit);
    --sab-primary: #D4A017;
    --sab-primary-hover: #b8890f;
    --sab-text-muted: #999999;
    --sab-border: #e0e0e0;

    /* Container */
    --sab-container-bg: var(--sp-about-container_bg, #ffffff);
    --sab-container-shadow: var(--sp-about-container_shadow, 0 2px 12px rgba(0,0,0,0.08));
    --sab-container-radius: var(--sp-about-container_radius, 12px);
    --sab-container-padding: var(--sp-about-container_padding, 24px);
    --sab-container-max-width: var(--sp-about-container_max_width, 1140px);

    /* Title */
    --sab-title-color: var(--sp-about-title_color, #1a202c);
    --sab-title-size: var(--sp-about-title_size, 2rem);
    --sab-title-weight: var(--sp-about-title_weight, 700);
    --sab-title-margin: var(--sp-about-title_margin, 0 0 30px 0);
    --sab-title-align: var(--sp-about-title_align, center);

    /* Content Box */
    --sab-content-bg: var(--sp-about-content_bg, #ffffff);
    --sab-content-radius: var(--sp-about-content_radius, 12px);
    --sab-content-shadow: var(--sp-about-content_shadow, 0 2px 12px rgba(0,0,0,0.08));
    --sab-content-padding: var(--sp-about-content_padding, 24px);

    /* Content Text */
    --sab-content-color: var(--sp-about-content_color, #333333);
    --sab-content-size: var(--sp-about-content_size, 1rem);
    --sab-content-lh: var(--sp-about-content_line_height, 1.8);

    /* Content Headings */
    --sab-heading-color: var(--sp-about-content_heading_color, #1a202c);
    --sab-heading-size: var(--sp-about-content_heading_size, 1.5rem);
    --sab-heading-weight: var(--sp-about-content_heading_weight, 700);
    --sab-heading-margin: var(--sp-about-content_margin, 0 0 16px 0);

    /* Section */
    --sab-section-gap: var(--sp-about-section_gap, 24px);
    --sab-section-margin: var(--sp-about-section_margin, 0 0 40px 0);

    /* Dark mode overrides */
    --sab-dark-bg: #1a1a2e;
    --sab-dark-card: #2d3748;
    --sab-dark-border: #4a5568;
    --sab-dark-text: #e2e8f0;

    font-family: var(--sab-font);
    background: var(--sab-bg);
    color: var(--sab-text);
    min-height: 60vh;
}

.about-page * { -webkit-tap-highlight-color: transparent; }

/* ===== Container ===== */
.about-container {
    max-width: var(--sab-container-max-width);
    margin: 0 auto;
    padding: var(--sab-container-padding);
    width: 100%;
}

/* ===== Centered Layout ===== */
.about-centered {
    max-width: 900px;
    margin: 0 auto;
}

/* ===== Section ===== */
.about-section {
    margin: var(--sab-section-margin);
}

/* ===== Title ===== */
.about-page-header {
    text-align: var(--sab-title-align);
    margin: var(--sab-title-margin);
    animation: sabFadeInUp 0.6s cubic-bezier(0.4,0,0.2,1) both;
}
.about-page-header h1 {
    font-size: var(--sab-title-size);
    font-weight: var(--sab-title-weight);
    color: var(--sab-title-color);
    margin: 0;
}
.about-page-header .about-subtitle {
    color: var(--sab-text-muted);
    font-size: 1.1rem;
    margin-top: 8px;
}

/* ===== Content Box ===== */
.about-content {
    background: var(--sab-content-bg);
    border-radius: var(--sab-content-radius);
    box-shadow: var(--sab-content-shadow);
    padding: var(--sab-content-padding);
    animation: sabFadeInUp 0.6s cubic-bezier(0.4,0,0.2,1) both;
    animation-delay: 0.1s;
}

.about-content p {
    font-size: var(--sab-content-size);
    color: var(--sab-content-color);
    line-height: var(--sab-content-lh);
    margin: 0 0 16px;
}
.about-content p:last-child { margin-bottom: 0; }

.about-content h2,
.about-content h3,
.about-content h4 {
    font-size: var(--sab-heading-size);
    font-weight: var(--sab-heading-weight);
    color: var(--sab-heading-color);
    margin: var(--sab-heading-margin);
}

.about-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0;
}

.about-content ul,
.about-content ol {
    font-size: var(--sab-content-size);
    color: var(--sab-content-color);
    line-height: var(--sab-content-lh);
    padding-right: 20px;
    margin: 0 0 16px;
}
.about-content li { margin-bottom: 8px; }

.about-content blockquote {
    border-right: 4px solid var(--sab-primary);
    padding: 16px 20px;
    margin: 20px 0;
    background: rgba(212, 160, 23, 0.05);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: var(--sab-text-muted);
}

/* ===== Team / Features Grid ===== */
.about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sab-section-gap);
    margin-bottom: var(--sab-section-gap);
}

.about-card {
    background: var(--sab-content-bg);
    border-radius: var(--sab-content-radius);
    box-shadow: var(--sab-content-shadow);
    padding: var(--sab-container-padding);
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    animation: sabFadeInUp 0.6s cubic-bezier(0.4,0,0.2,1) both;
}
.about-card:nth-child(1) { animation-delay: 0.05s; }
.about-card:nth-child(2) { animation-delay: 0.1s; }
.about-card:nth-child(3) { animation-delay: 0.15s; }
.about-card:nth-child(4) { animation-delay: 0.2s; }

.about-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    transform: translateY(-4px);
}

.about-card .card-icon {
    font-size: 2.5rem;
    color: var(--sab-primary);
    margin-bottom: 16px;
}
.about-card h3 {
    font-size: var(--sab-heading-size);
    font-weight: var(--sab-heading-weight);
    color: var(--sab-heading-color);
    margin: 0 0 12px;
}
.about-card p {
    font-size: var(--sab-content-size);
    color: var(--sab-content-color);
    line-height: var(--sab-content-lh);
    margin: 0;
}

/* ===== Responsive ===== */
@media (min-width: 576px) {
    .about-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
    .about-container { padding: 32px; }
    .about-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .about-content { padding: 32px; }
}
@media (min-width: 992px) {
    .about-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
    .about-container { max-width: var(--sab-container-max-width); }
    .about-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ===== Dark Mode ===== */
@media (prefers-color-scheme: dark) {
    .about-page {
        --sab-bg: var(--sab-dark-bg);
        --sab-text: var(--sab-dark-text);
        --sab-border: var(--sab-dark-border);
        --sab-container-bg: var(--sab-dark-card);
        --sab-container-shadow: 0 2px 12px rgba(0,0,0,0.3);
        --sab-title-color: var(--sab-dark-text);
        --sab-content-bg: var(--sab-dark-card);
        --sab-content-shadow: 0 2px 12px rgba(0,0,0,0.3);
        --sab-content-color: #cccccc;
        --sab-heading-color: var(--sab-dark-text);
        --sab-text-muted: #999999;
        --sab-primary: #D4A017;
        --sab-primary-hover: #e6b422;
    }
    .about-content blockquote {
        border-right-color: var(--sab-primary);
        background: rgba(212, 160, 23, 0.08);
    }
}

/* ===== Print ===== */
@media print {
    .about-page { background: white; color: black; font-size: 12pt; }
    .about-container { max-width: 100%; margin: 0; padding: 0; box-shadow: none; }
    .about-content { box-shadow: none; }
    .about-card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
    .about-card:hover { transform: none; box-shadow: none; }
}