/* ==========================================================================
   MEET THE ENGINEER BEHIND THE DESK - /meet-the-engineer
   Black and orange, like Max's mock-up. Prints on ONE A4 page.
   ========================================================================== */

.eng-page{
    --eng-orange:#ff6b00;
    --eng-ink:#111;
    --eng-line:#e4e4e4;
    --eng-cond:'Oswald', 'Arial Narrow', Arial, sans-serif;
    background:#fff;
    color:var(--eng-ink);
}

.eng-wrap{ max-width:1100px; margin:0 auto; padding:0 24px; box-sizing:border-box; }

/* ---- header: name over a stage photo ---- */
.eng-hero{
    color:#fff;
    background:
        linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.75) 55%, rgba(0,0,0,.45) 100%),
        url('images/services/festivals.webp') center 40% / cover no-repeat #000;
    padding:calc(var(--sg-nav-height, 88px) + 40px) 0 34px;
    border-bottom:6px solid var(--eng-orange);
}

.eng-hero-inner{
    display:grid;
    grid-template-columns:1fr auto;
    gap:30px;
    align-items:end;
}

.eng-kicker{
    font-family:var(--sg-font-accent);
    font-size:.78rem;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--eng-orange);
    margin:0 0 10px;
}

.eng-name{
    font-family:var(--eng-cond);
    font-weight:700;
    font-size:clamp(3.4rem, 9vw, 6.2rem);
    line-height:.88;
    text-transform:uppercase;
    margin:0;
}

.eng-name span{ display:block; color:var(--eng-orange); }

.eng-role{
    font-family:var(--eng-cond);
    font-weight:500;
    font-size:1.15rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    margin:14px 0 4px;
}

.eng-tags{ font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:#bbb; margin:0; }

.eng-contact{ list-style:none; padding:0; margin:0; display:grid; gap:8px; font-size:.98rem; }
.eng-contact li{ padding-left:14px; border-left:3px solid var(--eng-orange); }
.eng-contact a{ color:#fff; text-decoration:none; }
.eng-contact a:hover{ color:var(--eng-orange); }

/* ---- body ---- */
.eng-main{ padding-top:30px; padding-bottom:40px; }

.eng-intro{ font-size:1.12rem; line-height:1.6; max-width:820px; margin:0 0 20px; }

.eng-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px; }

.eng-btn{
    font:bold .9rem var(--sg-font);
    letter-spacing:.05em;
    text-transform:uppercase;
    color:#fff;
    background:var(--eng-orange);
    border:2px solid var(--eng-orange);
    border-radius:999px;
    padding:12px 22px;
    text-decoration:none;
    cursor:pointer;
}

.eng-btn-ghost{ background:transparent; color:var(--eng-ink); border-color:var(--eng-ink); }

.eng-sec{ margin-top:34px; }

.eng-h2{
    font-family:var(--eng-cond);
    font-weight:700;
    font-size:1.6rem;
    text-transform:uppercase;
    margin:0 0 12px;
    display:flex;
    align-items:center;
    gap:12px;
}

.eng-h2::before{ content:""; width:28px; height:4px; background:var(--eng-orange); flex:none; }

.eng-p{ line-height:1.55; margin:0 0 14px; max-width:820px; }

/* credits table */
.eng-credits{ width:100%; border-collapse:collapse; font-size:.95rem; }
.eng-credits tbody{ border-top:1px solid var(--eng-line); }
.eng-credits th{
    font-family:var(--eng-cond);
    font-size:1.5rem;
    color:#9a9a9a;
    text-align:left;
    vertical-align:top;
    width:80px;
    padding:8px 0;
}
.eng-credits td{ padding:5px 10px 5px 0; }
.eng-credits td:first-of-type{ font-weight:bold; }
.eng-credits td:nth-of-type(2){ color:#444; }
.eng-credits td:nth-of-type(3){ color:#666; }

.eng-cols3{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px; }
.eng-cols3 h3{ font-family:var(--eng-cond); text-transform:uppercase; color:var(--eng-orange); margin:0 0 6px; font-size:1.05rem; }
.eng-cols3 ul{ list-style:none; padding:0; margin:0; display:grid; gap:4px; }
.eng-skills .eng-h2{ font-size:1.25rem; }

.eng-strip{
    background:#000;
    color:#fff;
    font-family:var(--eng-cond);
    letter-spacing:.16em;
    text-transform:uppercase;
    font-size:.85rem;
    padding:16px 0;
    border-top:4px solid var(--eng-orange);
}

@media screen and (max-width:760px){
    .eng-hero-inner{ grid-template-columns:1fr; }
    .eng-cols3{ grid-template-columns:1fr; }
    .eng-credits{ font-size:.85rem; }
    .eng-credits th{ width:54px; font-size:1.15rem; }
    .eng-credits td:nth-of-type(3){ display:none; }
}

/* ==========================================================================
   PRINT - one A4 page for a production manager's desk
   ========================================================================== */
@media print{
    @page{ size:A4; margin:0; }
    html, body.eng-page{ -webkit-print-color-adjust:exact; print-color-adjust:exact; font-size:9pt; margin:0; }
    #navbar, #footer, .navbar, .footer, .eng-actions{ display:none !important; }

    .eng-wrap{ max-width:none; padding:0 12mm; }
    .eng-hero{ padding:10mm 0 6mm; border-bottom-width:2mm; }
    .eng-name{ font-size:44pt; }
    .eng-role{ font-size:11pt; margin:3mm 0 1mm; }
    .eng-tags{ font-size:7pt; }
    .eng-kicker{ font-size:7pt; margin-bottom:2mm; }
    .eng-contact{ font-size:9pt; gap:1.5mm; }

    .eng-main{ padding-top:5mm; padding-bottom:4mm; }
    .eng-intro{ font-size:9.5pt; line-height:1.45; margin:0 0 2mm; max-width:none; }
    .eng-sec{ margin-top:5mm; break-inside:avoid; }
    .eng-h2{ font-size:13pt; margin-bottom:2mm; }
    .eng-h2::before{ width:7mm; height:1mm; }
    .eng-p{ font-size:9pt; margin-bottom:2mm; max-width:none; }

    .eng-credits{ font-size:8.3pt; }
    .eng-credits th{ font-size:12pt; width:16mm; padding:1.2mm 0; }
    .eng-credits td{ padding:.7mm 3mm .7mm 0; }

    .eng-cols3{ gap:6mm; }
    .eng-cols3 h3{ font-size:9.5pt; margin-bottom:1mm; }
    .eng-cols3 ul{ gap:.6mm; font-size:8.5pt; }
    .eng-skills .eng-h2{ font-size:11pt; }

    .eng-strip{ position:fixed; bottom:0; left:0; right:0; font-size:7.5pt; padding:3.5mm 0; border-top-width:1mm; }
}

/* ---- photo spots (placeholders until Max adds real photos) ---- */
.eng-photo{
    display:grid;
    place-items:center;
    aspect-ratio:4 / 3;
    width:100%;
    object-fit:cover;
    border-radius:6px;
    background:repeating-linear-gradient(135deg, #1b1b1b 0 14px, #222 14px 28px);
    color:#aaa;
    font-size:.8rem;
    text-align:center;
    padding:10px;
    box-sizing:border-box;
}
.eng-photo span{ border:1px dashed #555; padding:6px 10px; border-radius:4px; }
.eng-photos{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-top:24px; }
.eng-studio{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); gap:22px; align-items:start; }

@media screen and (max-width:760px){ .eng-studio{ grid-template-columns:1fr; } .eng-photos{ grid-template-columns:1fr 1fr; } }

@media print{
    .eng-photos{ gap:3mm; margin-top:4mm; }
    .eng-photos .eng-photo{ aspect-ratio:16 / 9; }
    .eng-photo{ font-size:7pt; padding:2mm; }
    .eng-studio{ gap:5mm; }
}

/* ==========================================================================
   LAYOUT like the mock-up: credits + studio left, photos right, skills
   across the bottom. Same on screen and on the A4 page.
   ========================================================================== */
.eng-layout{
    display:grid;
    grid-template-columns:minmax(0, 1.65fr) minmax(0, 1fr);
    grid-template-areas:
        "intro   intro"
        "actions actions"
        "credits photos"
        "studio  photos"
        "skills  skills";
    column-gap:30px;
    align-items:start;
}
.eng-a-intro{ grid-area:intro; }
.eng-a-actions{ grid-area:actions; }
.eng-a-credits{ grid-area:credits; }
.eng-a-photos{ grid-area:photos; grid-template-columns:1fr !important; margin-top:34px !important; }
.eng-a-studio{ grid-area:studio; }
.eng-a-skills{ grid-area:skills; }
.eng-studio{ grid-template-columns:1fr !important; }
.eng-photo{ background:#262626; }
.eng-photo span{ color:#bbb; }
.eng-credits td:nth-of-type(3){ display:table-cell; }

@media screen and (max-width:760px){
    .eng-layout{ grid-template-columns:1fr; grid-template-areas:"intro" "actions" "credits" "photos" "studio" "skills"; }
    .eng-a-photos{ grid-template-columns:1fr 1fr !important; }
    .eng-credits td:nth-of-type(3){ display:none; }
}

@media print{
    .eng-layout{ grid-template-columns:1.7fr 1fr; column-gap:7mm; }
    .eng-a-photos{ margin-top:5mm !important; gap:3mm !important; }
    .eng-a-photos .eng-photo{ aspect-ratio:4 / 3 !important; }
    .eng-credits{ font-size:7.8pt; }
    .eng-credits th{ font-size:10.5pt; width:12mm; padding:.8mm 0; }
    .eng-credits td{ padding:.35mm 2mm .35mm 0; }
    .eng-sec{ margin-top:4mm; }
    .eng-a-skills{ margin-top:5mm; }
    .eng-cols3 ul{ font-size:8pt; gap:.3mm; }
    .eng-main{ padding-bottom:14mm; }
}

/* header: photo + a solid dark layer (prints reliably, unlike a gradient) */
.eng-hero{ position:relative; background:#000 url('images/services/festivals.webp') center 40% / cover no-repeat; }
.eng-hero::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.72); }
.eng-hero > *{ position:relative; }

@media print{
    .eng-a-photos .eng-photo{ aspect-ratio:2 / 1 !important; }
    .eng-a-photos{ margin-top:4mm !important; gap:2.5mm !important; }
    .eng-layout{ grid-template-areas:
        "intro   intro"
        "actions actions"
        "credits photos"
        "studio  studio"
        "skills  skills" !important; }
    .eng-a-studio .eng-cols3{ grid-template-columns:repeat(3, 1fr); }
}
@media print{
    .eng-hero{ padding:7mm 0 5mm !important; }
    .eng-name{ font-size:38pt !important; }
    .eng-role{ margin:2mm 0 .5mm !important; font-size:10pt !important; }
    .eng-a-photos .eng-photo{ aspect-ratio:2.9 / 1 !important; }
    .eng-main{ padding-top:4mm !important; padding-bottom:12mm !important; }
    .eng-sec{ margin-top:3.5mm !important; }
    .eng-a-studio .eng-p{ margin-bottom:1.5mm; }
    .eng-cols3 h3{ margin-bottom:.5mm !important; }
}
@media print{
    .eng-layout{ grid-template-columns:minmax(0, 1.75fr) minmax(0, 1fr) !important; }
    .eng-a-photos .eng-photo{ aspect-ratio:auto !important; height:27mm; }
}
@media print{
    .eng-sec, .eng-layout{ break-inside:auto !important; }
    .eng-a-photos .eng-photo:nth-child(4){ display:none; }
    .eng-a-photos .eng-photo{ height:32mm; }
    .eng-credits tbody{ break-inside:avoid; }
}
.eng-acts{ display:block; font-weight:normal; color:#777; font-size:.8em; line-height:1.3; margin-top:1px; }
@media print{ .eng-acts{ font-size:6.8pt; } }
/* fixed column widths, so a long act list never squeezes role / place */
.eng-credits{ table-layout:fixed; }
.eng-credits td:nth-of-type(1){ width:50%; }
.eng-credits td:nth-of-type(2){ width:22%; white-space:nowrap; }
.eng-credits td:nth-of-type(3){ width:28%; white-space:nowrap; }
@media screen and (max-width:760px){ .eng-credits td:nth-of-type(1){ width:62%; } .eng-credits td:nth-of-type(2){ width:38%; } }
@media print{
    /* one A4: studio moves up into the right column under two photos */
    .eng-layout{ grid-template-areas:
        "intro   intro"
        "actions actions"
        "credits photos"
        "credits studio"
        "skills  skills" !important;
        grid-template-rows:auto auto auto 1fr auto; }
    .eng-a-photos .eng-photo:nth-child(n+3){ display:none !important; }
    .eng-a-photos .eng-photo{ height:30mm !important; }
    .eng-a-studio{ margin-top:4mm !important; }
    .eng-a-studio .eng-p{ font-size:8pt !important; line-height:1.35; }
    .eng-a-studio .eng-cols3{ grid-template-columns:1fr 1fr !important; gap:2mm 4mm !important; }
    .eng-a-studio .eng-cols3 ul{ font-size:7.6pt; }
}
@media print{
    .eng-hero{ padding:6mm 0 4mm !important; }
    .eng-name{ font-size:34pt !important; }
    .eng-main{ padding-top:3mm !important; padding-bottom:11mm !important; }
    .eng-intro{ font-size:8.8pt !important; line-height:1.4 !important; }
    .eng-credits td{ padding:.2mm 2mm .2mm 0 !important; }
    .eng-acts{ font-size:6.4pt !important; line-height:1.2 !important; }
    .eng-a-skills{ margin-top:3mm !important; }
    .eng-a-skills .eng-h2{ font-size:10pt !important; margin-bottom:1mm !important; }
    .eng-a-skills ul{ font-size:7.6pt !important; gap:0 !important; }
}
@media print{ .eng-generic{ display:none; } }

/* website: the credits list scrolls in its own box as it grows (Max, 15 Oct 2026).
   On paper it is printed in full. */
@media screen{
    .eng-credits-scroll{
        max-height:560px;
        overflow-y:auto;
        border-bottom:1px solid var(--eng-line);
        scrollbar-color:var(--eng-orange) #eee;
        padding-right:6px;
    }
    .eng-credits thead, .eng-credits th{ background:#fff; }
    .eng-scroll-hint{ font-size:.8rem; color:#888; margin:6px 0 0; }
}
@media print{ .eng-scroll-hint{ display:none; } }
@media print{
    /* one A4 again: skills move up into the right column (one photo on paper) */
    .eng-layout{ grid-template-areas:
        "intro   intro"
        "actions actions"
        "credits photos"
        "credits studio"
        "credits skills" !important;
        grid-template-rows:auto auto auto auto 1fr !important; }
    .eng-a-photos .eng-photo:nth-child(n+2){ display:none !important; }
    .eng-a-skills{ grid-template-columns:1fr 1fr !important; gap:3mm 4mm !important; margin-top:4mm !important; }
    .eng-a-skills > div:nth-child(2){ grid-column:2; grid-row:1 / span 2; }
    .eng-a-skills .eng-h2{ font-size:9.5pt !important; }
    .eng-a-skills ul{ font-size:7.4pt !important; }
}
@media print{
    /* act lists: max two lines each on paper (the website shows them in full) */
    .eng-acts{ display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
}
@media print{
    /* full act lists again now the credits are trimmed (Max, 15 Oct 2026) */
    .eng-acts{ display:block !important; -webkit-line-clamp:unset; overflow:visible; font-size:6.8pt !important; line-height:1.25 !important; }
    .eng-credits td{ padding:.6mm 2mm .6mm 0 !important; }
}
@media print{
    .eng-acts{ font-size:6.4pt !important; line-height:1.2 !important; }
    .eng-credits td{ padding:.3mm 2mm .3mm 0 !important; }
    .eng-intro{ margin-bottom:0 !important; }
    .eng-a-credits{ margin-top:3mm !important; }
}