/* SaveResume — Guided Builder catalog set 4: layout CSS matching the
 * uploaded reference designs. Reuses .bldc-item-row / .bldc-item-sub /
 * .bldc-date / .page / .sr-photo from sr-builder-templates.css.
 * Everything specific to this set is prefixed tpl4-.
 */

.tpl4-shell{min-height:var(--sr-page-h,279.4mm)}
.page-inner{display:flex;flex-direction:column;min-height:var(--sr-page-h,279.4mm)}
.tpl4-muted{color:#9aa1ab}

/* ---- banner header (name/tagline left, contact block right) ---- */
.tpl4-banner-header{display:flex;justify-content:space-between;align-items:stretch;padding:36px 40px 0;gap:20px}
.tpl4-banner-left{flex:1;min-width:0;padding-bottom:20px}
.tpl4-banner-header h1{font-size:30px;font-weight:800;margin:0 0 4px;letter-spacing:-.01em}
.tpl4-role{font-size:13px;letter-spacing:.09em;margin-bottom:10px}
.tpl4-tagline{font-size:12.5px;line-height:1.6;color:#4b5563;max-width:520px;margin:0}
.tpl4-contact-block{flex:0 0 auto;min-width:200px;padding:16px 22px;text-align:right;font-size:12px;line-height:1.9;border-radius:4px 4px 0 0}
.tpl4-contact-label{font-size:11px;font-weight:800;letter-spacing:.08em;margin-bottom:4px}

/* ---- full-bleed banner (name centered inside the color band) ---- */
.tpl4-banner-full{display:flex;justify-content:space-between;align-items:stretch;padding:30px 40px;gap:20px}
.tpl4-banner-full .tpl4-contact-block{background:transparent!important;padding:0}

/* ---- generic 2-column body below a header ---- */
.tpl4-body{flex:1;display:grid}
.tpl4-body-2col{grid-template-columns:34% 66%;margin-top:22px}
.tpl4-body-reverse{grid-template-columns:66% 34%}
.tpl4-body-3col{grid-template-columns:22% 56% 22%;margin-top:0}
.tpl4-body-fullsidebar{grid-template-columns:32% 68%;margin-top:0}
.tpl4-col-narrow{padding:0 26px 30px 40px}
.tpl4-col-wide{padding:0 40px 30px 26px}
.tpl4-body-reverse .tpl4-col-wide{padding:0 26px 30px 40px}
.tpl4-body-reverse .tpl4-col-narrow{padding:22px 40px 30px 26px}
.tpl4-shaded{padding-top:22px}
.tpl4-fullsidebar{padding:30px 26px}
.tpl4-fullmain{padding:30px 40px}

/* ---- headings ---- */
.tpl4-side-h{font-size:13px;font-weight:800;letter-spacing:.07em;margin:20px 0 10px;padding-bottom:6px;border-bottom:1.5px solid currentColor;break-after:avoid;page-break-after:avoid}
.tpl4-side-h:first-child{margin-top:0}
.tpl4-dash{border-bottom:none;position:relative;padding-bottom:10px}
.tpl4-dash:after{content:"";display:block;width:22px;height:2px;background:currentColor;margin-top:6px;opacity:.6}
.tpl4-summary{font-size:12.5px;line-height:1.65;color:#374151;margin:0 0 6px}

/* ---- experience / items ---- */
.tpl4-item{margin-bottom:16px;break-inside:avoid;page-break-inside:avoid}
.tpl4-item:last-child{margin-bottom:0}
.tpl4-bullets{margin:6px 0 0;padding-left:16px;font-size:12px;line-height:1.55;color:#374151}
.tpl4-bullets li{margin-bottom:3px}
.tpl4-bullets-light{color:#e8ece9}
.tpl4-skill-bullets{padding-left:16px}

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

/* ---- skills: underline style (Banner Teal) ---- */
.tpl4-skill-underline{font-size:12px;padding-bottom:6px;margin-bottom:10px;border-bottom:1.5px solid;display:inline-block;width:100%}

/* ---- contact (plain lines, for photo-header templates) ---- */
.tpl4-plain-contact-row{font-size:12px;margin-bottom:5px;word-break:break-word}

/* ---- generic side blocks ---- */
.tpl4-line-item{margin-bottom:8px;font-size:12px}
.tpl4-line-sub{font-size:11px;color:#6b7280}
.tpl4-inline-line{font-size:12px;margin-bottom:4px}

/* ---- stat panels (multi-box, independently colored) ---- */
.tpl4-stat-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:8px 0 4px;border-radius:6px;overflow:hidden}
.tpl4-stat-panel-wrap{border-radius:10px}
.tpl4-stat-box{padding:16px 14px;text-align:center;break-inside:avoid;page-break-inside:avoid}
.tpl4-stat-num{font-size:24px;font-weight:800;line-height:1.1}
.tpl4-stat-label{font-size:11px;margin-top:4px}

/* ---- stacked big stats (Sidebar Charcoal Orange) ---- */
.tpl4-stack-stats{margin-bottom:6px}
.tpl4-stack-stat{margin-bottom:14px;break-inside:avoid;page-break-inside:avoid}
.tpl4-stack-num{font-size:26px;font-weight:800;line-height:1.1}
.tpl4-stack-label{font-size:11.5px;opacity:.85;margin-top:2px}

/* ---- photo box (rectangular, not circular) ---- */
.tpl4-photobox-wrap{flex:0 0 auto}
.tpl4-photo-box{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;letter-spacing:.08em;color:#8a8f98}
.tpl4-photobox-wrap img{object-fit:cover;display:block}

/* ---- photo header (name/role left, photo box right) ---- */
.tpl4-photo-header{display:flex;justify-content:space-between;align-items:flex-start;padding:34px 40px 16px;gap:20px}
.tpl4-photo-header-text{flex:1;min-width:0}
.tpl4-photo-header h1{font-size:34px;font-weight:800;line-height:1.08;margin:0 0 8px}
.tpl4-role-dots{font-size:12px;font-weight:700;letter-spacing:.09em;margin-bottom:4px}

/* ---- colored note bar (PROFILE NOTE / ABOUT) ---- */
.tpl4-note-bar{margin:0 40px;padding:12px 20px;border-radius:2px}
.tpl4-note-label{color:#fff;font-size:11px;font-weight:800;letter-spacing:.09em}
.tpl4-about-row{display:flex;align-items:stretch;margin:0 40px 20px;gap:0}
.tpl4-about-row .tpl4-note-bar{margin:0;flex:0 0 210px;display:flex;align-items:center}
.tpl4-about-text{flex:1;background:#f3ece3;padding:12px 20px;font-size:12px;line-height:1.6;color:#4b4038;display:flex;align-items:center}

/* ---- centered full-width banner (Photo Navy Centered) ---- */
.tpl4-centered-header{display:flex;justify-content:center;align-items:center;padding:34px 40px;gap:24px;position:relative}
.tpl4-centered-text{text-align:center;max-width:520px}
.tpl4-centered-header h1{font-size:28px;font-weight:700;margin:0 0 6px;letter-spacing:.02em}
.tpl4-centered-header .tpl4-photobox-wrap{position:absolute;right:40px;top:50%;transform:translateY(-50%)}