/*
 * Expertise Page Styles
 * @package KAI_Theme
 */

/* Section Header with Icon */
.section-header-icon {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.section-icon { width: 40px; height: 40px; }
.section-icon img { width: 100%; height: 100%; object-fit: contain; }
.section-title-line {
    height: 3px;
    background: linear-gradient(90deg, var(--teal), var(--cyan), transparent);
    margin-bottom: 2.5rem;
    max-width: 600px;
}
body.rtl .section-title-line {
    background: linear-gradient(270deg, var(--teal), var(--cyan), transparent);
}
.section-intro {
    font-size: 1.125rem;
    color: var(--gray);
    line-height: 1.9;
    margin-bottom: 3rem;
    max-width: 900px;
}

/* ===== Where We Assist ===== */
.assist-section { background: var(--cream); }
.assist-card {
    margin-bottom: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(55, 145, 159, 0.1);
}
.assist-card:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.assist-card h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--teal);
    margin-bottom: 1rem;
}
.assist-card p {
    font-size: 1rem;
    color: var(--gray);
    line-height: 1.9;
    margin-bottom: 0.75rem;
}
.assist-card p:last-child { margin-bottom: 0; }

/* ===== How We Work ===== */
.howwework-section {
    background: var(--white);
    position: relative;
    overflow: hidden;
}
.approach-wrapper {
    background: var(--cream);
    border-radius: 20px;
    padding: 4rem 3rem;
    margin-top: 2rem;
}
.approach-header { text-align: center; margin-bottom: 4rem; }
.approach-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 0.75rem;
}
.approach-tag::before { content: ''; width: 24px; height: 2px; background: var(--cyan); }
body.rtl .approach-tag::before { order: 2; }
.approach-title { font-size: 2.25rem; color: var(--deep-teal); margin-bottom: 0.75rem; }
.approach-subtitle { font-size: 1rem; color: var(--gray); max-width: 600px; margin: 0 auto; }

/* Timeline */
.timeline {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 0 2rem;
}
.timeline::before {
    content: '';
    position: absolute;
    top: 45px;
    left: calc(12.5% + 45px);
    right: calc(12.5% + 45px);
    height: 2px;
    background: var(--teal);
}
.timeline-step { flex: 1; text-align: center; position: relative; }
.timeline-circle {
    width: 90px;
    height: 90px;
    border: 2px solid var(--cream-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    background: var(--white);
    position: relative;
    z-index: 2;
    transition: all 0.4s ease;
}
.timeline-step:hover .timeline-circle {
    border-color: var(--teal);
    background: var(--cream);
}
.timeline-circle span {
    font-family: 'DM Serif Display', serif;
    font-size: 2rem;
    color: var(--teal);
}
.timeline-step h4 { font-size: 1.25rem; color: var(--deep-teal); margin-bottom: 0.75rem; }
.timeline-step p { font-size: 0.9rem; color: var(--gray); line-height: 1.7; max-width: 220px; margin: 0 auto; }

/* ===== Engagement Models ===== */
.engagement-section { background: var(--cream); }
.engagement-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.engagement-card {
    background: var(--white);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    border: 1px solid rgba(55, 145, 159, 0.08);
    transition: all 0.4s ease;
}
.engagement-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(55, 145, 159, 0.12);
}
.engagement-card h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--teal);
    margin-bottom: 0.5rem;
}
.engagement-duration {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cyan);
    margin-bottom: 1.25rem;
    display: block;
}
.engagement-card p {
    font-size: 0.95rem;
    color: var(--gray);
    line-height: 1.8;
    margin-bottom: 0.75rem;
}
.engagement-card p:last-child { margin-bottom: 0; }

/* ===== Responsive ===== */
@media (max-width: 1200px) {
    .engagement-grid { grid-template-columns: 1fr; }
    .timeline { flex-wrap: wrap; gap: 3rem; }
    .timeline::before { display: none; }
    .timeline-step { flex: 0 0 50%; }
}
@media (max-width: 992px) {
    .timeline-step { flex: 0 0 100%; }
}
@media (max-width: 768px) {
    .approach-wrapper { padding: 2.5rem 1.5rem; }
}