/*
 * Related Doctors Listing — Stylesheet
 * =====================================================================
 * All design tokens live as CSS custom properties on .rdl-section.
 * To customise, override any variable in:
 *   • Your child-theme's style.css, OR
 *   • Elementor → Site Settings → Custom CSS, OR
 *   • Elementor widget → Advanced → Custom CSS
 *
 * EXAMPLE OVERRIDES
 * ─────────────────
 * .rdl-section {
 *   --rdl-card-bg:        #ffffff;
 *   --rdl-text-primary:   #111111;
 *   --rdl-accent:         #e5a020;
 *   --rdl-link:           #0066cc;
 *   --rdl-font-heading:   'Merriweather', serif;
 *   --rdl-font-body:      'Nunito', sans-serif;
 *   --rdl-img-height:     300px;
 *   --rdl-cols:           3;
 * }
 * =====================================================================
 */

/* ── Google Fonts ────────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=DM+Sans:wght@400;500&display=swap");


/* ══════════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ══════════════════════════════════════════════════════════════════════ */
.rdl-section {

    /* ── Colors ─────────────────────────────────────────────────────── */
    --rdl-bg:             transparent;        /* Section wrapper background   */
    --rdl-card-bg:        #0f1225;            /* Card resting background      */
    --rdl-card-hover-bg:  #161a34;            /* Card hovered background      */
    --rdl-accent:         #c8922a;            /* Gold — credentials & icons   */
    --rdl-link:           #4ea8de;            /* "View profile" link color    */
    --rdl-link-hover:     #7cc0f0;            /* "View profile" hover color   */
    --rdl-text-primary:   #ffffff;            /* Doctor name color            */
    --rdl-text-secondary: #8b93b8;            /* Specialty / city color       */
    --rdl-icon-color:     #c8922a;            /* SVG icon color               */
    --rdl-border:         #1f2545;            /* Card border color            */
    --rdl-shadow:         0 4px 32px rgba(0, 0, 0, .45);   /* Resting shadow */
    --rdl-hover-shadow:   0 8px 48px rgba(0, 0, 0, .65);   /* Hover shadow   */

    /* ── Shape ──────────────────────────────────────────────────────── */
    --rdl-radius:         14px;               /* Card corner radius           */
    --rdl-img-height:     270px;              /* Photo area height            */

    /* ── Typography ─────────────────────────────────────────────────── */
    --rdl-font-heading:         "Playfair Display", Georgia, serif;
    --rdl-font-body:            "DM Sans", system-ui, sans-serif;
    --rdl-section-heading-size: 1.75rem;      /* "Related Doctors" title      */
    --rdl-heading-size:         1.1rem;       /* Doctor name                  */
    --rdl-specialty-size:       0.68rem;      /* Specialty label              */
    --rdl-meta-size:            0.82rem;      /* City / meta text             */
    --rdl-link-size:            0.85rem;      /* "View profile" text          */

    /* ── Layout ─────────────────────────────────────────────────────── */
    --rdl-cols:           4;                  /* Desktop column count         */
    --rdl-gap:            1.25rem;            /* Gap between cards            */
    --rdl-padding:        1.5rem;             /* Card body padding            */

    /* ── Motion ─────────────────────────────────────────────────────── */
    --rdl-transition: 0.32s cubic-bezier(.4, 0, .2, 1);

    /* ── Applied base ───────────────────────────────────────────────── */
    background:  var(--rdl-bg);
    padding:     2rem 0;
    font-family: var(--rdl-font-body);
}


/* ══════════════════════════════════════════════════════════════════════
   SECTION HEADING
   ══════════════════════════════════════════════════════════════════════ */
.rdl-section-heading {
    font-family: var(--rdl-font-heading);
    font-size:   var(--rdl-section-heading-size);
    font-weight: 700;
    color:       var(--rdl-text-primary);
    margin:      0 0 1.5rem;
    line-height: 1.2;
}


/* ══════════════════════════════════════════════════════════════════════
   GRID
   ══════════════════════════════════════════════════════════════════════ */
.rdl-grid {
    display:               grid;
    grid-template-columns: repeat(var(--rdl-cols), 1fr);
    gap:                   var(--rdl-gap);
}


/* ══════════════════════════════════════════════════════════════════════
   CARD  (<a> wraps the entire column — fully clickable)
   ══════════════════════════════════════════════════════════════════════ */
.rdl-card {
    display:         flex;
    flex-direction:  column;
    background:      var(--rdl-card-bg);
    border:          1px solid var(--rdl-border);
    border-radius:   var(--rdl-radius);
    overflow:        hidden;
    box-shadow:      var(--rdl-shadow);
    text-decoration: none !important;
    color:           inherit;
    cursor:          pointer;
    position:        relative;
    transition:
        transform     var(--rdl-transition),
        box-shadow    var(--rdl-transition),
        background    var(--rdl-transition),
        border-color  var(--rdl-transition);
    outline-offset: 3px;
}

.rdl-card:hover,
.rdl-card:focus-visible {
    transform:       translateY(-5px);
    box-shadow:      var(--rdl-hover-shadow);
    background:      var(--rdl-card-hover-bg);
    border-color:    var(--rdl-accent);
    text-decoration: none !important;
}

.rdl-card:focus-visible {
    outline: 2px solid var(--rdl-link);
}


/* ══════════════════════════════════════════════════════════════════════
   PHOTO
   ══════════════════════════════════════════════════════════════════════ */
.rdl-card__photo {
    width:      100%;
    height:     var(--rdl-img-height);
    overflow:   hidden;
    flex-shrink: 0;
    background: #0b0e20;
    position:   relative;
}

.rdl-card__photo img {
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center top;
    display:         block;
    transition:      transform var(--rdl-transition);
}

.rdl-card:hover .rdl-card__photo img {
    transform: scale(1.04);
}

/* Gradient fade at the photo bottom edge */
.rdl-card__photo::after {
    content:        "";
    position:       absolute;
    inset:          auto 0 0;
    height:         50%;
    background:     linear-gradient(to top, var(--rdl-card-bg) 0%, transparent 100%);
    pointer-events: none;
    transition:     background var(--rdl-transition);
}

.rdl-card:hover .rdl-card__photo::after {
    background: linear-gradient(to top, var(--rdl-card-hover-bg) 0%, transparent 100%);
}

/* Avatar placeholder when no photo exists */
.rdl-card__photo-placeholder {
    width:           100%;
    height:          100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      #0b0e20;
}

.rdl-card__photo-placeholder svg {
    width:   80px;
    height:  80px;
    opacity: .45;
}


/* ══════════════════════════════════════════════════════════════════════
   CARD BODY
   ══════════════════════════════════════════════════════════════════════ */
.rdl-card__body {
    padding:        var(--rdl-padding);
    display:        flex;
    flex-direction: column;
    gap:            0.55rem;
    flex:           1;
}

/* ── Doctor name ── */
.rdl-card__name {
    font-family:    var(--rdl-font-heading);
    font-size:      var(--rdl-heading-size);
    font-weight:    700;
    color:          var(--rdl-text-primary);
    margin:         0;
    line-height:    1.3;
    letter-spacing: 0.01em;
}

/* ── Specialty row ── */
.rdl-card__specialty {
    display:        flex;
    align-items:    center;
    gap:            0.4rem;
    font-size:      var(--rdl-specialty-size);
    font-weight:    500;
    color:          var(--rdl-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin:         0;
}

/* ── City row ── */
.rdl-card__meta {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
    font-size:   var(--rdl-meta-size);
    color:       var(--rdl-text-secondary);
    margin:      0;
}

/* ── SVG icons ── */
.rdl-icon {
    display:     inline-flex;
    align-items: center;
    color:       var(--rdl-icon-color);
    flex-shrink: 0;
}

.rdl-icon svg {
    width:  14px;
    height: 14px;
}

/* ── "View profile →" ── */
.rdl-card__link {
    display:     inline-flex;
    align-items: center;
    gap:         0.35rem;
    font-size:   var(--rdl-link-size);
    font-weight: 500;
    color:       var(--rdl-link);
    margin-top:  auto;
    padding-top: 0.4rem;
    transition:  color var(--rdl-transition), gap var(--rdl-transition);
}

.rdl-card__link svg {
    width:      15px;
    height:     15px;
    transition: transform var(--rdl-transition);
}

.rdl-card:hover .rdl-card__link {
    color: var(--rdl-link-hover);
    gap:   0.55rem;
}

.rdl-card:hover .rdl-card__link svg {
    transform: translateX(3px);
}


/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════════════════════════════ */

/* Large tablets / small desktops — image height only; columns controlled by Elementor */
@media (max-width: 1200px) {
    .rdl-section {
        --rdl-img-height: 250px;
    }
}

/* Tablets (portrait) — image height only; columns controlled by Elementor */
@media (max-width: 900px) {
    .rdl-section {
        --rdl-img-height: 240px;
    }
}

/* Mobile — image height + spacing tweaks; columns controlled by Elementor */
@media (max-width: 560px) {
    .rdl-section {
        --rdl-img-height:           220px;
        --rdl-gap:                  1rem;
        --rdl-heading-size:         1rem;
        --rdl-section-heading-size: 1.4rem;
    }

    .rdl-card__body {
        padding: 1.1rem;
    }

    .rdl-card:hover {
        transform: translateY(-3px);
    }
}