/* ============================================================
   DOCCARDS1 — Doctor Cards
   Namespace  : doccards1
============================================================ */

/* 1. Variables & Colors */
.doccards1 {

    /* عام للسكشن */
    --doccards1-bg:            #FFFFFF;
    --doccards1-text:          #0b9aa5;
    --doccards1-title:         #0B2E59;
    --doccards1-subtitle:      #4A5B78;
    --doccards1-border:        #C9EEF0;

    /* الكارت */
    --doccards1-card-bg:       #0B9AA5;
    --doccards1-card-title:    #FFFFFF;
    --doccards1-card-text:     #C9EEF0;

    /* الأيقونات */
    --doccards1-icon-bg:       #0B9AA5;
    --doccards1-icon-text:     #FFFFFF;

    /* الأزرار */
    --doccards1-btn-bg:        #0B9AA5;
    --doccards1-btn-text:      #FFFFFF;

    /* ثانوي وتمييز */
    --doccards1-secondary-bg:   #E8F7F8;
    --doccards1-secondary-text: #0B9AA5;
    --doccards1-accent-warm:    #0B9AA5;

    /* الإدخالات */
    --doccards1-input-bg:      #FFFFFF;
    --doccards1-input-text:    #0B2E59;

    /* Padding للسكشن بالكامل */
    --doccards1-padding-top:    4rem;
    --doccards1-padding-bottom: 4rem;
}

/* 2. Reset داخل الـ namespace */
*,
.doccards1 *,
.doccards1 *::before,
.doccards1 *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* 3. Base Styles — Mobile */
.doccards1 {
    background-color: var(--doccards1-bg);
    padding-top: var(--doccards1-padding-top);
    padding-bottom: var(--doccards1-padding-bottom);
    direction: rtl;
    font-family: "El Messiri", sans-serif;
    color: var(--doccards1-text);
    overflow: hidden;
}

.doccards1 a { text-decoration: none; color: inherit; }

.doccards1__container {
    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.doccards1__header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.doccards1__title {
    font-weight: 700;
    color: var(--doccards1-title);
    font-size: clamp(1.6rem, 6vw, 2.5rem);
    line-height: 1.3;
    margin-bottom: 0.85rem;
    position: relative;
}

.doccards1__subtitle {
    color: var(--doccards1-subtitle);
    font-size: clamp(0.85rem, 3.5vw, 1.1rem);
    line-height: 1.7;
    max-width: 40rem;
    margin: 0 auto;
}

.doccards1__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem 1.75rem;
}

/* الكارت */
.doccards1__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.35s ease;
    height: 100%; /* لضمان تمدد الكارت بداخل الـ Grid */
}

.doccards1__card:hover {
    transform: translateY(-0.4rem);
}

.doccards1__photo-wrap {
    width: 72%;
    max-width: 11.5rem;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    border: 0.35rem solid var(--doccards1-card-bg);
    outline: 0.0625rem solid var(--doccards1-card-bg);
    outline-offset: 0.35rem;
    position: relative;
    z-index: 2;
    box-shadow: 0 0.6rem 1.75rem rgba(11, 46, 89, 0.22);
    transition: box-shadow 0.35s ease;
}

.doccards1__card:hover .doccards1__photo-wrap {
    box-shadow: 0 0.9rem 2.25rem rgba(11, 46, 89, 0.3);
}

.doccards1__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    display: block;
}

.doccards1__info {
    width: 100%;
    margin-top: -2.5rem;
    padding: 3.25rem 1.25rem 1.75rem;
    border-radius: 0.9rem;
    position: relative;
    z-index: 1;
    background-color: var(--doccards1-title);
    box-shadow: 0 0.5rem 1.5rem rgba(11, 46, 89, 0.15);
    transition: box-shadow 0.35s ease;
    
    /* التعديل ليتمدد الصندوق الأزرق ويساوي الارتفاع */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.doccards1__card:hover .doccards1__info {
    box-shadow: 0 0.9rem 2rem rgba(11, 46, 89, 0.22);
}

.doccards1__name {
    color: var(--doccards1-card-title);
    font-weight: 700;
    font-size: clamp(1rem, 4vw, 1.2rem);
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

.doccards1__specialty {
    color: var(--doccards1-card-text);
    font-size: clamp(0.78rem, 3.2vw, 0.9rem);
    line-height: 1.6;
}

/* 4. Breakpoints بالترتيب */

@media (min-width: 481px) {
    /* Small Tablet 481 → 600 */
    .doccards1__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem 2rem;
    }
}

@media (min-width: 601px) {
    /* Medium Tablet 601 → 768 */
    .doccards1__container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 769px) {
    /* Large Tablet 769 → 1024 */
    .doccards1__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 4.5rem 2.25rem;
    }

    .doccards1__header {
        margin-bottom: 4rem;
    }
}

@media (min-width: 1025px) {
    /* Small Desktop 1025 → 1280 */
    .doccards1 {
        --doccards1-padding-top: 5.5rem;
        --doccards1-padding-bottom: 5.5rem;
    }

    .doccards1__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 5rem 2.25rem;
    }
}

@media (min-width: 1281px) {
    /* Medium Desktop 1281 → 1440 */
    .doccards1__grid {
        gap: 5rem 2.75rem;
    }
}

@media (min-width: 1441px) {
    /* Large Desktop 1441 → 1920 */
    .doccards1__container {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

@media (min-width: 1921px) {
    /* Extra Large 1921+ */
    .doccards1__container {
        max-width: 100rem;
    }

    .doccards1__grid {
        gap: 5.5rem 3rem;
    }
}