/* v7.6.6 — Home (desktop): split layout for single doctor card
   Left column: image + "View all doctors" button
   Right column: Name, Specialty, Degrees
*/
@media (min-width: 992px){
  .home-doctors .grid{
    display: flex !important;
    justify-content: center !important;
  }
  .home-doctors .card.doctor{
    display: grid !important;
    grid-template-columns: 320px 1fr; /* Left: photo+button | Right: text */
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "photo name"
      "photo spec"
      "photo deg"
      "cta   deg";
    gap: 18px 24px;
    max-width: 1100px;
    width: 100%;
    padding: 22px 24px;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(16,24,40,.06);
    align-items: start;
  }
  .home-doctors .card.doctor img{ grid-area: photo; width:100%; height:auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 14px; box-shadow: 0 6px 18px rgba(16,24,40,.06); }
  .home-doctors .card.doctor h3{ grid-area: name; margin:0; font-size:1.6rem; line-height:1.2; font-weight:900; }
  /* first .meta = specialty; second .meta = degrees */
  .home-doctors .card.doctor .meta:first-of-type{ grid-area: spec; margin:0; font-size:1.05rem; color:#334155; }
  .home-doctors .card.doctor .meta:last-of-type{ grid-area: deg; margin:0; color:#475569; max-width: 880px; }
  .home-doctors .card.doctor .btn{ grid-area: cta; justify-self: start; align-self: start; padding:12px 16px; border-radius:14px; border:1.5px solid var(--brand); color:var(--brand); background:#fff; font-weight:800; }

  /* Fine‑tune spacing on very wide screens */
  @media (min-width: 1300px){
    .home-doctors .card.doctor{ max-width: 1200px; grid-template-columns: 360px 1fr; }
  }
}


/* v7.6.6 — refine spacing & wrapping for single doctor card (desktop) */
@media (min-width: 992px){
  /* Tighter layout + fewer rows (name, spec, degrees) */
  .home-doctors .card.doctor{
    grid-template-columns: 300px 1fr;        /* photo | text */
    grid-template-rows: auto auto auto;      /* name, spec, deg */
    grid-template-areas:
      "photo name"
      "photo spec"
      "cta   deg";
    gap: 10px 28px;                          /* row-gap | col-gap */
    padding: 18px 22px;
    align-items: start;
  }

  /* Left: photo + button */
  .home-doctors .card.doctor img{
    grid-area: photo;
    width:100%; height:auto; aspect-ratio: 4/3; object-fit:cover;
    border-radius:14px; box-shadow:0 6px 18px rgba(16,24,40,.06);
  }
  .home-doctors .card.doctor .btn{
    grid-area: cta;
    justify-self: start; align-self: start;
    margin-top: 10px !important;
    padding: 12px 16px; border-radius: 14px;
    border: 1.5px solid var(--brand); color: var(--brand); background:#fff; font-weight: 800;
  }

  /* Right: name → specialty → degrees (tighter vertical rhythm) */
  .home-doctors .card.doctor h3{
    grid-area: name;
    margin: 0 0 2px !important;
    font-size: 1.55rem !important; line-height: 1.2; font-weight: 900;
  }
  .home-doctors .card.doctor .meta:first-of-type{   /* specialty */
    grid-area: spec;
    margin: 0 !important;
    font-size: 1.05rem; line-height: 1.35; color: #334155;
  }
  .home-doctors .card.doctor .meta:last-of-type{    /* degrees */
    grid-area: deg;
    margin: 2px 0 0 !important;
    font-size: .98rem; line-height: 1.4; color: #475569;
    max-width: 80ch;         /* wraps to ~2–3 lines instead of one ultra-long line */
  }
}


/* v7.6.6b — precise placement, tighter spacing */
@media (min-width: 992px){
  .home-doctors .card.doctor{
    display: grid !important;
    grid-template-columns: 320px 1fr !important;   /* left photo | right text */
    grid-auto-rows: auto !important;               /* rows size to content */
    gap: 8px 28px !important;                      /* row-gap | col-gap */
    align-items: start !important;
    padding: 18px 22px !important;
  }

  /* LEFT: photo spans two rows; button sits directly under it */
  .home-doctors .card.doctor img{
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;               /* rows 1–2 */
    width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover;
    border-radius: 14px; box-shadow: 0 6px 18px rgba(16,24,40,.06);
  }
  .home-doctors .card.doctor .btn{
    grid-column: 1 !important;
    grid-row: 3 !important;                         /* just under photo */
    justify-self: start; align-self: start;
    margin-top: 8px !important;
    padding: 12px 16px; border-radius: 14px;
    border: 1.5px solid var(--brand); color: var(--brand); background: #fff;
    font-weight: 800;
  }

  /* RIGHT: name → specialty → degrees (stacked tightly) */
  .home-doctors .card.doctor h3{
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 0 4px !important;
    font-size: 1.55rem !important; line-height: 1.2; font-weight: 900;
  }
  .home-doctors .card.doctor .meta:first-of-type{  /* specialty */
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    font-size: 1.05rem; line-height: 1.35; color: #334155;
  }
  .home-doctors .card.doctor .meta:last-of-type{   /* degrees */
    grid-column: 2 !important;
    grid-row: 3 !important;
    margin: 6px 0 0 !important;
    font-size: .98rem; line-height: 1.4; color: #475569;
    max-width: 80ch;                                /* wraps to ~2–3 lines */
  }
}

/* v7.6.6d — Desktop: switch to flex layout for perfect alignment */
@media (min-width: 992px){
  /* Container: two-column flex with wrapping so the button sits under the photo */
  .home-doctors .card.doctor{
    display: flex !important;
    flex-wrap: wrap !important;
    column-gap: 28px !important;
    row-gap: 10px !important;
    align-items: flex-start !important;
    padding: 18px 22px !important;
  }

  /* LEFT column */
  .home-doctors .card.doctor img{
    flex: 0 0 320px !important;         /* fixed left column width */
    max-width: 320px !important;
    height: auto !important;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(16,24,40,.06);
  }
  .home-doctors .card.doctor .btn{
    flex: 0 0 320px !important;         /* sits directly under photo */
    max-width: 320px !important;
    order: 2 !important;
    margin-top: 12px !important;
    justify-self: start;
    align-self: flex-start;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1.5px solid var(--brand);
    color: var(--brand);
    background: #fff;
    font-weight: 800;
  }

  /* RIGHT column (stacks naturally: name → specialty → degrees) */
  .home-doctors .card.doctor h3,
  .home-doctors .card.doctor .meta{
    flex: 1 1 420px !important;         /* take the remaining width (right column) */
    order: 3 !important;                /* ensure right column after the button under the photo */
  }
  .home-doctors .card.doctor h3{
    margin: 0 0 6px !important;
    font-size: 1.55rem !important;
    line-height: 1.2;
    font-weight: 900;
  }
  .home-doctors .card.doctor .meta:first-of-type{  /* specialty */
    margin: 0 !important;
    font-size: 1.05rem;
    line-height: 1.35;
    color: #334155;
  }
  .home-doctors .card.doctor .meta:last-of-type{   /* degrees */
    margin: 10px 0 0 !important;       /* small gap under specialty */
    font-size: .98rem;
    line-height: 1.4;
    color: #475569;
    max-width: 80ch;                    /* wraps to ~2–3 lines */
  }
}