/* ==========================================================================
   Circle webdesign — services.css
   "Szolgáltatások" oldalsablon. base.css után.
   ========================================================================== */

#main{padding-top:var(--header-h);background:var(--bg);position:relative}
/* Halvány, elforgatott wireframe-háttér az oldal tetején: a teljes kép látszik
   (nincs levágás), nem ismétlődik, és lelóghat a következő szekcióba. */
#main::before{content:"";position:absolute;z-index:0;top:calc(var(--header-h) - 1.5rem);left:50%;width:min(820px,94vw);aspect-ratio:629 / 876;transform:translateX(-50%) rotate(-6deg);background:url("../images/wireframe.webp") no-repeat center / contain;opacity:.1;pointer-events:none}
.section{padding-block:clamp(3.5rem,8vw,7rem);position:relative;z-index:1}
/* A „Dolgozzunk együtt" (Szolgáltatások) oldalon a lebegő CTA teljesen rejtve — minden nézetben */
.corner-cta{display:none}
.section.tint{background:var(--tint)}
.section.paper-bg{background:var(--bg-2)}
.section-lead{max-width:var(--content-reading);font-size:var(--step-1);color:var(--text-soft);margin-top:var(--space-4)}
.big-statement{font-family:var(--font-display);font-size:var(--step-5);line-height:1.06;max-width:24ch;letter-spacing:-.01em}
.big-statement em{font-style:italic;color:var(--teal)}
:root[data-theme="dark"] .big-statement em{color:var(--air-bright)}
/* A felső H1 (intro) marad nagy; a szekció-H2-k a főoldali méretre (step-4). */
h2.big-statement{font-size:var(--step-4)}

/* Intro — szöveg + portré két oszlopban */
.intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.intro-figure{margin:0;border-radius:var(--radius-large);overflow:hidden;box-shadow:var(--shadow-3);aspect-ratio:4/5;background:var(--tint)}
.intro-figure img{width:100%;height:100%;object-fit:cover;object-position:center 16%}

/* Kép-helykitöltők */
.photo{position:relative;width:100%;height:100%}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--motion-slow)}
.photo.loaded img{opacity:1;position:relative}
.photo .ph{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:.4rem;padding:1.1rem 1.2rem;background:var(--paper-noise),repeating-linear-gradient(135deg,transparent 0 22px,rgba(117,184,200,.14) 22px 23px),linear-gradient(160deg,#eaedec,#dfe3e2);color:var(--teal)}
.photo.loaded .ph{display:none}
.photo .ph .tag{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.14em;font-weight:700}
.photo .ph .desc{font-size:var(--step--1);color:#4a4640;max-width:28rem}
.photo .ph .frame{position:absolute;inset:12px;border:1.5px dashed rgba(39,60,44,.4);border-radius:4px;pointer-events:none}

/* Papír-recept (valós textúra + fehér fátyol) */
.paper-recipe{background-color:#fff;background-image:linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.4)),url("../images/paper-texture.jpg");background-size:cover;background-position:center}

/* Szolgáltatás-kártyák — teljes szélességű, egymás alatt; belül két oszlop */
.services-grid{position:relative;display:flex;flex-direction:column;gap:clamp(2.5rem,4vw,3.75rem);margin-top:0}
.svc{position:relative;border-radius:var(--radius-large);padding:clamp(1.75rem,3.5vw,3rem);box-shadow:var(--shadow-3)}
.svc-card-inner{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.svc-card-detail > .svc-block:first-child{margin-top:0}
/* A szám a szolgáltatás-név elé, a címmel azonos méretben, narancssárgán */
.svc h3 .svc-num{color:var(--orange);margin-right:.35rem}
/* Kártya-lábléc: ár + CTA, a két oszlop alatt, teljes szélességben */
.svc-card-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid rgba(127,127,127,.2)}
.svc.sky .svc-card-foot{border-top-color:rgba(17,14,11,.16)}
.svc.green .svc-card-foot,.svc.dark .svc-card-foot{border-top-color:rgba(241,243,242,.22)}
.svc-card-foot .svc-price{margin:0;max-width:36rem}
.svc-card-foot .svc-actions{margin-top:0}
.svc.sky{background:var(--air);color:var(--ink)}
.svc.green{background:var(--teal);color:var(--paper)}
.svc.dark{background:var(--ink);color:var(--paper)}
.svc .svc-kicker{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.16em;font-weight:700;display:inline-flex;align-items:center;gap:.6rem;margin-bottom:var(--space-3)}
.svc.sky .svc-kicker{color:var(--ink)}
.svc.green .svc-kicker{color:var(--air-bright)}
.svc.dark .svc-kicker{color:var(--air-bright)}
.svc h3{font-family:var(--font-display);font-size:var(--step-4);line-height:1.02;margin-bottom:var(--space-3)}
.svc .svc-lead{font-size:var(--step-0);margin-bottom:var(--space-3)}
.svc .svc-lead + .svc-lead{margin-top:var(--space-3)}
.svc.sky .svc-lead{color:var(--ink)}
.svc.green .svc-lead{color:rgba(241,243,242,.9)}
.svc.dark .svc-lead{color:rgba(241,243,242,.9)}
.svc-what{list-style:none;margin:var(--space-4) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.svc-what li{font-size:var(--step--1);font-weight:600;padding:.35rem .85rem;border-radius:var(--radius-pill);border:1.5px solid currentColor}
.svc.green .svc-what li,.svc.dark .svc-what li{color:var(--paper)}
.svc-meta{margin:var(--space-5) 0;display:grid;gap:.9rem;max-width:36rem}
.svc-meta dt{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.svc-meta dd{margin:.25rem 0 0;font-size:var(--step-0)}
.svc.sky .svc-meta dt{color:var(--ink)}
.svc.sky .svc-meta dd{color:rgba(17,14,11,.82)}
.svc.green .svc-meta dt,.svc.dark .svc-meta dt{color:var(--air-bright)}
.svc.green .svc-meta dd,.svc.dark .svc-meta dd{color:rgba(241,243,242,.88)}
/* Részletes szolgáltatás-blokkok (Mit tartalmaz? / Mit kapsz? / Időtartam / Ár …) */
.svc-block{margin-top:var(--space-4)}
.svc-block-title{font-family:var(--font-body);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.12em;font-weight:700;margin-bottom:.35rem}
.svc.sky .svc-block-title{color:var(--ink)}
.svc.green .svc-block-title,.svc.dark .svc-block-title{color:var(--air-bright)}
/* A részletek kérdés-címei (Mit tartalmaz? stb.) NE eyebrow-stílusúak legyenek:
   editorial serif, normál írásmód — így nem téveszthetők össze a kickerrel. */
.svc-card-detail .svc-block-title{font-family:var(--font-display);font-size:var(--step-1);font-weight:400;text-transform:none;letter-spacing:normal;margin-bottom:.5rem}
.svc-block > p:not(.svc-price-val){font-size:var(--step-0);line-height:1.6}
.svc.sky .svc-block > p:not(.svc-price-val){color:rgba(17,14,11,.82)}
.svc.green .svc-block > p:not(.svc-price-val),.svc.dark .svc-block > p:not(.svc-price-val){color:rgba(241,243,242,.88)}
.svc-list{list-style:none;margin:.35rem 0 0;padding:0;display:grid;gap:.4rem}
.svc-list li{position:relative;padding-left:1.15rem;font-size:var(--step-0);line-height:1.5}
.svc-list li::before{content:"–";position:absolute;left:0;top:0;font-weight:700}
.svc.sky .svc-list li{color:rgba(17,14,11,.82)}
.svc.sky .svc-list li::before{color:var(--orange)}
.svc.green .svc-list li,.svc.dark .svc-list li{color:rgba(241,243,242,.88)}
.svc.green .svc-list li::before,.svc.dark .svc-list li::before{color:var(--air-bright)}
.svc-block > p + .svc-list{margin-top:.3rem}
.svc-price{margin-top:var(--space-5)}
.svc-price-val{font-size:var(--step-1);font-weight:600;line-height:1.3}
.svc.sky .svc-price-val{color:var(--ink)}
.svc.green .svc-price-val,.svc.dark .svc-price-val{color:var(--paper)}
.svc-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;margin-top:var(--space-5)}
.svc.sky .btn-ghost{color:var(--ink);border-color:var(--ink)}
.svc.sky .btn-ghost:hover{background:var(--ink);color:#fff}
.svc.green .btn-ghost,.svc.dark .btn-ghost{color:var(--paper);border-color:rgba(241,243,242,.6)}
.svc.green .btn-ghost:hover,.svc.dark .btn-ghost:hover{background:var(--paper);color:var(--ink)}

/* Folyamat lépések — középen; a ceruza a lista után, az utolsó cetli sarkára lóg, árnyékkal */
.process-layout{position:relative;width:min(100%,28rem);margin:var(--space-6) auto 0}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-4);width:100%}
.process-pencil{position:absolute;z-index:3;right:-5.75rem;bottom:-8.75rem;width:clamp(80px,12vw,80px);height:auto;transform:rotate(16deg);filter:drop-shadow(3px 6px 5px rgba(0,0,0,0.6));pointer-events:none}
.step-note{--rot:-1.1deg;transform:rotate(var(--rot));color:var(--ink);padding:1rem 1.2rem 1.15rem;border-radius:3px;box-shadow:var(--shadow-2)}
.step-note:nth-child(even){--rot:0.9deg}
.step-note:nth-child(3n){--rot:-0.6deg}
.step-note .note-k{font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;color:var(--teal);font-weight:700;display:block;margin-bottom:.3rem}
.step-note .step-num{color:#2b6b7a}
.step-note p{font-family:var(--font-body);font-size:var(--step-0);line-height:1.5;color:#2c2823}

/* Kapcsolat */
.contact{background:var(--air);color:var(--ink)}
.contact .eyebrow{color:var(--ink)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:start}
.contact h2{font-family:var(--font-display);font-size:var(--step-4);line-height:1.05;margin-bottom:var(--space-4);color:var(--ink)}
.contact-intro{color:var(--ink);font-size:var(--step-1);max-width:34rem}
.contact-direct{margin-top:var(--space-5)}
.contact-direct a{color:var(--ink);text-underline-offset:.25em}
.cta-portrait{width:8.5rem;aspect-ratio:1/1;border-radius:var(--radius-medium);overflow:hidden;margin-bottom:var(--space-5);box-shadow:0 20px 40px -26px rgba(17,14,11,.45);border:1px solid rgba(17,14,11,.14)}
.cta-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.form{background:#ffffff;border:1px solid rgba(17,14,11,.12);border-radius:var(--radius-large);padding:clamp(1.5rem,3vw,2.25rem);box-shadow:0 30px 60px -40px rgba(17,14,11,.5)}
.field{margin-bottom:var(--space-4)}
.field label{display:block;font-weight:600;margin-bottom:.15rem;color:var(--ink)}
.field .req{color:var(--orange)}
.field .hint{display:block;font-size:var(--step--1);color:#4a4640;margin-top:0;margin-bottom:.45rem;line-height:1.35}
.field input,.field textarea{width:100%;font-family:var(--font-body);font-size:var(--step-0);padding:.8rem .9rem;border-radius:var(--radius-small);border:2px solid rgba(17,14,11,.25);background:#ffffff;color:var(--ink)}
.field input::placeholder,.field textarea::placeholder{color:#8a8580}
.field input:focus,.field textarea:focus{border-color:var(--orange)}
.field textarea{resize:vertical;min-height:7rem}
.field.has-error input,.field.has-error textarea{border-color:#c62d00}
.field .error-msg{display:none;color:#c62d00;font-size:var(--step--1);margin-top:.4rem}
.field.has-error .error-msg{display:block}
.form-note{font-size:var(--step--1);color:#4a4640;margin-top:var(--space-3)}
.form-note .tbc{color:var(--orange);font-weight:700}
.form-status{margin-top:var(--space-3);color:var(--teal);font-weight:600}

/* Portfólió — fehér háttér, világos kártyák */
.projects{background:var(--bg-2)}
.status-pill{display:inline-flex;align-items:center;gap:.5rem;margin-top:var(--space-4);font-size:var(--step--1);background:rgba(17,14,11,.05);border:1px solid rgba(17,14,11,.14);color:var(--text-soft);border-radius:var(--radius-pill);padding:.4rem .9rem}
:root[data-theme="dark"] .status-pill{background:rgba(241,243,242,.08);border-color:rgba(241,243,242,.24);color:var(--text)}
.status-pill .dot{inline-size:.55rem;block-size:.55rem;border-radius:50%;background:var(--orange)}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);margin-top:var(--space-6)}
.case{position:relative;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-medium);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-3)}
.case-photo{position:relative;aspect-ratio:16/11;background:var(--tint);display:block;text-decoration:none}
.case-photo .ph{background:var(--paper-noise),repeating-linear-gradient(135deg,transparent 0 22px,rgba(117,184,200,.14) 22px 23px),linear-gradient(160deg,#eaedec,#dfe3e2);color:var(--teal)}
.case-photo .ph .frame{border-color:rgba(39,60,44,.4)}
.case-body{padding:var(--space-4) var(--space-5) var(--space-5);display:flex;flex-direction:column;gap:.35rem;flex:1}
.case .case-type{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.12em;color:var(--teal);font-weight:700}
:root[data-theme="dark"] .case .case-type{color:var(--air-bright)}
.tbc{color:var(--orange);font-weight:700;font-size:.85em;letter-spacing:.04em}

@media (max-width:1000px){
  .contact-grid{grid-template-columns:1fr}
  .case-grid{grid-template-columns:repeat(2,1fr)}
  .intro-grid{grid-template-columns:1fr}
  .intro-figure{max-width:22rem;margin-inline:auto}
  .svc-card-inner{grid-template-columns:1fr;gap:var(--space-5)}
  .svc-card-foot{flex-direction:column;align-items:stretch}
  .svc-paper{display:none}
}
@media (max-width:760px){
  .case-grid{grid-template-columns:1fr}
  .process-pencil{display:none}
}