/* =========================================================
   DIGIQAL — Single service page
   Figma frame "Εσωτερικη Υπηρεσιες- Κατασκευή Ιστοσελίδων" 659:4383

   Loaded AFTER style.css, which supplies the tokens, the header, the buttons,
   the portfolio / FAQ / contact blocks and the footer — this frame reuses all
   of them unchanged. Only the four sections new to the page live here:

     Hero      659:4466   copy 507px + glass-panel art 695.77×409
     Intro     659:4472   heading + three 374² cards over 350px numerals
     Why       659:4533   the WHY component set (414:4016), five variants
     Process   659:4549   six-step horizontal rail, cards alternating y25/y125

   Figma section padding is 100px top/bottom and 240px left/right at the 1920
   frame — a 1440px content box, which is exactly --container-hero.
   ========================================================= */

/* ---------------------------------------------------------
   Shared card + numeral
   The intro cards and the process cards are the same Figma object: a 374×374
   box filled with the file's `white` style — rgba(255,255,255,.46), NOT solid —
   over a 350px numeral that is meant to read through it, carrying the standard
   "box styles" shadow. Content bottom-aligns on 55px of padding, which is why
   Figma gives each card a different top padding.
   --------------------------------------------------------- */
.svc-card__body,
.svc-step__card {
  position: relative;
  z-index: 1;
  min-height: 374px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(24px, 3.3vw, 47px);
  padding: 60px 46px 55px;
  background: rgba(255, 255, 255, .46);
  box-shadow: var(--sh-card);
  transition: transform .3s, box-shadow .3s;
}
.svc-card__body:hover,
.svc-step__card:hover { transform: translateY(-6px); box-shadow: var(--sh-card-strong); }

.svc-card__title,
.svc-step__title {
  max-width: 282px;
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: var(--lh-h4);
  color: var(--black);
}
.svc-card__text,
.svc-step__text {
  max-width: 262px;
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--black);
}

/* 350px TT Norms Pro Bold at rgba(34,49,120,.1) — .08 on the third intro card.
   --nx is the per-card left offset Figma hand-set for each digit: the "1" is a
   narrow glyph and was nudged 182px in, every other digit sits ~115px in. */
.svc-card__num,
.svc-step__num {
  position: absolute;
  top: 0;
  left: var(--nx, 115px);
  z-index: 0;
  font-family: var(--font-display);
  font-size: clamp(170px, 18.2vw, 350px);
  font-weight: 700;
  line-height: 1.2;
  color: rgba(34, 49, 120, .1);
  pointer-events: none;
  user-select: none;
}

/* =========================================================
   HERO — Figma 659:4466
   row, space-between, align center · copy column 506.84 wide, gap 35
   ========================================================= */
/* The header is absolutely positioned (it overlays the hero on the home page),
   so the hero owns the whole offset: 173px of header + 95px to the section top
   + the section's own 100px of padding = content at y368 on the 1920 frame. */
.svc-hero {
  padding-block: calc(173px + clamp(56px, 10.2vw, 195px)) var(--section-y);
  /* The art's shadow deliberately paints outside its node box; below ~1500px
     that bleed runs past the viewport and would lengthen the document. `clip`
     (not `hidden`) stops that without making the section a scroll container —
     and nothing visible is lost, since the clipped strip is off-screen. */
  overflow-x: clip;
}
.svc-hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(40px, 6vw, 120px);
}

.svc-hero__copy {
  flex: 0 1 507px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 35px;
}
.svc-hero__eyebrow { color: var(--ink-90); max-width: 374px; }
.svc-hero__title {
  max-width: 481px;
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: .05em;
  line-height: var(--lh-h2);
  color: var(--black);
}
.svc-hero__desc { max-width: 481px; line-height: var(--lh-btn); }

/* 659:4402 carries a DROP_SHADOW, so Figma's export measures 778×473 for a
   695.77×409 node. The wrapper IS the node box; the image is scaled and offset
   by that bleed so the panels land at their true size while the shadow still
   paints outside them. (Rastered, not SVG — see the note in the markup.) */
.svc-hero__art {
  position: relative;
  flex: 0 1 696px;
  aspect-ratio: 695.77 / 409;
}
.svc-hero__art img {
  position: absolute;
  top: -3.423%;      /* -14 / 409     */
  left: -4.599%;     /* -32 / 695.77  */
  width: 111.818%;   /*  778 / 695.77 */
  height: 115.647%;  /*  473 / 409    */
  max-width: none;
}

/* =========================================================
   INTRO — Figma 659:4472
   column, centered, gap 112 · three 374² cards, 25px apart (399 stride)
   ========================================================= */
.svc-intro { padding-block: var(--section-y); }
.svc-intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(56px, 7.8vw, 112px);
}
.svc-intro__title {
  max-width: 478px;
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: .05em;
  line-height: var(--lh-h2);
  color: var(--black);
  text-align: center;
  text-wrap: balance;
}

.svc-cards {
  display: flex;
  justify-content: center;
  gap: 25px;
  width: 100%;
}
/* Figma puts the cards at y31 and the digits at y0–6. */
.svc-card { position: relative; flex: 0 1 374px; padding-top: 31px; }
.svc-card--soft .svc-card__num { color: rgba(34, 49, 120, .08); }

/* =========================================================
   WHY — Figma component set 414:4016, five rotating variants
   Component box 684×448: marks band 0–240 · kicker at y135 · line at y≈271
   ========================================================= */
.svc-why { padding-block: var(--section-y); }
.svc-why__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Natural 1.2 leading keeps the 200px box exactly 240px tall, which is the
   frame's own mark band — so the offsets below are Figma's numbers verbatim
   (kicker text top 145 − 240 = −95). */
.svc-why__marks {
  font-family: var(--font-display);
  font-size: clamp(96px, 10.4vw, 200px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--blue);
  user-select: none;
}
.svc-why__kicker {
  margin-top: clamp(-95px, -4.95vw, -45px);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: var(--lh-h4);
  letter-spacing: .05em;
  color: var(--blue);
}

/* All five lines share one grid cell, so the block never reflows as they cycle
   and the section height is set by the longest of them. */
.svc-why__stage {
  display: grid;
  margin-top: clamp(56px, 5.7vw, 110px);
  width: 100%;
  max-width: 472px;
}
.svc-why__line {
  grid-area: 1 / 1;
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: .05em;
  line-height: var(--lh-h2);
  color: var(--black);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
}
.svc-why__line.is-active { opacity: 1; transform: none; }

/* =========================================================
   PROCESS — Figma 659:4549
   head (484 wide) · rail of six 374² cards, 399 stride, alternating y25/y125
   ========================================================= */
.svc-process { padding-block: var(--section-y); }
.svc-process__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 2.4vw, 34px);      /* head → rail, Figma 659:4550 */
}
.svc-process__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 484px;
  text-align: center;
}
.svc-process__eyebrow { color: var(--ink-90); }
.svc-process__lead { max-width: 440px; text-align: center; }

/* The rail scrolls horizontally in Figma too (overflowScroll: x on 659:4556)
   and is clipped to the 1440 content box, not full-bleed — the frame's own
   render cuts the fourth card in half at the right edge. The scrollbar is
   hidden, so the cards running off that edge are the only affordance; the rail
   is therefore focusable and labelled for keyboard and screen-reader users.
   padding-bottom clears the 350px digit, which overhangs the card by ~19px. */
.svc-flow {
  display: flex;
  align-self: stretch;
  align-items: flex-start;
  gap: 25px;
  padding-bottom: 24px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.svc-flow::-webkit-scrollbar { display: none; }
.svc-flow:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

.svc-step { position: relative; flex: 0 0 374px; scroll-snap-align: center; }
.svc-step--high { margin-top: 25px; }
.svc-step--low  { margin-top: 125px; }
.svc-step--high .svc-step__num { top: -25px; }
.svc-step--low  .svc-step__num { top: -27px; }

/* The rail → CTA gap is 56 in the outer column; 34 of that is the inner
   column's gap, so the button makes up the remaining 22. */
.svc-process__cta { margin-top: clamp(14px, 1.6vw, 22px); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1240px) {
  /* Below the 1440 content box the art gives way first — the copy column is the
     part with a hard minimum. */
  .svc-hero__art { flex: 0 1 560px; }
}

@media (max-width: 1100px) {
  .svc-hero__inner { flex-direction: column; align-items: stretch; gap: 48px; }
  .svc-hero__copy  { flex: none; }
  .svc-hero__art   { flex: none; width: min(100%, 696px); margin-inline: auto; }

  /* Three 374px cards no longer fit in a row; they wrap two-up, and the digits
     right-align to their card instead of using Figma's hand-set offsets. */
  .svc-cards { flex-wrap: wrap; }
  .svc-card  { flex: 0 1 340px; }
  .svc-card__num,
  .svc-step__num { font-size: clamp(150px, 26vw, 260px); left: auto; right: 0; }
}

@media (max-width: 860px) {
  .svc-hero { padding-block: calc(173px + clamp(40px, 8vw, 90px)) var(--section-y); }
  .svc-card__body,
  .svc-step__card { padding: 48px 32px 40px; }
  .svc-cards { flex-direction: column; align-items: center; }
  .svc-card  { flex: none; width: min(100%, 374px); }

  /* The rail keeps scrolling, but the 25/125 stagger costs too much height on a
     phone — the cards line up instead. */
  .svc-step { flex: 0 0 min(78vw, 340px); }
  .svc-step--high,
  .svc-step--low { margin-top: 40px; }
  .svc-step--high .svc-step__num,
  .svc-step--low  .svc-step__num { top: -32px; }

  .svc-why__stage { margin-top: clamp(40px, 8vw, 64px); }
}

@media (max-width: 620px) {
  .svc-card__body,
  .svc-step__card { padding: 40px 24px 32px; }
  .svc-card__num,
  .svc-step__num { font-size: 150px; }
  .svc-why__marks { font-size: 96px; }
  .svc-why__kicker { margin-top: -42px; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-card__body,
  .svc-step__card,
  .svc-why__line { transition: none; }
  .svc-card__body:hover,
  .svc-step__card:hover { transform: none; }
}