/* Suprema Clinic Finder — UI Tweaks v1.2
 * Fotos e cards 100% responsivos
 */

:root{
  --scf-ui-max-width: 1280px;
  --scf-ui-columns-mobile: 1;
  --scf-ui-columns-tablet: 2;
  --scf-ui-columns-desktop: 2;
}

.scf-wrap{max-width:var(--scf-ui-max-width) !important; margin:0 auto;}

/* Grid responsivo */
.scf-grid{
  display:grid;
  grid-template-columns: repeat(var(--scf-ui-columns-mobile), minmax(0,1fr));
  gap: 16px;
}

@media (min-width: 768px){
  .scf-grid{
    grid-template-columns: repeat(var(--scf-ui-columns-tablet), minmax(0,1fr)) !important;
  }
}

@media (min-width: 1024px){
  .scf-grid{
    grid-template-columns: repeat(var(--scf-ui-columns-desktop), minmax(0,1fr)) !important;
  }
}

/* Foto responsiva com clamp + media queries específicas */
.scf-photo {
  width: clamp(80px, 18vw, 140px);
  height: clamp(80px, 18vw, 140px);
  flex: 0 0 clamp(80px, 18vw, 140px);
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #072c40;
}

@media (max-width: 480px) {
  .scf-photo {
    width: 80px !important;
    height: 80px !important;
    flex-basis: 80px !important;
  }
}

@media (min-width: 481px) and (max-width: 991px) {
  .scf-photo {
    width: 110px !important;
    height: 110px !important;
    flex-basis: 110px !important;
  }
}

@media (min-width: 992px) {
  .scf-photo {
    width: 140px !important;
    height: 140px !important;
    flex-basis: 140px !important;
  }
}

/* Ajuste do anel externo se existir */
.scf-photo:after {
  inset: -8px !important;
}

/* Garante altura automática do card */
.scf-card{height:auto !important;}