/* =========================================================
   ARTICLE REDESIGN — CLAIRE Brand System — Editorial Magazine
   Linked after inline <style> block for cascade precedence.
   Applied to: all individual article pages (Medical Insights
   & Skinmentalism Diary).
   ========================================================= */

/* ── READING PROGRESS BAR ── */
.reading-progress {
  position: fixed; top: 0; left: 0; z-index: 9999;
  height: 2px; width: 0%;
  background: var(--mocha, #c9784f);
  transition: width 0.08s linear;
  pointer-events: none;
}

/* ── ARTICLE HERO — base ── */
.article-hero {
  margin-top: 72px;
  min-height: 62vh;
  background: var(--cream-2, #f8e9d2);
  display: grid;
  grid-template-columns: 1fr 400px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline, #f0dcc4);
  padding: 0 !important; /* override inline padding */
}

.article-hero::before { display: none; } /* remove old gradient overlay */

/* Text column */
.article-hero-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(52px,8vw,96px) clamp(32px,6vw,80px) clamp(48px,7vw,72px);
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, var(--cream, #fdf8f0) 0%, var(--cream-2, #f8e9d2) 100%);
}

/* Image column */
.article-hero-visual {
  position: relative;
  overflow: hidden;
  background: var(--sand, #f0d3b0);
}

.article-hero-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  opacity: 1 !important;
}

/* No-image variant: collapse visual column */
.article-hero.article-hero--no-image {
  grid-template-columns: 1fr;
  background: linear-gradient(135deg, var(--cream, #fdf8f0) 0%, var(--sand, #f0d3b0) 100%);
}

.article-hero.article-hero--no-image .article-hero-inner {
  background: transparent;
  max-width: 760px;
}

/* ── DIARY HERO — dark cinematic ── */
.article-hero.article-hero--diary {
  grid-template-columns: 1fr;
  background: var(--ink, #3d2820) !important;
  min-height: 72vh;
}

.article-hero.article-hero--diary .article-hero-inner {
  background: transparent;
  position: relative;
  z-index: 2;
}

.article-hero.article-hero--diary .article-hero-visual {
  display: none;
}

.article-hero.article-hero--diary .article-hero-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0.9 !important;
  object-position: center !important;
  z-index: 0;
}

/* Gradient overlay on diary hero */
.article-hero.article-hero--diary::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(61,40,32,0.85) 0%, rgba(61,40,32,0.4) 60%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* ── HERO TEXT ELEMENTS ── */
.article-breadcrumb {
  font-family: var(--f-sans, 'Be Vietnam Pro', sans-serif) !important;
  font-size: 10px !important;
  font-weight: 300 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--mocha, #c9784f) !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.article-breadcrumb a {
  color: var(--mocha, #c9784f) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

.article-breadcrumb a:hover { color: var(--espresso, #5a3826) !important; }

.article-breadcrumb span { opacity: 0.4; }

.article-tag {
  font-family: var(--f-sans, 'Be Vietnam Pro', sans-serif) !important;
  font-size: 10px !important;
  font-weight: 300 !important;
  letter-spacing: 3.5px !important;
  text-transform: uppercase !important;
  color: var(--ink-soft, #8a7363) !important;
  margin-bottom: 16px !important;
}

.article-title {
  font-family: var(--f-serif, 'Fraunces', serif) !important;
  font-size: clamp(30px, 4vw, 52px) !important;
  font-weight: 400 !important;
  color: var(--ink, #3d2820) !important;
  line-height: 1.15 !important;
  margin-bottom: 28px !important;
  max-width: 640px !important;
  letter-spacing: -0.01em !important;
}

/* Thin rule above title */
.article-title::before {
  content: '';
  display: block;
  width: 32px; height: 2px;
  background: var(--mocha, #c9784f);
  margin-bottom: 18px;
}

.article-meta-row {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  font-family: var(--f-sans, 'Be Vietnam Pro', sans-serif) !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  color: var(--ink-soft, #8a7363) !important;
  letter-spacing: 0.5px !important;
}

.article-meta-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--camel, #d9a87c);
  flex-shrink: 0;
}

/* Diary hero text overrides */
.article-hero--diary .article-breadcrumb { color: rgba(217,168,124,0.7) !important; }
.article-hero--diary .article-breadcrumb a { color: rgba(217,168,124,0.7) !important; }
.article-hero--diary .article-breadcrumb a:hover { color: var(--camel, #d9a87c) !important; }
.article-hero--diary .article-tag { color: rgba(253,248,240,0.45) !important; }
.article-hero--diary .article-title { color: var(--cream, #fdf8f0) !important; }
.article-hero--diary .article-title::before { background: var(--camel, #d9a87c); }
.article-hero--diary .article-meta-row { color: rgba(253,248,240,0.45) !important; }

/* ── ARTICLE LAYOUT ── */
.article-wrap {
  display: grid !important;
  grid-template-columns: 1fr 288px !important;
  gap: 60px !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: clamp(52px,7vw,88px) clamp(24px,6vw,80px) !important;
}

/* ── ARTICLE BODY ── */
.article-body { max-width: 700px; }

.article-body .lead {
  font-family: var(--f-serif, 'Fraunces', serif) !important;
  font-size: clamp(16px, 1.8vw, 21px) !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: var(--espresso, #5a3826) !important;
  line-height: 1.75 !important;
  margin-bottom: 40px !important;
  padding-bottom: 32px !important;
  border-bottom: 1px solid var(--hairline, #f0dcc4) !important;
}

.article-body h2 {
  font-family: var(--f-serif, 'Fraunces', serif) !important;
  font-size: clamp(19px, 2.2vw, 26px) !important;
  font-weight: 400 !important;
  color: var(--ink, #3d2820) !important;
  margin: 52px 0 16px !important;
  line-height: 1.25 !important;
}

.article-body h2::before {
  content: '';
  display: block;
  width: 24px; height: 1.5px;
  background: var(--mocha, #c9784f);
  margin-bottom: 12px;
}

.article-body h3 {
  font-family: var(--f-serif, 'Fraunces', serif) !important;
  font-size: clamp(15px, 1.7vw, 18px) !important;
  font-weight: 400 !important;
  color: var(--espresso, #5a3826) !important;
  margin: 28px 0 10px !important;
  line-height: 1.4 !important;
}

.article-body p {
  font-family: var(--f-sans, 'Be Vietnam Pro', sans-serif) !important;
  font-size: 15.5px !important;
  font-weight: 300 !important;
  line-height: 1.88 !important;
  color: var(--ink, #3d2820) !important;
  margin-bottom: 20px !important;
}

.article-body ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
}

.article-body ul li {
  font-family: var(--f-sans, 'Be Vietnam Pro', sans-serif) !important;
  font-size: 15.5px !important;
  font-weight: 300 !important;
  line-height: 1.8 !important;
  color: var(--ink, #3d2820) !important;
  padding: 8px 0 8px 26px !important;
  position: relative !important;
  border-bottom: 1px solid rgba(240,220,196,0.55) !important;
}

.article-body ul li:last-child { border-bottom: none !important; }

.article-body ul li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 10px !important;
  height: 1px !important;
  background: var(--camel, #d9a87c) !important;
}

.article-body strong {
  font-weight: 500 !important;
  color: var(--espresso, #5a3826) !important;
}

.article-body em {
  font-style: italic !important;
  color: var(--ink-soft, #8a7363) !important;
}

/* ── DIVIDER ── */
.divider {
  width: 48px !important;
  height: 1px !important;
  background: var(--camel, #d9a87c) !important;
  margin: 44px 0 !important;
}

/* ── PULL QUOTE ── */
.pullquote {
  margin: 44px 0 !important;
  padding: 32px 36px !important;
  background: var(--cream-2, #f8e9d2) !important;
  border: none !important;
  border-left: 3px solid var(--mocha, #c9784f) !important;
  position: relative !important;
}

.pullquote p {
  font-family: var(--f-serif, 'Fraunces', serif) !important;
  font-size: clamp(16px, 1.8vw, 20px) !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: var(--espresso, #5a3826) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* ── DIARY OPENER ── */
.diary-date {
  font-family: var(--f-sans, 'Be Vietnam Pro', sans-serif) !important;
  font-size: 10px !important;
  font-weight: 300 !important;
  letter-spacing: 3.5px !important;
  text-transform: uppercase !important;
  color: var(--mocha, #c9784f) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.diary-opener {
  font-family: var(--f-serif, 'Fraunces', serif) !important;
  font-size: clamp(16px, 1.9vw, 21px) !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: var(--espresso, #5a3826) !important;
  line-height: 1.65 !important;
  margin-bottom: 36px !important;
  padding: 24px 32px !important;
  background: var(--cream-2, #f8e9d2) !important;
  border-left: 3px solid var(--camel, #d9a87c) !important;
}

/* ── CTA BOX ── */
.cta-box {
  background: var(--cream-2, #f8e9d2) !important;
  border: 1px solid var(--hairline, #f0dcc4) !important;
  border-left: none !important;
  padding: 28px 32px !important;
  margin: 40px 0 !important;
  position: relative !important;
}

.cta-box::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 2px !important;
  background: var(--camel, #d9a87c) !important;
}

.cta-box-label {
  font-family: var(--f-sans, 'Be Vietnam Pro', sans-serif) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--mocha, #c9784f) !important;
  margin-bottom: 10px !important;
}

.cta-box-title {
  font-family: var(--f-serif, 'Fraunces', serif) !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  color: var(--ink, #3d2820) !important;
  margin-bottom: 10px !important;
  line-height: 1.3 !important;
}

.cta-box p {
  font-size: 13.5px !important;
  font-weight: 300 !important;
  color: var(--ink-soft, #8a7363) !important;
  margin-bottom: 20px !important;
  line-height: 1.75 !important;
}

.cta-btn {
  display: inline-block !important;
  font-family: var(--f-sans, 'Be Vietnam Pro', sans-serif) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--cream, #fdf8f0) !important;
  background: var(--ink, #3d2820) !important;
  text-decoration: none !important;
  padding: 11px 24px !important;
  border-radius: 0 !important;
  transition: background 0.25s !important;
}

.cta-btn:hover { background: var(--mocha, #c9784f) !important; }

.cta-btn-outline {
  display: inline-block !important;
  font-family: var(--f-sans, 'Be Vietnam Pro', sans-serif) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--espresso, #5a3826) !important;
  border: 1px solid var(--espresso, #5a3826) !important;
  text-decoration: none !important;
  padding: 11px 24px !important;
  margin-left: 12px !important;
  transition: all 0.25s !important;
}

.cta-btn-outline:hover {
  background: var(--espresso, #5a3826) !important;
  color: var(--cream, #fdf8f0) !important;
}

/* ── SIDEBAR ── */
.article-sidebar {
  position: sticky !important;
  top: 96px !important;
  align-self: start !important;
}

.sidebar-block {
  background: var(--cream-2, #f8e9d2) !important;
  border: 1px solid var(--hairline, #f0dcc4) !important;
  padding: 22px 24px !important;
  margin-bottom: 14px !important;
}

.sidebar-block-label {
  font-family: var(--f-sans, 'Be Vietnam Pro', sans-serif) !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--mocha, #c9784f) !important;
  margin-bottom: 16px !important;
}

.sidebar-block a {
  display: block !important;
  font-family: var(--f-sans, 'Be Vietnam Pro', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  color: var(--ink-soft, #8a7363) !important;
  text-decoration: none !important;
  line-height: 1.45 !important;
  margin-bottom: 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--hairline, #f0dcc4) !important;
  transition: color 0.2s !important;
  padding-left: 14px !important;
  position: relative !important;
}

.sidebar-block a::before {
  content: '→' !important;
  position: absolute !important;
  left: 0 !important;
  font-size: 9px !important;
  color: var(--camel, #d9a87c) !important;
  top: 1px !important;
}

.sidebar-block a:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

.sidebar-block a:hover { color: var(--mocha, #c9784f) !important; }

.sidebar-cta {
  background: var(--ink, #3d2820) !important;
  padding: 24px !important;
  margin-bottom: 14px !important;
}

.sidebar-cta .sidebar-block-label { color: var(--camel, #d9a87c) !important; }

.sidebar-cta p {
  font-family: var(--f-sans, 'Be Vietnam Pro', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  color: rgba(217,168,124,0.7) !important;
  line-height: 1.7 !important;
  margin-bottom: 18px !important;
}

.sidebar-cta .cta-btn {
  background: var(--camel, #d9a87c) !important;
  color: var(--espresso, #5a3826) !important;
  display: block !important;
  text-align: center !important;
}

.sidebar-cta .cta-btn:hover {
  background: var(--cream, #fdf8f0) !important;
  color: var(--espresso, #5a3826) !important;
}

/* ── "ĐỌC TIẾP" SECTION ── */
.article-next {
  border-top: 1px solid var(--hairline, #f0dcc4);
  padding: clamp(40px,5vw,64px) clamp(24px,6vw,80px);
  max-width: 1140px;
  margin: 0 auto;
}

.article-next-label {
  font-family: var(--f-sans, 'Be Vietnam Pro', sans-serif) !important;
  font-size: 9px !important;
  font-weight: 300 !important;
  letter-spacing: 3.5px !important;
  text-transform: uppercase !important;
  color: var(--mocha, #c9784f) !important;
  margin-bottom: 24px !important;
}

.article-next-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.article-next-card {
  background: var(--cream-2, #f8e9d2);
  padding: 28px 32px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: background 0.2s;
  border: 1px solid var(--hairline, #f0dcc4);
}

.article-next-card:hover { background: var(--sand, #f0d3b0); }

.article-next-card-cat {
  font-family: var(--f-sans, 'Be Vietnam Pro', sans-serif) !important;
  font-size: 9px !important;
  font-weight: 300 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--mocha, #c9784f) !important;
  margin-bottom: 10px !important;
  display: block !important;
}

.article-next-card-title {
  font-family: var(--f-serif, 'Fraunces', serif) !important;
  font-size: clamp(15px,1.6vw,18px) !important;
  font-weight: 400 !important;
  color: var(--ink, #3d2820) !important;
  line-height: 1.35 !important;
  transition: color 0.2s !important;
}

.article-next-card:hover .article-next-card-title { color: var(--mocha, #c9784f) !important; }

.article-next-card-arrow {
  font-family: var(--f-sans, 'Be Vietnam Pro', sans-serif) !important;
  font-size: 10px !important;
  font-weight: 300 !important;
  color: var(--camel, #d9a87c) !important;
  margin-top: 14px !important;
  display: block !important;
  letter-spacing: 1px !important;
}

/* ── TREATMENT CARD (diary specific) ── */
.treatment-card {
  border: 1px solid var(--hairline, #f0dcc4);
  padding: 24px 28px;
  margin-bottom: 2px;
  text-decoration: none;
  display: block;
  background: var(--cream-2, #f8e9d2);
  transition: background 0.2s;
}

.treatment-card:hover { background: var(--sand, #f0d3b0); }

/* ── RESPONSIVE ── */
@media (max-width: 860px) {
  .article-hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .article-hero-visual {
    height: 44vw;
    order: -1;
  }

  .article-hero-inner {
    max-width: 100% !important;
  }

  .article-wrap {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

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

  .article-next-grid {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

@media (max-width: 599px) {
  .article-hero-inner {
    padding: 36px 20px 40px !important;
  }

  .article-hero-visual { height: 52vw; }

  .article-wrap {
    padding: 40px 20px !important;
  }

  .article-next { padding: 40px 20px; }

  .pullquote { padding: 24px 20px !important; }

  .cta-btn-outline {
    margin-left: 0 !important;
    margin-top: 10px !important;
    display: block !important;
    text-align: center !important;
  }

  .cta-btn { display: block !important; text-align: center !important; }
}