/* Resume builder UI + CV template + print styles */

/* mini cv illustration in hero */
.mini-cv{ display:grid; grid-template-columns:34% 1fr; gap:0; background:#fff; border-radius:14px; overflow:hidden; height:280px; box-shadow:var(--shadow); }
.mini-side{ background:var(--grad-brand); }
.mini-main{ padding:1.2rem; display:flex; flex-direction:column; gap:9px; }
.mini-main .ln{ height:9px; border-radius:5px; background:#e6e9f2; width:100%; }
.mini-main .ln.g{ background:var(--green-400); opacity:.6; }
.w70{width:70%!important}.w40{width:40%!important}.w90{width:90%!important}.w60{width:60%!important}.w30{width:30%!important}.w80{width:80%!important}

/* toolbar */
.builder-toolbar{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:.9rem 1.1rem; box-shadow:var(--shadow-sm); margin-bottom:1.2rem; }
.bt-group{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; font-weight:700; color:var(--ink-700); font-size:.92rem; }
.btn.sm{ padding:.6rem 1rem; font-size:.9rem; }
.swatch{ width:30px; height:30px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1.5px var(--line); cursor:pointer; transition:.2s; }
.swatch:hover{ transform:scale(1.12); } .swatch.active{ box-shadow:0 0 0 3px var(--blue); }

/* builder layout */
.builder{ display:grid; grid-template-columns: 0.92fr 1.08fr; gap:1.5rem; align-items:start; }

/* form */
.b-form{ display:grid; gap:.9rem; position:sticky; top:90px; max-height:calc(100vh - 110px); overflow:auto; padding-inline-end:.3rem; }
.b-sec{ background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); overflow:hidden; }
.b-sec summary{ list-style:none; cursor:pointer; padding:1rem 1.2rem; font-weight:800; color:var(--ink-900); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.b-sec summary::-webkit-details-marker{ display:none; }
.b-sec summary::after{ content:"›"; transform:rotate(-90deg); font-size:1.4rem; color:var(--ink-300); transition:.25s; }
.b-sec[open] summary::after{ transform:rotate(90deg); }
.b-body{ padding:0 1.2rem 1.2rem; display:grid; gap:.8rem; }
.b-form label{ display:grid; gap:.35rem; font-weight:700; color:var(--ink-700); font-size:.88rem; }
.b-form input, .b-form textarea{ font-family:var(--font); font-size:.95rem; padding:.7rem .9rem; border:1.5px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink-900); transition:.2s; }
.b-form input:focus, .b-form textarea:focus{ outline:none; border-color:var(--blue-400); box-shadow:var(--ring); background:#fff; }
.b-form textarea{ resize:vertical; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.add{ font-size:.82rem; font-weight:700; color:var(--green); background:var(--grad-brand-soft); padding:.3rem .7rem; border-radius:100px; }
.add:hover{ color:var(--green-700); }
.rep-list{ display:grid; gap:.9rem; }
.rep{ border:1px dashed var(--line); border-radius:12px; padding:.9rem; display:grid; gap:.7rem; position:relative; background:var(--bg); }
.rep .del{ position:absolute; inset-inline-start:.6rem; top:.6rem; width:26px; height:26px; border-radius:8px; background:#fde8e8; color:#c0392b; display:grid; place-items:center; font-weight:800; }
.rep .del:hover{ background:#f9d2d2; }

/* preview */
.b-preview{ position:sticky; top:90px; }
.print-hint{ text-align:center; color:var(--ink-300); font-size:.82rem; margin-top:.8rem; }

/* ===== CV SHEET (A4) ===== */
.cv-sheet{ --accent:#2e3082; background:#fff; width:100%; aspect-ratio:1/1.414; box-shadow:var(--shadow-lg); border-radius:8px; overflow:hidden;
  display:grid; grid-template-columns:34% 1fr; font-size:10px; line-height:1.5; color:#2a3146; }
.cv-side{ background:var(--accent); color:#fff; padding:7% 6%; display:flex; flex-direction:column; gap:1.2em; }
.cv-photo{ width:78px; height:78px; border-radius:50%; background:rgba(255,255,255,.18); border:3px solid rgba(255,255,255,.5); margin:0 auto; display:grid; place-items:center; overflow:hidden; }
.cv-photo svg{ width:42px; height:42px; } .cv-photo img{ width:100%; height:100%; object-fit:cover; }
.cv-side h4{ color:#fff; font-size:1.05em; letter-spacing:.05em; text-transform:uppercase; margin-bottom:.5em; padding-bottom:.3em; border-bottom:1.5px solid rgba(255,255,255,.3); }
.cv-contact p{ display:flex; align-items:center; gap:.5em; margin-bottom:.45em; word-break:break-word; }
.cv-contact svg{ width:1.3em; height:1.3em; flex:none; opacity:.9; }
.cv-side ul li{ position:relative; padding-inline-start:1em; margin-bottom:.4em; }
.cv-side ul li::before{ content:"•"; position:absolute; inset-inline-start:0; }
.cv-main{ padding:7% 6%; }
.cv-head{ border-bottom:2px solid var(--accent); padding-bottom:.8em; margin-bottom:1em; }
.cv-head .cv-name{ font-size:2.1em; font-weight:800; color:#1a1f33; line-height:1.1; margin:0; letter-spacing:.5px; }
.cv-head p{ color:var(--accent); font-weight:700; font-size:1.15em; margin-top:.2em; }
.cv-main h3{ color:var(--accent); font-size:1.15em; text-transform:uppercase; letter-spacing:.04em; margin:1.1em 0 .5em; padding-bottom:.2em; border-bottom:1px solid #e6e9f2; }
.cv-main h3:first-of-type{ margin-top:0; }
.cv-item{ margin-bottom:.8em; }
.cv-item .top{ display:flex; justify-content:space-between; gap:1em; align-items:baseline; }
.cv-item b{ color:#1a1f33; font-size:1.05em; }
.cv-item .org{ color:var(--accent); font-weight:600; }
.cv-item .date{ color:#8b93a7; font-size:.92em; white-space:nowrap; font-weight:600; }
.cv-item p{ margin-top:.2em; color:#5a6376; }
.hide{ display:none !important; }

/* responsive builder */
@media (max-width: 900px){
  .builder{ grid-template-columns:1fr; }
  .b-form, .b-preview{ position:static; max-height:none; }
  .b-preview{ order:-1; } /* show preview first on mobile */
}
@media (max-width: 640px){ .row2{ grid-template-columns:1fr; } }

/* ===== PRINT ===== */
@media print{
  @page{ size:A4; margin:0; }
  body{ background:#fff !important; }
  .site-header,.hero,#features,.builder-toolbar,.b-form,#how,.footer,.mobile-menu,.totop,.print-hint,.sec-head,.strip{ display:none !important; }
  .section{ padding:0 !important; background:#fff !important; }
  .wrap{ width:100% !important; }
  .builder{ display:block !important; }
  .b-preview{ position:static !important; }
  .cv-sheet{ box-shadow:none !important; border-radius:0 !important; width:100% !important; aspect-ratio:auto !important;
    min-height:100vh; font-size:11px; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}