/* Tutor-card track sizing is fluid at every viewport. This base rule prevents
   a desktop three-column calculation from squeezing cards in device emulation. */
#top-teachers-grid .tutors-grid,
#featured-tutors-grid .tutors-grid,
#new-available-grid .tutors-grid{
  grid-auto-columns:minmax(0,min(340px,calc(100vw - 40px)))!important;
}
.all-tutors-catalog .tutors-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))!important;
}
.tutor-card-quick-actions .tutor-card-chat{order:1}
.tutor-card-quick-actions .tutor-card-save{order:2}
.tutor-card-quick-actions .tutor-card-play{order:3}

/* Container fallback: the live homepage injects cards after page load. When the
   actual card region is narrow, use a real one-column list regardless of how a
   browser or DevTools reports the viewport width. */
#top-teachers-grid,
#featured-tutors-grid,
#new-available-grid,
.all-tutors-catalog{container-type:inline-size}

/* Equal-height tutor cards on desktop. Content grows inside the card while the
   footer stays pinned to the common bottom edge. */
@container (min-width:681px){
  #top-teachers-grid .tutors-grid,
  #featured-tutors-grid .tutors-grid,
  #new-available-grid .tutors-grid,
  .all-tutors-catalog .tutors-grid{
    grid-template-rows:1fr!important;
    grid-auto-rows:1fr!important;
    align-items:stretch!important;
  }
  #top-teachers-grid .tutors-grid>.tutor-card,
  #featured-tutors-grid .tutors-grid>.tutor-card,
  #new-available-grid .tutors-grid>.tutor-card,
  .all-tutors-catalog .tutors-grid>.tutor-card{
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    align-self:stretch!important;
  }
}
@container (max-width:680px){
  #top-teachers-grid .tutors-grid,
  #featured-tutors-grid .tutors-grid,
  #new-available-grid .tutors-grid,
  .all-tutors-catalog .tutors-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-flow:row!important;
    grid-auto-columns:auto!important;
    width:100%!important;
    gap:14px!important;
    overflow:visible!important;
    padding:2px 0 12px!important;
    scroll-snap-type:none!important;
  }
  #top-teachers-grid .tutors-grid>.tutor-card,
  #featured-tutors-grid .tutors-grid>.tutor-card,
  #new-available-grid .tutors-grid>.tutor-card,
  .all-tutors-catalog .tutors-grid>.tutor-card{
    width:100%!important;
    max-width:430px!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0 auto!important;
    align-self:start!important;
  }
  #top-teachers-grid .tutor-card-header,
  #featured-tutors-grid .tutor-card-header,
  #new-available-grid .tutor-card-header,
  .all-tutors-catalog .tutor-card-header{
    height:auto!important;
    min-height:76px!important;
    max-height:none!important;
    padding:11px 13px!important;
  }
  #top-teachers-grid .tutor-card-body,
  #featured-tutors-grid .tutor-card-body,
  #new-available-grid .tutor-card-body,
  .all-tutors-catalog .tutor-card-body{
    flex:0 0 auto!important;
    min-height:0!important;
    overflow:visible!important;
  }
  #top-teachers-grid .tutor-card-footer,
  #featured-tutors-grid .tutor-card-footer,
  #new-available-grid .tutor-card-footer,
  .all-tutors-catalog .tutor-card-footer{margin-top:0!important}
  #top-teachers-grid .tutor-card-quick-actions,
  #featured-tutors-grid .tutor-card-quick-actions,
  #new-available-grid .tutor-card-quick-actions,
  .all-tutors-catalog .tutor-card-quick-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    width:100%!important;
  }
  #top-teachers-grid .tutor-card-quick-actions button,
  #featured-tutors-grid .tutor-card-quick-actions button,
  #new-available-grid .tutor-card-quick-actions button,
  .all-tutors-catalog .tutor-card-quick-actions button{
    width:100%!important;
    min-width:0!important;
    min-height:36px!important;
    padding:5px 4px!important;
    font-size:.66rem!important;
    line-height:1.2!important;
  }
  #top-teachers-grid .tutor-card-actions .btn,
  #featured-tutors-grid .tutor-card-actions .btn,
  #new-available-grid .tutor-card-actions .btn,
  .all-tutors-catalog .tutor-card-actions .btn{
    min-height:38px!important;
    padding:6px 5px!important;
    font-size:.69rem!important;
  }
}

/* Mobile tutor cards: content-sized, touch-friendly and intentionally compact. */
@media (max-width:680px){
  .tutors-grid{min-width:0;align-items:start!important}

  /* Homepage rails keep a visible next-card cue without stretching cards. */
  #top-teachers-grid .tutors-grid,
  #featured-tutors-grid .tutors-grid,
  #new-available-grid .tutors-grid{
    grid-auto-columns:minmax(0,min(320px,calc(100vw - 48px)))!important;
    grid-template-rows:auto!important;
    align-items:start!important;
    gap:13px!important;
    padding:2px 1px 12px!important;
    scrollbar-width:none;
  }
  #top-teachers-grid .tutors-grid::-webkit-scrollbar,
  #featured-tutors-grid .tutors-grid::-webkit-scrollbar,
  #new-available-grid .tutors-grid::-webkit-scrollbar{display:none}

  .tutors-grid>.tutor-card,
  #top-teachers-grid .tutors-grid>.tutor-card,
  #featured-tutors-grid .tutors-grid>.tutor-card,
  #new-available-grid .tutors-grid>.tutor-card,
  .all-tutors-catalog .tutors-grid>.tutor-card{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    align-self:start!important;
    border-radius:14px;
    box-shadow:0 5px 18px rgba(12,36,67,.07);
  }
  .all-tutors-catalog .tutors-grid{
    grid-template-columns:minmax(0,1fr)!important;
    align-items:start!important;
    gap:14px!important;
  }
  .all-tutors-catalog .tutor-card{max-width:430px;margin-inline:auto}

  .tutors-grid .tutor-card-header{
    height:auto!important;
    min-height:76px!important;
    max-height:none!important;
    flex:0 0 auto!important;
    padding:11px 13px!important;
    gap:11px!important;
    align-items:center;
  }
  .tutors-grid .tutor-avatar{width:52px;height:52px;border-width:2px}
  .tutors-grid .tutor-header-info{max-height:none;overflow:visible}
  .tutors-grid .tutor-name{
    display:flex;
    max-height:none;
    -webkit-line-clamp:unset;
    line-clamp:unset;
    flex-wrap:wrap;
    gap:4px;
    font-size:.91rem;
    line-height:1.35;
  }
  .tutors-grid .tutor-city{margin-top:3px;font-size:.69rem}
  .tutors-grid .tutor-status-badge{font-size:.56rem;padding:2px 6px}

  .tutors-grid .tutor-card-body{
    flex:0 0 auto!important;
    min-height:0!important;
    padding:11px 13px 12px!important;
    overflow:visible!important;
  }
  .tutors-grid .tutor-card-tagline{font-size:.73rem;line-height:1.45;margin-bottom:8px}
  .tutors-grid .tutor-detail-label{font-size:.61rem;margin-bottom:4px}
  .tutors-grid .tutor-subjects,
  .tutors-grid .tutor-subjects:not(.tutor-classes),
  .tutors-grid .tutor-classes{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    flex:0 0 auto!important;
    gap:4px;
    margin:0 0 8px;
    overflow:visible;
  }
  .tutors-grid .subject-tag{font-size:.65rem;line-height:1.35;padding:3px 7px;white-space:normal}
  .tutors-grid .tutor-meta,
  .tutors-grid .tutor-rating{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    flex:0 0 auto!important;
    font-size:.7rem;
    margin:0 0 6px;
    overflow:visible;
  }
  .tutor-card-credentials{gap:3px 9px!important;margin:5px 0!important;font-size:.68rem!important}
  .tutor-card-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 9px;margin-top:7px;padding-top:8px}
  .tutor-card-metric-label{font-size:.63rem}.tutor-card-metric-value{font-size:.7rem}
  .tutor-card-activity{font-size:.65rem}

  .tutors-grid .tutor-card-footer{
    margin-top:0!important;
    padding:10px 12px 12px!important;
    gap:8px!important;
  }
  .tutors-grid .tutor-card-footer .tutor-card-quick-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    min-height:0!important;
    padding:0!important;
  }
  .tutors-grid .tutor-card-footer .tutor-card-quick-actions button{
    width:100%;
    min-width:0;
    min-height:36px;
    padding:5px 4px;
    font-size:.66rem;
    white-space:normal;
  }
  .tutors-grid .tutor-card-footer .tutor-card-quick-actions button:nth-child(3):last-child{grid-column:1/-1}
  .tutors-grid .tutor-card-footer .tutor-card-quick-actions .tutor-card-chat,
  .tutors-list .list-right .tutor-card-quick-actions .tutor-card-chat{grid-column:1!important;grid-row:1!important}
  .tutors-grid .tutor-card-footer .tutor-card-quick-actions .tutor-card-save,
  .tutors-list .list-right .tutor-card-quick-actions .tutor-card-save{grid-column:2!important;grid-row:1!important}
  .tutors-grid .tutor-card-footer .tutor-card-quick-actions .tutor-card-play,
  .tutors-list .list-right .tutor-card-quick-actions .tutor-card-play{grid-column:1/-1!important;grid-row:2!important}
  .tutors-grid .tutor-card-footer .tutor-card-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    min-height:0!important;
    padding:0!important;
  }
  .tutors-grid .tutor-card-footer .tutor-card-actions .btn{
    width:100%;
    height:auto!important;
    min-height:38px;
    padding:6px 5px;
    font-size:.69rem;
    white-space:normal;
  }

  /* Search results become compact two-column identity cards, then full-width details. */
  .tutors-list>.tutor-list-card{
    box-sizing:border-box;
    display:grid!important;
    grid-template-columns:58px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    width:100%;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:14px!important;
    gap:11px!important;
    align-items:start;
    text-align:left!important;
    border-radius:14px;
    transform:none!important;
  }
  .tutors-list .list-avatar{grid-column:1;width:58px;height:58px;margin:0!important}
  .tutors-list .list-info{
    grid-column:2;
    min-width:0;
    max-height:none!important;
    overflow:visible!important;
  }
  .tutors-list .list-name{
    justify-content:flex-start!important;
    gap:5px;
    max-height:none;
    font-size:.9rem;
    line-height:1.35;
  }
  .tutors-list .list-tagline{height:auto;max-height:39px;margin:4px 0 7px;font-size:.72rem;line-height:1.4}
  .tutors-list .list-subjects,
  .tutors-list .list-rating,
  .tutors-list .list-badges{justify-content:flex-start!important}
  .tutors-list .list-subjects{min-height:0;max-height:none;margin-bottom:7px;gap:4px}
  .tutors-list .list-badges{max-height:none;gap:4px}
  .tutors-list .subject-tag,.tutors-list .list-badge{font-size:.63rem;padding:3px 7px}
  .tutors-list .list-right{
    grid-column:1/-1!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%;
    height:auto!important;
    min-height:0!important;
    padding-top:10px;
    border-top:1px solid #edf1f6;
    gap:9px!important;
    align-items:stretch!important;
  }
  .tutors-list .list-right .tutor-card-metrics{grid-template-columns:repeat(2,minmax(0,1fr));margin:0}
  .tutors-list .list-right .tutor-card-quick-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
    gap:7px;
    padding:0;
  }
  .tutors-list .list-right .tutor-card-quick-actions button{width:100%;min-width:0;min-height:36px;padding:5px 4px;font-size:.66rem;line-height:1.2;white-space:normal}
  .tutors-list .list-right .tutor-card-quick-actions button:nth-child(3):last-child{grid-column:1/-1}
  .tutors-list .list-right .list-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
    gap:7px!important;
    margin:0;
  }
  .tutors-list .list-right .list-actions .btn{width:100%;max-width:none;min-height:38px;padding:6px 5px;font-size:.69rem;white-space:normal}
}

@media (max-width:360px){
  #top-teachers-grid .tutors-grid,
  #featured-tutors-grid .tutors-grid,
  #new-available-grid .tutors-grid{grid-auto-columns:minmax(0,calc(100vw - 38px))!important}
  .tutors-grid .tutor-card-footer .tutor-card-quick-actions,
  .tutors-list .list-right .tutor-card-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
}

/* v8 — compact LessonInc tutor cards for phones and portrait tablets.
   Landscape tablets/desktop keep the existing detailed rail. */
.tutor-card-mobile-summary{display:none}
@media (max-width:680px), (min-width:681px) and (max-width:900px) and (orientation:portrait){
  /* Homepage tutor rails deliberately expose part of the next card as a swipe cue. */
  #top-teachers-grid .tutors-grid,
  #featured-tutors-grid .tutors-grid,
  #new-available-grid .tutors-grid{
    display:grid!important;
    grid-auto-flow:column!important;
    grid-template-columns:none!important;
    grid-template-rows:auto!important;
    grid-auto-columns:clamp(272px,82vw,320px)!important;
    gap:10px!important;
    width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:3px 16px 13px 1px!important;
    scroll-snap-type:x mandatory!important;
    scroll-padding-inline:1px!important;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #top-teachers-grid .tutors-grid::-webkit-scrollbar,
  #featured-tutors-grid .tutors-grid::-webkit-scrollbar,
  #new-available-grid .tutors-grid::-webkit-scrollbar{display:none}
  #top-teachers-grid .tutors-grid>.tutor-card,
  #featured-tutors-grid .tutors-grid>.tutor-card,
  #new-available-grid .tutors-grid>.tutor-card{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    scroll-snap-align:start;
  }

  /* The See-all catalogue stays a normal one-column page, but uses the same compact card. */
  .all-tutors-catalog .tutors-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-flow:row!important;
    gap:11px!important;
  }
  .all-tutors-catalog .tutors-grid>.tutor-card{max-width:430px!important;margin-inline:auto!important}

  /* Replace the tall desktop detail stack with the approved mobile summary. */
  .tutors-grid>.tutor-card>.tutor-card-header,
  .tutors-grid>.tutor-card>.tutor-card-body,
  .tutors-grid>.tutor-card>.tutor-card-footer{display:none!important}
  .tutors-grid>.tutor-card>.tutor-card-mobile-summary{display:block!important}
  .tutors-grid>.tutor-card{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    border-radius:14px!important;
    overflow:hidden!important;
    background:#fff;
    box-shadow:0 5px 16px rgba(12,36,67,.08)!important;
    transform:none!important;
  }
  .tutors-grid>.tutor-card:hover{transform:none!important}
  .tutor-card-mobile-summary{padding:12px 12px 11px;color:#142b50}
  .mobile-card-top{display:grid;grid-template-columns:64px minmax(0,1fr) 30px;gap:10px;align-items:start;min-width:0}
  .mobile-card-avatar-wrap{position:relative;width:64px;height:64px}
  .mobile-card-avatar{width:64px;height:64px;border-radius:50%;overflow:hidden;background:#eaf0f7;border:2px solid #fff;box-shadow:0 0 0 1px #d9e2ee;display:flex;align-items:center;justify-content:center;font-weight:800;color:#173451;font-size:1rem}
  .mobile-card-avatar img{width:100%;height:100%;object-fit:cover;display:block}
  .mobile-card-play{position:absolute;left:-2px;bottom:-2px;width:26px;height:26px;border:2px solid #fff;border-radius:50%;background:#173451;color:#fff;display:grid;place-items:center;padding:0;font-size:.65rem;line-height:1;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.18)}
  .mobile-card-identity{min-width:0;padding-top:1px}
  .mobile-card-name{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:.88rem;font-weight:800;line-height:1.28;color:#102744;min-width:0}
  .mobile-card-name .tutor-status-badge{position:static!important;display:inline-flex!important;font-size:.5rem!important;padding:1px 5px!important;line-height:1.2!important;white-space:nowrap}
  .mobile-card-subjects{margin-top:3px;font-size:.69rem;line-height:1.35;color:#314665;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-card-social{display:flex;align-items:center;gap:5px;margin-top:5px;font-size:.67rem;line-height:1.25;color:#405877;white-space:nowrap;overflow:hidden}
  .mobile-rating-star{color:#f4ad13;font-size:.82rem}.mobile-review-count{color:#64748b}.mobile-new-rating{font-weight:700;color:#49705a}
  .mobile-card-save{width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;padding:0!important;border:0!important;background:transparent!important;color:#173451!important;font-size:1.32rem!important;line-height:1!important;border-radius:50%!important;cursor:pointer;display:grid!important;place-items:center!important}
  .mobile-card-save.is-saved{color:#a1264b!important}
  .mobile-card-facts{display:flex;align-items:center;gap:10px;margin-top:9px;padding-top:8px;border-top:1px solid #e9eef5;min-width:0}
  .mobile-card-facts strong{font-size:.91rem;line-height:1.2;color:#102744;white-space:nowrap}
  .mobile-card-facts span{font-size:.68rem;color:#314665;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:1px solid #d7e0eb;padding-left:10px}
  .mobile-card-demo{display:flex;align-items:center;gap:6px;margin-top:7px;color:#314665;font-size:.67rem;line-height:1.3;white-space:nowrap;overflow:hidden}
  .mobile-card-demo span:last-child{overflow:hidden;text-overflow:ellipsis}
  .mobile-card-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}
  .mobile-card-actions .btn{width:100%;min-width:0;min-height:36px!important;height:36px!important;padding:5px 6px!important;font-size:.68rem!important;line-height:1.1!important;border-radius:9px!important;white-space:nowrap!important}
  .mobile-card-actions .tutor-card-chat{background:#fff;color:#0b66d7;border:1px solid #0b66d7;font-weight:700}
}
@media (max-width:360px){
  #top-teachers-grid .tutors-grid,
  #featured-tutors-grid .tutors-grid,
  #new-available-grid .tutors-grid{grid-auto-columns:clamp(265px,84vw,292px)!important}
  .tutor-card-mobile-summary{padding:11px 10px 10px}
  .mobile-card-top{grid-template-columns:58px minmax(0,1fr) 28px;gap:8px}
  .mobile-card-avatar-wrap,.mobile-card-avatar{width:58px;height:58px}
  .mobile-card-name{font-size:.82rem}.mobile-card-subjects,.mobile-card-social,.mobile-card-demo{font-size:.64rem}
  .mobile-card-facts strong{font-size:.84rem}.mobile-card-facts span{font-size:.64rem}
  .mobile-card-actions .btn{font-size:.64rem!important}
}

@media (min-width:681px) and (max-width:900px) and (orientation:portrait){
  #top-teachers-grid .tutors-grid,
  #featured-tutors-grid .tutors-grid,
  #new-available-grid .tutors-grid{
    grid-auto-columns:clamp(340px,72vw,420px)!important;
    gap:12px!important;
    padding-right:18px!important;
  }
}


/* v9: preserve full-size homepage cards: four visible on wide desktop, then
   3/2/compact by viewport. Extra cards scroll rather than compressing. */
@media (min-width:1200px){
  #top-teachers-grid .tutors-grid,
  #featured-tutors-grid .tutors-grid,
  #new-available-grid .tutors-grid{grid-auto-columns:calc((100% - 54px)/4)!important}
}
@media (min-width:901px) and (max-width:1199px){
  #top-teachers-grid .tutors-grid,
  #featured-tutors-grid .tutors-grid,
  #new-available-grid .tutors-grid{grid-auto-columns:calc((100% - 36px)/3)!important}
}

/* Service discovery uses the same compact presentation as the mobile tutor card at every viewport. */
.tutors-list.service-results-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(250px,320px))!important;
  gap:16px!important;
  align-items:start!important;
}
.service-results-grid .service-tutor-card{
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  border-radius:14px!important;
  overflow:hidden!important;
}
.service-results-grid .service-tutor-card>.tutor-card-mobile-summary{display:block!important}
.service-results-grid .service-tutor-card>.tutor-card-header,
.service-results-grid .service-tutor-card>.tutor-card-body,
.service-results-grid .service-tutor-card>.tutor-card-footer{display:none!important}
@media(max-width:680px){.tutors-list.service-results-grid{grid-template-columns:minmax(0,1fr)!important}}