/* ============================================================
   Durga 108 Names — Page-specific styles
   Deep violet / magenta palette
   ============================================================ */

.dn-badge{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid #ddb0f0;border-radius:999px;padding:8px 16px;font-family:var(--font-jakarta);font-size:12.5px;font-weight:500;color:#5a007a;}

/* Tag & headings */
.dn-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-jakarta);font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#9b00c8;margin-bottom:14px;}
.dn-h2{font-family:var(--font-garamond);font-size:clamp(26px,3.5vw,38px);font-weight:700;color:var(--text-brown-heading);line-height:1.15;margin-bottom:16px;}

/* How-to grid */
.dn-how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.dn-how-card{background:#fff;border:1px solid #ddb0f0;border-radius:var(--radius-lg);padding:22px 18px;text-align:center;box-shadow:0 3px 14px rgba(140,0,180,0.06);transition:box-shadow 0.2s,transform 0.2s;}
.dn-how-card:hover{box-shadow:0 7px 24px rgba(140,0,180,0.13);transform:translateY(-3px);}
.dn-how-icon{width:48px;height:48px;background:#f8e0ff;border:1px solid #ddb0f0;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;}
.dn-how-title{font-family:var(--font-garamond);font-size:16px;font-weight:700;color:#5a007a;margin-bottom:8px;}
.dn-how-body{font-family:var(--font-jakarta);font-size:12.5px;color:var(--color-on-surface-variant);line-height:1.65;margin:0;}

/* Verse box */
.dn-verse-box{background:#f8e0ff;border-left:4px solid #9b00c8;border-radius:var(--radius-md);padding:26px 30px;}

/* Search bar */
.dn-search-bar{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid #ddb0f0;border-radius:999px;padding:10px 20px;margin-bottom:36px;box-shadow:0 3px 16px rgba(140,0,180,0.08);transition:border-color 0.2s,box-shadow 0.2s;}
.dn-search-bar:focus-within{border-color:#9b00c8;box-shadow:0 4px 20px rgba(140,0,180,0.15);}
.dn-search-input{flex:1;border:none;outline:none;font-family:var(--font-jakarta);font-size:14px;color:var(--text-body);background:transparent;}
.dn-search-input::placeholder{color:#bbb;}
.dn-count-badge{flex-shrink:0;background:#f8e0ff;color:#9b00c8;font-family:var(--font-jakarta);font-size:11px;font-weight:700;border-radius:999px;padding:4px 12px;letter-spacing:0.06em;}

/* Names grid */
.dn-names-grid{display:flex;flex-direction:column;gap:0;}

/* Group headers */
.dn-group-header{font-family:var(--font-devanagari);font-size:15px;font-weight:700;color:#9b00c8;background:linear-gradient(90deg,#f8e0ff,#f0d0ff,#f8e0ff);border-top:1px solid #ddb0f0;border-bottom:1px solid #ddb0f0;padding:12px 20px;margin:20px 0 0;letter-spacing:0.04em;}

/* Individual name cards */
.dn-name-card{display:grid;grid-template-columns:48px 160px 180px 1fr;align-items:center;gap:16px;padding:14px 20px;border-bottom:1px solid #f0e0ff;background:#fff;transition:background 0.15s;}
.dn-name-card:hover{background:#fdf5ff;}
.dn-name-card:nth-child(even){background:#fefaff;}
.dn-name-card:nth-child(even):hover{background:#fdf5ff;}
.dn-num{font-family:var(--font-jakarta);font-size:12px;font-weight:700;color:#9b00c8;opacity:0.6;}
.dn-sanskrit{font-family:var(--font-devanagari);font-size:18px;color:#5a007a;font-weight:600;line-height:1.3;}
.dn-roman{font-family:var(--font-garamond);font-size:14px;font-style:italic;color:#8040a0;line-height:1.4;}
.dn-meaning{font-family:var(--font-jakarta);font-size:13px;color:var(--color-on-surface-variant);line-height:1.5;}

/* Final name card — special */
.dn-name-final{background:linear-gradient(135deg,#fdf0ff,#f5e0ff)!important;border:1px solid #ddb0f0;border-radius:var(--radius-md);margin-top:8px;}
.dn-num-final{font-size:18px!important;opacity:1!important;color:#9b00c8!important;font-weight:700;}

/* Hidden during search */
.dn-name-card.dn-hidden{display:none;}
.dn-group-header.dn-hidden{display:none;}

/* Related grid */
.dn-related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.dn-related-card{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border:1px solid #ddb0f0;border-radius:var(--radius-lg);padding:22px 16px;text-decoration:none;transition:box-shadow 0.2s,transform 0.2s;}
.dn-related-card:hover{box-shadow:0 6px 20px rgba(140,0,180,0.13);transform:translateY(-3px);}

/* Responsive */
@media(max-width:900px){
  .dn-how-grid{grid-template-columns:repeat(2,1fr);}
  .dn-related-grid{grid-template-columns:repeat(2,1fr);}
  .dn-name-card{grid-template-columns:40px 130px 150px 1fr;gap:12px;padding:12px 16px;}
}
@media(max-width:680px){
  .dn-how-grid{grid-template-columns:1fr 1fr;}
  .dn-name-card{grid-template-columns:36px 1fr;grid-template-rows:auto auto auto;gap:4px 12px;padding:14px 16px;}
  .dn-roman{grid-column:2;font-size:13px;}
  .dn-meaning{grid-column:1/-1;font-size:12px;padding-top:4px;border-top:1px solid #f0e0ff;margin-top:4px;}
  .dn-sanskrit{font-size:16px;}
}
@media(max-width:480px){
  .dn-how-grid{grid-template-columns:1fr;}
  .dn-related-grid{grid-template-columns:1fr 1fr;}
}