/* ============================================================
   WESCHE JEWELERS — wesche-intros.css
   Shared styles for all brand and category intro widgets.
   Reference via: <link rel="stylesheet" href="/css/wesche-intros.css">
   Place link tag in: Punchmark Site Manager > Design / Theme Settings > Global Header
   ============================================================ */

.wj-intro,
.wj-intro * {
  box-sizing: border-box;
}

/* ------------------------------------------------------------
   OUTER WRAPPER
   ------------------------------------------------------------ */
.wj-intro {
  background-color: #fefdfa;
  padding: 32px 24px;
  border-top: 3px solid #8B9F74;
  width: 100%;
}

/* ------------------------------------------------------------
   INNER — split row, left identity / right copy
   ------------------------------------------------------------ */
.wj-intro__inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 52px;
}

/* ------------------------------------------------------------
   LEFT COLUMN — eyebrow, rule, tagline, button
   ------------------------------------------------------------ */
.wj-intro__left {
  flex: 0 0 220px;
  padding-top: 2px;
}

.wj-intro__eyebrow {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #8B9F74 !important;
  margin: 0 0 10px 0 !important;
  display: block !important;
}

.wj-intro__rule {
  width: 32px;
  height: 1px;
  background-color: #8B9F74;
  margin: 0 0 12px 0;
  opacity: 0.7;
}

.wj-intro__tagline {
  font-family: 'Playfair Display', serif !important;
  font-style: italic !important;
  font-size: 1.35rem !important;
  color: #2C2C2C !important;
  line-height: 1.4 !important;
  margin: 0 0 20px 0 !important;
}

.wj-intro__btn {
  display: inline-block !important;
  padding: 10px 20px !important;
  background-color: #2C2C2C !important;
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 2px !important;
  transition: background-color 0.2s ease;
}

.wj-intro__btn:hover {
  background-color: #8B9F74 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* ------------------------------------------------------------
   RIGHT COLUMN — body copy
   ------------------------------------------------------------ */
.wj-intro__right {
  flex: 1;
  border-left: 1px solid #dde4d6;
  padding-left: 52px;
}

.wj-intro__right p {
  font-family: 'Lato', sans-serif !important;
  font-size: 0.93rem !important;
  line-height: 1.8 !important;
  color: #444440 !important;
  margin: 0 0 0.9rem 0 !important;
}

.wj-intro__right p:last-child {
  margin-bottom: 0 !important;
}

/* ------------------------------------------------------------
   OPTIONAL MODIFIERS
   ------------------------------------------------------------ */
.wj-intro--alt {
  background-color: #f7f9f4 !important;
}

.wj-intro--flush-top {
  padding-top: 0 !important;
  border-top: none !important;
}

.wj-intro--slim .wj-intro__left {
  flex: 0 0 180px;
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .wj-intro__inner {
    flex-direction: column;
    gap: 20px;
  }

  .wj-intro__left {
    flex: none;
    width: 100%;
  }

  .wj-intro__right {
    border-left: none;
    border-top: 1px solid #dde4d6;
    padding-left: 0;
    padding-top: 20px;
  }

  .wj-intro__tagline {
    font-size: 1.15rem !important;
  }
}