/* Shadi Clinic — pigmentation & melasma content cluster */
.pigmentation-article-shell {
    --pigment-primary: #0e897e;
    --pigment-primary-dark: #08665e;
    --pigment-gold: #d5a04c;
    --pigment-ink: #18302d;
    --pigment-muted: #5d716e;
    --pigment-line: #dce8e5;
    --pigment-soft: #f1f8f7;
    --pigment-warm: #fff8ec;
    color: var(--pigment-ink);
}

.pigmentation-article-shell .pigmentation-article {
    font-size: 1rem;
    line-height: 2.05;
    overflow-wrap: anywhere;
}

.pigmentation-article-shell .pigmentation-article > *:first-child { margin-top: 0; }
.pigmentation-article-shell .pigmentation-article p { margin: 0 0 1.1rem; }
.pigmentation-article-shell .pigmentation-article h2 {
    margin: 3rem 0 1.15rem;
    padding: .9rem 1rem;
    border-right: 4px solid var(--pigment-primary);
    border-radius: 12px;
    background: linear-gradient(90deg, transparent, var(--pigment-soft));
    color: var(--pigment-ink);
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    line-height: 1.6;
}
.pigmentation-article-shell .pigmentation-article h3 {
    margin: 2rem 0 .75rem;
    color: var(--pigment-primary-dark);
    font-size: 1.18rem;
    line-height: 1.7;
}
.pigmentation-article-shell .pigmentation-article h4 {
    margin: 1.5rem 0 .55rem;
    color: var(--pigment-ink);
    font-size: 1.04rem;
}
.pigmentation-article-shell .pigmentation-article ul,
.pigmentation-article-shell .pigmentation-article ol {
    margin: 0 0 1.4rem;
    padding-right: 1.4rem;
    padding-left: 0;
}
.pigmentation-article-shell .pigmentation-article li { margin-bottom: .55rem; }
.pigmentation-article-shell .pigmentation-article a {
    color: var(--pigment-primary-dark);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.pigmentation-article-shell .pigmentation-article a:hover { color: var(--pigment-primary); }
.pigmentation-article-shell .pigmentation-article hr {
    height: 1px;
    margin: 2.4rem 0;
    border: 0;
    background: var(--pigment-line);
}

.pigmentation-article-shell .intro {
    margin: 0 0 1.8rem;
    padding: 1.2rem 1.3rem;
    border: 1px solid var(--pigment-line);
    border-right: 5px solid var(--pigment-gold);
    border-radius: 16px;
    background: linear-gradient(135deg, #fff, var(--pigment-warm));
    box-shadow: 0 10px 28px rgba(14, 137, 126, .05);
}
.pigmentation-article-shell .intro p:last-child { margin-bottom: 0; }

.pigmentation-article-shell .grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.35rem 0 1.8rem;
}
.pigmentation-article-shell .card {
    padding: 1.05rem 1.1rem;
    border: 1px solid var(--pigment-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(14, 137, 126, .05);
}
.pigmentation-article-shell .card > *:last-child { margin-bottom: 0; }

.pigmentation-article-shell table {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 600px;
    margin: 1.4rem 0 1.9rem;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    overflow-x: auto;
    border: 1px solid var(--pigment-line);
    border-radius: 14px;
    background: #fff;
    font-size: .92rem;
    line-height: 1.75;
}
.pigmentation-article-shell table { -webkit-overflow-scrolling: touch; }
.pigmentation-article-shell th,
.pigmentation-article-shell td {
    padding: .75rem .85rem;
    border-bottom: 1px solid var(--pigment-line);
    text-align: right;
    vertical-align: top;
}
.pigmentation-article-shell th { background: var(--pigment-primary-dark); color: #fff; font-weight: 800; }
.pigmentation-article-shell tbody tr:nth-child(even) { background: #f8fbfa; }
.pigmentation-article-shell tr:last-child td { border-bottom: 0; }

.pigmentation-article-shell .cta,
.pigmentation-article-shell .pigment-contact-card {
    margin: 2.2rem 0;
    padding: 1.25rem 1.35rem;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--pigment-primary-dark), var(--pigment-primary));
    color: #fff;
    box-shadow: 0 14px 35px rgba(14, 137, 126, .16);
}
.pigmentation-article-shell .cta h2,
.pigmentation-article-shell .cta h3 { margin-top: 0; padding: 0; border: 0; background: none; color: #fff; }
.pigmentation-article-shell .cta p,
.pigmentation-article-shell .cta li,
.pigmentation-article-shell .pigment-contact-card p { color: #f3fffd; }
.pigmentation-article-shell .pigment-contact-card p:last-child,
.pigmentation-article-shell .cta > *:last-child { margin-bottom: 0; }
.pigmentation-article-shell .pigment-cta-button,
.pigmentation-article-shell .cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: .35rem;
    padding: .65rem 1rem;
    border-radius: 10px;
    background: #fff;
    color: var(--pigment-primary-dark);
    font-weight: 800;
    text-decoration: none;
}
.pigmentation-article-shell .pigment-cta-button:hover,
.pigmentation-article-shell .cta a:hover { background: var(--pigment-warm); color: var(--pigment-primary-dark); }

.pigmentation-article-shell .related,
.pigmentation-article-shell .content-box {
    margin: 1.7rem 0;
    padding: 1rem 1.15rem;
    border: 1px dashed var(--pigment-primary);
    border-radius: 14px;
    background: var(--pigment-soft);
}
.pigmentation-article-shell .content-box--warning {
    border-color: var(--pigment-gold);
    background: var(--pigment-warm);
}
.pigmentation-article-shell .dis {
    margin-top: 2rem;
    padding: 1rem 1.1rem;
    border-right: 4px solid var(--pigment-gold);
    border-radius: 10px;
    background: var(--pigment-warm);
    color: var(--pigment-muted);
    font-size: .9rem;
}
.pigmentation-article-shell .pigment-map-link a { font-weight: 800; }

.pigmentation-cluster-nav {
    border-color: rgba(14, 137, 126, .22);
    background: linear-gradient(135deg, rgba(14, 137, 126, .06), rgba(213, 160, 76, .08));
}
.pigmentation-cluster-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}
.pigmentation-cluster-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1rem;
    border: 1px solid var(--pigment-line);
    border-radius: 12px;
    background: #fff;
    color: var(--pigment-ink);
    font-weight: 800;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pigmentation-cluster-links a:hover {
    transform: translateY(-2px);
    border-color: var(--pigment-primary);
    box-shadow: 0 8px 20px rgba(14, 137, 126, .08);
}

html[data-theme="dark"] .pigmentation-article-shell {
    --pigment-ink: #eef7f5;
    --pigment-muted: #b5c9c5;
    --pigment-line: rgba(255, 255, 255, .13);
    --pigment-soft: rgba(14, 137, 126, .12);
    --pigment-warm: rgba(213, 160, 76, .11);
}
html[data-theme="dark"] .pigmentation-article-shell .intro,
html[data-theme="dark"] .pigmentation-article-shell .card,
html[data-theme="dark"] .pigmentation-article-shell table,
html[data-theme="dark"] .pigmentation-cluster-links a { background: #12201e; color: #eef7f5; }
html[data-theme="dark"] .pigmentation-article-shell tbody tr:nth-child(even) { background: #172926; }

@media (max-width: 720px) {
    .pigmentation-article-shell .grid,
    .pigmentation-cluster-links { grid-template-columns: 1fr; }
    .pigmentation-article-shell .pigmentation-article { font-size: .96rem; line-height: 2; }
    .pigmentation-article-shell .pigmentation-article h2 { margin-top: 2.5rem; font-size: 1.3rem; }
    .pigmentation-article-shell table { min-width: 520px; font-size: .86rem; }
    .pigmentation-article-shell th,
    .pigmentation-article-shell td { padding: .65rem .7rem; }
}

@media print {
    .pigmentation-article-shell .cta,
    .pigmentation-cluster-nav { display: none; }
    .pigmentation-article-shell .card,
    .pigmentation-article-shell table { break-inside: avoid; }
}