/* =========================================================
   JewelryCalculator.online - articles.css
   Premium article system v1.0
   Loads after pages.css on single posts.

   Goal:
   - Keep article HTML clean inside Elementor
   - No inline article CSS
   - Dark premium fabrication magazine style
   - Smaller, controlled editorial images
   - Strong sidebar and reusable article components
   - Backward compatible with existing .jc-article-page HTML
   ========================================================= */

/* ---------- Article shell ---------- */

.single-post .entry-content,
.jc-article-page {
  background:
    radial-gradient(circle at 12% 0%, rgba(196, 112, 74, 0.18), transparent 34rem),
    radial-gradient(circle at 88% 8%, rgba(224, 138, 95, 0.09), transparent 30rem),
    linear-gradient(180deg, #0e0e0e 0%, #12100e 42%, #0e0e0e 100%);
}

.jc-article-page {
  position: relative;
  overflow: hidden;
  color: var(--jc-text);
  font-family: var(--jc-font-body);
}

.jc-article-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.55), transparent 70%);
  z-index: 0;
}

.jc-article-page > * {
  position: relative;
  z-index: 1;
}

/* ---------- Hero ---------- */

.jc-article-hero {
  position: relative;
  min-height: clamp(420px, 56vh, 650px);
  display: grid;
  align-items: end;
  padding: clamp(6rem, 10vw, 9rem) 0 clamp(3rem, 6vw, 5rem) !important;
  border-bottom: 1px solid rgba(196,112,74,0.22);
  isolation: isolate;
  overflow: hidden;
}

.jc-article-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(14,14,14,0.96) 0%, rgba(14,14,14,0.88) 46%, rgba(14,14,14,0.58) 100%),
    linear-gradient(180deg, rgba(14,14,14,0.15) 0%, rgba(14,14,14,0.96) 100%);
}

.jc-article-hero::after {
  content: "";
  position: absolute;
  inset: auto -14% -40% 12%;
  height: 430px;
  z-index: -2;
  background: radial-gradient(circle, rgba(196,112,74,0.24), transparent 68%);
  filter: blur(18px);
}

.jc-article-hero .jc-container {
  position: relative;
  z-index: 2;
}

.jc-article-hero h1 {
  max-width: 980px;
  margin: 0;
  color: #fff8ec !important;
  font-family: var(--jc-font-display);
  font-size: clamp(2.7rem, 7vw, 5.7rem) !important;
  font-weight: 400;
  line-height: 0.92 !important;
  letter-spacing: -0.065em;
  text-wrap: balance;
}

.jc-page-lead,
.jc-article-lead {
  max-width: 760px;
  margin: 1.35rem 0 0 !important;
  color: rgba(232,224,213,0.82) !important;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem) !important;
  line-height: 1.72 !important;
}

.jc-guides-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.jc-article-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
}

.jc-article-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0.35rem 0.72rem;
  border: 1px solid rgba(196,112,74,0.35);
  border-radius: 999px;
  background: rgba(23,20,18,0.76);
  color: rgba(243,239,232,0.76);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* ---------- Main layout ---------- */

.jc-article-body {
  padding: clamp(2.4rem, 5vw, 4.8rem) 0 clamp(4rem, 8vw, 7rem) !important;
}

.jc-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(285px, 340px);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.jc-article-main {
  min-width: 0;
  display: grid;
  gap: 1.15rem;
}

.jc-content-block {
  position: relative;
  padding: clamp(1.35rem, 3vw, 2.1rem);
  border: 1px solid rgba(232,224,213,0.085);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.038), rgba(255,255,255,0.012)),
    rgba(23,20,18,0.86);
  box-shadow:
    0 24px 80px rgba(0,0,0,0.24),
    0 1px 0 rgba(255,255,255,0.035) inset;
}

.jc-content-block::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at 0% 0%, rgba(196,112,74,0.08), transparent 18rem);
}

.jc-content-block > * {
  position: relative;
  z-index: 1;
}

.jc-content-block h2,
.jc-article-main h2 {
  margin: 0 0 1rem !important;
  color: #fff4e4 !important;
  font-family: var(--jc-font-display);
  font-size: clamp(1.9rem, 3.8vw, 3rem) !important;
  font-weight: 400;
  line-height: 1.02 !important;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.jc-content-block h3,
.jc-article-main h3 {
  margin: 1.55rem 0 0.75rem !important;
  color: #fff4e4 !important;
  font-family: var(--jc-font-body);
  font-size: clamp(1.05rem, 2vw, 1.25rem) !important;
  font-weight: 750;
  line-height: 1.22 !important;
  letter-spacing: 0.01em;
}

.jc-article-main p,
.jc-article-main li {
  color: rgba(232,224,213,0.78) !important;
  font-size: 1rem;
  line-height: 1.78;
}

.jc-article-main p {
  margin: 0 0 1rem;
}

.jc-article-main p:last-child,
.jc-content-block > *:last-child {
  margin-bottom: 0;
}

.jc-article-main strong,
.jc-sidebar-card strong {
  color: #f5d2aa !important;
  font-weight: 800;
}

.jc-article-main a,
.jc-sidebar-card a {
  color: #e3a66d !important;
  font-weight: 780;
  text-decoration: underline;
  text-decoration-color: rgba(227,166,109,0.38);
  text-underline-offset: 0.2em;
}

.jc-article-main a:hover,
.jc-sidebar-card a:hover {
  color: #ffd1a3 !important;
  text-decoration-color: #ffd1a3;
}

/* ---------- Lists ---------- */

.jc-check-list,
.jc-article-main ul.jc-check-list {
  display: grid;
  gap: 0.55rem;
  margin: 1.05rem 0 1.35rem;
  padding: 0;
  list-style: none;
}

.jc-check-list li {
  position: relative;
  margin: 0 !important;
  padding: 0.72rem 0.85rem 0.72rem 2.3rem;
  border: 1px solid rgba(232,224,213,0.065);
  border-radius: 14px;
  background: rgba(255,255,255,0.024);
  color: rgba(232,224,213,0.82) !important;
}

.jc-check-list li::before {
  content: "";
  position: absolute;
  top: 1.05rem;
  left: 0.9rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--jc-copper);
  box-shadow: 0 0 0 4px rgba(196,112,74,0.13);
}

.jc-compact-list {
  display: grid;
  gap: 0.45rem;
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

.jc-compact-list li {
  margin: 0 !important;
  padding-left: 1.1rem;
  position: relative;
}

.jc-compact-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.82rem;
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 999px;
  background: var(--jc-copper);
}

/* ---------- Images and media ---------- */

.jc-article-image {
  margin: 0 0 1.15rem;
  overflow: hidden;
  border: 1px solid rgba(196,112,74,0.18);
  border-radius: 24px;
  background: #171412;
  box-shadow: 0 26px 80px rgba(0,0,0,0.30);
}

.jc-article-main .jc-article-image:not(:first-child) {
  margin-top: 1.25rem;
}

.jc-article-image img,
.jc-article-main .jc-article-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: saturate(0.92) contrast(1.04);
}

.jc-article-image.is-hero img,
.jc-article-main > .jc-article-image:first-child img {
  max-height: 460px;
}

.jc-article-image-caption {
  padding: 0.78rem 0.95rem;
  border-top: 1px solid rgba(255,255,255,0.075);
  color: rgba(232,224,213,0.58);
  font-size: 0.82rem;
  line-height: 1.5;
}

.jc-media-row {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 1rem;
  align-items: stretch;
  margin: 1.1rem 0;
}

.jc-media-row .jc-article-image,
.jc-media-row .jc-content-card,
.jc-media-row .jc-note-box {
  margin: 0;
  height: 100%;
}

.jc-media-row .jc-article-image img {
  height: 100%;
  min-height: 280px;
  max-height: 360px;
}

.jc-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.2rem 0;
}

.jc-media-grid .jc-article-image {
  margin: 0;
}

.jc-media-grid .jc-article-image img {
  height: 260px;
}

/* ---------- Boxes ---------- */

.jc-note-box,
.jc-reference-box,
.jc-formula-box,
.jc-tip-box,
.jc-warning-box,
.jc-content-card {
  margin: 1.2rem 0;
  padding: clamp(1rem, 2.4vw, 1.35rem);
  border: 1px solid rgba(196,112,74,0.20);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(196,112,74,0.11), transparent 15rem),
    rgba(31,25,21,0.94);
  color: rgba(232,224,213,0.84) !important;
  box-shadow: 0 16px 45px rgba(0,0,0,0.18);
}

.jc-note-box *,
.jc-reference-box *,
.jc-formula-box *,
.jc-tip-box *,
.jc-warning-box *,
.jc-content-card * {
  opacity: 1 !important;
}

.jc-note-box strong,
.jc-reference-box strong,
.jc-formula-box strong,
.jc-tip-box strong,
.jc-warning-box strong,
.jc-content-card strong {
  color: #f5d2aa !important;
}

.jc-warning-box {
  border-color: rgba(255,152,104,0.34);
  background:
    radial-gradient(circle at top left, rgba(255,108,72,0.12), transparent 15rem),
    rgba(31,25,21,0.94);
}

.jc-formula-box span,
.jc-reference-box span {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--jc-copper-2) !important;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.jc-formula-box strong,
.jc-reference-box strong {
  display: block;
  color: #fff4e4 !important;
  font-family: var(--jc-font-display);
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 400;
  line-height: 1.08;
}

.jc-callout-grid,
.jc-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 1.2rem 0;
}

.jc-mini-card {
  padding: 1rem;
  border: 1px solid rgba(232,224,213,0.08);
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
}

.jc-mini-card span {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--jc-copper-2);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.jc-mini-card strong {
  display: block;
  color: #fff4e4 !important;
  font-size: 1rem;
  line-height: 1.35;
}

.jc-mini-card p {
  margin: 0.45rem 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
}

/* ---------- Process / step cards ---------- */

.jc-process-steps {
  display: grid;
  gap: 0.8rem;
  margin: 1.2rem 0;
  counter-reset: jc-step;
}

.jc-process-step {
  counter-increment: jc-step;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  padding: 1rem;
  border: 1px solid rgba(232,224,213,0.075);
  border-radius: 18px;
  background: rgba(255,255,255,0.026);
}

.jc-process-step::before {
  content: counter(jc-step);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--jc-copper-2), var(--jc-copper-dark));
  color: #160f0b;
  font-size: 0.8rem;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(196,112,74,0.25);
}

.jc-process-step strong {
  display: block;
  margin-bottom: 0.25rem;
  color: #fff4e4 !important;
}

.jc-process-step p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
}

/* ---------- Tables ---------- */

.jc-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 1.25rem 0;
  border: 1px solid rgba(196,112,74,0.18);
  border-radius: 18px;
  background: rgba(23,20,18,0.96);
}

.jc-article-page table,
.jc-reference-table {
  width: 100%;
  min-width: 520px;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: collapse;
  background: transparent !important;
  color: rgba(232,224,213,0.88) !important;
}

.jc-article-page table th,
.jc-reference-table th {
  padding: 0.95rem 1rem !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(196,112,74,0.18) !important;
  background: rgba(42,33,24,0.96) !important;
  color: #f7ddbd !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.jc-article-page table td,
.jc-reference-table td {
  padding: 0.9rem 1rem !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  background: rgba(255,255,255,0.018) !important;
  color: rgba(232,224,213,0.84) !important;
  font-size: 0.95rem;
  line-height: 1.55;
}

.jc-article-page table tr:last-child td,
.jc-reference-table tr:last-child td {
  border-bottom: 0 !important;
}

.jc-article-page table tr:nth-child(even) td,
.jc-reference-table tr:nth-child(even) td {
  background: rgba(255,255,255,0.034) !important;
}

/* ---------- Sidebar ---------- */

.jc-article-sidebar {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 1rem;
  align-self: start;
}

.jc-sidebar-card {
  position: relative;
  overflow: hidden;
  padding: 1.1rem;
  border: 1px solid rgba(196,112,74,0.18);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(196,112,74,0.10), transparent 13rem),
    linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.014)),
    rgba(23,20,18,0.94);
  box-shadow: 0 18px 55px rgba(0,0,0,0.26);
}

.jc-sidebar-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--jc-copper-2), transparent);
  opacity: 0.86;
}

.jc-sidebar-card .jc-guide-label,
.jc-guide-label,
.jc-kicker {
  display: inline-block;
  margin: 0 0 0.72rem;
  color: var(--jc-copper-2) !important;
  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1.35;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.jc-sidebar-card p,
.jc-sidebar-card li,
.jc-sidebar-card a {
  font-size: 0.92rem;
  line-height: 1.58;
}

.jc-sidebar-card p {
  margin: 0.45rem 0 0;
  color: rgba(232,224,213,0.78) !important;
}

.jc-sidebar-card a {
  display: block;
  margin-top: 0.55rem;
}

.jc-sidebar-card ul {
  display: grid;
  gap: 0.45rem;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
}

.jc-sidebar-card li {
  margin: 0 !important;
  color: rgba(232,224,213,0.78) !important;
}

/* ---------- Related / CTA ---------- */

.jc-related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 1.2rem 0 0;
}

.jc-related-card {
  display: block;
  padding: 1rem;
  border: 1px solid rgba(232,224,213,0.08);
  border-radius: 16px;
  background: rgba(255,255,255,0.026);
  text-decoration: none !important;
}

.jc-related-card span {
  display: block;
  color: var(--jc-copper-2);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.jc-related-card strong {
  display: block;
  margin-top: 0.35rem;
  color: #fff4e4 !important;
  line-height: 1.28;
}

.jc-final-cta-box,
.jc-article-cta {
  margin: 1.25rem 0 0;
  padding: clamp(1.35rem, 4vw, 2.2rem);
  border: 1px solid rgba(196,112,74,0.28);
  border-radius: 24px;
  background:
    radial-gradient(circle at 10% 0%, rgba(196,112,74,0.20), transparent 18rem),
    linear-gradient(135deg, rgba(196,112,74,0.13), rgba(255,255,255,0.025)),
    #151311;
  box-shadow: 0 28px 90px rgba(0,0,0,0.33);
}

.jc-final-cta-box h2,
.jc-article-cta h2 {
  margin: 0 0 0.8rem !important;
  color: #fff4e4 !important;
  font-size: clamp(2rem, 4vw, 3.1rem) !important;
}

/* ---------- Buttons compatibility ---------- */

.jc-article-page .jc-btn {
  border-radius: 999px !important;
  min-height: 44px !important;
  padding: 0.84rem 1.25rem !important;
}

.jc-article-page .jc-btn-primary {
  background: linear-gradient(135deg, var(--jc-copper-2), var(--jc-copper)) !important;
  color: #130d09 !important;
  border-color: rgba(255,218,174,0.42) !important;
  box-shadow: 0 18px 44px rgba(196,112,74,0.22) !important;
}

.jc-article-page .jc-btn-secondary {
  background: rgba(255,255,255,0.035) !important;
  color: #f6ead8 !important;
  border-color: rgba(196,112,74,0.28) !important;
}

/* ---------- Mobile ---------- */

@media (max-width: 1100px) {
  .jc-article-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

@media (max-width: 980px) {
  .jc-article-layout {
    grid-template-columns: 1fr;
  }

  .jc-article-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jc-media-row {
    grid-template-columns: 1fr;
  }

  .jc-media-row .jc-article-image img {
    height: auto;
    min-height: 0;
  }
}

@media (max-width: 720px) {
  .jc-article-hero {
    min-height: auto;
    padding: 4.8rem 0 3rem !important;
  }

  .jc-article-hero h1 {
    font-size: clamp(2.35rem, 14vw, 3.8rem) !important;
  }

  .jc-guides-hero-actions,
  .jc-article-page .jc-btn {
    width: 100%;
  }

  .jc-guides-hero-actions {
    flex-direction: column;
  }

  .jc-article-sidebar,
  .jc-callout-grid,
  .jc-mini-grid,
  .jc-related-grid,
  .jc-media-grid {
    grid-template-columns: 1fr;
  }

  .jc-content-block {
    border-radius: 20px;
    padding: 1.15rem;
  }

  .jc-article-image {
    border-radius: 18px;
  }

  .jc-article-image img,
  .jc-media-grid .jc-article-image img {
    max-height: 330px;
    height: auto;
  }

  .jc-table-wrap {
    border-radius: 16px;
  }
}

/* =========================================================
   JewelryCalculator.online - Article mockup alignment v1.1
   Added after v1.0 to move the live article closer to the
   approved premium mockup reference.
   ========================================================= */

.jc-article-premium .jc-article-hero {
  min-height: clamp(560px, 76vh, 780px);
  display: flex;
  align-items: center;
  padding: clamp(4.8rem, 8vw, 7.2rem) 0 clamp(2.6rem, 5vw, 4rem) !important;
  background:
    radial-gradient(circle at 86% 34%, rgba(196,112,74,0.16), transparent 24rem),
    linear-gradient(180deg, #0b0b0b 0%, #10100f 62%, #0d0d0d 100%);
}

.jc-article-premium .jc-article-hero::before {
  background:
    linear-gradient(90deg, rgba(10,10,10,0.96) 0%, rgba(10,10,10,0.86) 44%, rgba(10,10,10,0.32) 100%),
    linear-gradient(180deg, rgba(10,10,10,0.10) 0%, rgba(10,10,10,0.92) 100%);
}

.jc-article-premium .jc-article-hero::after {
  inset: auto -10% -34% 28%;
  height: 360px;
  opacity: 0.85;
}

.jc-article-premium .jc-article-hero .jc-container {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(340px, 0.76fr);
  gap: clamp(1.8rem, 5vw, 5rem);
  align-items: center;
}

.jc-hero-content {
  min-width: 0;
}

.jc-hero-media {
  position: relative;
  min-height: clamp(310px, 42vw, 520px);
  overflow: hidden;
  border: 1px solid rgba(196,112,74,0.22);
  border-radius: 28px;
  background: #171412;
  box-shadow: 0 34px 110px rgba(0,0,0,0.46);
  isolation: isolate;
}

.jc-hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(10,10,10,0.28), transparent 42%),
    linear-gradient(180deg, transparent 40%, rgba(10,10,10,0.50));
  pointer-events: none;
}

.jc-hero-media::after {
  content: "";
  position: absolute;
  inset: auto 1.1rem 1.1rem 1.1rem;
  height: 1px;
  z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(224,138,95,0.72), transparent);
}

.jc-hero-media img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  display: block;
  filter: saturate(0.94) contrast(1.07) brightness(0.78);
  transform: scale(1.012);
}

.jc-article-premium .jc-article-hero h1 {
  max-width: 10.8ch;
  font-size: clamp(3rem, 6.4vw, 5.65rem) !important;
  line-height: 0.92 !important;
}

.jc-article-premium .jc-page-lead {
  max-width: 680px;
  font-size: clamp(1rem, 1.25vw, 1.12rem) !important;
  color: rgba(232,224,213,0.76) !important;
}

.jc-hero-proof-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(1.8rem, 4vw, 3rem);
  overflow: hidden;
  border: 1px solid rgba(232,224,213,0.10);
  border-radius: 18px;
  background: rgba(232,224,213,0.08);
  box-shadow: 0 22px 70px rgba(0,0,0,0.30);
}

.jc-hero-proof-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  min-height: 72px;
  padding: 1rem 1.1rem;
  background: rgba(16,15,14,0.90);
}

.jc-hero-proof-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(196,112,74,0.38);
  border-radius: 999px;
  color: var(--jc-copper-2);
  font-size: 1rem;
  line-height: 1;
}

.jc-hero-proof-item strong {
  display: block;
  color: #fff4e4 !important;
  font-size: 0.86rem;
  line-height: 1.25;
}

.jc-hero-proof-item span {
  display: block;
  margin-top: 0.18rem;
  color: rgba(232,224,213,0.58);
  font-size: 0.78rem;
  line-height: 1.35;
}

.jc-article-premium .jc-article-body {
  padding-top: clamp(2rem, 4vw, 3.2rem) !important;
}

.jc-article-premium .jc-article-layout {
  grid-template-columns: minmax(0, 0.98fr) minmax(300px, 330px);
  gap: clamp(1.4rem, 3.3vw, 2.6rem);
}

.jc-article-premium .jc-article-main {
  gap: 0;
}

.jc-article-premium .jc-content-block {
  padding: clamp(1.45rem, 3vw, 2.1rem) 0;
  border: 0;
  border-bottom: 1px solid rgba(232,224,213,0.11);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.jc-article-premium .jc-content-block::before {
  display: none;
}

.jc-article-premium .jc-content-block:first-of-type {
  padding-top: 0.2rem;
}

.jc-article-premium .jc-content-block h2,
.jc-article-premium .jc-article-main h2 {
  font-size: clamp(1.72rem, 3.2vw, 2.45rem) !important;
  line-height: 1.05 !important;
}

.jc-article-premium .jc-content-block h2::before {
  color: var(--jc-copper-2);
}

.jc-section-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 0.55rem;
  border: 1px solid rgba(196,112,74,0.42);
  border-radius: 999px;
  color: var(--jc-copper-2);
  font-family: var(--jc-font-body);
  font-size: 0.74rem;
  font-weight: 850;
  vertical-align: 0.18em;
}

.jc-article-premium .jc-article-image {
  border-radius: 16px;
  box-shadow: 0 18px 58px rgba(0,0,0,0.30);
}

.jc-article-premium .jc-article-main > .jc-article-image:first-child {
  margin-bottom: 1.4rem;
}

.jc-article-premium .jc-article-main > .jc-article-image:first-child img {
  max-height: 330px;
}

.jc-article-premium .jc-media-row {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  margin: 1.15rem 0 0.3rem;
}

.jc-article-premium .jc-media-row .jc-article-image img {
  min-height: 210px;
  max-height: 285px;
}

.jc-article-premium .jc-check-list {
  gap: 0.38rem;
}

.jc-article-premium .jc-check-list li {
  padding: 0.42rem 0 0.42rem 1.55rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(232,224,213,0.78) !important;
}

.jc-article-premium .jc-check-list li::before {
  top: 0.92rem;
  left: 0.18rem;
  width: 0.46rem;
  height: 0.46rem;
  background: transparent;
  border: 1px solid var(--jc-copper-2);
  box-shadow: 0 0 0 3px rgba(196,112,74,0.12);
}

.jc-article-premium .jc-note-box,
.jc-article-premium .jc-content-card,
.jc-article-premium .jc-warning-box,
.jc-article-premium .jc-mini-card {
  border-color: rgba(196,112,74,0.30);
  background:
    radial-gradient(circle at top left, rgba(196,112,74,0.10), transparent 13rem),
    rgba(18,17,16,0.92);
}

.jc-article-premium .jc-callout-grid {
  align-items: stretch;
}

.jc-article-premium .jc-process-step {
  padding: 0.82rem 0.9rem;
  grid-template-columns: 36px minmax(0, 1fr);
  border-color: rgba(196,112,74,0.18);
  background: rgba(255,255,255,0.022);
}

.jc-article-premium .jc-process-step::before {
  width: 31px;
  height: 31px;
  background: transparent;
  border: 1px solid rgba(196,112,74,0.58);
  color: var(--jc-copper-2);
  box-shadow: none;
}

.jc-article-premium .jc-sidebar-card {
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(196,112,74,0.08), transparent 12rem),
    rgba(18,17,16,0.92);
}

.jc-article-premium .jc-sidebar-card::before {
  width: 0;
}

.jc-article-premium .jc-sidebar-card ul li {
  position: relative;
  padding-left: 1.25rem;
}

.jc-article-premium .jc-sidebar-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72rem;
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 999px;
  background: var(--jc-copper-2);
}

.jc-sidebar-sequence {
  counter-reset: jc-sidebar-seq;
}

.jc-sidebar-sequence li {
  counter-increment: jc-sidebar-seq;
  padding-left: 2.2rem !important;
}

.jc-sidebar-sequence li::before {
  content: counter(jc-sidebar-seq) !important;
  top: 0.05rem !important;
  width: 1.45rem !important;
  height: 1.45rem !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(196,112,74,0.52) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--jc-copper-2) !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
}

.jc-sidebar-sequence strong {
  display: block;
  color: #fff4e4 !important;
  font-size: 0.88rem;
}

.jc-sidebar-sequence span {
  display: block;
  color: rgba(232,224,213,0.58);
  font-size: 0.78rem;
  line-height: 1.35;
}

.jc-sidebar-image-card {
  padding: 0 !important;
}

.jc-sidebar-image-card img {
  width: 100%;
  height: 128px;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid rgba(196,112,74,0.18);
}

.jc-sidebar-image-card .jc-sidebar-card-inner {
  padding: 1rem;
}

.jc-related-strip {
  margin: clamp(2.3rem, 5vw, 4rem) 0 0;
}

.jc-related-strip > span {
  display: block;
  margin-bottom: 0.9rem;
  color: var(--jc-copper-2);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.jc-related-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.jc-related-strip-card {
  overflow: hidden;
  border: 1px solid rgba(232,224,213,0.10);
  border-radius: 16px;
  background: rgba(18,17,16,0.92);
  text-decoration: none !important;
}

.jc-related-strip-card img {
  width: 100%;
  height: 118px;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) contrast(1.04) brightness(0.86);
}

.jc-related-strip-card strong {
  display: block;
  padding: 0.85rem 0.9rem 0.25rem;
  color: #fff4e4 !important;
  font-size: 0.92rem;
  line-height: 1.25;
}

.jc-related-strip-card span {
  display: block;
  padding: 0 0.9rem 0.85rem;
  color: var(--jc-copper-2);
  font-size: 0.64rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .jc-article-premium .jc-article-hero .jc-container {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.75fr);
  }

  .jc-related-strip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 880px) {
  .jc-article-premium .jc-article-hero {
    min-height: auto;
  }

  .jc-article-premium .jc-article-hero .jc-container {
    grid-template-columns: 1fr;
  }

  .jc-hero-media {
    min-height: 280px;
    order: -1;
  }

  .jc-hero-proof-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .jc-article-premium .jc-media-row,
  .jc-related-strip-grid {
    grid-template-columns: 1fr;
  }

  .jc-hero-media {
    border-radius: 20px;
  }

  .jc-article-premium .jc-content-block {
    padding: 1.35rem 0;
  }
}

/* =========================================================
   JewelryCalculator.online - Article compact correction v1.2
   Reduces oversized mockup v2 spacing and removes dead hero gaps.
   Keep this at the end of articles.css.
   ========================================================= */

.single-post .site-main,
.single-post .inside-article,
.single-post .entry-content,
.jc-article-page {
  min-height: 0 !important;
}

.jc-article-premium {
  background:
    radial-gradient(circle at 18% 0%, rgba(196,112,74,0.12), transparent 30rem),
    linear-gradient(180deg, #0c0c0c 0%, #11100f 42%, #0c0c0c 100%) !important;
}

.jc-article-premium .jc-article-hero {
  min-height: 0 !important;
  align-items: start !important;
  padding: clamp(2.3rem, 4.2vw, 4.2rem) 0 clamp(1.45rem, 3vw, 2.4rem) !important;
  background:
    radial-gradient(circle at 77% 34%, rgba(196,112,74,0.12), transparent 20rem),
    linear-gradient(180deg, #0b0b0b 0%, #10100f 66%, #0d0d0d 100%) !important;
}

.jc-article-premium .jc-article-hero::before {
  background:
    linear-gradient(90deg, rgba(10,10,10,0.98) 0%, rgba(10,10,10,0.88) 48%, rgba(10,10,10,0.48) 100%),
    linear-gradient(180deg, rgba(10,10,10,0.04) 0%, rgba(10,10,10,0.82) 100%) !important;
}

.jc-article-premium .jc-article-hero::after {
  inset: auto -10% -28% 32% !important;
  height: 240px !important;
  opacity: 0.62 !important;
}

.jc-article-premium .jc-article-hero .jc-container {
  width: min(100% - 56px, 1260px) !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.64fr) !important;
  gap: clamp(1.4rem, 3vw, 3.2rem) !important;
  align-items: center !important;
}

.jc-hero-tags {
  margin-bottom: 0.9rem !important;
  gap: 0.5rem !important;
}

.jc-hero-tag {
  min-height: 25px !important;
  padding: 0.28rem 0.62rem !important;
  font-size: 0.61rem !important;
  letter-spacing: 0.11em !important;
}

.jc-article-premium .jc-kicker {
  margin-bottom: 0.82rem !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.18em !important;
}

.jc-article-premium .jc-article-hero h1 {
  max-width: 11.6ch !important;
  font-size: clamp(2.45rem, 4.9vw, 4.65rem) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.055em !important;
  margin-bottom: 0.95rem !important;
}

.jc-article-premium .jc-page-lead {
  max-width: 640px !important;
  margin-top: 0 !important;
  margin-bottom: 1.3rem !important;
  font-size: clamp(0.92rem, 1.08vw, 1.02rem) !important;
  line-height: 1.58 !important;
}

.jc-article-premium .jc-guides-hero-actions,
.jc-article-premium .jc-hero-actions {
  margin-top: 1rem !important;
  gap: 0.7rem !important;
}

.jc-article-premium .jc-btn {
  min-height: 38px !important;
  padding: 0.72rem 1.05rem !important;
  font-size: 0.66rem !important;
  border-radius: 999px !important;
}

.jc-hero-media {
  min-height: clamp(260px, 30vw, 420px) !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 78px rgba(0,0,0,0.42) !important;
}

.jc-hero-media img {
  min-height: inherit !important;
}

.jc-hero-proof-strip {
  margin-top: clamp(1.25rem, 2.4vw, 2.1rem) !important;
  border-radius: 15px !important;
}

.jc-hero-proof-item {
  grid-template-columns: 30px minmax(0, 1fr) !important;
  gap: 0.65rem !important;
  min-height: 54px !important;
  padding: 0.72rem 0.85rem !important;
}

.jc-hero-proof-icon {
  width: 26px !important;
  height: 26px !important;
  font-size: 0.82rem !important;
}

.jc-hero-proof-item strong {
  font-size: 0.76rem !important;
}

.jc-hero-proof-item span {
  margin-top: 0.08rem !important;
  font-size: 0.68rem !important;
  line-height: 1.25 !important;
}

.jc-article-premium .jc-article-body {
  padding: clamp(1.55rem, 3vw, 2.35rem) 0 clamp(2.4rem, 5vw, 4rem) !important;
}

.jc-article-premium .jc-article-layout {
  width: min(100% - 56px, 1260px) !important;
  grid-template-columns: minmax(0, 0.98fr) minmax(280px, 310px) !important;
  gap: clamp(1.2rem, 2.7vw, 2.25rem) !important;
}

.jc-article-premium .jc-content-block {
  padding: clamp(1.05rem, 2.2vw, 1.55rem) 0 !important;
}

.jc-article-premium .jc-content-block:first-of-type {
  padding-top: 0 !important;
}

.jc-article-premium .jc-content-block h2,
.jc-article-premium .jc-article-main h2 {
  font-size: clamp(1.45rem, 2.35vw, 2rem) !important;
  line-height: 1.08 !important;
  margin-bottom: 0.7rem !important;
}

.jc-article-premium .jc-article-main h3 {
  font-size: clamp(1.05rem, 1.7vw, 1.35rem) !important;
}

.jc-article-premium .jc-article-main p,
.jc-article-premium .jc-article-main li {
  font-size: 0.93rem !important;
  line-height: 1.62 !important;
}

.jc-article-premium .jc-article-main p {
  margin: 0.65rem 0 !important;
}

.jc-article-premium .jc-check-list {
  gap: 0.2rem !important;
  margin: 0.65rem 0 0.9rem !important;
}

.jc-article-premium .jc-check-list li {
  padding: 0.26rem 0 0.26rem 1.35rem !important;
}

.jc-article-premium .jc-check-list li::before {
  top: 0.72rem !important;
  width: 0.38rem !important;
  height: 0.38rem !important;
}

.jc-article-premium .jc-note-box,
.jc-article-premium .jc-content-card,
.jc-article-premium .jc-warning-box,
.jc-article-premium .jc-mini-card {
  margin: 0.95rem 0 !important;
  padding: 0.95rem 1rem !important;
  border-radius: 14px !important;
}

.jc-article-premium .jc-media-row {
  gap: 1rem !important;
  margin: 0.85rem 0 0.15rem !important;
}

.jc-article-premium .jc-media-row .jc-article-image img,
.jc-article-premium .jc-article-image img,
.jc-article-premium .jc-media-grid .jc-article-image img {
  min-height: 0 !important;
  max-height: 255px !important;
  object-fit: cover !important;
}

.jc-article-premium .jc-media-row .jc-article-image,
.jc-article-premium .jc-article-image {
  border-radius: 14px !important;
  margin: 0.85rem 0 !important;
}

.jc-article-premium .jc-table-wrap {
  margin: 1rem 0 !important;
  border-radius: 14px !important;
}

.jc-article-premium .jc-reference-table th,
.jc-article-premium .jc-reference-table td,
.jc-article-premium table th,
.jc-article-premium table td {
  padding: 0.7rem 0.8rem !important;
  font-size: 0.84rem !important;
}

.jc-article-premium .jc-article-sidebar {
  gap: 0.85rem !important;
  top: 5.4rem !important;
}

.jc-article-premium .jc-sidebar-card {
  padding: 0.95rem !important;
  border-radius: 14px !important;
}

.jc-article-premium .jc-sidebar-card .jc-guide-label {
  margin-bottom: 0.55rem !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.15em !important;
}

.jc-article-premium .jc-sidebar-card p,
.jc-article-premium .jc-sidebar-card li,
.jc-article-premium .jc-sidebar-card a {
  font-size: 0.82rem !important;
  line-height: 1.48 !important;
}

.jc-sidebar-sequence li {
  padding-left: 1.9rem !important;
}

.jc-sidebar-sequence li::before {
  width: 1.25rem !important;
  height: 1.25rem !important;
  font-size: 0.62rem !important;
}

.jc-sidebar-sequence strong {
  font-size: 0.8rem !important;
}

.jc-sidebar-sequence span {
  font-size: 0.7rem !important;
}

.jc-sidebar-image-card img {
  height: 106px !important;
}

.jc-related-strip {
  margin: clamp(1.4rem, 3vw, 2.4rem) 0 0 !important;
}

.jc-related-strip > span {
  margin-bottom: 0.65rem !important;
  font-size: 0.66rem !important;
}

.jc-related-strip-grid {
  gap: 0.75rem !important;
}

.jc-related-strip-card {
  border-radius: 14px !important;
}

.jc-related-strip-card img {
  height: 92px !important;
}

.jc-related-strip-card strong {
  padding: 0.65rem 0.75rem 0.2rem !important;
  font-size: 0.8rem !important;
}

.jc-related-strip-card span {
  padding: 0 0.75rem 0.68rem !important;
  font-size: 0.58rem !important;
}

.jc-final-cta-box,
.jc-article-premium .jc-final-cta-box {
  margin: 1.2rem 0 !important;
  padding: 1.1rem 1.15rem !important;
  border-radius: 16px !important;
}

.jc-final-cta-box h2,
.jc-article-premium .jc-final-cta-box h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem) !important;
}

.jc-final-cta-box p,
.jc-article-premium .jc-final-cta-box p {
  font-size: 0.9rem !important;
  line-height: 1.55 !important;
  margin-bottom: 0.85rem !important;
}

@media (max-width: 1100px) {
  .jc-article-premium .jc-article-hero .jc-container {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.62fr) !important;
  }

  .jc-article-premium .jc-article-hero h1 {
    font-size: clamp(2.35rem, 5.2vw, 4.1rem) !important;
  }
}

@media (max-width: 880px) {
  .jc-article-premium .jc-article-hero {
    padding: 2.2rem 0 1.7rem !important;
  }

  .jc-article-premium .jc-article-hero .jc-container,
  .jc-article-premium .jc-article-layout {
    width: min(100% - 28px, 1260px) !important;
    grid-template-columns: 1fr !important;
  }

  .jc-hero-media {
    min-height: 230px !important;
    order: -1;
  }

  .jc-hero-proof-strip {
    grid-template-columns: 1fr !important;
    margin-top: 1rem !important;
  }
}

@media (max-width: 720px) {
  .jc-article-premium .jc-article-hero h1 {
    font-size: clamp(2.05rem, 12vw, 3.25rem) !important;
  }

  .jc-article-premium .jc-media-row,
  .jc-related-strip-grid {
    grid-template-columns: 1fr !important;
  }

  .jc-article-premium .jc-content-block {
    padding: 1.05rem 0 !important;
  }

  .jc-related-strip-grid {
    gap: 0.65rem !important;
  }
}

/* =========================================================
   V4 MOCKUP TIGHT OVERRIDES
   Aligns the real article with the approved visual mockup:
   - hero image becomes integrated faded background
   - no separate hero image card
   - much tighter vertical rhythm
   - article body behaves like compact editorial rows, not large cards
   ========================================================= */

/* Overall page density */
.jc-article-page {
  background:
    radial-gradient(circle at 14% 0%, rgba(196,112,74,0.10), transparent 28rem),
    linear-gradient(180deg, #0e0e0e 0%, #12100f 48%, #0e0e0e 100%) !important;
}

.jc-article-page::before {
  opacity: 0.10 !important;
  background-size: 56px 56px !important;
}

/* Integrated fade hero */
.jc-article-hero {
  min-height: 0 !important;
  display: block !important;
  padding: 44px 0 22px !important;
  border-bottom: 1px solid rgba(196,112,74,0.18) !important;
  overflow: hidden !important;
  background: #0d0d0d !important;
}

.jc-article-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    linear-gradient(90deg,
      rgba(13,13,13,0.98) 0%,
      rgba(13,13,13,0.92) 38%,
      rgba(13,13,13,0.58) 61%,
      rgba(13,13,13,0.20) 100%),
    linear-gradient(180deg,
      rgba(13,13,13,0.18) 0%,
      rgba(13,13,13,0.72) 78%,
      rgba(13,13,13,0.96) 100%) !important;
  pointer-events: none !important;
}

.jc-article-hero::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 0 -170px 8% !important;
  height: 260px !important;
  z-index: 2 !important;
  background: radial-gradient(circle, rgba(196,112,74,0.15), transparent 66%) !important;
  filter: blur(18px) !important;
  pointer-events: none !important;
}

.jc-article-hero .jc-container {
  position: relative !important;
  z-index: 3 !important;
  min-height: 430px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.jc-hero-content {
  position: relative !important;
  z-index: 4 !important;
  width: min(58%, 660px) !important;
  max-width: 660px !important;
  padding: 0 !important;
}

.jc-hero-media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.jc-hero-media img {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 66% !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center right !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 0.72 !important;
  filter: saturate(0.92) contrast(1.08) brightness(0.86) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.20) 12%, #000 34%, #000 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.20) 12%, #000 34%, #000 100%) !important;
}

.jc-article-meta-row {
  gap: 8px !important;
  margin: 0 0 16px !important;
}

.jc-article-pill {
  min-height: 24px !important;
  padding: 4px 10px !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.105em !important;
  background: rgba(13,13,13,0.72) !important;
}

.jc-article-hero .jc-kicker {
  margin-bottom: 10px !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.18em !important;
}

.jc-article-hero h1 {
  max-width: 620px !important;
  font-size: clamp(2.35rem, 5vw, 4.15rem) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.058em !important;
}

.jc-page-lead,
.jc-article-lead {
  max-width: 600px !important;
  margin-top: 14px !important;
  font-size: clamp(0.84rem, 1vw, 0.98rem) !important;
  line-height: 1.62 !important;
  color: rgba(232,224,213,0.78) !important;
}

.jc-guides-hero-actions {
  gap: 10px !important;
  margin-top: 20px !important;
}

.jc-article-hero .jc-btn {
  min-height: 34px !important;
  padding: 0.62rem 1rem !important;
  border-radius: 8px !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.12em !important;
}

/* Proof strip closer to mockup, with minimal vertical gaps */
.jc-hero-proof-strip {
  position: relative !important;
  z-index: 4 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: 100% !important;
  margin: 30px 0 0 !important;
  border: 1px solid rgba(232,224,213,0.12) !important;
  border-radius: 8px !important;
  background: rgba(13,13,13,0.58) !important;
  overflow: hidden !important;
  backdrop-filter: blur(4px) !important;
  box-shadow: none !important;
}

.jc-hero-proof-item {
  min-height: 58px !important;
  padding: 12px 22px !important;
  border-right: 1px solid rgba(232,224,213,0.10) !important;
  background: transparent !important;
}

.jc-hero-proof-item:last-child {
  border-right: 0 !important;
}

.jc-hero-proof-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  font-size: 0.78rem !important;
  opacity: 0.85 !important;
}

.jc-hero-proof-item strong {
  font-size: 0.76rem !important;
  line-height: 1.2 !important;
}

.jc-hero-proof-item span:not(.jc-hero-proof-icon) {
  font-size: 0.72rem !important;
  line-height: 1.35 !important;
}

/* Body density */
.jc-article-body {
  padding: 22px 0 42px !important;
}

.jc-article-layout {
  grid-template-columns: minmax(0, 680px) 300px !important;
  justify-content: center !important;
  gap: 34px !important;
  align-items: start !important;
}

.jc-article-main {
  display: block !important;
  gap: 0 !important;
}

/* First article image should be compact, not a second hero */
.jc-article-image.is-hero {
  margin: 0 0 20px !important;
}

.jc-article-image.is-hero img {
  height: 190px !important;
  border-radius: 6px !important;
  object-fit: cover !important;
}

.jc-article-image-caption {
  margin-top: 7px !important;
  font-size: 0.72rem !important;
  line-height: 1.4 !important;
}

/* Content should read like article sections, not huge separate panels */
.jc-content-block {
  margin: 0 0 22px !important;
  padding: 0 0 21px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(232,224,213,0.12) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.jc-content-block::before {
  display: none !important;
}

.jc-content-block h2,
.jc-article-main h2 {
  margin: 0 0 10px !important;
  font-size: clamp(1.24rem, 2vw, 1.62rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.034em !important;
}

.jc-section-number {
  width: auto !important;
  height: auto !important;
  margin-right: 6px !important;
  border: 0 !important;
  background: transparent !important;
  color: #f6efe4 !important;
  font-family: var(--jc-font-display) !important;
  font-size: 1em !important;
}

.jc-article-main p,
.jc-article-main li {
  font-size: 0.82rem !important;
  line-height: 1.58 !important;
}

.jc-article-main p {
  margin: 0 0 9px !important;
}

.jc-check-list,
.jc-article-main ul.jc-check-list {
  gap: 4px !important;
  margin: 8px 0 10px !important;
}

.jc-check-list li {
  padding: 2px 0 2px 20px !important;
  border: 0 !important;
  background: transparent !important;
}

.jc-check-list li::before {
  width: 12px !important;
  height: 12px !important;
  top: 8px !important;
  left: 0 !important;
  font-size: 8px !important;
}

.jc-note-box,
.jc-reference-box,
.jc-formula-box,
.jc-tip-box,
.jc-warning-box {
  margin: 12px 0 0 !important;
  padding: 14px 16px !important;
  border-radius: 6px !important;
  font-size: 0.8rem !important;
  line-height: 1.5 !important;
  background: rgba(23,20,18,0.62) !important;
}

.jc-media-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 260px !important;
  gap: 18px !important;
  align-items: center !important;
  margin: 14px 0 10px !important;
}

.jc-media-row .jc-article-image {
  margin: 0 !important;
}

.jc-media-row .jc-article-image img {
  height: 155px !important;
  border-radius: 6px !important;
  object-fit: cover !important;
}

.jc-content-card,
.jc-mini-card,
.jc-process-steps,
.jc-process-step {
  border-radius: 6px !important;
}

.jc-content-card,
.jc-mini-card {
  padding: 14px !important;
}

.jc-content-card strong,
.jc-mini-card strong,
.jc-process-step strong {
  font-size: 0.82rem !important;
  line-height: 1.32 !important;
}

.jc-compact-list {
  gap: 4px !important;
  margin-top: 9px !important;
}

.jc-compact-list li,
.jc-process-step p,
.jc-mini-card p {
  font-size: 0.76rem !important;
  line-height: 1.42 !important;
}

.jc-callout-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 12px 0 !important;
}

.jc-process-steps {
  gap: 8px !important;
}

.jc-process-step {
  padding: 11px 12px !important;
}

/* Sidebar tighter */
.jc-article-sidebar {
  top: 90px !important;
  gap: 14px !important;
}

.jc-sidebar-card {
  padding: 16px !important;
  border-radius: 8px !important;
  background: rgba(23,20,18,0.70) !important;
  box-shadow: none !important;
}

.jc-sidebar-card .jc-guide-label {
  margin-bottom: 10px !important;
  font-size: 0.62rem !important;
}

.jc-sidebar-card p,
.jc-sidebar-card li,
.jc-sidebar-card a {
  font-size: 0.78rem !important;
  line-height: 1.45 !important;
}

.jc-sidebar-card ul,
.jc-sidebar-card .jc-sidebar-list {
  gap: 6px !important;
}

.jc-sidebar-step {
  gap: 9px !important;
  padding: 0 !important;
}

.jc-sidebar-step-number {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  font-size: 0.65rem !important;
}

.jc-sidebar-related-item {
  gap: 9px !important;
  padding: 8px 0 !important;
}

.jc-sidebar-related-item img {
  width: 58px !important;
  height: 48px !important;
  border-radius: 5px !important;
}

/* CTA and related guides */
.jc-article-cta,
.jc-final-cta-box {
  margin: 20px 0 22px !important;
  padding: 20px !important;
  min-height: 0 !important;
  border-radius: 8px !important;
}

.jc-article-cta h2,
.jc-final-cta-box h2 {
  font-size: clamp(1.35rem, 2.6vw, 2rem) !important;
}

.jc-article-cta p,
.jc-final-cta-box p {
  font-size: 0.82rem !important;
  line-height: 1.55 !important;
}

.jc-related-section {
  margin-top: 28px !important;
}

.jc-related-section h2 {
  margin-bottom: 12px !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.16em !important;
}

.jc-related-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.jc-related-card {
  border-radius: 7px !important;
}

.jc-related-card img {
  height: 92px !important;
}

.jc-related-card-body {
  padding: 11px !important;
}

.jc-related-card h3 {
  font-size: 0.82rem !important;
  line-height: 1.18 !important;
}

.jc-related-card span {
  font-size: 0.58rem !important;
}

/* Tables */
.jc-table-wrap {
  margin: 12px 0 !important;
}

.jc-article-page table th,
.jc-article-page table td {
  padding: 0.62rem 0.7rem !important;
  font-size: 0.78rem !important;
}

@media (max-width: 980px) {
  .jc-article-hero .jc-container {
    min-height: 0 !important;
  }

  .jc-hero-content {
    width: min(100%, 680px) !important;
  }

  .jc-hero-media img {
    width: 100% !important;
    opacity: 0.34 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .jc-article-layout {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .jc-article-sidebar {
    position: static !important;
  }

  .jc-media-row {
    grid-template-columns: 1fr !important;
  }

  .jc-media-row .jc-article-image img {
    height: 180px !important;
  }

  .jc-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  .jc-article-hero {
    padding: 34px 0 18px !important;
  }

  .jc-article-hero h1 {
    font-size: clamp(2.1rem, 12vw, 3.2rem) !important;
  }

  .jc-hero-proof-strip {
    grid-template-columns: 1fr !important;
    margin-top: 22px !important;
  }

  .jc-hero-proof-item {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(232,224,213,0.10) !important;
  }

  .jc-hero-proof-item:last-child {
    border-bottom: 0 !important;
  }

  .jc-article-body {
    padding-top: 18px !important;
  }

  .jc-related-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   JewelryCalculator Article CSS v5 - tighter hero, full fade image, no horizontal scroll
   Final correction after frontend review.
   ========================================================= */

html,
body,
#page,
.site,
.site-content,
.content-area,
#primary,
.site-main,
.inside-article,
.entry-content {
  overflow-x: clip !important;
}

@supports not (overflow-x: clip) {
  html,
  body,
  #page,
  .site,
  .site-content,
  .content-area,
  #primary,
  .site-main,
  .inside-article,
  .entry-content {
    overflow-x: hidden !important;
  }
}

.jc-article-page {
  overflow-x: clip !important;
  max-width: 100% !important;
}

@supports not (overflow-x: clip) {
  .jc-article-page {
    overflow-x: hidden !important;
  }
}

.jc-article-hero {
  width: 100% !important;
  max-width: 100% !important;
  padding: 14px 0 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  background: #0d0d0d !important;
  overflow: hidden !important;
}

.jc-article-hero .jc-container {
  width: min(100% - 40px, 1260px) !important;
  max-width: 1260px !important;
  min-height: 390px !important;
  padding: 22px 0 0 !important;
  margin-inline: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  position: relative !important;
  overflow: hidden !important;
}

.jc-article-hero::before {
  z-index: 2 !important;
  background:
    linear-gradient(90deg,
      rgba(13,13,13,0.98) 0%,
      rgba(13,13,13,0.93) 31%,
      rgba(13,13,13,0.64) 52%,
      rgba(13,13,13,0.26) 74%,
      rgba(13,13,13,0.14) 100%),
    linear-gradient(180deg,
      rgba(13,13,13,0.42) 0%,
      rgba(13,13,13,0.10) 31%,
      rgba(13,13,13,0.72) 82%,
      rgba(13,13,13,0.98) 100%) !important;
}

.jc-article-hero::after {
  inset: auto -8% -125px 5% !important;
  height: 210px !important;
  opacity: 0.75 !important;
}

.jc-hero-media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.jc-hero-media img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 0.74 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  filter: saturate(0.92) contrast(1.06) brightness(0.82) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.jc-hero-content {
  position: relative !important;
  z-index: 4 !important;
  width: min(56%, 620px) !important;
  max-width: 620px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.jc-article-meta-row {
  margin: 0 0 14px !important;
}

.jc-article-hero .jc-kicker {
  margin-bottom: 9px !important;
}

.jc-article-hero h1 {
  max-width: 590px !important;
  font-size: clamp(2.05rem, 4.15vw, 3.58rem) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.055em !important;
  margin-bottom: 0 !important;
}

.jc-page-lead,
.jc-article-lead {
  max-width: 560px !important;
  margin-top: 12px !important;
  font-size: clamp(0.8rem, 0.92vw, 0.92rem) !important;
  line-height: 1.55 !important;
}

.jc-guides-hero-actions {
  margin-top: 16px !important;
}

.jc-article-hero .jc-btn {
  min-height: 32px !important;
  padding: 0.58rem 0.92rem !important;
  font-size: 0.58rem !important;
}

.jc-hero-proof-strip {
  position: relative !important;
  z-index: 4 !important;
  margin: 22px 0 0 !important;
  min-height: 0 !important;
}

.jc-hero-proof-item {
  min-height: 50px !important;
  padding: 10px 20px !important;
}

.jc-article-body {
  padding: 22px 0 34px !important;
  margin: 0 !important;
}

.jc-article-layout {
  width: min(100% - 40px, 1260px) !important;
  max-width: 1260px !important;
  gap: 24px !important;
  margin-inline: auto !important;
}

.jc-article-main {
  min-width: 0 !important;
}

.jc-article-sidebar {
  min-width: 0 !important;
}

.jc-article-image.is-hero {
  margin: 0 0 16px !important;
}

.jc-article-image.is-hero img {
  height: 190px !important;
}

.jc-content-block {
  padding: 16px 0 !important;
  margin: 0 !important;
}

.jc-content-block:first-of-type {
  padding-top: 6px !important;
}

.jc-content-block h2 {
  margin-bottom: 8px !important;
}

.jc-content-block p {
  margin: 0 0 0.55rem !important;
}

.jc-check-list,
.jc-article-main ul,
.jc-article-main ol {
  margin-top: 0.55rem !important;
  margin-bottom: 0.75rem !important;
}

.jc-note-box,
.jc-reference-box,
.jc-formula-box,
.jc-tip-box,
.jc-warning-box {
  margin: 0.8rem 0 !important;
  padding: 0.78rem 0.9rem !important;
}

.jc-media-row {
  gap: 16px !important;
  margin: 0.85rem 0 !important;
}

.jc-media-row .jc-article-image img {
  height: 150px !important;
}

.jc-sidebar-card {
  padding: 0.9rem !important;
}

.jc-related-section {
  margin-top: 18px !important;
}

.jc-related-grid {
  gap: 12px !important;
}

.jc-related-card {
  min-width: 0 !important;
}

@media (max-width: 980px) {
  .jc-article-hero {
    padding-top: 10px !important;
  }

  .jc-article-hero .jc-container {
    width: min(100% - 28px, 1260px) !important;
    min-height: 360px !important;
    padding-top: 20px !important;
  }

  .jc-hero-content {
    width: min(100%, 680px) !important;
    max-width: 680px !important;
  }

  .jc-hero-media img {
    object-position: center center !important;
    opacity: 0.40 !important;
  }

  .jc-article-layout {
    width: min(100% - 28px, 1260px) !important;
  }
}

@media (max-width: 680px) {
  .jc-article-hero {
    padding: 8px 0 0 !important;
  }

  .jc-article-hero .jc-container {
    width: min(100% - 22px, 1260px) !important;
    min-height: 0 !important;
    padding: 18px 0 0 !important;
  }

  .jc-article-hero h1 {
    font-size: clamp(2rem, 11vw, 3rem) !important;
  }

  .jc-page-lead,
  .jc-article-lead {
    font-size: 0.88rem !important;
  }

  .jc-hero-proof-strip {
    margin-top: 18px !important;
  }

  .jc-article-layout {
    width: min(100% - 22px, 1260px) !important;
  }
}

/* =========================================================
   V6 NO TOP GAP OVERRIDES
   Tightens the mockup hero so the image and content begin
   immediately under the site header, with no dead black band.
   ========================================================= */

.jc-article-page,
.single-post .entry-content,
.single-post .inside-article,
.single-post .site-main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.jc-article-hero {
  padding: 0 !important;
  margin: 0 !important;
  min-height: auto !important;
  background: #0d0d0d !important;
}

.jc-article-hero .jc-container {
  width: min(100% - 40px, 1260px) !important;
  max-width: 1260px !important;
  min-height: 360px !important;
  padding: 0 !important;
  margin-inline: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  position: relative !important;
  overflow: hidden !important;
}

.jc-hero-media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

.jc-hero-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 42% !important;
  opacity: 0.86 !important;
  filter: saturate(0.94) contrast(1.04) brightness(0.84) !important;
}

.jc-article-hero::before {
  background:
    linear-gradient(90deg,
      rgba(13,13,13,0.96) 0%,
      rgba(13,13,13,0.88) 30%,
      rgba(13,13,13,0.58) 54%,
      rgba(13,13,13,0.22) 78%,
      rgba(13,13,13,0.10) 100%),
    linear-gradient(180deg,
      rgba(13,13,13,0.08) 0%,
      rgba(13,13,13,0.06) 34%,
      rgba(13,13,13,0.70) 84%,
      rgba(13,13,13,0.98) 100%) !important;
}

.jc-article-hero::after {
  inset: auto -8% -110px 5% !important;
  height: 180px !important;
  opacity: 0.6 !important;
}

.jc-hero-content {
  width: min(54%, 600px) !important;
  max-width: 600px !important;
  padding: 54px 0 0 !important;
  margin: 0 !important;
}

.jc-article-meta-row {
  margin: 0 0 12px !important;
  gap: 0.45rem !important;
}

.jc-article-pill {
  min-height: 24px !important;
  padding: 0.22rem 0.58rem !important;
  font-size: 0.56rem !important;
}

.jc-article-hero .jc-kicker {
  margin-bottom: 7px !important;
  font-size: 0.6rem !important;
}

.jc-article-hero h1 {
  max-width: 560px !important;
  font-size: clamp(1.9rem, 3.75vw, 3.28rem) !important;
  line-height: 0.94 !important;
}

.jc-page-lead,
.jc-article-lead {
  max-width: 550px !important;
  margin-top: 10px !important;
  font-size: clamp(0.78rem, 0.86vw, 0.88rem) !important;
  line-height: 1.52 !important;
}

.jc-guides-hero-actions {
  margin-top: 14px !important;
}

.jc-article-hero .jc-btn {
  min-height: 30px !important;
  padding: 0.52rem 0.84rem !important;
  font-size: 0.55rem !important;
}

.jc-hero-proof-strip {
  margin: 18px 0 0 !important;
  border-radius: 12px !important;
}

.jc-hero-proof-item {
  min-height: 42px !important;
  padding: 8px 18px !important;
}

.jc-article-body {
  padding-top: 18px !important;
}

@media (max-width: 980px) {
  .jc-article-hero .jc-container {
    width: min(100% - 28px, 1260px) !important;
    min-height: 360px !important;
  }

  .jc-hero-content {
    width: min(100%, 620px) !important;
    max-width: 620px !important;
    padding-top: 42px !important;
  }
}

@media (max-width: 680px) {
  .jc-article-hero .jc-container {
    width: 100% !important;
    min-height: 420px !important;
    padding-inline: 18px !important;
  }

  .jc-hero-content {
    padding-top: 34px !important;
  }

  .jc-hero-media img {
    object-position: center center !important;
  }

  .jc-article-hero::before {
    background:
      linear-gradient(180deg,
        rgba(13,13,13,0.55) 0%,
        rgba(13,13,13,0.80) 38%,
        rgba(13,13,13,0.98) 100%) !important;
  }
}

/* =========================================================
   JewelryCalculator Article CSS v7 - hero flush final overrides
   Purpose: remove remaining top gap, keep hero image as integrated fade,
   prevent horizontal scroll, and make the article feel closer to the mockup.
   ========================================================= */

html,
body,
#page,
.site,
.site-content,
.content-area,
#primary,
.site-main,
.inside-article,
.entry-content,
.jc-article-page,
.jc-article-premium {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.jc-article-page.jc-article-premium {
  background: #0d0d0d !important;
}

.jc-article-premium .jc-article-hero {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  background: #0d0d0d !important;
  border-bottom: 1px solid rgba(196,112,74,0.20) !important;
  overflow: hidden !important;
}

.jc-article-premium .jc-article-hero .jc-container {
  width: min(100% - 40px, 1260px) !important;
  max-width: 1260px !important;
  min-height: 405px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border-inline: 1px solid rgba(255,255,255,0.025) !important;
}

.jc-article-premium .jc-article-hero::before,
.jc-article-premium .jc-article-hero::after {
  pointer-events: none !important;
}

.jc-article-premium .jc-article-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background:
    linear-gradient(90deg,
      rgba(13,13,13,0.96) 0%,
      rgba(13,13,13,0.89) 30%,
      rgba(13,13,13,0.56) 55%,
      rgba(13,13,13,0.22) 78%,
      rgba(13,13,13,0.12) 100%),
    linear-gradient(180deg,
      rgba(13,13,13,0.14) 0%,
      rgba(13,13,13,0.06) 26%,
      rgba(13,13,13,0.72) 86%,
      rgba(13,13,13,0.98) 100%) !important;
}

.jc-article-premium .jc-article-hero::after {
  content: "" !important;
  position: absolute !important;
  inset: auto -8% -125px 5% !important;
  height: 210px !important;
  z-index: 3 !important;
  opacity: 0.72 !important;
  background: radial-gradient(circle, rgba(196,112,74,0.22), transparent 62%) !important;
  filter: blur(18px) !important;
}

.jc-article-premium .jc-hero-media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #0d0d0d !important;
  overflow: hidden !important;
}

.jc-article-premium .jc-hero-media img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center 44% !important;
  opacity: 0.78 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: saturate(0.95) contrast(1.08) brightness(0.82) !important;
  transform: scale(1.03) !important;
}

.jc-article-premium .jc-hero-content {
  position: relative !important;
  z-index: 4 !important;
  width: min(53%, 590px) !important;
  max-width: 590px !important;
  margin: 0 !important;
  padding: 46px 0 0 0 !important;
}

.jc-article-premium .jc-article-meta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin: 0 0 14px !important;
}

.jc-article-premium .jc-article-pill {
  padding: 0.25rem 0.58rem !important;
  font-size: 0.52rem !important;
  line-height: 1 !important;
}

.jc-article-premium .jc-article-hero .jc-kicker {
  margin: 0 0 8px !important;
  font-size: 0.58rem !important;
}

.jc-article-premium .jc-article-hero h1 {
  max-width: 560px !important;
  margin: 0 !important;
  font-size: clamp(2rem, 3.85vw, 3.35rem) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.055em !important;
}

.jc-article-premium .jc-page-lead,
.jc-article-premium .jc-article-lead {
  max-width: 545px !important;
  margin: 12px 0 0 !important;
  font-size: clamp(0.79rem, 0.88vw, 0.9rem) !important;
  line-height: 1.52 !important;
}

.jc-article-premium .jc-guides-hero-actions {
  gap: 10px !important;
  margin: 15px 0 0 !important;
}

.jc-article-premium .jc-article-hero .jc-btn {
  min-height: 31px !important;
  padding: 0.55rem 0.9rem !important;
  font-size: 0.55rem !important;
}

.jc-article-premium .jc-hero-proof-strip {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 4 !important;
  margin: 0 !important;
  min-height: 48px !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  background: rgba(17,16,15,0.72) !important;
  backdrop-filter: blur(8px) !important;
}

.jc-article-premium .jc-hero-proof-item {
  min-height: 48px !important;
  padding: 9px 22px !important;
}

.jc-article-premium .jc-hero-proof-icon {
  width: 26px !important;
  height: 26px !important;
  font-size: 0.72rem !important;
}

.jc-article-premium .jc-hero-proof-item strong {
  font-size: 0.72rem !important;
}

.jc-article-premium .jc-hero-proof-item span:not(.jc-hero-proof-icon) {
  font-size: 0.66rem !important;
}

.jc-article-premium .jc-article-body {
  padding-top: 18px !important;
}

@media (max-width: 900px) {
  .jc-article-premium .jc-article-hero .jc-container {
    width: 100% !important;
    min-height: 430px !important;
    border-inline: 0 !important;
  }

  .jc-article-premium .jc-hero-content {
    width: min(100% - 32px, 620px) !important;
    padding: 38px 16px 0 !important;
  }

  .jc-article-premium .jc-article-hero h1 {
    font-size: clamp(2.15rem, 11vw, 3.35rem) !important;
  }

  .jc-article-premium .jc-hero-proof-strip {
    position: relative !important;
    margin-top: 22px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .jc-article-premium .jc-article-hero .jc-container {
    min-height: 0 !important;
  }

  .jc-article-premium .jc-hero-content {
    width: 100% !important;
    padding: 30px 16px 0 !important;
  }

  .jc-article-premium .jc-hero-proof-strip {
    position: relative !important;
  }
}