/* SaveResume — Guided Builder catalog set 3: layout + typography CSS.
 * Reuses .bldc-item / .bldc-item-row / .bldc-item-sub / .bldc-item-desc
 * / .bldc-date / .bldc-side-block / .bldc-side-item / .bldc-side-sub /
 * .page / .sr-photo from sr-builder-templates.css. Everything specific
 * to this set is prefixed tpl3-.
 *
 * Typography variety is done entirely with widely-available system
 * font stacks -- no @font-face, nothing fetched -- so it can never
 * fail or delay a PDF export/print, matching every other template.
 */

/* ---- shells ---- */
.tpl3-shell{display:grid;min-height:var(--sr-page-h,279.4mm)}
.tpl3-shell-left{grid-template-columns:34% 66%}
.tpl3-shell-right{grid-template-columns:66% 34%}
.tpl3-sidebar{padding:40px 30px}
.tpl3-main{padding:44px 48px}

/* ---- typography stacks ---- */
.tpl3-font-bold{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif}
.tpl3-font-bold h1{font-weight:900;letter-spacing:-.01em}
.tpl3-font-modern{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}
.tpl3-font-geo{font-family:"Century Gothic","Avant Garde","Segoe UI",Futura,sans-serif}
.tpl3-font-condensed{font-family:"Arial Narrow",Arial,sans-serif}
.tpl3-font-condensed h1{letter-spacing:.01em;text-transform:uppercase;font-size:30px}
.tpl3-font-friendly{font-family:"Trebuchet MS","Segoe UI",Verdana,sans-serif}
.tpl3-font-serif{font-family:Georgia,"Times New Roman",Times,serif}
.tpl3-font-elegant{font-family:"Palatino Linotype",Palatino,Georgia,serif}

/* ---- name / role / objective ---- */
.tpl3-main h1{font-size:32px;font-weight:800;margin:0 0 4px;letter-spacing:-.01em}
.tpl3-font-serif h1,.tpl3-font-elegant h1{font-weight:700;letter-spacing:0}
.tpl3-role{font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:#6b7280;margin-bottom:16px}
.tpl3-objective{font-size:13.5px;line-height:1.7;color:#374151;margin:0 0 22px}
.tpl3-main-h{font-size:14.5px;font-weight:800;letter-spacing:.08em;margin:26px 0 16px;padding-bottom:8px;border-bottom:1.5px solid;break-after:avoid;page-break-after:avoid}
.tpl3-side-h{font-size:11.5px;font-weight:800;letter-spacing:.09em;margin:22px 0 12px;break-after:avoid;page-break-after:avoid}

/* ---- photo ---- */
.tpl3-photo-wrap{text-align:center;margin-bottom:20px}
.tpl3-photo-wrap img,.tpl3-photo-wrap .sr-photo{display:inline-block;margin:0 auto}
.tpl3-photo-wrap .sr-photo{display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.1);font-size:9px;text-align:center}

/* ---- contact ---- */
.tpl3-contact-row{display:flex;align-items:center;gap:9px;font-size:12.5px;margin-bottom:9px;word-break:break-word}
.tpl3-contact-ic{flex:0 0 auto;display:flex}
.tpl3-contact-inline{display:inline-flex;margin:0 18px 14px 0}

/* ---- education ---- */
.tpl3-side-edu{font-size:12px;line-height:1.5;margin-bottom:12px;break-inside:avoid;page-break-inside:avoid}
.tpl3-side-edu strong{display:block;font-size:12.5px}
.tpl3-side-date{opacity:.85;font-size:11px}

/* ---- skills: bars / chips / plain ---- */
.tpl3-bars{margin-top:2px}
.tpl3-bar-row{margin-bottom:10px}
.tpl3-bar-label{font-size:12px;margin-bottom:4px}
.tpl3-bar-track{height:6px;background:rgba(120,120,120,.25);border-radius:3px;overflow:hidden}
.tpl3-bar-fill{height:100%;border-radius:3px}
.tpl3-chip-wrap{display:flex;flex-wrap:wrap;gap:8px}
.tpl3-chip{display:inline-block;padding:6px 12px;border-radius:5px;font-size:11.5px;font-weight:700}
.tpl3-round .tpl3-chip{border-radius:14px}
.tpl3-plain-list{font-size:12.5px;line-height:1.9}
.tpl3-plain-skill{margin-bottom:2px}
.tpl3-plain-item{margin-bottom:18px;break-inside:avoid;page-break-inside:avoid}
.tpl3-plain-item:last-child{margin-bottom:0}

/* ---- timeline experience ---- */
.tpl3-tl-wrap{position:relative}
.tpl3-tl-item{display:flex;gap:16px;margin-bottom:22px;break-inside:avoid;page-break-inside:avoid}
.tpl3-tl-item:last-child{margin-bottom:0}
.tpl3-tl-rail{flex:0 0 auto;width:14px;display:flex;flex-direction:column;align-items:center}
.tpl3-tl-dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto;margin-top:4px}
.tpl3-tl-line{flex:1;width:2px;margin-top:4px}
.tpl3-tl-body{flex:1;min-width:0}

/* ---- stat grid (Key Wins / Client Impact / Executive Impact / etc.) ---- */
.tpl3-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:8px}
.tpl3-stat-boxed-wrap{border-radius:14px;padding:22px 24px}
.tpl3-stat{text-align:left;break-inside:avoid;page-break-inside:avoid}
.tpl3-stat-ic{margin-bottom:8px}
.tpl3-stat-num{font-size:21px;font-weight:800;margin-bottom:2px}
.tpl3-stat-label{font-size:11.5px;line-height:1.4}

/* ---- Selected Work / portfolio grid (Coral Canvas) ---- */
.tpl3-proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tpl3-proj{break-inside:avoid;page-break-inside:avoid}
.tpl3-proj-bar{height:4px;border-radius:2px;margin-bottom:10px}
.tpl3-proj-title{font-weight:800;font-size:13px;margin-bottom:4px}
.tpl3-proj-desc{font-size:12px;color:#4b5563;line-height:1.5}

/* ---- decorative shapes (Coral Canvas sidebar) ---- */
.tpl3-sidebar-shapes{position:relative;overflow:hidden}
.tpl3-sidebar-shapes:before{content:"";position:absolute;top:-40px;right:-40px;width:150px;height:150px;border-radius:50%;background:#f2b13444;pointer-events:none}
.tpl3-sidebar-shapes:after{content:"";position:absolute;bottom:60px;left:-30px;width:90px;height:90px;border-radius:50%;background:#6a8caf33;pointer-events:none}
.tpl3-sidebar-shapes>*{position:relative;z-index:1}