/* Skin Quality & Aging (Pillar) — additive CSS only
   - Designed to be loaded AFTER ../../../styles.css and ../../rtl.css
   - DOES NOT change global .cta styles globally
*/

/* HERO */
.pillar-hero{
  background: var(--bg-main);
  padding: clamp(32px, 4vw, 56px) 0 clamp(26px, 3.6vw, 44px);
}

.pillar-hero-inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 clamp(18px, 3vw, 28px);
}

.pill-breadcrumb{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 14px;
  color: rgba(20,20,20,0.72);
  font-size: 13px;
  line-height: 1.5;
}

.pill-breadcrumb a{
  text-decoration: none;
}

.pill-breadcrumb a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pillar-kicker{
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: rgba(20,20,20,0.68);
  font-weight: 600;
}

.pillar-hero h1{
  margin: 0 0 12px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(34px, 6.2vw, 54px);
  letter-spacing: 0.2px;
  line-height: 1.05;
}

.pillar-subhead{
  margin: 0 0 18px;
  color: var(--muted);
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.75;
  max-width: 80ch;
}

.pillar-hero-row{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(14px, 2.6vw, 22px);
  align-items: start;
  margin-top: 10px;
}

.pillar-card,
.pillar-actions{
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  padding: 18px 18px 16px;
}

.pillar-card-title{
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 14px;
  color: rgba(20,20,20,0.9);
}

.pillar-bullets{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.pillar-bullets li{
  position: relative;
  padding-right: 22px;
  color: rgba(20,20,20,0.78);
  font-weight: 500;
  line-height: 1.6;
}

.pillar-bullets li::before{
  content: "";
  position: absolute;
  right: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(156,107,78,0.85);
}

.pillar-actions{
  display: grid;
  gap: 10px;
}

/* CTA containment — scoped ONLY to pillar containers (prevents global hero .cta transforms from leaking) */
.pillar-actions,
.pill-bridge-actions,
.pill-bottom-actions{
  overflow: hidden;
}

.pillar-actions .cta,
.pill-bridge-actions .cta,
.pill-bottom-actions .cta{
  position: static !important;
  transform: none !important;
  display: inline-flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
  justify-content: center;
  margin: 0 !important;
}

/* If global CTA uses decorative pseudo elements, disable them here only */
.pillar-actions .cta::before,
.pillar-actions .cta::after,
.pill-bridge-actions .cta::before,
.pill-bridge-actions .cta::after,
.pill-bottom-actions .cta::before,
.pill-bottom-actions .cta::after{
  display: none !important;
}

/* Ghost CTA for knowledge pages (kept compatible with your current style) */
.cta-ghost{
  background: rgba(255,255,255,0.40);
  color: rgba(20,20,20,0.92);
  border: 1px solid rgba(20,20,20,0.12);
  box-shadow: none;
}
.cta-ghost::before,
.cta-ghost::after{
  display:none;
}

.pillar-mini{
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(20,20,20,0.08);
}

.pillar-mini-title{
  margin: 0 0 6px;
  font-weight: 800;
  font-size: 13px;
  color: rgba(20,20,20,0.88);
}

.pillar-mini-text{
  margin: 0;
  color: rgba(62,62,62,0.82);
  font-size: 13px;
  line-height: 1.5;
}

/* MAIN LAYOUT */
.pillar{
  background: var(--bg-section);
  padding: clamp(54px, 6vw, 92px) 0;
  position: relative;
}

.pillar::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height: 10px;
  background: linear-gradient(90deg, transparent, rgba(156,107,78,0.25), transparent);
}

.pillar-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(18px, 3vw, 28px);
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: clamp(16px, 2.8vw, 28px);
  align-items: start;
}

.pillar-toc{
  position: sticky;
  top: 92px;
  align-self: start;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  padding: 16px 16px 14px;
}

.toc-title{
  margin: 0 0 10px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.2px;
  color: rgba(20,20,20,0.88);
}

.toc-list{
  margin: 0;
  padding: 0 18px 0 0;
  display: grid;
  gap: 10px;
}

.toc-list a{
  text-decoration: none;
  color: rgba(20,20,20,0.82);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.55;
}

.toc-list a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
  color: rgba(20,20,20,1);
}

.pillar-article{
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  padding: clamp(18px, 2.6vw, 28px);
}

.pill-section{
  scroll-margin-top: 100px;
  padding: 10px 0 18px;
  border-bottom: 1px solid rgba(20,20,20,0.08);
}

.pill-section:last-child{
  border-bottom: none;
  padding-bottom: 6px;
}

.pillar-article h2{
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(24px, 2.8vw, 34px);
  letter-spacing: 0.2px;
}

.pillar-article h3{
  margin: 14px 0 8px;
  font-weight: 800;
  font-size: 16px;
  color: rgba(20,20,20,0.92);
}

.pillar-article p{
  margin: 0 0 12px;
  color: rgba(20,20,20,0.82);
  line-height: 1.8;
  font-size: 16px;
}

.pill-list{
  margin: 0 0 12px;
  padding: 0 18px 0 0;
  display: grid;
  gap: 10px;
  color: rgba(20,20,20,0.82);
  line-height: 1.7;
}

.pill-note{
  margin: 6px 0 0;
  color: rgba(62,62,62,0.82);
  font-size: 14px;
  line-height: 1.6;
}

/* Callouts */
.pill-callout{
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(20,20,20,0.10);
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
  margin: 0 0 14px;
}

.pill-callout-title{
  margin: 0 0 6px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.2px;
  color: rgba(20,20,20,0.88);
}

.pill-callout-text{
  margin: 0;
  color: rgba(20,20,20,0.82);
  font-size: 15px;
  line-height: 1.75;
}

/* Split boxes */
.pill-split{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 10px 0 14px;
}

.pill-box{
  background: rgba(247,242,234,0.55);
  border: 1px solid rgba(20,20,20,0.10);
  border-radius: 16px;
  padding: 14px 14px 12px;
}

.pill-box h3{
  margin: 0 0 6px;
}

/* Tables */
.pill-table-wrap{
  border-radius: 16px;
  border: 1px solid rgba(20,20,20,0.10);
  overflow: auto;
  background: rgba(255,255,255,0.70);
  box-shadow: 0 12px 28px rgba(0,0,0,0.06);
  margin: 10px 0 14px;
}

.pill-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.pill-table th,
.pill-table td{
  text-align: right;
  vertical-align: top;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(20,20,20,0.08);
  color: rgba(20,20,20,0.82);
  line-height: 1.6;
  font-size: 14px;
}

.pill-table thead th{
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.2px;
  background: rgba(247,242,234,0.55);
}

.pill-table tbody tr:last-child td{
  border-bottom: none;
}

/* Inline links blocks */
.pill-inline-links{
  margin-top: 10px;
  background: rgba(247,242,234,0.38);
  border: 1px solid rgba(20,20,20,0.10);
  border-radius: 16px;
  padding: 12px 14px 10px;
}

.pill-inline-title{
  margin: 0 0 8px;
  font-weight: 900;
  font-size: 13px;
  color: rgba(20,20,20,0.88);
}

.pill-inline-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.pill-inline-list a{
  font-weight: 700;
  text-decoration: none;
}

.pill-inline-list a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Related */
.pill-related-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 10px;
}

.pill-related{
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(20,20,20,0.10);
  border-radius: 16px;
  padding: 14px 14px 12px;
}

.pill-links{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.pill-links a{
  font-weight: 700;
  text-decoration: none;
}

.pill-links a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Bridge card */
.pill-bridge-card{
  margin-top: 12px;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(20,20,20,0.10);
  border-radius: 18px;
  padding: 14px 14px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 12px;
  align-items: center;
  box-shadow: 0 14px 34px rgba(0,0,0,0.06);
}

.pill-bridge-title{
  margin: 0 0 6px;
  font-weight: 900;
  font-size: 14px;
  color: rgba(20,20,20,0.90);
}

.pill-bridge-text{
  margin: 0;
  color: rgba(20,20,20,0.78);
  line-height: 1.7;
  font-size: 14px;
}

.pill-bridge-actions{
  display: grid;
  gap: 10px;
}

/* FAQ */
.pill-faq{
  border: 1px solid rgba(20,20,20,0.10);
  border-radius: 16px;
  padding: 10px 12px;
  margin: 0 0 10px;
  background: rgba(255,255,255,0.70);
}

.pill-faq summary{
  cursor: pointer;
  font-weight: 900;
  color: rgba(20,20,20,0.88);
  line-height: 1.6;
}

.pill-faq-body{
  padding-top: 10px;
}

.pill-faq-body p{
  margin: 0;
  font-size: 15px;
}

/* Bottom actions */
.pill-bottom-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

/* Responsive */
@media (max-width: 980px){
  .pillar-hero-row{ grid-template-columns: 1fr; }
  .pillar-inner{ grid-template-columns: 1fr; }
  .pillar-toc{ position: static; top: auto; }
  .pill-related-grid{ grid-template-columns: 1fr; }
  .pill-bridge-card{ grid-template-columns: 1fr; }
  .pill-bottom-actions{ grid-template-columns: 1fr; }
  .pill-table{ min-width: 640px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
}

/* Mobile overflow prevention */
@media (max-width: 820px){
  html{ overflow-x: hidden; }
  .cta{ min-width: 0 !important; max-width: 100% !important; }
  .pillar-hero-inner,
  .pillar-inner,
  .pillar-toc,
  .pillar-article,
  .pillar-aside,
  .pill-bridge-card,
  .pill-bottom-actions,
  .pillar-card,
  .pillar-actions,
  .pillar-section,
  .pill-table-wrap,
  .pill-related-grid,
  .pillar-cta-actions{
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  .pillar-inner{
    grid-template-columns: 1fr !important;
    padding: 0 16px !important;
  }
  .pillar-hero-row{ grid-template-columns: 1fr !important; }
  .pill-bridge-card{ grid-template-columns: 1fr !important; }
  .pill-table{ min-width: 0 !important; }
  .pillar-cta-actions .cta{
    position: static !important;
    transform: none !important;
    display: inline-flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    justify-content: center;
    margin: 0 !important;
  }
  .pillar-cta-actions .cta::before,
  .pillar-cta-actions .cta::after{ display: none !important; }
}