/**
 * Key Contacts Module
 *
 * Styles for template-parts/modules/key_contacts_module.php
**/

.key_contacts_module {
  background: var(--farani-burgundy, #401115);
  padding: 80px 0;
  overflow: hidden;
}

.key-contacts__inner {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  padding-left: 135px;
}

/* Intro column */
.key-contacts__intro {
  flex: 0 0 300px;
  width: 300px;
}

.key-contacts__eyebrow {
  font-family: var(--farani-body-font);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--farani-orange, #e95a3a);
  margin-bottom: 16px;
}

.key-contacts__heading {
  font-family: var(--farani-heading-font);
  font-weight: 400;
  font-size: 46px;
  line-height: 1.1;
  color: var(--white, #fff);
  margin-bottom: 20px;
}

.key-contacts__text {
  font-family: var(--farani-body-font);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .75);
  margin-bottom: 24px;
}

.key-contacts__link {
  position: relative;
  display: inline-block;
  font-family: var(--farani-body-font);
  font-weight: 500;
  font-size: 16px;
  color: var(--white, #fff);
  margin-bottom: 56px;
  transition: var(--transition);
}
.key-contacts__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width .3s ease;
}
.key-contacts__link:hover { color: var(--farani-orange, #e95a3a); }
.key-contacts__link:hover::after { width: 100%; }

.key-contacts__nav { display: flex; gap: 8px; }
.key-contacts__prev,
.key-contacts__next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 39px;
  background: var(--farani-orange, #e95a3a);
  color: var(--farani-burgundy, #401115);
  border: none;
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
}
.key-contacts__prev:hover,
.key-contacts__next:hover { filter: brightness(1.1); }
.key-contacts__prev:disabled,
.key-contacts__next:disabled {
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .4);
  cursor: default;
  filter: none;
}

/* Carousel — bleeds to the true right edge of the viewport */
.key-contacts__carousel {
  flex: 1 1 auto;
  min-width: 0;
}

.key-contacts__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-right: 135px;
  scrollbar-width: none;
}
.key-contacts__track::-webkit-scrollbar { display: none; }

/* The whole card is a click target via .key-contacts__card-link's
   stretched ::before below — not a single wrapping <a>, since the social
   icons need to stay independently clickable and an <a> can't contain
   another <a>. */
.key-contacts__card {
  position: relative;
  flex: 0 0 calc((100% - (3 * 24px)) / 3.25);
  scroll-snap-align: start;
}

.key-contacts__card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #d9d9d9;
  overflow: hidden;
  margin-bottom: 20px;
}
.key-contacts__card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.key-contacts__card:hover .key-contacts__card-image img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .key-contacts__card-image img { transition: none; }
}
.key-contacts__card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a3a3a3;
  font-size: 48px;
}

.key-contacts__card-name {
  font-family: var(--farani-body-font);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--white, #fff);
  margin-bottom: 4px;
}
.key-contacts__card-role {
  font-family: var(--farani-body-font);
  font-size: 14px;
  color: var(--farani-orange, #e95a3a);
  margin-bottom: 16px;
}

.key-contacts__card-social {
  position: relative;
  z-index: 2; /* above .key-contacts__card-link's stretched overlay (z-index: 1) */
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.key-contacts__card-social li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--farani-orange, #e95a3a);
  color: var(--farani-burgundy, #401115);
  font-size: 13px;
  transition: var(--transition);
}
.key-contacts__card-social li a:hover { background: var(--white, #fff); }

/* No position: relative here (unlike before) — the underline below is now
   a background-image reveal instead of an ::after bar, specifically so
   this element stays unpositioned and the stretched-link ::after further
   down can escape all the way up to .key-contacts__card's containing
   block instead of being trapped to this element's own small box. */
.key-contacts__card-link {
  display: inline-block;
  font-family: var(--farani-body-font);
  font-size: 13px;
  color: var(--white, #fff);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left calc(100% + 2px);
  background-size: 0 1px;
  transition: var(--transition), background-size .3s ease;
}
/* Stretched link — makes the whole .key-contacts__card clickable (see the
   position: relative on .key-contacts__card above). */
.key-contacts__card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.key-contacts__card-link:hover { color: var(--farani-orange, #e95a3a); background-size: 100% 1px; }

@media (max-width: 1536px) {

}

@media (max-width: 1400px) {
  .key-contacts__inner { padding-left: 100px; }
  .key-contacts__track { padding-right: 100px; }
}

@media (max-width: 1366px) {

}

@media (max-width: 1280px) {
  .key-contacts__inner { padding-left: 60px; }
  .key-contacts__track { padding-right: 60px; }
  .key-contacts__card { flex-basis: calc((100% - (2 * 24px)) / 2.5); }
}

@media (max-width: 992px) {
  .key_contacts_module { padding: 56px 0; }
  .key-contacts__inner { flex-direction: column; padding-left: 40px; gap: 32px; }
  .key-contacts__intro { width: 100%; flex-basis: auto; }
  .key-contacts__link { margin-bottom: 24px; }
  .key-contacts__track { padding-right: 40px; }
  .key-contacts__card { flex-basis: calc((100% - 24px) / 2.25); }
}

@media (max-width: 768px) {
  .key-contacts__inner { padding-left: 30px; }
  .key-contacts__track { padding-right: 30px; }
  .key-contacts__heading { font-size: 32px; }
  .key-contacts__card { flex-basis: calc((100% - 24px) / 1.3); }
}

@media (max-width: 600px) {
  .key-contacts__card { flex-basis: 85%; }
}