/* ============================================================
   StackUI Widget: contact  (scoped styles — ALL variants)
   ------------------------------------------------------------
   Everything is scoped under .stk-contact so it can never leak
   into other widgets or fight the core.

   Variants covered:
     - default  (col-6)  investor contact card

   NOTE: the original style.css also ships a `.contact-col-4`
   layout override. Per StackUI rule 2 (keep ALL widget CSS,
   never prune by variant) those rules are retained scoped so
   a col-4 layout keeps working if used.

   REMOVED vs the original ref-template (now provided by core):
     - Google-font @import, * reset, base body/p/a  -> core + tokens
     - .container + media queries                    -> Bootstrap
     - .row / .col-* grid                            -> Bootstrap grid
     - generic utils (.align-self-center, .overflow-hidden,
       .list-unstyled, .rounded, .p-0, .mt-0, .mb-0) -> Bootstrap

   SPACING: mapped to Bootstrap-native utilities in the markup
     (px -> Bootstrap step: 4px=mb-1, 8px=mb-2, 16px=mb-3, 24px=mb-4,
     48px=mb-5) so NO custom spacing classes / no !important here.

   KEPT (widget-specific — needed for fidelity), all scoped:
     card overrides, .text-muted override, .icon-circle,
     ALL .investor-contact rules incl .contact-col-4 + breakpoints.

   Brand green (#57CC33) -> central token var(--stk-primary).
   ============================================================ */

.stk-contact {
  /* original :root tokens, moved onto the widget scope */
  --text-header: #000000;
  --text-sub-header: #888888;
  --text-white: #ffffff;
  --bg-color-primary: var(--stk-primary);  /* was #57CC33 */
  --bg-card: #FAFBFD;
  --border-radius-medium: 8px;
}

/* Spacing uses Bootstrap-native utilities in the markup (mb-4=24px, mb-1/mt-1=4px,
   me-3=16px) — no custom spacing classes needed here, so nothing to override. */

/* ----- Card (custom in the original style.css) ----- */
.stk-contact .card-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-header);
}
.stk-contact .card {
  position: relative; /* bootstrap's base .card sets this */
  padding: 24px;
  background-color: var(--bg-card);
  border-radius: var(--border-radius-medium);
  border: none;
}
.stk-contact .card-body {
  padding: 0;
}
.stk-contact .text-muted {
  color: var(--text-sub-header);
  font-size: 14px;
  text-align: left;
}

@media (max-width: 575px) {
  .stk-contact .card {
    padding: 20px;
  }
  .stk-contact .card-title {
    font-size: 20px;
  }
}

/* ----- Icon circle (shared pattern) ----- */
.stk-contact .icon-circle {
  width: 50px;
  height: 50px;
  background-color: var(--bg-color-primary);
  align-items: center;
  display: flex;
  justify-content: center;
  color: var(--text-white);
  border-radius: 100px;
  font-size: 24px;
}

@media (max-width: 575px) {
  .stk-contact .icon-circle {
    width: 40px;
    height: 40px;
  }
  .stk-contact .icon-circle i {
    font-size: 20px;
  }
}

/* ============================================================
   Variant: default (.investor-contact) + col-4 override
   ============================================================ */
.stk-contact .investor-contact .card {
  background-image: url(./images/contact.webp);
  background-position: right;
  background-size: cover;
  height: 380px;
}

.stk-contact .investor-contact .media-body h5 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-header);
}

.stk-contact .investor-contact .media {
  display: flex;
}

.stk-contact .investor-contact .inbox-wid .inbox-list-item a {
  color: var(--text-sub-header);
  display: block;
  padding: 0;
  border-bottom: 0;
}

.stk-contact .investor-contact.contact-col-4 .card {
  background-image: url(./images/contact.webp);
  background-position-x: 500px;
}

@media (max-width: 1199px) {
  .stk-contact .investor-contact .card {
    background-position-x: -250px;
  }
  .stk-contact .investor-contact.contact-col-4 .card {
    background-position-x: -250px;
  }
}

@media (max-width: 991px) {
  .stk-contact .investor-contact .card {
    background-position-x: right;
  }
  .stk-contact .investor-contact.contact-col-4 .card {
    background-position-x: right;
  }
}

@media (max-width: 575px) {
  .stk-contact .investor-contact .card {
    background-position-x: 500px;
  }
  .stk-contact .investor-contact.contact-col-4 .card {
    background-position-x: 500px;
  }
}