/* CV page - A4 sheet adapted from CV_Adam_Kharfi.html.
   Everything is scoped under .cv-sheet so it doesn't clash with the site template (style.css). */

/* =========================================================
   1. QUICK SETTINGS
   ========================================================= */
.cv-sheet{
  --sidebar-bg:    #1b2532;   /* left column background */
  --sidebar-text:  #e8edf3;
  --sidebar-muted: #9fb0c2;
  --accent:        #2f80ed;   /* blue: titles, links */
  --aws:           #e8a33d;   /* orange from the compass logo */
  --text:          #1f2933;
  --muted:         #5f6c7b;
  --tag-bg:        #eef2f7;
  --tag-text:      #2d3e50;
  --sidebar-width: 68mm;
  --base-size:     8pt;       /* lower it if the text overflows the A4 page when printing */
}

/* =========================================================
   2. PAGE AROUND THE SHEET
   ========================================================= */
/* --cv-zoom scales the whole A4 sheet up on wide screens (screen only; print stays A4). */
.cv-stage{--cv-zoom:1; padding:150px 16px 100px; background:#000;}
@media screen and (min-width:1000px){ .cv-stage{--cv-zoom:1.2;} }
@media screen and (min-width:1200px){ .cv-stage{--cv-zoom:1.35;} }
@media screen and (min-width:1500px){ .cv-stage{--cv-zoom:1.5;} }
.cv-toolbar{
  max-width:calc(210mm * var(--cv-zoom)); margin:0 auto 40px; display:flex; justify-content:space-between; align-items:flex-end;
  gap:20px; flex-wrap:wrap;
}
.cv-toolbar h1{font-size:clamp(56px,8vw,120px); font-weight:700; letter-spacing:-.065em; line-height:.86; margin-top:10px; --rise:.6em; --step:40ms; --delay:100ms;}
.cv-toolbar .actions{display:flex; gap:10px; flex-wrap:wrap;}

/* =========================================================
   3. THE SHEET
   ========================================================= */
.cv-sheet *{box-sizing:border-box; margin:0; padding:0;}
.cv-sheet{
  width:210mm; max-width:100%; min-height:297mm; margin:0 auto; background:#fff;
  zoom:var(--cv-zoom, 1);
  display:grid; grid-template-columns:var(--sidebar-width) 1fr;
  overflow:hidden; box-shadow:0 4px 24px rgba(0,0,0,.18); border-radius:2px;
  font-family:'Inter','Segoe UI',Arial,sans-serif; font-weight:400; letter-spacing:normal;
  font-size:var(--base-size); line-height:1.36; color:var(--text);
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.cv-sheet a{color:var(--accent); text-decoration:none;}
.cv-sheet a:hover{text-decoration:underline;}

/* Icons (embedded images live in css/cv-icons.css) */
.cv-sheet .ico{
  display:inline-block; width:14px; height:14px; flex-shrink:0;
  background-position:center; background-size:contain; background-repeat:no-repeat; vertical-align:-2px;
}

/* ---------- Left column ---------- */
.cv-sheet .sidebar{background:var(--sidebar-bg); color:var(--sidebar-text); padding:7mm 5.5mm 5mm;}
.cv-sheet .photo{
  width:28mm; height:28mm; margin:0 auto 3mm; border-radius:10px;
  border:2px solid var(--accent); overflow:hidden; background:#2c3e50;
  display:flex; align-items:center; justify-content:center;
  font-size:22pt; font-weight:700; color:#fff;
}
.cv-sheet .photo img{width:100%; height:100%; object-fit:cover;}
.cv-sheet .summary{font-size:7.9pt; line-height:1.45;}
.cv-sheet .summary b{color:#8ec2ff; font-weight:600;}
.cv-sheet .summary .goal{
  display:block; margin-top:2mm; padding:1.5mm 2mm; border-left:2px solid var(--aws);
  background:rgba(232,163,61,.08); color:#f5d29b; font-weight:600;
}
.cv-sheet .side-title{
  font-size:8.8pt; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  margin:3.2mm 0 1.6mm; padding-bottom:.8mm; border-bottom:1.5px solid var(--accent);
}

/* AWS services grid */
.cv-sheet .aws-head{display:flex; align-items:center; gap:6px;}
.cv-sheet .aws-head .ico{width:30px; height:18px;}
.cv-sheet .aws-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6mm;}
.cv-sheet .aws-grid div{
  background:rgba(255,255,255,.06); border-radius:6px; padding:1.6mm 0 1.2mm;
  text-align:center; font-size:6.8pt; color:var(--sidebar-text);
}
.cv-sheet .aws-grid .ico{width:20px; height:20px; display:block; margin:0 auto 1mm; border-radius:4px;}

/* Skills with logos */
.cv-sheet .skills{list-style:none;}
.cv-sheet .skills li{display:flex; align-items:center; gap:1.6mm; margin-bottom:1.1mm; font-size:7.8pt; white-space:nowrap;}
.cv-sheet .skills .logos{display:flex; gap:2px; width:42px; flex-shrink:0;}
.cv-sheet .skills .logos .ico{
  width:20px; height:20px; background-color:#fff; border-radius:4px;
  background-size:15px; background-origin:content-box;
}

.cv-sheet .side-list{list-style:none;}
.cv-sheet .side-list li{margin-bottom:1.1mm; font-size:7.8pt; display:flex; gap:2mm; align-items:flex-start;}
.cv-sheet .side-list b{font-weight:600;}
.cv-sheet .side-list .small{color:var(--sidebar-muted); font-size:7.3pt;}
.cv-sheet .side-list .ico{width:24px; height:15px; margin-top:1px;}

/* References: small cards with initials, orange accent */
.cv-sheet .refs{display:flex; flex-direction:column; gap:2mm;}
.cv-sheet .ref{
  display:flex; gap:2.5mm; align-items:flex-start;
  padding:2mm 2.5mm; border-radius:1.5mm;
  background:rgba(255,255,255,.05); border-left:2px solid var(--aws);
}
.cv-sheet .ref-avatar{
  flex:none; width:7mm; height:7mm; border-radius:50%;
  display:grid; place-items:center;
  background:var(--accent); color:#fff; font-size:6.6pt; font-weight:700; letter-spacing:.02em;
}
.cv-sheet .ref-body{min-width:0; font-size:7.3pt; line-height:1.35;}
.cv-sheet .ref-name{font-weight:700; font-size:7.8pt;}
.cv-sheet .ref-role{opacity:.9;}
.cv-sheet .ref-meta{color:var(--aws); font-weight:600;}
.cv-sheet .ref-contact{color:var(--sidebar-muted); font-style:italic; margin-top:.5mm;}
.cv-sheet .ref-contact a{color:inherit;}

/* ---------- Main column ---------- */
.cv-sheet .main{padding:6mm 7mm 5mm;}
.cv-sheet .headline{
  font-family:inherit; font-size:15pt; font-weight:700; line-height:1.12; letter-spacing:-.015em; color:var(--text);
}
.cv-sheet .headline .hl{color:var(--accent);}
.cv-sheet .headline .aws{color:var(--aws);}
.cv-sheet .name{font-size:11.5pt; font-weight:500; margin-top:1.8mm; color:var(--muted);}

.cv-sheet .contact{display:grid; grid-template-columns:1fr 1fr; gap:1.1mm 6mm; margin:2.5mm 0 0; font-size:7.7pt;}
.cv-sheet .contact div{display:flex; align-items:center; gap:6px;}
.cv-sheet .contact .ico{width:12px; height:12px;}

.cv-sheet .section-title{
  font-size:9.6pt; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  margin:3mm 0 1.6mm; padding-bottom:.6mm; border-bottom:2px solid var(--accent);
}

.cv-sheet .job{margin-bottom:2.2mm;}
/* Company logo next to the job title (files in assets/img/logos/) */
.cv-sheet .job-top{display:flex; align-items:center; gap:2mm;}
.cv-sheet .job-id{flex:1; min-width:0;}
.cv-sheet .job-logo{
  flex:none; width:7.6mm; height:7.6mm; max-width:none; object-fit:contain; padding:.5mm;
  background:#fff; border:1px solid #e3e8ef; border-radius:1.6mm;
}
.cv-sheet .job-head{display:flex; justify-content:space-between; align-items:baseline; gap:8px;}
.cv-sheet .job-title{font-size:9.4pt; font-weight:700;}
.cv-sheet .job-date{color:var(--accent); font-style:italic; font-size:7.7pt; white-space:nowrap;}
.cv-sheet .job-org{color:var(--accent); font-weight:600; font-size:8.2pt;}
.cv-sheet .job-org .loc{color:var(--muted); font-weight:400;}
.cv-sheet .job-org a{color:inherit;}
.cv-sheet .job-focus{color:var(--muted); font-style:italic; margin:.3mm 0 .3mm;}
.cv-sheet .job ul{padding-left:4.2mm; margin-top:.6mm;}
.cv-sheet .job li{margin-bottom:.3mm;}
.cv-sheet .job li b{font-weight:600;}
.cv-sheet .k{ /* keyword badge inside a bullet */
  font-size:6.8pt; font-weight:700; color:#fff; background:var(--accent);
  border-radius:3px; padding:0 1.3mm; margin-right:1mm; vertical-align:1px;
}

/* Tech pills, with or without a logo */
.cv-sheet .tags{display:flex; flex-wrap:wrap; gap:1mm; margin:1.1mm 0 0;}
.cv-sheet .tags span{
  display:inline-flex; align-items:center; gap:1.2mm;
  background:var(--tag-bg); color:var(--tag-text); border-radius:999px;
  padding:.45mm 2.2mm; font-size:6.9pt; font-weight:500;
}
.cv-sheet .tags .ico{width:10px; height:10px;}

.cv-sheet .edu-row{display:flex; align-items:center; gap:2mm; margin-bottom:1.2mm;}
.cv-sheet .edu-row .edu{flex:1; min-width:0; margin-bottom:0;}
/* Wide wordmark logos: keep only the symbol on the left */
.cv-sheet .job-logo.logo-crop{object-fit:cover; object-position:left center;}
.cv-sheet .edu{margin-bottom:1.2mm;}
.cv-sheet .edu b{font-weight:700;}
.cv-sheet .edu .meta{color:var(--muted);}

/* =========================================================
   4. SMALL SCREENS - stack the columns
   ========================================================= */
@media screen and (max-width:820px){
  .cv-stage{padding:110px 12px 60px;}
  .cv-sheet{grid-template-columns:minmax(0,1fr); width:100%; min-height:0; --base-size:10pt;}
  .cv-sheet .main, .cv-sheet .sidebar{min-width:0;}
  .cv-sheet .contact a{overflow-wrap:anywhere;}
  .cv-sheet .main{order:-1; padding:7mm 5mm;}
  .cv-sheet .sidebar{padding:7mm 5mm;}
  .cv-sheet .contact{grid-template-columns:1fr;}
  .cv-sheet .job-head{flex-direction:column; gap:0;}
  .cv-sheet .headline{font-size:15pt;}
}

/* =========================================================
   5. PRINT - only the A4 sheet
   ========================================================= */
@media print{
  @page{size:A4; margin:0;}
  html, body{background:#fff !important;}
  header, footer, .cv-toolbar{display:none !important;}
  .cv-stage{padding:0; background:#fff;}
  .cv-sheet.reveal{opacity:1 !important; transform:none !important;}
  .cv-sheet{zoom:1; width:210mm; height:297mm; margin:0; box-shadow:none; border-radius:0; grid-template-columns:var(--sidebar-width) 1fr;}
  .cv-sheet .main{order:0;}
  /* The "Goal" box is for the website only: the exported PDF is used for job applications. */
  .cv-sheet .summary .goal{display:none !important;}
}