/* ==========================================================================
   TLK Welcome + Highlights (ACF)
   File: assets/css/welcome.css
   Shortcode: [tlk_acf_welcome]
   Notes:
   - Theme-agnostic: all classes prefixed with .tlkwel-
   - Brand color via CSS var --brand (inline from PHP)
   ========================================================================== */

.tlkwel {
  --brand: #437b1b;
  position: relative;
  padding: 56px 0 42px;
  overflow: hidden;
  background: #fff;
}

/* Soft background rings / diamonds (similar to your mockup) */
.tlkwel::before {
  content: "";
  position: absolute;
  inset: -120px -120px -120px -120px;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 25%, rgba(67,123,27,.10) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 40%, transparent 0 190px, rgba(67,123,27,.12) 191px 192px, transparent 193px),
    radial-gradient(circle at 85% 35%, transparent 0 260px, rgba(67,123,27,.10) 261px 262px, transparent 263px),
    radial-gradient(circle at 90% 20%, transparent 0 95px, rgba(67,123,27,.10) 96px 97px, transparent 98px);
  opacity: .6;
}

.tlkwel::after {
  content: "";
  position: absolute;
  left: 10%;
  bottom: 6%;
  width: 120px;
  height: 120px;
  transform: rotate(45deg);
  border: 1px solid rgba(67,123,27,.12);
  pointer-events: none;
  opacity: .8;
}

.tlkwel-wrap {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
}

.tlkwel-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 992px) {
  .tlkwel-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* LEFT */
.tlkwel-header {
  position: relative;
  padding-top: 8px;
  margin-bottom: 1rem;
}

.tlkwel-header::before,
.tlkwel-header::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-left: 2px solid rgba(67,123,27,.45);
  border-top: 2px solid rgba(67,123,27,.45);
  top: 0;
  left: 0;
}

.tlkwel-header::after {
  left: auto;
  right: 0;
  border-left: 0;
  border-right: 2px solid rgba(67,123,27,.45);
}

.tlkwel-kicker {
  color: var(--brand);
  font-weight: 500;
  font-size: 22px;
  margin-top: 10px;
}

.tlkwel-title {
  margin: 8px 0 14px;
  font-weight: 500;
  font-size: clamp(34px, 2.65vw, 54px);
  letter-spacing: .2px;
  color: #111;
}

.tlkwel-underline {
  width: 88px;
  height: 4px;
  background: var(--brand);
  border-radius: 10px;
  margin: 0 0 18px;
}

/* Little divider with dots (centered) */
.tlkwel-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 28px;
}

.tlkwel-divider span {
  height: 1px;
  flex: 1;
  background: rgba(0,0,0,.10);
}

.tlkwel-divider i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(67,123,27,.55);
}

.tlkwel-divider i:nth-child(3) { background: rgba(0,0,0,.25); }
.tlkwel-divider i:nth-child(4) { background: rgba(0,0,0,.15); }

.tlkwel-p {
  color: #111;
  font-size: 18px;
  line-height: 1.65;
  margin: 0 0 18px;
  max-width: 62ch;
}

.tlkwel-p--spaced { margin-top: 8px; }

.tlkwel-signature {
  margin-top: 26px;
  margin-bottom: 10px;
}

.tlkwel-signature img {
  max-width: 360px;
  width: 100%;
  height: auto;
  display: block;
}

.tlkwel-sigmeta {
  margin-top: 6px;
}

.tlkwel-name {
  font-size: 20px;
  color: #222;
}

.tlkwel-role {
  font-size: 16px;
  color: var(--brand);
  margin-top: 2px;
}

/* RIGHT */
.tlkwel-right {
  position: relative;
  padding-top: 6px;
}

.tlkwel-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 38px;
}

@media (max-width: 992px) {
  .tlkwel-cards {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

.tlkwel-card {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  align-items: start;
}

.tlkwel-icon {
  width: 46px;
  height: 46px;
  position: relative;
}

.tlkwel-iconbg {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 16%, transparent);
}

.tlkwel-icnsvg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #222;
}

.tlkwel-icnsvg svg {
  width: 34px;
  height: 34px;
  display: block;
}

.tlkwel-cardtitle {
  font-size: 22px;
  font-weight: 500;
  color: #111;
  margin-top: -1px;
}

.tlkwel-cardtext {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(0,0,0,.75);
  margin-top: 6px;
  max-width: 38ch;
}

/* ==========================================================
   DESKTOP-ONLY ENHANCEMENTS (keep mobile exactly as it is)
   - Bigger right-side highlight typography + icon sizing
   - More breathing room under the "Welcome" divider
   ========================================================== */
@media (min-width: 993px) {

  /* Divider spacing under Welcome */
  .tlkwel-underline {
    margin: 0 0 26px; /* was 18px */
  }

  .tlkwel-divider {
    margin: 18px 0 36px; /* was 10px 0 28px */
  }

  /* Optional: slightly more space between right-side cards */
  .tlkwel-cards {
    gap: 36px 44px; /* was 32px 38px */
  }

  /* Bigger right-side card layout (icon column + spacing) */
  .tlkwel-card {
    grid-template-columns: 54px 1fr; /* was 46px */
    gap: 16px;                       /* was 14px */
  }

  .tlkwel-icon {
    width: 54px;  /* was 46px */
    height: 54px; /* was 46px */
  }

  .tlkwel-icnsvg svg {
    width: 38px;  /* was 34px */
    height: 38px; /* was 34px */
  }

  /* Match highlight paragraph size to left paragraph size */
  .tlkwel-cardtitle {
    font-size: 24px; /* was 22px */
  }

  .tlkwel-cardtext {
    font-size: 18px;   /* was 16px */
    line-height: 1.65; /* was 1.6 */
    margin-top: 8px;   /* was 6px */
    max-width: 42ch;   /* was 38ch */
  }
}

@media (max-width: 900px){
    .tlkwel-title {
        font-size: clamp(30px, 2.65vw, 45px);
    }
}

/* Small mobile adjustments */
@media (max-width: 480px) {
  .tlkwel { padding: 38px 0 28px; }
  .tlkwel-kicker { font-size: 18px; }
  .tlkwel-p { font-size: 17px; }
  .tlkwel-cardtitle { font-size: 20px; }
}