/**
 * LQ Company Employees — element styles (EC template + image helpers).
 *
 * Default compact card styles remain in lq-company-info/styles.css.
 */

.lq-company-employees__media {
  margin: 0;
  min-width: 0;
}

.lq-company-employees__image {
  display: block;
  max-width: 100%;
  height: auto;
}

.lq-company-employee__media {
  margin: 0 0 var(--lq-company-gap, 10px);
}

.lq-company-employee__media .lq-company-employees__image {
  border-radius: var(--lq-company-employees-image-radius, 0);
}

/* -------------------------------------------------------------------------
 * EC template — scoped under .lq-company-employees--ec
 * ------------------------------------------------------------------------- */

.lq-company-employees--ec {
  --lq-company-employees-accent: var(--ec-accent, #b9d51a);
  --lq-company-employees-heading: var(--ec-dark, #10283d);
  --lq-company-employees-position: var(--ec-gray, #707070);
  --lq-company-employees-text: var(--ec-gray, #707070);
  --lq-company-employees-link: var(--ec-dark, #10283d);
  --lq-company-employees-link-hover: var(--ec-accent, #b9d51a);
  --lq-company-employees-card-bg: #ffffff;
  --lq-company-employees-card-border: rgba(16, 43, 63, 0.12);
  --lq-company-employees-card-padding: 1.25rem;
  --lq-company-employees-image-radius: 0;
  --lq-company-employees-image-fit: cover;
  --lq-company-employees-image-position: center center;
  --lq-company-employees-text-align: left;
  --lq-employees-columns-desktop: 3;
  --lq-employees-columns-tablet: 2;
  --lq-employees-columns-mobile: 1;
  --lq-employees-column-gap: 30px;
  --lq-employees-row-gap: 30px;
  --lq-company-employees-ease: cubic-bezier(0.4, 0, 0.2, 1);

  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  background: transparent;
  color: var(--lq-company-employees-text);
  text-align: var(--lq-company-employees-text-align);
}

.lq-company-employees--ec.lq-company-employees--align-center {
  --lq-company-employees-text-align: center;
}

.lq-company-employees--ec.lq-company-employees--align-right {
  --lq-company-employees-text-align: right;
}

.lq-company-employees--ec .lq-company-employees__grid {
  display: grid;
  grid-template-columns: repeat(var(--lq-employees-columns-desktop, 3), minmax(0, 1fr));
  gap: var(--lq-employees-row-gap, 30px) var(--lq-employees-column-gap, 30px);
  align-items: stretch;
}

.lq-company-employees--ec .lq-company-employees__employee {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  background: var(--lq-company-employees-card-bg);
  border: 1px solid var(--lq-company-employees-card-border);
  border-radius: 8px;
  overflow: hidden;
  transition:
    transform 0.25s var(--lq-company-employees-ease),
    border-color 0.25s var(--lq-company-employees-ease);
}

.lq-company-employees--ec .lq-company-employees__employee:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--lq-company-employees-accent) 55%, var(--lq-company-employees-card-border));
}

.lq-company-employees--ec .lq-company-employees__media {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--ec-light, #f7f5f4);
}

.lq-company-employees--ec.lq-company-employees--image-ratio-square .lq-company-employees__media {
  aspect-ratio: 1 / 1;
}

.lq-company-employees--ec.lq-company-employees--image-ratio-portrait_4_5 .lq-company-employees__media {
  aspect-ratio: 4 / 5;
}

.lq-company-employees--ec.lq-company-employees--image-ratio-portrait_3_4 .lq-company-employees__media {
  aspect-ratio: 3 / 4;
}

.lq-company-employees--ec .lq-company-employees__image {
  width: var(--lq-company-employees-image-width, 100%);
  height: var(--lq-company-employees-image-height, 100%);
  max-width: 100%;
  object-fit: var(--lq-company-employees-image-fit, cover);
  object-position: var(--lq-company-employees-image-position, center center);
  border-radius: var(--lq-company-employees-image-radius, 0);
}

.lq-company-employees--ec.lq-company-employees--image-ratio-original .lq-company-employees__image {
  height: auto;
}

.lq-company-employees--ec .lq-company-employees__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 10rem;
  aspect-ratio: 1 / 1;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--lq-company-employees-heading);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--lq-company-employees-accent) 22%, #fff) 0%,
      var(--ec-light, #f7f5f4) 100%
    );
}

.lq-company-employees--ec .lq-company-employees__body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1 1 auto;
  padding: var(--lq-company-employees-card-padding);
  min-width: 0;
}

.lq-company-employees--ec .lq-company-employees__name {
  margin: 0;
  font-family: var(--lq-company-employee-name-font-family, inherit);
  font-size: var(--lq-company-employee-name-font-size, clamp(1.05rem, 1.4vw, 1.25rem));
  font-weight: var(--lq-company-employee-name-font-weight, 700);
  line-height: var(--lq-company-employee-name-line-height, 1.3);
  letter-spacing: var(--lq-company-employee-name-letter-spacing, inherit);
  text-transform: var(--lq-company-employee-name-text-transform, none);
  color: var(--lq-company-employee-name-color, var(--lq-company-employees-heading));
}

.lq-company-employees--ec .lq-company-employees__name::after {
  content: "";
  display: block;
  width: 2.25rem;
  height: 3px;
  margin-top: 0.55rem;
  margin-inline: inherit;
  background: var(--lq-company-employees-accent);
  border-radius: 2px;
}

.lq-company-employees--ec.lq-company-employees--align-center .lq-company-employees__name::after {
  margin-left: auto;
  margin-right: auto;
}

.lq-company-employees--ec.lq-company-employees--align-right .lq-company-employees__name::after {
  margin-left: auto;
  margin-right: 0;
}

.lq-company-employees--ec .lq-company-employees__position,
.lq-company-employees--ec .lq-company-employees__company {
  margin: 0;
  font-family: var(--lq-company-employee-position-font-family, inherit);
  font-size: var(--lq-company-employee-position-font-size, 0.95rem);
  font-weight: var(--lq-company-employee-position-font-weight, 500);
  line-height: var(--lq-company-employee-position-line-height, 1.45);
  letter-spacing: var(--lq-company-employee-position-letter-spacing, inherit);
  text-transform: var(--lq-company-employee-position-text-transform, none);
  color: var(--lq-company-employee-position-color, var(--lq-company-employees-position));
  overflow-wrap: anywhere;
}

.lq-company-employees--ec .lq-company-employees__company {
  color: var(--lq-company-employees-text);
  font-weight: 600;
}

.lq-company-employees--ec .lq-company-employees__contacts {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.55rem;
}

.lq-company-employees--ec .lq-company-employees__contact {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 0;
  font-family: var(--lq-company-employee-contact-font-family, inherit);
  font-size: var(--lq-company-employee-contact-font-size, 0.95rem);
  font-weight: var(--lq-company-employee-contact-font-weight, inherit);
  line-height: var(--lq-company-employee-contact-line-height, 1.45);
  color: var(--lq-company-employee-contact-color, var(--lq-company-employees-text));
}

.lq-company-employees--ec.lq-company-employees--align-center .lq-company-employees__contact {
  justify-content: center;
}

.lq-company-employees--ec.lq-company-employees--align-right .lq-company-employees__contact {
  justify-content: flex-end;
}

.lq-company-employees--ec .lq-company-employees__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--lq-company-employees-accent) 22%, #fff);
  color: var(--lq-company-employees-heading);
}

.lq-company-employees--ec .lq-company-employees__icon .lq-company-card__icon-svg {
  width: 0.95rem;
  height: 0.95rem;
  stroke-width: var(--lq-company-icon-stroke-width, 1.75);
}

.lq-company-employees--ec .lq-company-employees__link,
.lq-company-employees--ec .lq-company-employees__text {
  min-width: 0;
  color: var(--lq-company-employees-link);
  text-decoration: none;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.lq-company-employees--ec .lq-company-employees__link:hover,
.lq-company-employees--ec .lq-company-employees__link:focus-visible {
  color: var(--lq-company-employees-link-hover);
  text-decoration: underline;
  outline: none;
}

.lq-company-employees--ec .lq-company-employees__link:focus-visible {
  outline: 2px solid var(--lq-company-employees-accent);
  outline-offset: 2px;
}

.lq-company-employees--ec.lq-company-employees--no-icons .lq-company-employees__contact {
  gap: 0;
}

@media (max-width: 1024px) {
  .lq-company-employees--ec .lq-company-employees__grid {
    grid-template-columns: repeat(var(--lq-employees-columns-tablet, 2), minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .lq-company-employees--ec .lq-company-employees__grid {
    grid-template-columns: repeat(var(--lq-employees-columns-mobile, 1), minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .lq-company-employees--ec .lq-company-employees__employee {
    transition: none;
  }

  .lq-company-employees--ec .lq-company-employees__employee:hover {
    transform: none;
  }
}