/*
 * Agents grid (/agents) and agent profile (/agents/{nicename}). docs/design/components/agent-card.md (§1, §2),
 * tabs.md ("Single agent"), pagination.md. The social icons are Font Awesome glyphs as on WP (FA 4 class names
 * mapped onto the FA 5 fonts): envelope = regular 400, whatsapp = brands 400, phone = solid 900.
 */
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/fa-regular-400-hr-w39-.woff2") format('woff2');
}
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../fonts/fa-solid-900-qDwD2h4.woff2") format('woff2');
}
@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/fa-brands-400-agtjcXH.woff2") format('woff2');
}

.social-icon {
  display: inline-block;
  margin: 0 10px;
  color: var(--gray-400);
  font-size: 14px;
  line-height: 1em;
}
.social-icon::before {
  display: inline-block;
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
.social-icon--envelope::before {
  content: '\f0e0';
}
.social-icon--whatsapp::before {
  content: '\f232';
  font-family: 'Font Awesome 5 Brands';
}
.social-icon--phone::before {
  content: '\f095';
  font-weight: 900;
}
a.social-icon:hover {
  color: var(--color-primary);
}

/* ---- /agents: section #e40d607 (container 1200 with 10 px column padding, cards 15 px padding around a 270 px column) ---- */
.agents {
  padding: 36px 0 75px;
}
.agents__container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 10px;
}
.agents__title {
  margin-bottom: var(--widget-spacing);
  text-align: center;
}
.agents-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 -15px 35px;
}
.agent-card {
  display: flex;
  flex-direction: column;
  padding: 15px;
}
.agent-card > * {
  width: 100%;
  max-width: 270px;
  margin-right: auto;
  margin-left: auto;
}
.agent-card__photo {
  display: block;
  margin-bottom: calc(12px + var(--widget-spacing));
}
/* WP's empty image widget still takes its margin and the widget spacing */
.agent-card--no-photo {
  padding-top: calc(15px + 12px + var(--widget-spacing));
}
.agent-card__photo img {
  display: block;
  max-width: 100%;
  height: auto;
}
.agent-card__name {
  margin-bottom: calc(5px + var(--widget-spacing));
}
.agent-card__name a {
  color: var(--gray-700);
}
.agent-card__name a:hover {
  color: var(--color-primary);
}
.agent-card__position {
  margin-bottom: calc(18px + var(--widget-spacing));
}
/* the icons carry 10 px of margin each, the row starts 10 px left of the column */
.agent-card__social {
  position: relative;
  left: -10px;
  display: flex;
  height: 14px;
}
.agent-card__social .social-icon {
  position: relative;
  top: -1px;
}
/* ---- Profile: section #e14025f (content 770 + contact box 370) ---- */
.agent-hero {
  padding: 35px 0;
}
.agent-hero__container,
.agent-listing__container {
  display: flex;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}
.agent-hero__main,
.agent-hero__aside,
.agent-listing__main {
  padding: var(--gutter);
}
.agent-hero__main {
  width: 66.667%;
}
.agent-hero__aside {
  width: 33.333%;
}
.agent-profile {
  display: flex;
  padding: 40px 30px;
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
}
.agent-profile__photo-col {
  width: 38%;
}
.agent-profile__photo img {
  display: block;
  max-width: 100%;
  height: auto;
}
.agent-profile__info {
  width: 61.998%;
  /* the 50 px of WP's static star rating (R20: not printed) stay as space */
  padding: 49.984px 0 0 30px;
}
.agent-profile__name {
  margin-bottom: calc(4px + var(--widget-spacing));
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}
.agent-profile__position {
  margin-bottom: calc(28px + var(--widget-spacing));
}
.agent-profile__about {
  overflow-wrap: anywhere;
}

/* Contact box #6d9b93f */
.agent-contact {
  padding: 50px 30px;
  background-color: var(--color-secondary);
}
.agent-contact__title {
  margin-bottom: calc(18px + var(--widget-spacing));
  color: var(--color-white);
}
/* WP: "Phone:" label and the link widget side by side (42 px tall), a 5 px spacer + 20 px widget spacing, then the
 * "Email:" row. P9: the e-mail is not printed, its slot stays empty (label width 41 + 5, value 216) so the box keeps
 * the WP height. */
.agent-contact__lines {
  display: flex;
  align-items: flex-start;
  margin-bottom: 25px;
}
.agent-contact__slot {
  box-sizing: border-box;
  width: 262px;
  padding-left: 46px;
}
/* the WP e-mail widget is painted 213 px wide in its reference mask */
.agent-contact__slot .agent-contact__row {
  width: 213px;
}
.agent-contact__label {
  margin-right: 5px;
  color: var(--gray-400);
  line-height: 21.98px;
}
.agent-contact__row {
  height: 41.984px;
}
.agent-contact__phone {
  display: block;
  color: var(--color-accent);
  font-size: var(--fs-h5);
  font-weight: 700;
  line-height: 22.5px;
}
.agent-contact__phone:hover {
  color: var(--color-white);
}
.agent-contact__subtitle {
  margin: 28px 0 calc(18px + var(--widget-spacing));
  color: var(--color-white);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}
.agent-contact__social {
  display: flex;
  height: 14px;
}
.agent-contact__social .social-icon {
  position: relative;
  top: -1px;
  margin: 0 19px 0 0;
}
.agent-contact__social a.social-icon:hover {
  color: var(--color-accent);
}

/* ---- Tabs "LISTING / REVIEWS" (JetTabs, agent variant) + listing section #9b977b8 ---- */
.tabs--agent .tabs__controls {
  align-self: flex-start;
  background-color: transparent;
}
.tabs--agent .tabs__control {
  margin-right: 10px;
  padding: 6px 9px;
  border-bottom: 2px solid transparent;
  color: var(--color-text);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 20.02px;
  text-transform: uppercase;
}
.tabs--agent .tabs__control:hover,
.tabs--agent .tabs__control.is-active {
  color: var(--color-primary);
}
.tabs--agent .tabs__control.is-active {
  border-bottom-color: var(--color-primary);
}
.tabs--agent .tabs__content {
  padding-top: 30px;
}
.agent-listing {
  padding: 50px 0 88px;
}
.agent-listing__main {
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
}
.agent-listing__cards {
  display: flex;
  flex-direction: column;
  gap: 30px;
  /* WP: the tabs use the whole container (pagination centered in it), the cards are 770 px wide */
  max-width: 770px;
}
.agents__pagination {
  margin-top: 45px;
}
.agent-listing__pagination {
  margin-top: 67px;
}
.agent-listing__empty {
  color: var(--color-text);
}
.agent-listing__review-title {
  margin-top: var(--widget-spacing);
}

@media (max-width: 1024px) {
  .agents-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  /* WP: the three columns of the profile template become 100 % wide; the contact box keeps its 370px container */
  .agent-hero__container,
  .agent-listing__container {
    flex-direction: column;
  }
  .agent-hero__main,
  .agent-hero__aside,
  .agent-listing__main {
    width: 100%;
  }
  .agent-contact {
    max-width: 370px;
    margin: 0 auto;
  }
  .agent-listing {
    padding: 45.05px 0 69.95px;
  }
  .agent-listing__pagination {
    margin-top: 70px;
  }
}

@media (max-width: 767px) {
  .agents-grid {
    grid-template-columns: 1fr;
  }
  .agent-listing__main {
    width: 100%;
  }
  /* WP mobile: name and position stay left-aligned, only the social icons are centered */
  .agent-card__social {
    left: 0;
    justify-content: center;
  }
  .agent-profile {
    flex-direction: column;
    padding: 20px;
  }
  .agent-profile__photo-col:empty {
    display: none;
  }
  .agent-profile__photo-col,
  .agent-profile__info {
    width: 100%;
  }
  .agent-profile__info {
    /* 20 px + the 51 px of the omitted star rating */
    padding-top: 70.984px;
    padding-left: 0;
  }
  .agent-contact {
    text-align: center;
  }
  .agent-contact__lines,
  .agent-contact__social {
    justify-content: center;
  }
  .agent-contact__slot {
    margin: 0 auto;
  }
  .agent-contact__slot .agent-contact__row {
    margin-left: 1px;
  }
  .agent-listing {
    padding: 45.06px 0 54.94px;
  }
  .agent-listing__pagination {
    margin-top: 70px;
  }
}