.matrimonial-infographic { --mi-burg:       #800020;
--mi-burg-l:     rgba(128,0,32,.70);
--mi-gold:       #a8782e;
--mi-gold-l:     #c9a96e; --mi-bg:         transparent;
--mi-surface:    #faf8f6;
--mi-surface-2:  #f5f2ef;
--mi-dark:       #0a0305;
--mi-dark-s:     #120508; --mi-text:       #1a1014;
--mi-text-soft:  #4a3f44;
--mi-muted:      rgba(26,16,20,.50);
--mi-text-inv:   #ede4d8;
--mi-text-inv-m: rgba(237,228,216,.55); --mi-border:     rgba(128,0,32,.08);
--mi-border-g:   rgba(168,120,46,.18); --mi-radius:     12px;
--mi-radius-sm:  7px;
--mi-tr:         0.20s cubic-bezier(.4,0,.2,1);
--mi-font-d:     'Roboto Slab', Georgia, serif;
--mi-font-ui:    'Roboto Condensed', 'Roboto', sans-serif; --primary-color:       #800020;
--primary-color-alpha: rgba(128,0,32,.95);
--text-dark:           #1a1014;
--text-medium:         #4a3f44;
--text-light:          rgba(237,228,216,.70);
--bg-white:            #fff;
} .matrimonial-infographic .infographic-container {
position: relative;
width: 90%;
max-width: 1200px;
margin: 48px auto 64px;
padding: 0;
display: flex;
justify-content: space-between;
gap: 28px;
background: transparent;
border-radius: var(--mi-radius);
font-family: var(--mi-font-ui);
color: var(--mi-text);
} .matrimonial-infographic .button-column {
width: 40%;
display: flex;
flex-direction: column;
gap: 10px;
}
.matrimonial-infographic .info-button {
position: relative;
width: 100%;
padding: 16px 18px;
background: var(--mi-surface);
border-radius: var(--mi-radius-sm);
border: 1px solid var(--mi-border);
border-left: 3px solid transparent;
box-shadow: 0 2px 8px rgba(0,0,0,.04);
text-align: left;
cursor: pointer;
overflow: hidden;
transition: transform var(--mi-tr);
}
.matrimonial-infographic .info-button:hover {
border-left-color: var(--mi-gold);
box-shadow: 0 4px 16px rgba(128,0,32,.06);
background: var(--mi-surface-2);
transform: translateY(-1px);
}
.matrimonial-infographic .info-button.selected {
border-left-color: var(--mi-burg);
background: #fff;
box-shadow:
0 4px 16px rgba(128,0,32,.10),
0 0 0 1px rgba(168,120,46,.08);
transform: translateY(-1px);
}
.matrimonial-infographic .info-button h3 {
font-family: var(--mi-font-ui);
font-size: .92rem;
font-weight: 700;
color: var(--mi-text);
margin-bottom: 3px;
letter-spacing: .01em;
}
.matrimonial-infographic .info-button.selected h3 {
color: var(--mi-burg);
}
.matrimonial-infographic .info-button p {
font-family: var(--mi-font-ui);
font-size: .84rem;
color: var(--mi-text-soft);
margin: 0;
line-height: 1.5;
} .matrimonial-infographic .detail-panel {
width: 60%;
background: var(--mi-dark);
color: var(--mi-text-inv);
border-radius: var(--mi-radius);
border: 1px solid var(--mi-border-g);
padding: 32px 28px;
position: relative;
box-shadow:
0 0 0 1px rgba(168,120,46,.06),
0 32px 80px rgba(0,0,0,.50),
0 8px 32px rgba(128,0,32,.12);
overflow: hidden;
} .matrimonial-infographic .detail-panel::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
opacity: .035;
pointer-events: none;
z-index: 0;
border-radius: var(--mi-radius);
} .matrimonial-infographic .detail-panel::after {
content: '';
position: absolute;
top: -100px;
left: -100px;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(128,0,32,.18) 0%, transparent 65%);
pointer-events: none;
z-index: 0;
border-radius: 50%;
} .matrimonial-infographic .detail-content {
display: none;
font-family: var(--mi-font-ui);
font-size: .95rem;
line-height: 1.7;
position: relative;
z-index: 1;
}
.matrimonial-infographic .detail-content.active {
display: block;
animation: miFadeIn .35s ease-out;
} .matrimonial-infographic .detail-content h2 {
font-family: var(--mi-font-d);
font-size: clamp(1.15rem, 2.5vw, 1.50rem);
font-weight: 300;
color: var(--mi-text-inv);
margin-bottom: 10px;
padding-bottom: 12px;
letter-spacing: .04em;
text-transform: uppercase;
border-bottom: none; background-image: linear-gradient(to right, transparent, var(--mi-gold), transparent);
background-size: 100% 1px;
background-position: bottom;
background-repeat: no-repeat;
} .matrimonial-infographic .detail-content h4,
.matrimonial-infographic .detail-content .mi-detail-subheading {
font-family: var(--mi-font-ui);
font-size: .75rem;
font-weight: 700;
letter-spacing: .10em;
text-transform: uppercase;
color: var(--mi-gold-l);
margin-top: 18px;
margin-bottom: 6px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(168,120,46,.18);
}
.matrimonial-infographic .detail-content p {
color: var(--mi-text-inv-m);
margin-bottom: 8px;
font-size: .93rem;
line-height: 1.65;
}
.matrimonial-infographic .detail-content section {
margin-bottom: 16px;
} @keyframes miFadeIn {
from { opacity: 0; transform: translateY(6px); }
to   { opacity: 1; transform: translateY(0); }
} @media (max-width: 768px) {
.matrimonial-infographic .infographic-container {
width: 100%;
margin: 0 0 40px;
padding: 18px;
flex-direction: column;
gap: 14px;
background: transparent;
}
.matrimonial-infographic .button-column,
.matrimonial-infographic .detail-panel {
width: 100%;
}
.matrimonial-infographic .button-column {
gap: 8px;
} .matrimonial-infographic .info-button {
padding: 13px 15px;
background: rgba(255,255,255,.18);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border: 1px solid rgba(255,255,255,.40);
border-left: 3px solid transparent;
box-shadow:
0 4px 16px rgba(0,0,0,.06),
inset 0 1px 0 rgba(255,255,255,.50);
}
.matrimonial-infographic .info-button h3 {
font-size: .88rem;
color: var(--mi-text);
}
.matrimonial-infographic .info-button p {
font-size: .82rem;
color: var(--mi-text-soft);
}
.matrimonial-infographic .info-button:hover {
background: rgba(255,255,255,.25);
border-left-color: var(--mi-gold);
transform: none;
} .matrimonial-infographic .info-button.selected {
background: rgba(128,0,32,.12);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border: 1px solid rgba(128,0,32,.25);
border-left: 3px solid var(--mi-burg);
box-shadow:
0 6px 24px rgba(128,0,32,.10),
inset 0 1px 0 rgba(255,255,255,.35);
transform: none;
}
.matrimonial-infographic .info-button.selected h3 {
color: var(--mi-burg);
}
.matrimonial-infographic .info-button.selected p {
color: var(--mi-text-soft);
} .matrimonial-infographic .detail-panel {
display: none;
padding: 22px 18px;
border-radius: var(--mi-radius-sm);
background: rgba(255,255,255,.15);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border: 1px solid rgba(255,255,255,.40);
box-shadow:
0 8px 32px rgba(0,0,0,.08),
inset 0 1px 0 rgba(255,255,255,.50);
}
.matrimonial-infographic .detail-panel.visible-mobile {
display: block;
} .matrimonial-infographic .detail-panel::before { display: none; }
.matrimonial-infographic .detail-panel::after  { display: none; } .matrimonial-infographic .detail-content h2 {
font-size: 1.20rem;
margin-bottom: 8px;
color: var(--mi-text);
background-image: linear-gradient(to right, transparent, var(--mi-gold), transparent);
background-size: 100% 1px;
background-position: bottom;
background-repeat: no-repeat;
}
.matrimonial-infographic .detail-content h4,
.matrimonial-infographic .detail-content .mi-detail-subheading {
font-size: .72rem;
margin-top: 14px;
color: var(--mi-gold);
}
.matrimonial-infographic .detail-content p {
font-size: .90rem;
margin-bottom: 6px;
color: var(--mi-text-soft);
}
.matrimonial-infographic .detail-content section {
margin-bottom: 12px;
}
} @media (prefers-reduced-motion: reduce) {
.matrimonial-infographic .info-button,
.matrimonial-infographic .detail-content { transition: none; }
.matrimonial-infographic .detail-content.active { animation: none; }
}