/* ===================================================
   성공사례 루프 카드 스타일 (sl- prefix)
   Template ID: 17599
   =================================================== */

/* Card — shadow & hover lift */
.sl-loop-card {
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94),
                box-shadow 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
}
.sl-loop-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

/* Image — zoom on hover */
.sl-loop-image {
    overflow: hidden;
}
.sl-loop-image img {
    transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}
.sl-loop-card:hover .sl-loop-image img {
    transform: scale(1.05);
}

/* Title hover */
.sl-loop-title a {
    transition: color 0.25s ease;
}
.sl-loop-card:hover .sl-loop-title a {
    color: #B69D74;
}

/* Excerpt — line clamp */
.sl-loop-excerpt .elementor-widget-container {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Tags — pill style */
.sl-loop-tags .elementor-icon-list-item {
    background: #F5F5F5;
    border-radius: 3px;
    padding: 2px 6px;
    margin: 0 2px;
}
.sl-loop-tags .elementor-icon-list-text {
    font-size: 11px;
    color: #888;
}

/* Views shortcode */
.sl-loop-views .elementor-shortcode {
    font-size: 12px;
    color: #aaa;
}

/* Lawyer dynamic badges */
.sl-loop-lawyers-dynamic::before {
  content: "담당변호사";
  font-size: 11px;
  color: #999;
  font-weight: 500;
  letter-spacing: 0.3px;
  margin-right: 4px;
}
.sl-loop-lawyers-dynamic .elementor-widget-post-info .elementor-icon-list-text {
  font-size: 12px;
  color: #555;
}
/* Button — transition */
.sl-loop-btn .elementor-button {
    transition: all 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
}
.sl-loop-btn .elementor-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212,168,80,0.3);
}

/* ===================================================
   Loop Grid container spacing
   =================================================== */
.elementor-loop-container {
    gap: 24px !important;
}

/* ===================================================
   Search Filter Pro — styling
   =================================================== */
.search-filter-form .sf-field-search input,
.search-filter-form .sf-field-taxonomy select {
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 14px;
    transition: border-color 0.2s;
}
.search-filter-form .sf-field-search input:focus,
.search-filter-form .sf-field-taxonomy select:focus {
    border-color: #B69D74;
    outline: none;
    box-shadow: 0 0 0 3px rgba(182,157,116,0.1);
}
.search-filter-form .sf-field-submit input[type="submit"] {
    background: #050E24;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}
.search-filter-form .sf-field-submit input[type="submit"]:hover {
    background: #D4A850;
    color: #050E24;
}

/* ===================================================
   Responsive
   =================================================== */
@media (max-width: 1024px) {
    .sl-loop-card {
        flex-direction: column !important;
    }
    .sl-loop-card > .elementor-element {
        width: 100% !important;
    }
    .sl-loop-image {
        max-height: 220px;
    }
    .sl-loop-lawyers {
        display: none !important;
    }
    .elementor-loop-container {
        gap: 20px !important;
    }
}

@media (max-width: 767px) {
    .sl-loop-image {
        max-height: 200px;
    }
    .sl-loop-card:hover {
        transform: none;
    }
    .elementor-loop-container {
        gap: 16px !important;
    }
}
/* ============================================================
   Lawyer avatar matching (jQuery .show() override)
   ============================================================ */

/* Parent box: hidden by default, jQuery shows it */
.e-loop-item .success_lawyer_box {
  display: none;
  padding-top: 12px;
  border-top: 1px solid #F0F0F0;
}

/* Individual avatars: hidden by default, jQuery .show() matches */
.e-loop-item .e-con.success_lawyer1_div,
.e-loop-item .e-con.success_lawyer2_div,
.e-loop-item .e-con.success_lawyer3_div,
.e-loop-item .e-con.success_lawyer4_div,
.e-loop-item .e-con.success_lawyer5_div,
.e-loop-item .e-con.success_lawyer6_div,
.e-loop-item .e-con.success_lawyer7_div,
.e-loop-item .e-con.success_lawyer8_div,
.e-loop-item .e-con.success_lawyer9_div {
  display: none;
}

/* Dynamic source fields: in DOM for jQuery to read, but invisible */
.e-loop-item .sl-lawyer-source {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
}
/* ============================================================
   Lawyer pills — compact avatar + name
   ============================================================ */
/* Pill container — inline avatar + name */
.success_lawyer_box .e-con .e-con .e-con {
  display: none;  /* default hidden, jQuery shows matched */
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px 5px 5px !important;
  background: transparent;
  border-radius: 6px;
  width: auto !important;
  flex: none !important;
}

/* Avatar image in pill */
.success_lawyer_box .elementor-widget-image img {
  width: 80px !important;
  height: 80px !important;
  border-radius: 6px !important;
  object-fit: cover;
}
.success_lawyer_box .elementor-widget-image {
  width: auto !important;
  flex: none !important;
}

/* Name — single line, hide role after <br> */
.success_lawyer_box .elementor-heading-title {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #333 !important;
  line-height: 1.2 !important;
  
}
.success_lawyer_box .elementor-heading-title br {display:inline !important;} /*
*/ .success_lawyer_box_DISABLED .elementor-heading-title br ~ * {
  display: none;
}
.success_lawyer_box .elementor-widget-heading {
  width: auto !important;
  flex: none !important;
}