/* ==========================================================================
   Resume Templates - Shared Base + Layout Variants
   DomPDF-safe: table/table-cell for fixed 2-column splits,
   inline-block for variable-count wrapping grids (skills/tags),
   no color-mix()/linear-gradient(), fonts embedded via @font-face.
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

ul { list-style: none; }

.resume-body {
    font-family: 'Inter', sans-serif;
    background: #eef0f7;
    color: #222233;
    line-height: 1.5;
}

.resume-body strong, .resume-body b {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
}

.preview-toolbar {
    background: #fff;
    border-bottom: 1px solid #e2e2ee;
    position: sticky;
    top: 0;
    z-index: 50;
}
.preview-toolbar-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.preview-label { font-size: 0.85rem; color: #666; font-weight: 500; }

.resume-page-wrap {
    max-width: 850px;
    margin: 0px auto 60px;
}

.resume {
    background: #fff;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    overflow: visible;
}

.resume h1 { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.resume .role { font-size: 1.05rem; font-weight: 500; opacity: 0.85; margin-top: 2px; line-height: 1.3; }
.resume h2 {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tcolor);
    margin-bottom: 10px;
    line-height: 1.3;
    /* dompdf fix (tested): without this, a section heading can land as the
       last line on a page while its content is pushed to the next page,
       leaving a blank gap and an orphaned heading. Keeps the heading with
       its first line of content across every template. */
    page-break-after: avoid;
}
.about-text { font-size: 0.92rem; line-height: 1.65; color: #444; }
.about-text.center { text-align: center; max-width: 560px; margin: 0 auto; }
/* Spacing tightened globally (same ratio tested for creative-badge): less
   vertical space per section/entry means more content fits before a page
   boundary, which reduces (does not eliminate — no PDF tool can) how often
   a section overflows and leaves a blank gap at the bottom of a page. */
.block { margin-bottom: 18px; padding: 0 40px; }
.block:first-of-type { padding-top: 4px; }
.entry { margin-bottom: 11px; page-break-inside: avoid; }
/* Same protection for the other per-item (repeated) blocks across templates
   that don't reuse the shared .entry class. Section-level containers that
   already have a heading (.block, .cg-block, .dsi-block, .side-block,
   .lr-rail-block, .bb-block, .bx-box) are deliberately left out here — the
   same as .block, forcing a whole section to stay together risks a bigger
   blank-page gap than the orphan-heading problem this is fixing. */
.ut-entry, .tl-item, .tls-timeline-item, .ns-block {
    page-break-inside: avoid;
}

.entry-head { position: relative; padding-right: 130px; min-height: 18px; }
.entry-head strong { font-size: 0.95rem; font-weight: 700; display: block; line-height: 1.3; }
.entry-date { font-size: 0.78rem; color: #888; white-space: nowrap; position: absolute; top: 0; right: 0; }

.entry-sub { font-size: 0.85rem; color: var(--tcolor); font-weight: 600; margin: 2px 0 6px; line-height: 1.3; }
.entry-desc { font-size: 0.88rem; color: #555; line-height: 1.6; }
.dim { color: #999; font-weight: 400; }
.plain-list { font-size: 0.88rem; color: #444; }
.plain-list li { margin-bottom: 6px; }
.plain-list.dotted li { padding-left: 14px; text-indent: -14px; }
.plain-list.dotted li::before {
    content: '●';
    color: var(--tcolor);
    font-size: 0.55em;
    margin-right: 8px;
    vertical-align: middle;
}
.photo-placeholder {
    display: block;
    text-align: center;
    line-height: 110px;
    font-weight: 700; font-size: 1.6rem; color: #fff;
    background: var(--tcolor);
}
.skill-pill {
    display: inline-block;
    background: #eef0f7;
    color: var(--tcolor);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0 6px 8px 0;
}
/* Disabled globally: skill-pill is display:inline-block, never floated, so
   this clearfix never did anything useful. It's the same pattern
   (content:'' + display:table) that caused a hard "Frame not found in
   cellmap" crash in creative-badge when nested inside a real table, and is
   suspected of causing unpredictable page-break behavior (an empty box on
   one page, pills displaced to the next) in other templates too. */
.mt-skills:after { content: none; display: none; }

/* ==========================================================================
   1. MODERN SIDEBAR
   ========================================================================== */
.resume.modern-sidebar { display: table; width: 100%; table-layout: fixed; }
.modern-sidebar .side {
    display: table-cell; vertical-align: top;
    width: 32%;
    background: var(--tcolor);
    color: #fff;
    padding: 40px 26px;
}
.modern-sidebar .side-photo { text-align: center; margin-bottom: 24px; }
.modern-sidebar .side-photo img,
.modern-sidebar .side-photo .photo-placeholder {
    width: 110px; height: 110px; border-radius: 50%;
    object-fit: cover; border: 3px solid rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.15);
    display: inline-block;
    line-height: 104px;
}
.modern-sidebar .side-block { margin-bottom: 26px; }
.modern-sidebar .side-block h4 {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
    opacity: 0.75; margin-bottom: 10px; font-weight: 700;
}
.modern-sidebar .side-list { font-size: 0.82rem; }
.modern-sidebar .side-list li { margin-bottom: 8px; word-break: break-word; opacity: 0.95; }
.modern-sidebar .side-list a { color: #fff; text-decoration: underline; }
.modern-sidebar .side-tags li {
    display: inline-block;
    background: rgba(255,255,255,0.18);
    padding: 5px 11px; border-radius: 14px; font-size: 0.75rem;
    margin: 0 6px 6px 0;
}
.modern-sidebar .main {
    display: table-cell; vertical-align: top;
    width: 68%;
    padding: 40px 36px;
}
.modern-sidebar .main-header { margin-bottom: 28px; }
.modern-sidebar .main .block { padding: 0; }

/* ==========================================================================
   2. MINIMAL TIMELINE
   ========================================================================== */
.minimal-timeline .mt-header { text-align: center; padding: 46px 40px 30px; }
.minimal-timeline .mt-photo {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 16px;
    display: block;
}
.minimal-timeline .mt-header h1 { margin-bottom: 2px; }
.minimal-timeline .mt-contact {
    font-size: 0.82rem; color: #666; margin-top: 14px;
}
.minimal-timeline .mt-contact span { display: inline-block; margin: 0 8px; }
.minimal-timeline .mt-contact a { color: var(--tcolor); }
.minimal-timeline .mt-block { padding: 0 44px; margin-bottom: 30px; }
.minimal-timeline .mt-block h2 { text-align: left; margin-bottom: 18px; font-size: 17px}
.minimal-timeline .mt-skills { text-align: center; }
.minimal-timeline .timeline { border-left: 2px solid #eee; margin-left: 8px; }
.minimal-timeline .tl-item { position: relative; padding: 0 0 22px 26px; }
.minimal-timeline .tl-dot {
    position: absolute; left: -7px; top: 3px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--tcolor); border: 2px solid #fff;
}
.mt-skills {
    margin-top: 15px;
}
.minimal-timeline .mt-two-col { display: table; width: 100%; table-layout: fixed; }
.minimal-timeline .mt-two-col > div { display: table-cell; vertical-align: top; width: 50%; padding-right: 20px; }
.minimal-timeline .mt-two-col > div:last-child { padding-right: 0; padding-left: 20px; }

/* ==========================================================================
   3. CLASSIC TWO-COLUMN
   ========================================================================== */
.classic-two-col .ctc-header {
    background: var(--tcolor); color: #fff; padding: 34px 40px;
    display: table; width: 100%; table-layout: fixed;
}
.classic-two-col .ctc-header-text { display: table-cell; width: 60%; vertical-align: top; }
.classic-two-col .ctc-header h1,
.classic-two-col .ctc-header .role { color: #fff; }
.classic-two-col .ctc-header-contact {
    display: table-cell; width: 40%; vertical-align: top;
    font-size: 0.8rem; text-align: right; opacity: 0.92;
}
.classic-two-col .ctc-header-contact span { display: block; margin-bottom: 4px; }
.classic-two-col .ctc-header-contact a { color: #fff; }
.classic-two-col .ctc-body { padding: 34px 0; display: table; width: 100%; table-layout: fixed; }
.classic-two-col .ctc-col { padding: 0 30px; display: table-cell; vertical-align: top; }
.classic-two-col .ctc-col-left { width: 60%; border-right: 1px solid #eee; }
.classic-two-col .ctc-col-right { width: 40%; }
.classic-two-col .ctc-col .block { padding: 0; margin-bottom: 24px; }

/* ==========================================================================
   4. CREATIVE HEADER (gradient/color-mix removed)
   ========================================================================== */
.creative-header .ch-header {
    background: var(--tcolor);
    color: #fff; text-align: center; padding: 50px 40px 40px;
    border-radius: 0 0 40px 40px;
}
.creative-header .ch-photo {
    width: 100px; height: 100px; border-radius: 50%; object-fit: cover;
    margin: 0 auto 16px; border: 3px solid rgba(255,255,255,0.5);
    font-size: 2rem;
    display: block;
}
.creative-header .ch-header h1, .creative-header .ch-header .role { color: #fff; }
.creative-header .ch-contact {
    font-size: 0.8rem; margin-top: 16px; opacity: 0.95;
}
.creative-header .ch-contact span { display: inline-block; margin: 0 8px; }
.creative-header .ch-contact a { color: #fff; }
.creative-header .ch-body { padding: 36px 40px 10px; }
.creative-header .ch-body .block { padding: 0; }
.creative-header .ch-two-col { display: table; width: 100%; table-layout: fixed; }
.creative-header .ch-two-col .block { display: table-cell; vertical-align: top; width: 50%; padding-right: 20px; }
.creative-header .ch-two-col .block:last-child { padding-right: 0; padding-left: 20px; }

/* ==========================================================================
   5. CORPORATE CLEAN (skill grid: float -> inline-block)
   ========================================================================== */
.corporate-clean .cc-topbar { height: 8px; background: var(--tcolor); }
.corporate-clean .cc-header {
    padding: 34px 44px 24px;
    display: table; width: 100%; table-layout: fixed;
    border-bottom: 2px solid #f0f0f5;
}
.corporate-clean .cc-header > div:first-child { display: table-cell; vertical-align: top; }
.corporate-clean .cc-contact {
    display: table-cell; vertical-align: top; width: 220px;
    font-size: 0.8rem; color: #666; text-align: right;
}
.corporate-clean .cc-contact span { display: block; margin-bottom: 4px; }
.corporate-clean .cc-contact a { color: var(--tcolor); }
.corporate-clean .block { padding: 0 44px; margin-top: 26px; }
.corporate-clean .cc-skill-item {
    display: inline-block;
    width: 30%;
    margin: 0 3.33% 8px 0;
    vertical-align: top;
    font-size: 0.85rem; padding: 6px 0; border-bottom: 1px dashed #e5e5ee; color: #444;
}
.corporate-clean .cc-two-col { padding: 0 44px; margin-top: 26px; display: table; width: 100%; table-layout: fixed; }
.corporate-clean .cc-two-col .block { display: table-cell; vertical-align: top; width: 50%; padding: 0; margin-top: 0; padding-right: 20px; }
.corporate-clean .cc-two-col .block:last-child { padding-right: 0; padding-left: 20px; }

/* ==========================================================================
   6. ELEGANT SERIF
   ========================================================================== */
.elegant-serif .es-header { text-align: center; padding: 50px 40px 30px; }
.elegant-serif .es-header h1 { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 2.1rem; }
.elegant-serif .es-header .role { font-family: Georgia, serif; font-style: italic; opacity: 0.75; }
.elegant-serif .es-rule { width: 60px; height: 2px; background: var(--tcolor); margin: 18px auto; }
.elegant-serif .es-contact {
    font-size: 0.8rem; color: #666;
}
.elegant-serif .es-contact span { display: inline-block; margin: 0 8px; }
.elegant-serif .es-contact a { color: var(--tcolor); }
.elegant-serif .es-body { padding: 10px 44px 30px; }
.elegant-serif h2 { font-family: Georgia, serif; font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1rem; }
.elegant-serif .es-two-col { display: table; width: 100%; table-layout: fixed; }
.elegant-serif .es-two-col .block { display: table-cell; vertical-align: top; width: 50%; padding-right: 20px; }
.elegant-serif .es-two-col .block:last-child { padding-right: 0; padding-left: 20px; }

/* ==========================================================================
   7. BOLD BLOCK
   ========================================================================== */
.bold-block .bb-header {
    background: var(--tcolor); color: #fff;
    padding: 36px 44px;
    display: table; width: 100%;
}
.bb-photo {
    width: 120px;
    height: 120px;
    object-fit: cover;
}
.resume.two-tone-split .tts-main {
    margin-top: 30px;
    padding-bottom: 20px;
}
.bold-block .bb-photo.bb-square,
.bold-block .bb-photo img {
    width: 90px; height: 90px; border-radius: 10px; object-fit: cover;
    font-size: 1.8rem;
    display: table-cell; vertical-align: middle; text-align: center;
    line-height: normal;
}
.bold-block .bb-header-text { display: table-cell; vertical-align: middle; padding-left: 24px; }
.bold-block .bb-header h1, .bold-block .bb-header .role { color: #fff; }
.bold-block .bb-contact-bar {
    padding: 14px 44px; background: #f4f4f9;
    font-size: 0.82rem; color: #555;
}
.bold-block .bb-contact-bar span { display: inline-block; margin: 0 10px 0 0; }
.bold-block .bb-contact-bar a { color: var(--tcolor); }
.bold-block .bb-body { padding: 30px 44px; }
.bold-block .bb-block { margin-bottom: 26px; }
.bold-block .bb-block:after { content: ''; display: table; clear: both; }
.bold-block .bb-block h2 {
    font-size: 0.82rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--tcolor); margin-bottom: 12px;
    border-bottom: 2px solid var(--tcolor); padding-bottom: 6px; display: inline-block;
}
.bold-block .bb-two-col { display: table; width: 100%; table-layout: fixed; }
.bold-block .bb-two-col .bb-block { display: table-cell; vertical-align: top; width: 50%; padding-right: 20px; }
.bold-block .bb-two-col .bb-block:last-child { padding-right: 0; padding-left: 20px; }
.bold-block .bb-skill-row { position: relative; padding-left: 132px; margin-bottom: 10px; min-height: 6px; }
.bold-block .bb-skill-name { font-size: 0.82rem; width: 120px; position: absolute; left: 0; top: -3px; color: #444; }
.bold-block .bb-bar-track { height: 6px; background: #eee; border-radius: 4px; overflow: hidden; }
.bold-block .bb-bar-fill { height: 100%; background: var(--tcolor); border-radius: 4px; }

/* ==========================================================================
   8. COMPACT GRID
   ========================================================================== */
.compact-grid .cg-header { padding: 30px 40px 18px; border-bottom: 3px solid var(--tcolor); }
.compact-grid .cg-header h1 { font-size: 1.7rem; }
.compact-grid .cg-contact {
    font-size: 0.78rem; color: #555; margin-top: 10px;
}
.compact-grid .cg-contact span { display: inline-block; margin: 0 8px 0 0; }
.compact-grid .cg-contact a { color: var(--tcolor); }
.compact-grid .cg-grid { padding: 24px 0; display: table; width: 100%; table-layout: fixed; }
.compact-grid .cg-main { display: table-cell; vertical-align: top; width: 62%; padding: 0 24px 0 40px; border-right: 1px solid #eee; }
.compact-grid .cg-side { display: table-cell; vertical-align: top; width: 38%; padding: 0 40px 0 24px; }
.compact-grid .cg-block { margin-bottom: 20px; }
.compact-grid .cg-block h2 {
    font-size: 0.76rem; margin-bottom: 8px;
}
.compact-grid .entry { margin-bottom: 12px; }
.compact-grid .entry-desc { font-size: 0.82rem; }
.compact-grid .cg-skill-item {
    font-size: 0.8rem; padding: 4px 0; color: #444;
    border-bottom: 1px dotted #e5e5ee;
}

/* ==========================================================================
   9. SPLIT BANNER
   ========================================================================== */
.split-banner .sb-header-table {
    background: var(--tcolor); color: #fff;
    width: 100%; border-collapse: collapse;
}
.split-banner .sb-header-table td { padding: 40px 44px; }
.split-banner .sb-header-left { vertical-align: middle; width: 65%; }
.split-banner .sb-header-right { vertical-align: middle; width: 35%; text-align: right; }
.split-banner .sb-header-table h1, .split-banner .sb-header-table .role { color: #fff; }
.split-banner .sb-contact {
    font-size: 0.8rem; margin-top: 14px; opacity: 0.95;
}
.split-banner .sb-contact span { display: inline-block; margin: 0 10px 4px 0; }
.split-banner .sb-contact a { color: #fff; }
.split-banner .sb-photo,
.split-banner .sb-photo.photo-placeholder {
    width: 100px; height: 100px; border-radius: 50%; object-fit: cover;
    border: 3px solid rgba(255,255,255,0.5); font-size: 2rem;
    display: inline-block; text-align: center; line-height: 100px;
}
.split-banner .sb-highlights {
    background: #f4f4f9;
    border-bottom: 1px solid #eee;
    width: 100%;
    border-collapse: collapse;
}
.split-banner .sb-highlight-item {
    width: 33.33%; text-align: center; padding: 18px 10px;
    border-right: 1px solid #e2e2ee;
}
.split-banner .sb-highlight-value { font-size: 1.4rem; font-weight: 800; color: var(--tcolor); }
.split-banner .sb-highlight-label { font-size: 0.72rem; color: #888; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }
.split-banner .sb-body { padding: 30px 44px; }
.split-banner .sb-two-col-table { width: 100%; border-collapse: collapse; }
.split-banner .sb-two-col-cell { vertical-align: top; width: 50%; padding-right: 20px; }
.split-banner .sb-two-col-cell + .sb-two-col-cell { padding-right: 0; padding-left: 20px; }
.split-banner .sb-two-col-cell .block { padding: 0; margin-bottom: 0; }

/* ==========================================================================
   10. LEFT RAIL ICONS (dot markers, not emoji)
   ========================================================================== */
.left-rail-icons { display: table; width: 100%; table-layout: fixed; }
.left-rail-icons .lr-rail {
    display: table-cell; vertical-align: top;
    width: 30%; background: #f7f7fb; padding: 40px 24px;
    border-right: 3px solid var(--tcolor);
}
.left-rail-icons .lr-initial {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--tcolor);
    color: #fff;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 0 16px 0 !important;

    text-align: center !important;
    line-height: 36px !important;

    font-family: 'Inter', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    box-sizing: border-box;
}
.left-rail-icons .lr-rail h1 { font-size: 1.3rem; }
.left-rail-icons .lr-rail-block { margin-top: 24px; }
.left-rail-icons .lr-rail-block h4 {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--tcolor); margin-bottom: 10px; font-weight: 700;
}
.left-rail-icons .lr-item { font-size: 0.8rem; color: #555; margin-bottom: 8px; word-break: break-word; }
.left-rail-icons .lr-item a { color: var(--tcolor); }
.left-rail-icons .lr-rail-list { font-size: 0.8rem; color: #555; }
.left-rail-icons .lr-rail-list li { margin-bottom: 6px; }
.left-rail-icons .lr-icon {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--tcolor);
    margin-right: 8px;
    vertical-align: middle;
}
.left-rail-icons h2 .lr-icon { width: 8px; height: 8px; margin-right: 10px; }
.left-rail-icons .lr-main { display: table-cell; vertical-align: top; width: 70%; padding: 40px 40px 40px 36px; }
.left-rail-icons .lr-main .block { padding: 0; }

/* ==========================================================================
   11. BANNER STACK (skill grid: table-cell -> inline-block)
   ========================================================================== */
.banner-stack .bs-banner { background: var(--tcolor); color: #fff; text-align: center; padding: 44px 40px 32px; }
.banner-stack .bs-banner h1, .banner-stack .bs-banner .role { color: #fff; }
.banner-stack .bs-contact-strip {
    text-align: center;
    font-size: 0.8rem; color: #555; padding: 14px 20px; background: #f4f4f9;
}
.banner-stack .bs-contact-strip span { display: inline-block; margin: 0 9px; }
.banner-stack .bs-contact-strip a { color: var(--tcolor); }
.banner-stack .bs-body { padding: 30px 44px; }
.banner-stack .bs-skill-cell {
    display: inline-block;
    width: 46%;
    margin: 0 3% 10px 0;
    vertical-align: top;
}
.banner-stack .bs-skill-name { font-size: 0.8rem; color: #444; display: block; margin-bottom: 4px; }
.banner-stack .bs-two-col { display: table; width: 100%; table-layout: fixed; }
.banner-stack .bs-two-col .block { display: table-cell; vertical-align: top; width: 50%; padding-right: 20px; }
.banner-stack .bs-two-col .block:last-child { padding-right: 0; padding-left: 20px; }

/* ==========================================================================
   12. UNDERLINE MINIMAL
   ========================================================================== */
.underline-minimal .um-header { text-align: center; padding: 44px 40px 24px; }
.underline-minimal h2 { border-bottom: 2px solid var(--tcolor); padding-bottom: 6px; display: inline-block; }
.underline-minimal .um-contact { font-size: 0.8rem; color: #555; margin-top: 10px; }
.underline-minimal .um-contact span { display: inline-block; margin: 0 8px; }
.underline-minimal .um-body { padding: 10px 44px 30px; }

/* ==========================================================================
   13. PHOTO CIRCLE TOP
   ========================================================================== */
.photo-circle-top .pct-header { text-align: center; padding: 46px 40px 26px; }
.photo-circle-top .pct-photo { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; margin: 0 auto 16px; font-size: 2.2rem; border: 3px solid #eee; display: block; }
.photo-circle-top .pct-contact { font-size: 0.8rem; color: #666; margin-top: 12px; }
.photo-circle-top .pct-contact span { display: inline-block; margin: 0 8px; }
.photo-circle-top .pct-body { padding: 10px 44px 30px; }

/* ==========================================================================
   14. TWO-TONE SPLIT
   ========================================================================== */
.two-tone-split .tts-header { display: table; width: 100%; table-layout: fixed; }
.two-tone-split .tts-left { display: table-cell; vertical-align: top; background: var(--tcolor); color: #fff; padding: 36px 32px; width: 50%; }
.two-tone-split .tts-left h1, .two-tone-split .tts-left .role { color: #fff; }
.two-tone-split .tts-right { display: table-cell; vertical-align: top; background: #f4f4f9; padding: 36px 32px; width: 50%; font-size: 0.82rem; color: #555; }
.two-tone-split .tts-right span { display: block; margin-bottom: 8px; }
.two-tone-split .tts-right a { color: var(--tcolor); }
.two-tone-split .tts-two-col { padding: 30px 40px; display: table; width: 100%; table-layout: fixed; }
.two-tone-split .tts-col { display: table-cell; vertical-align: top; width: 50%; padding-right: 20px; }
.two-tone-split .tts-col:last-child { padding-right: 0; padding-left: 20px; }
.two-tone-split .tts-col .block { padding: 0; }

/* ==========================================================================
   15. BOXED SECTIONS (skill grid: table-cell -> inline-block)
   ========================================================================== */
.boxed-sections .bx-header { text-align: center; padding: 40px 40px 20px; }
.boxed-sections .bx-contact { font-size: 0.8rem; color: #666; margin-top: 10px; }
.boxed-sections .bx-contact span { display: inline-block; margin: 0 8px; }
.boxed-sections .bx-body { padding: 20px 40px 30px; }
.boxed-sections .bx-box { border: 1.5px solid #e6e6f0; border-radius: 10px; padding: 20px 22px; margin-bottom: 18px; }
.boxed-sections .bx-skill-card {
    display: inline-block;
    width: 30%;
    margin: 0 3% 8px 0;
    vertical-align: top;
}
.boxed-sections .bx-skill-card > * { background: #f7f7fb; border-radius: 6px; padding: 8px; text-align: center; font-size: 0.8rem; color: #444; }

/* ==========================================================================
   16. FULL TIMELINE
   ========================================================================== */
.full-timeline .ft-header { text-align: center; padding: 46px 40px 26px; }
.full-timeline .ft-photo { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; margin: 0 auto 14px; font-size: 2rem; display: block; }
.full-timeline .ft-contact { font-size: 0.8rem; color: #666; margin-top: 10px; }
.full-timeline .ft-contact span { display: inline-block; margin: 0 8px; }
.full-timeline .ft-body { padding: 10px 44px 30px; }

/* ==========================================================================
   17. MONOGRAM HEADER
   ========================================================================== */
.monogram-header .mh-header { text-align: center; padding: 46px 40px 28px; }
.monogram-header .mh-monogram {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--tcolor);
    color: #fff;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 1px;
    text-align: center;
    margin: 0 auto 16px;
    display: table;
}

.monogram-header .mh-monogram span {
    display: table-cell;
    width: 84px;
    height: 84px;
    vertical-align: middle;
    text-align: center;
    line-height: 1;
}
.monogram-header .mh-contact { font-size: 0.8rem; color: #666; margin-top: 10px; }
.monogram-header .mh-contact span { display: inline-block; margin: 0 8px; }
.monogram-header .mh-body { padding: 10px 44px 30px; }

/* ==========================================================================
   18. SIDE TABS
   ========================================================================== */
.side-tabs { display: table; width: 100%; table-layout: fixed; }
.side-tabs .stb-rail { display: table-cell; vertical-align: top; width: 100px; background: var(--tcolor); }
.side-tabs .stb-tab {
    color: rgba(255,255,255,0.9); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
    padding: 22px 10px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.2);
    line-height: 1.4;
}
.side-tabs .stb-content { display: table-cell; vertical-align: top; padding: 40px 44px 40px 36px; }
.side-tabs .stb-header { margin-bottom: 24px; }
.side-tabs .stb-contact { font-size: 0.8rem; color: #666; margin-top: 8px; }
.side-tabs .stb-contact span { display: inline-block; margin: 0 8px 0 0; }

/* ==========================================================================
   19. NUMBERED SECTIONS
   ========================================================================== */
.numbered-sections .ns-header { padding: 46px 44px 24px; border-bottom: 2px solid #eee; }
.numbered-sections .ns-contact { font-size: 0.8rem; color: #666; margin-top: 10px; }
.numbered-sections .ns-contact span { display: inline-block; margin: 0 8px 0 0; }
.numbered-sections .ns-body { padding: 20px 44px 30px; }
.numbered-sections .ns-block { position: relative; padding-left: 56px; margin-bottom: 26px; min-height: 30px; }
.numbered-sections .ns-num {
    position: absolute; left: 0; top: -4px; font-size: 2rem; font-weight: 800;
    color: var(--tcolor); opacity: 0.25;
}

/* ==========================================================================
   20. TWO-PHOTO HEADER
   ========================================================================== */
.two-photo-header .tph-header { display: table; width: 100%; table-layout: fixed; padding: 30px 40px; }
.two-photo-header .tph-text-cell { display: table-cell; vertical-align: middle; }
.two-photo-header .tph-photo-cell { display: table-cell; vertical-align: middle; width: 100px; text-align: right; }
.two-photo-header .tph-photo-cell img,
.two-photo-header .tph-photo-cell .photo-placeholder {
    width: 90px;
    height: 90px;
    border-radius: 12px;
    object-fit: cover;
    display: inline-block;
    text-align: center;
    line-height: 90px;
    font-size: 24px;
    font-weight: 700;
}
.two-photo-header .tph-contact { font-size: 0.8rem; color: #666; margin-top: 8px; }
.two-photo-header .tph-contact span { display: inline-block; margin: 0 8px 0 0; }
.two-photo-header .tph-body { padding: 10px 44px 30px; }

/* ==========================================================================
   21. UNDERLINE TIMELINE
   ========================================================================== */
.underline-timeline .ut-header { padding: 46px 44px 24px; text-align: center; }
.underline-timeline .ut-contact { font-size: 0.8rem; color: #666; margin-top: 10px; }
.underline-timeline .ut-contact span { display: inline-block; margin: 0 8px; }
.underline-timeline .ut-body { padding: 10px 44px 30px; }
.underline-timeline .ut-entry { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #eee; }
.underline-timeline .ut-daterange {
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--tcolor); text-decoration: underline; margin-bottom: 4px;
}

/* ==========================================================================
   PDF-safe full-height sidebars (dompdf pagination fix)
   ========================================================================== */

.is-pdf .modern-sidebar .side-block h4 {
    margin-bottom: 8px !important;
}

.is-pdf .modern-sidebar .side-tags {
    margin: 0 !important;
    padding: 0 !important;
}

.is-pdf .modern-sidebar .side-tags li {
    display: inline-block !important;
    vertical-align: middle !important;
    padding: 5px 11px !important;
    margin: 0 5px 5px 0 !important;
    line-height: 1.2 !important;
}
.is-pdf .side-tabs {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.is-pdf .modern-sidebar { display: block; }
.is-pdf .left-rail-icons { display: block; }
.is-pdf .dark-sidebar-icons .dsi-table {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
}
.is-pdf .timeline-sidebar .tls-table {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
}

.is-pdf .modern-sidebar .side {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 100%;
    padding: 40px 26px;
    background: var(--tcolor);
    display: block;
}

.is-pdf .modern-sidebar .main {
    display: block;
    margin-left: 292px;
    width: auto;
}
/* ==========================================================================
   MODERN SIDEBAR - PDF / DOMPDF AVATAR
   ========================================================================== */

.is-pdf .modern-sidebar .side-photo {
    width: 100%;
    height: 110px;
    margin: 0 0 24px 0;
    padding: 0;
    text-align: center;
    box-sizing: border-box;
}

.is-pdf .modern-sidebar .side-photo img {
    display: block !important;
    width: 110px !important;
    height: 110px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.4);
    box-sizing: border-box;
}

.is-pdf .modern-sidebar .side-photo .photo-placeholder {
    display: table !important;
    width: 110px !important;
    height: 110px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.15);
    box-sizing: border-box;
    text-align: center;
    line-height: normal !important;
}

.is-pdf .modern-sidebar .side-photo .photo-placeholder span {
    display: table-cell !important;
    width: 110px;
    height: 110px;
    padding: 0;
    margin: 0;
    text-align: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

.is-pdf .left-rail-icons {
    display: block;
    width: 100%;
}

.is-pdf .left-rail-icons {
    display: block;
    width: 100%;
}

.is-pdf .left-rail-icons .lr-rail {
    position: fixed;
    top: 0;
    left: 0;
    width: 225px;
    height: 100%;
    padding: 40px 24px;
    background: #f7f7fb;
    display: block;
    border-right: 3px solid var(--tcolor);
    box-sizing: border-box;
}

.is-pdf .left-rail-icons .lr-main {
    display: block;
    margin-left: 276px;
    width: auto;
    padding: 40px 40px 40px 36px;
    box-sizing: border-box;
}
.is-pdf .left-rail-icons .lr-initial {
    width: 56px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    margin-bottom: 16px;
}
.is-pdf .dark-sidebar-icons .dsi-side {
    position: static !important;
    display: table-cell !important;
    vertical-align: top !important;
    width: 34% !important;
    background: #1a1a1a !important;
    color: #fff !important;
    padding: 40px 26px !important;
}

.is-pdf .dark-sidebar-icons .dsi-main {
    display: table-cell !important;
    vertical-align: top !important;
    width: 66% !important;
    padding: 40px 44px !important;
    margin-left: 0 !important;
}

.is-pdf .timeline-sidebar .tls-side {
    box-sizing: border-box !important;
    width: 225px !important;
    padding: 40px 24px !important;
}
.is-pdf .timeline-sidebar .tls-main {
    display: table-cell !important;
    vertical-align: top !important;
    width: 70% !important;
    padding: 40px 44px !important;
    margin-left: 0 !important;
}

.is-pdf .side-tabs .stb-rail {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;

    width: 100px !important;
    height: 100% !important;

    display: block !important;
    background: var(--tcolor) !important;
}

.is-pdf .side-tabs .stb-content {
    display: block !important;

    margin: 0 0 0 100px !important;

    width: calc(100% - 100px) !important;

    padding: 40px 44px 40px 36px !important;

    background: #fff !important;
}
.is-pdf .dark-sidebar-icons .dsi-photo {
    width: 110px !important;
    height: 110px !important;
    display: table !important;
    line-height: normal !important;

}

.is-pdf .dark-sidebar-icons .dsi-photo span {
    display: table-cell !important;
    width: 110px !important;
    height: 110px !important;
    vertical-align: middle !important;
    text-align: center !important;
    line-height: 1 !important;
}
.is-pdf .timeline-sidebar .tls-photo {
    display: block !important;
    width: 100px !important;
    height: 100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 16px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}
.is-pdf .timeline-sidebar .tls-photo span {
    display: table-cell !important;
    width: 100px !important;
    height: 100px !important;
    text-align: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}



/* CONTACT + LANGUAGES LEFT */
.is-pdf .timeline-sidebar .tls-block {
    text-align: left !important;
}

.is-pdf .timeline-sidebar .tls-line {
    text-align: left !important;
}
.is-pdf .split-banner .sb-photo.photo-placeholder { line-height: 88px !important; }

.is-pdf .minimal-timeline .mt-photo { line-height: 78px !important; }

.is-pdf .full-timeline .ft-photo { line-height: 78px !important; }

.is-pdf .creative-header .ch-photo { line-height: 88px !important; }

.is-pdf .monogram-header .mh-monogram {
    line-height: normal !important;
    display: table !important;
    text-align: center;
}
.is-pdf .monogram-header .mh-monogram span {
    display: table-cell;
    vertical-align: middle;
}
.minimal-timeline .mt-photo.photo-placeholder { line-height: 90px; }
.full-timeline .ft-photo.photo-placeholder { line-height: 90px; }
.creative-header .ch-photo.photo-placeholder { line-height: 94px; }

/* ==========================================================================
   Print / PDF specific
   ========================================================================== */
@media print {
    body { background: #fff; }
    .preview-toolbar { display: none; }
    .resume { box-shadow: none; }
    .resume-page-wrap { margin: 0; max-width: 100%; }
}
.is-pdf .two-photo-header .tph-header {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
    padding: 30px 40px !important;
}

.is-pdf .two-photo-header .tph-text-cell {
    display: table-cell !important;
    vertical-align: middle !important;
    width: 85% !important;
}

.is-pdf .two-photo-header .tph-photo-cell {
    display: table-cell !important;
    vertical-align: middle !important;
    width: 15% !important;
    text-align: right !important;
    padding: 0 !important;
}
.monogram-header .mh-photo {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto 16px;
}
.is-pdf .monogram-header .mh-header {
    text-align: center !important;
}

.is-pdf .monogram-header .mh-photo {
    display: inline-block !important;
    width: 84px !important;
    height: 84px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    
    /* Important: don't use auto margins in DomPDF */
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    
    vertical-align: top !important;
}
.left-rail-icons .lr-photo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 0 16px 0;
}
.is-pdf .two-photo-header .tph-photo-cell img {
   display: block !important;
    width: 90px !important;
    height: 90px !important;
    max-width: 90px !important;
    max-height: 90px !important;
    margin: 0 0 0 auto !important;
    object-fit: cover !important;
}

.is-pdf .two-photo-header .tph-photo-cell .photo-placeholder {
    display: table !important;
    width: 90px !important;
    height: 90px !important;
    margin: 0 0 0 auto !important;
    text-align: center !important;
    line-height: 90px !important;
}
.timeline-sidebar .tls-photo-wrap {
    width: 100%;
    text-align: center;
    margin: 0 0 16px 0;
    padding: 0;
}

.timeline-sidebar .tls-photo-wrap .tls-photo {
    display: inline-block !important;
    width: 100px !important;
    height: 100px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    vertical-align: top;
}

/* Keep text LEFT aligned */
.timeline-sidebar .tls-side {
    text-align: left;
}

/* Name and role stay centered */
.timeline-sidebar .tls-side h1,
.timeline-sidebar .tls-side .role {
    text-align: center;
}


@media (max-width: 700px) {
    .resume.modern-sidebar { display: block; }
    .modern-sidebar .side, .modern-sidebar .main { display: block; width: 100%; padding: 28px 22px; }
    .classic-two-col .ctc-header, .classic-two-col .ctc-body,
    .creative-header .ch-two-col, .corporate-clean .cc-header, .corporate-clean .cc-two-col,
    .elegant-serif .es-two-col, .bold-block .bb-header, .bold-block .bb-two-col,
    .split-banner .sb-header-table, .split-banner .sb-two-col-table, .banner-stack .bs-two-col,
    .two-tone-split .tts-header, .two-tone-split .tts-two-col,
    .compact-grid .cg-grid, .left-rail-icons, .minimal-timeline .mt-two-col {
        display: block;
    }
    .classic-two-col .ctc-header-text, .classic-two-col .ctc-header-contact,
    .classic-two-col .ctc-col, .creative-header .ch-two-col .block,
    .corporate-clean .cc-header > div, .corporate-clean .cc-contact, .corporate-clean .cc-two-col .block,
    .elegant-serif .es-two-col .block, .bold-block .bb-photo, .bold-block .bb-header-text,
    .bold-block .bb-two-col .bb-block, .split-banner .sb-header-left, .split-banner .sb-header-right,
    .split-banner .sb-two-col-cell, .banner-stack .bs-two-col .block,
    .two-tone-split .tts-left, .two-tone-split .tts-right, .two-tone-split .tts-col,
    .compact-grid .cg-main, .compact-grid .cg-side, .left-rail-icons .lr-rail, .left-rail-icons .lr-main,
    .minimal-timeline .mt-two-col > div {
        display: block; width: 100% !important; padding-left: 22px !important; padding-right: 22px !important;
    }
    .classic-two-col .ctc-header-contact { text-align: left; }
    .classic-two-col .ctc-col-left { border-right: none; border-bottom: 1px solid #eee; padding-bottom: 20px; }
    .corporate-clean .cc-contact { text-align: left; }
    .corporate-clean .cc-skill-item { width: 100%; margin-right: 0; }
    .split-banner .sb-header-right { text-align: left; margin-top: 16px; }
    .split-banner .sb-highlight-item { display: block; width: 100%; border-right: none; border-bottom: 1px solid #e2e2ee; }
    .compact-grid .cg-main { border-right: none; }
    .left-rail-icons .lr-rail { border-right: none; border-bottom: 3px solid var(--tcolor); }
    .banner-stack .bs-skill-cell, .boxed-sections .bx-skill-card { width: 100%; margin-right: 0; }
    .block, .corporate-clean .cc-two-col { padding-left: 22px; padding-right: 22px; }
}
/* ==========================================================================
   21. DUAL SKILLS (Nick Koe style)
   ========================================================================== */
.dual-skills .ds-header {
    display: table; width: 100%; table-layout: fixed;
    padding: 40px 44px 20px; border-bottom: 3px solid var(--tcolor);
}
.dual-skills .ds-header > div:first-child { display: table-cell; vertical-align: top; }
.dual-skills .ds-header .role { color: var(--tcolor); font-weight: 600; }
.dual-skills .ds-contact { display: table-cell; vertical-align: top; text-align: right; font-size: 0.8rem; color: #666; width: 220px; }
.dual-skills .ds-contact div { margin-bottom: 4px; }
.dual-skills > .block { padding: 0 44px; margin-top: 20px; }
.dual-skills .ds-two-col-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.dual-skills .ds-main-cell { vertical-align: top; width: 62%; padding: 0 24px 30px 44px; }
.dual-skills .ds-side-cell { vertical-align: top; width: 38%; padding: 0 44px 30px 24px; border-left: 1px solid #eee; }

/* ==========================================================================
   22. DARK SIDEBAR ICONS (Saritha style)
   ========================================================================== */
.dark-sidebar-icons .dsi-table { width: 100%; border-collapse: collapse; }
.dark-sidebar-icons .dsi-side {
    display: table-cell; vertical-align: top; width: 34%;
    background: #1a1a1a; color: #fff; padding: 40px 26px;
}
.dark-sidebar-icons .dsi-photo {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    display: table !important;
    margin-bottom: 24px;
    padding: 0 !important;
    text-align: center !important;
    font-size: 2rem;
    font-weight: 700;
    background: var(--tcolor);
    color: #fff;
    line-height: normal !important;
    box-sizing: border-box;
}

.dark-sidebar-icons .dsi-photo span {
    display: table-cell !important;
    width: 110px;
    height: 110px;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}
.dark-sidebar-icons .dsi-block { margin-bottom: 26px; }
.dark-sidebar-icons .dsi-block h4 {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
    opacity: 0.75; margin-bottom: 10px; font-weight: 700;
}
.dark-sidebar-icons .dsi-list { font-size: 0.82rem; list-style: none; padding: 0; margin: 0; }
.dark-sidebar-icons .dsi-list li { margin-bottom: 8px; opacity: 0.95; word-break: break-word; }
.dark-sidebar-icons .dsi-list a { color: #fff; text-decoration: underline; }
.dark-sidebar-icons .dsi-main { display: table-cell; vertical-align: top; width: 66%; padding: 40px 44px; }
.dark-sidebar-icons .dsi-main .role { color: var(--tcolor); font-weight: 600; }

/* ==========================================================================
   23. BOLD HEADER BULLETS (Hannah Scott style)
   ========================================================================== */
.bold-header-bullets .bhb-header { background: #1e293b; color: #fff; padding: 36px 44px; }
.bold-header-bullets .bhb-contact { margin-top: 8px; font-size: 0.85rem; opacity: 0.9; }
.bold-header-bullets .bhb-contact span { display: inline-block; margin-right: 16px; }
.bold-header-bullets .bhb-body { padding: 30px 44px; }
.bold-header-bullets .bhb-body .block { margin-top: 24px; }
.bold-header-bullets .bhb-icon { color: var(--tcolor); margin-right: 8px; }
.bold-header-bullets .bhb-list { list-style: none; padding: 0; margin: 0; }
.bold-header-bullets .bhb-list li { padding: 6px 0 6px 18px; position: relative; border-bottom: 1px dashed #eee; }
.bold-header-bullets .bhb-list li::before { content: '\2022'; color: var(--tcolor); position: absolute; left: 0; }

/* ==========================================================================
   24. TIMELINE SIDEBAR (Sherlock Holmes style)
   ========================================================================== */
.timeline-sidebar .tls-table { width: 100%; border-collapse: collapse; }
.timeline-sidebar .tls-side {
    display: table-cell; vertical-align: top; width: 30%;
    background: #f7f7fb; color: #1a1a1a; padding: 40px 24px;
    border-right: 3px solid var(--tcolor);
}
.timeline-sidebar .tls-photo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    display: table;
    margin: 0 auto 16px;
    padding: 0;
    text-align: center;
    font-size: 1.8rem;
    background: var(--tcolor);
    color: #fff;
    box-sizing: border-box;
}

.timeline-sidebar .tls-photo span {
    display: table-cell;
    width: 100px;
    height: 100px;
    text-align: center;
    vertical-align: middle;
    line-height: 1;
}
.timeline-sidebar .tls-side h1 { font-size: 1.3rem;  }
.timeline-sidebar .tls-side .role { text-align: center; font-size: 0.85rem; color: var(--tcolor); font-weight: 600; }
.timeline-sidebar .tls-block { margin-top: 22px; }
.timeline-sidebar .tls-block h4 {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--tcolor); margin-bottom: 8px; font-weight: 700;
}
.timeline-sidebar .tls-line { font-size: 0.82rem; margin-bottom: 6px; word-break: break-word; }
.timeline-sidebar .tls-main { display: table-cell; vertical-align: top; width: 70%; padding: 40px 44px; }
.timeline-sidebar .tls-timeline { border-left: 2px solid var(--tcolor); padding-left: 20px; }
.timeline-sidebar .tls-timeline-item { position: relative; margin-bottom: 20px; }
.timeline-sidebar .tls-timeline-item::before {
    content: ''; position: absolute; left: -25px; top: 4px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--tcolor);
}

/* ==========================================================================
   25. CREATIVE BADGE (Joshua Freedman style)
   ========================================================================== */
.creative-badge .cb-header {
    display: table; width: 100%; table-layout: fixed;
    background: var(--tcolor); color: #fff; padding: 36px 44px;
}
.creative-badge .cb-header-text { display: table-cell; vertical-align: middle; }
.creative-badge .cb-header h1 { color: #fff; }
.creative-badge .cb-badge {
    display: inline-block; background: #fff; color: var(--tcolor);
    font-weight: 700; font-size: 0.8rem; text-transform: uppercase;
    letter-spacing: 0.05em; padding: 6px 14px; border-radius: 4px; margin-top: 8px;
}
.creative-badge .cb-photo-cell {
    display: table-cell;
    vertical-align: middle;
    width: 100px;
    text-align: right;
    float: none;
}
.is-pdf .creative-badge .cb-header {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
}

.is-pdf .creative-badge .cb-header-text {
    display: table-cell !important;
    vertical-align: middle !important;
    width: auto !important;
}

.is-pdf .creative-badge .cb-photo-cell {
    display: table-cell !important;
    vertical-align: middle !important;
    width: 100px !important;
    text-align: right !important;
    float: none !important;
}

.is-pdf .creative-badge .cb-photo {
    display: block !important;
    width: 100px !important;
    height: 100px !important;
    margin: 0 0 0 auto !important;
}
.creative-badge .cb-photo {
    display: block; margin: 0 auto; overflow: hidden;
    width: 100px; height: 100px; border-radius: 50%;
    background-color: rgba(255,255,255,0.25);
    background-size: cover; background-position: center;
    border: 3px solid #fff;
}
.creative-badge .cb-photo span {
    display: block; width: 100%; height: 100%;
    text-align: center; line-height: 70px; font-size: 1.8rem; color: #fff;
}
.creative-badge .cb-body { padding: 22px 44px; }
/* Emoji icons (graduation cap/star/trophy) don't render in dompdf's fonts —
   showed as "?" boxes in the PDF. Tested fix: a plain CSS-drawn dot,
   matching the existing "dot markers, not emoji" pattern already used by
   left-rail-icons elsewhere in this file. */
.creative-badge .cb-icon { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--tcolor); margin-right: 6px;}

/* Two-column table layout removed — dompdf's multi-page table pagination
   was unreliable (blank-gap or displaced-column depending on cell order).
   Content now stacks in a single column using the shared .block class,
   which paginates reliably like every other single-column template. */

.creative-badge .cb-footer {
    border-top: 1px solid #eee; padding: 16px 44px; font-size: 0.8rem; color: #666;
}
.creative-badge .cb-footer span { display: inline-block; margin-right: 20px; }

/* page-break-after:avoid (h2) and page-break-inside:avoid (.entry) are now
   applied globally near the top of this file, covering every template. */
.creative-badge .block { margin-top: 20px; }
.creative-badge .entry { margin-bottom: 20px; }