/* ============================================================
   Biodata templates — each design is an A4 page (794 x 1123 px)
   Structure (made by biodata.js):
   .bd.tpl-x > .bd-wm (watermark) + .bd-frame > .bd-inner >
        .bd-head (.bd-deity .bd-title) / .bd-side (.bd-photo .bd-name .bd-tag) / .bd-secs
   Font sizes use --fs so long biodatas shrink to fit one page.
   ============================================================ */
.bd {
  --fs: 1;
  width: 794px; height: 1123px; position: relative; overflow: hidden;
  font-family: "Hind", "Mukta", sans-serif; color: #2b2b2b; background: #fff;
}
.bd * { box-sizing: border-box; }
.bd-frame { position: absolute; inset: 0; }
.bd-inner {
  position: absolute; inset: 0; overflow: hidden;
  display: grid; grid-template-columns: 1fr 200px; grid-template-rows: auto 1fr;
  grid-template-areas: "head head" "secs side"; column-gap: 26px; align-content: start;
}
.bd.no-photo .bd-inner { grid-template-columns: 1fr; grid-template-areas: "head" "secs"; }
.bd.no-photo .bd-side { display: none; }
.bd-head { grid-area: head; text-align: center; }
.bd-deity { font-size: calc(var(--fs) * 19px); }
.bd-deity:empty { display: none; }
.bd-title { line-height: 1.1; }
.bd-side { grid-area: side; align-self: start; display: grid; justify-items: center; gap: 8px; text-align: center; }
.bd-photo { width: 190px; height: 238px; overflow: hidden; background: #eee; }
.bd-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-fill { width: 100%; height: 100%; background-size: cover; background-position: center 25%; border-radius: inherit; }
/* fixed line heights keep text in the same place in the PDF as on screen */
:where(.bd) :where(h3, .bd-deity, .bd-name, .bd-tag, .bd-initials) { line-height: 1.3; }
.bd-initials { width: 100%; height: 100%; display: grid; place-items: center; font-size: 64px; }
.bd-name, .bd-tag { display: none; }
.bd-secs { grid-area: secs; display: grid; gap: calc(var(--fs) * 18px); align-content: start; min-width: 0; }
.bd-sec h3 { margin: 0 0 calc(var(--fs) * 8px); font-weight: 400; }
.bd-row { display: grid; grid-template-columns: 38% 1fr; gap: 10px; padding: calc(var(--fs) * 4px) 0; font-size: calc(var(--fs) * 16.5px); line-height: 1.4; }
.bd-row .k { font-weight: 600; }
.bd-row .v { min-width: 0; overflow-wrap: anywhere; white-space: pre-line; }
.bd-row .v::before { content: ":  "; font-weight: 600; }
.bd-about p { margin: 0; font-size: calc(var(--fs) * 16px); line-height: 1.5; white-space: pre-line; }
.bd-ornament { position: absolute; inset: 0; pointer-events: none; }

/* Hindi / Marathi: no letter-spacing, it breaks joined letters */
.bd:not(.lang-en) .bd-title, .bd:not(.lang-en) .bd-sec h3 { letter-spacing: 0 !important; }

/* watermark */
.bd-wm { position: absolute; inset: -120px; z-index: 5; pointer-events: none; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 170px; align-items: center; justify-items: center; transform: rotate(-28deg); }
.bd-wm span { font: 700 30px "Hind", sans-serif; letter-spacing: .08em; color: rgba(0, 0, 0, .13); white-space: nowrap; }

/* ---------- 1. Kesari (traditional maroon & gold) ---------- */
.tpl-kesari { background: #fffaf0; color: #3a2616; }
.tpl-kesari .bd-frame { border: 12px solid #8b1e1e; }
.tpl-kesari .bd-frame::after { content: ""; position: absolute; inset: 8px; border: 2px solid #c8962e; pointer-events: none; }
.tpl-kesari .bd-ornament { inset: 14px; }
.tpl-kesari .bd-inner { inset: 22px; padding: 46px 52px 40px; }
.tpl-kesari .bd-deity { color: #8b1e1e; font-family: "Yatra One", "Tiro Devanagari Hindi", serif; }
.tpl-kesari .bd-title { font-family: "Yatra One", "Tiro Devanagari Hindi", serif; color: #8b1e1e; font-size: calc(var(--fs) * 46px); margin: 6px 0 calc(var(--fs) * 26px); letter-spacing: .04em; }
.tpl-kesari .bd-title::after { content: ""; display: block; width: 180px; height: 10px; margin: 8px auto 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10'%3E%3Ccircle cx='9' cy='5' r='3' fill='%23c8962e'/%3E%3C/svg%3E") center / 18px 10px repeat-x; }
.tpl-kesari .bd-photo { border: 3px solid #c8962e; padding: 4px; background: #fff; box-shadow: 0 6px 14px rgba(139, 30, 30, .18); }
.tpl-kesari .bd-sec h3 { display: inline-block; background: #8b1e1e; color: #fff6e0; font-family: "Yatra One", "Tiro Devanagari Hindi", serif; font-size: calc(var(--fs) * 19px); padding: 4px 20px 5px; line-height: 1.35; border-radius: 0 20px 20px 0; }
.tpl-kesari .bd-row .k { color: #8b1e1e; }
.tpl-kesari .bd-row { border-bottom: 1px dashed #e4cfa8; }

/* ---------- 2. Modern (sidebar) ---------- */
.tpl-modern { background: #ffffff; color: #1d2a33; }
.tpl-modern .bd-inner { grid-template-columns: 262px 1fr; grid-template-rows: auto 1fr; grid-template-areas: "side head" "side secs"; column-gap: 0; }
.tpl-modern.no-photo .bd-inner { grid-template-columns: 262px 1fr; grid-template-areas: "side head" "side secs"; }
.tpl-modern.no-photo .bd-side { display: grid; }
.tpl-modern .bd-frame { background: linear-gradient(90deg, #0f4c5c 262px, transparent 262px); }
.tpl-modern .bd-side { color: #e9f4f2; align-content: start; padding: 64px 26px; gap: 12px; }
.tpl-modern .bd-photo { width: 180px; height: 180px; border-radius: 50%; border: 5px solid #e9b44c; background: #165f72; }
.tpl-modern .bd-initials { color: #e9b44c; font-family: "Josefin Sans", "Hind", sans-serif; }
.tpl-modern .bd-name { display: block; font: 600 calc(var(--fs) * 30px)/1.15 "Josefin Sans", "Hind", sans-serif; margin-top: 14px; }
.tpl-modern .bd-tag { display: block; font-size: 16px; color: #e9b44c; letter-spacing: .04em; }
.tpl-modern .bd-head { text-align: left; padding: 54px 46px 0; }
.tpl-modern .bd-deity { color: #0f4c5c; }
.tpl-modern .bd-title { font: 600 calc(var(--fs) * 40px) "Josefin Sans", "Hind", sans-serif; letter-spacing: .18em; color: #0f4c5c; margin: 4px 0 calc(var(--fs) * 24px); }
.tpl-modern .bd-secs { padding: 0 46px 40px; }
.tpl-modern .bd-sec h3 { font: 700 calc(var(--fs) * 15px) "Josefin Sans", "Hind", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #0f4c5c; border-bottom: 3px solid #e9b44c; padding-bottom: 6px; }
.tpl-modern .bd-row .k { color: #4b5d68; font-weight: 500; }
.tpl-modern .bd-row .v { font-weight: 600; }

/* ---------- 3. Royal (navy & gold) ---------- */
.tpl-royal { background: radial-gradient(ellipse at 50% 20%, #1b2c5c 0%, #0c1633 70%); color: #f3e9d2; }
.tpl-royal .bd-frame { inset: 18px; border: 2px solid #d8b25a; }
.tpl-royal .bd-frame::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(216, 178, 90, .6); }
.tpl-royal .bd-ornament { inset: 18px; }
.tpl-royal .bd-inner { inset: 30px; padding: 40px 44px; grid-template-columns: 220px 1fr; grid-template-areas: "head head" "side secs"; column-gap: 36px; }
.tpl-royal.no-photo .bd-inner { grid-template-columns: 220px 1fr; grid-template-areas: "head head" "side secs"; }
.tpl-royal.no-photo .bd-side { display: grid; }
.tpl-royal .bd-deity { color: #d8b25a; font-family: "Cormorant Garamond", "Tiro Devanagari Hindi", serif; font-size: calc(var(--fs) * 21px); }
.tpl-royal .bd-title { font: 600 calc(var(--fs) * 48px) "Cormorant Garamond", "Tiro Devanagari Hindi", serif; color: #d8b25a; letter-spacing: .22em; margin: 2px 0 calc(var(--fs) * 28px); }
.tpl-royal .bd-photo { width: 200px; height: 250px; border-radius: 100px 100px 6px 6px; border: 3px solid #d8b25a; background: #1b2c5c; }
.tpl-royal .bd-initials { color: #d8b25a; font-family: "Cormorant Garamond", serif; }
.tpl-royal .bd-name { display: block; font: 600 calc(var(--fs) * 30px)/1.15 "Cormorant Garamond", "Tiro Devanagari Hindi", serif; color: #f6dc9a; margin-top: 8px; }
.tpl-royal .bd-tag { display: block; font-size: 15px; letter-spacing: .08em; color: #cdbf9f; }
.tpl-royal .bd-sec h3 { font: 600 calc(var(--fs) * 21px) "Cormorant Garamond", "Tiro Devanagari Hindi", serif; color: #d8b25a; letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
.tpl-royal .bd-sec h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #d8b25a, transparent); }
.tpl-royal .bd-row .k { color: #d8b25a; font-weight: 500; }
.tpl-royal .bd-wm span { color: rgba(255, 255, 255, .14); }

/* ---------- 4. Floral (blush) ---------- */
.tpl-floral { background: #fff6f7; color: #4a2d3a; }
.tpl-floral .bd-ornament { inset: 0; }
.tpl-floral .bd-inner { inset: 0; padding: 62px 86px 46px; grid-template-columns: 1fr; grid-template-areas: "head" "side" "secs"; }
.tpl-floral.no-photo .bd-inner { grid-template-columns: 1fr; grid-template-areas: "head" "side" "secs"; }
.tpl-floral.no-photo .bd-side { display: grid; }
.tpl-floral .bd-side { grid-template-columns: auto auto; grid-template-areas: "photo name" "photo tag"; justify-content: center; align-items: center; column-gap: 26px; row-gap: 2px; text-align: left; margin-bottom: calc(var(--fs) * 16px); }
.tpl-floral .bd-photo { grid-area: photo; }
.tpl-floral .bd-name { grid-area: name; align-self: end; }
.tpl-floral .bd-tag { grid-area: tag; align-self: start; }
.tpl-floral .bd-deity { color: #b5446e; }
.tpl-floral .bd-title { font: 400 calc(var(--fs) * 62px) "Great Vibes", "Tiro Devanagari Hindi", cursive; color: #b5446e; margin: 0 0 6px; }
.tpl-floral .bd-photo { width: 140px; height: 140px; border-radius: 50%; border: 5px solid #f1b6c8; box-shadow: 0 0 0 4px #fff, 0 8px 18px rgba(181, 68, 110, .2); background: #f8dbe3; }
.tpl-floral .bd-initials { color: #b5446e; font-family: "Cormorant Garamond", serif; }
.tpl-floral .bd-name { display: block; font: 600 calc(var(--fs) * 32px)/1.15 "Cormorant Garamond", "Tiro Devanagari Hindi", serif; margin-top: 8px; }
.tpl-floral .bd-tag { display: block; color: #9c6b80; font-size: 15px; }
.tpl-floral .bd-sec h3 { font: 600 italic calc(var(--fs) * 23px) "Cormorant Garamond", "Tiro Devanagari Hindi", serif; color: #b5446e; text-align: center; }
.tpl-floral .bd-sec h3::after { content: ""; display: block; width: 90px; height: 2px; margin: 6px auto 0; background: linear-gradient(90deg, transparent, #e89bb5, transparent); }
.tpl-floral .bd-row { grid-template-columns: 42% 1fr; }
.tpl-floral .bd-row .k { color: #9c4d6c; text-align: right; padding-right: 6px; }
.tpl-floral .bd-about p { text-align: center; }

/* ---------- 5. Minimal (black & taupe) ---------- */
.tpl-minimal { background: #ffffff; color: #1c1c1c; }
.tpl-minimal .bd-inner { inset: 0; padding: 70px 72px 50px; grid-template-columns: 1fr 170px; grid-template-areas: "head side" "secs secs"; column-gap: 30px; }
.tpl-minimal .bd-head { text-align: left; align-self: end; border-bottom: 1px solid #1c1c1c; padding-bottom: 18px; margin-bottom: calc(var(--fs) * 28px); }
.tpl-minimal.no-photo .bd-head { align-self: start; }
.tpl-minimal .bd-deity { color: #8c7a5b; font-size: calc(var(--fs) * 17px); }
.tpl-minimal .bd-title { font: 500 calc(var(--fs) * 56px) "Cormorant Garamond", "Tiro Devanagari Hindi", serif; letter-spacing: .12em; text-transform: uppercase; }
.tpl-minimal .bd-side { margin-bottom: calc(var(--fs) * 28px); }
.tpl-minimal .bd-photo { width: 170px; height: 212px; filter: none; }
.tpl-minimal .bd-sec h3 { font: 600 calc(var(--fs) * 14px) "Hind", sans-serif; letter-spacing: .24em; text-transform: uppercase; color: #8c7a5b; }
.tpl-minimal .bd-row { grid-template-columns: 34% 1fr; border-bottom: 1px solid #ececec; }
.tpl-minimal .bd-row .k { font-weight: 400; color: #6b6b6b; }
.tpl-minimal .bd-row .v::before { content: ""; }
.tpl-minimal .bd-secs { grid-template-columns: 1fr; }

/* ---------- 6. Mehndi (green & gold) ---------- */
.tpl-mehndi { background: #f6f8ec; color: #26341f; }
.tpl-mehndi .bd-frame { inset: 16px; border: 3px solid #355e2b; border-radius: 6px; }
.tpl-mehndi .bd-frame::after { content: ""; position: absolute; inset: 7px; border: 1px dashed #c79a2a; border-radius: 4px; }
.tpl-mehndi .bd-ornament { inset: 16px; }
.tpl-mehndi .bd-inner { inset: 28px; padding: 50px 54px 40px; }
.tpl-mehndi .bd-deity { color: #c79a2a; font-family: "Rozha One", "Tiro Devanagari Hindi", serif; }
.tpl-mehndi .bd-title { font: 400 calc(var(--fs) * 50px) "Rozha One", "Tiro Devanagari Hindi", serif; color: #355e2b; margin: 4px 0 calc(var(--fs) * 26px); }
.tpl-mehndi .bd-photo { border-radius: 14px; border: 4px solid #355e2b; outline: none; box-shadow: 0 0 0 4px #f6f8ec, 0 0 0 6px #c79a2a; }
.tpl-mehndi .bd-sec h3 { font: 400 calc(var(--fs) * 22px) "Rozha One", "Tiro Devanagari Hindi", serif; color: #355e2b; border-bottom: 2px solid #c79a2a; padding-bottom: 4px; }
.tpl-mehndi .bd-row .k { color: #355e2b; }