/* 7Code — /services (services.php): the four pillars.
   Cards are the homepage product card (.hp-pc, mod-home.css, loaded with this file); steps, FAQ, case cards and the red band come from styles.css,
   the client words from mod-review.css. This file only adds what those do not have. Logical properties throughout, so RTL just works. */

/* =========================== hero: jump links to the four pillars =========================== */
.sv .ph-acts .btn{min-height:48px}
.sv-jump{list-style:none;display:grid;grid-template-columns:repeat(var(--c,4),minmax(0,1fr));margin-top:clamp(30px,4vw,52px);border:1.5px solid var(--ink);background:rgba(12,12,14,.78)}
.sv-jump li{min-width:0}
.sv-jump li+li{border-inline-start:1.5px solid var(--ink)}
.sv-jump a{display:flex;flex-direction:column;gap:12px;height:100%;padding:16px 18px 18px;transition:background .25s,color .25s}
.sv-jump a:hover,.sv-jump a:focus-visible{background:var(--red);color:#fff}
.sv-jump a:hover .hp-n,.sv-jump a:focus-visible .hp-n{color:#fff}
.sv-jump a:focus-visible{outline-offset:-4px}
.sv-jump-t{font-weight:800;font-size:clamp(15px,1.3vw,18px);line-height:1.2;letter-spacing:-.01em;text-transform:uppercase;overflow-wrap:break-word;hyphens:auto}

/* =========================== pillars =========================== */
.sv-pillar .shead{flex-wrap:wrap;row-gap:10px}
.sv-pillar .shead .k{white-space:nowrap}
.sv-leadrow{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:4px 28px;margin-top:18px}
.sv-leadrow .hp-lead{margin-top:0;flex:1 1 380px}
.sv-leadrow .hp-pc-cta{flex:0 0 auto}

/* the cards: 4 / 3 / 2 / 1 across by how many there are, then 2, then 1 (data-n = number of cards, 4 at most) */
.sv-grid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:28px}
.sv-grid[data-n="1"]{grid-template-columns:minmax(0,1fr)}
.sv-grid[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.sv-grid[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.sv-card{padding-bottom:10px}
.sv-card .hp-pc-d{margin-bottom:20px}
.sv-art{font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:.04em;color:var(--red)}
.sv-price{margin-top:auto;padding-top:12px;border-top:1.5px solid var(--line);display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.sv-price .k{width:100%;font-family:var(--mono);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--ink45)}
.sv-price b{font-weight:900;font-size:20px;line-height:1.25;letter-spacing:-.01em;overflow-wrap:anywhere}
.sv-price .u{font-family:var(--mono);font-size:12px;color:var(--ink45)}
.sv-card .hp-pc-f{margin-top:0;padding-top:6px;display:flex;flex-wrap:wrap;gap:0 18px}
.sv-cta{pointer-events:none}                         /* decoration: the click goes to the title link stretched over the card */
.sv-card:hover .sv-cta,.sv-card:focus-within .sv-cta{color:var(--red)}

/* full-width strips under a grid: the ready-made websites, media production (built on the homepage's .hp-sites strip) */
.sv-sites{margin-top:14px;padding:20px 22px;gap:10px 28px;background:var(--panel);border-style:solid;align-items:center;transition:border-color .25s}
.sv-sites:hover,.sv-sites:focus-within{border-color:var(--red)}
.sv-sites .hp-sites-k{margin:0;font-size:11px}
.sv-sites .hp-sites-t{margin:0}
.sv-count{flex:0 0 auto;font-family:var(--mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;line-height:1.2;padding:6px 10px;border:1.5px solid var(--red);white-space:nowrap}

/* technical consulting: one wide card with the free call */
.sv-cons{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);margin-top:28px;border:1.5px solid var(--ink);background:var(--panel);transition:border-color .25s}
.sv-cons:hover,.sv-cons:focus-within{border-color:var(--red)}
.sv-cons-main{min-width:0;padding:clamp(22px,3vw,40px)}
.sv-cons-side{min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:26px;padding:clamp(22px,3vw,40px);border-inline-start:1.5px solid var(--ink)}
.sv-cons-d{margin-top:22px;max-width:30ch;font-weight:800;font-size:clamp(21px,2.5vw,34px);line-height:1.18;letter-spacing:-.02em;text-wrap:balance}
.sv-cons-meta{position:relative;margin-top:20px;padding-inline-start:22px;font-family:var(--mono);font-size:12.5px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;line-height:1.55;color:var(--ink70)}
.sv-cons-meta::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:11px;height:2px;background:var(--red)}
.sv-cons-side .sv-price{margin-top:0;padding-top:0;border-top:0}
.sv-cons-acts{display:flex;flex-direction:column;gap:10px}
.sv-cons-acts .btn{justify-content:center;min-height:50px}

/* =========================== lower sections =========================== */
.sv-work .rel{margin-top:22px}
.sv .clients{margin-top:clamp(56px,7vw,96px)}

/* =========================== Arabic · Russian =========================== */
html[dir=rtl] .sv-price .k,html[dir=rtl] .sv-price .u,html[dir=rtl] .sv-cons-meta,html[dir=rtl] .sv-count,html[dir=rtl] .sv-art{font-size:14px}
html[dir=rtl] .sv-jump-t{line-height:1.45}
html[dir=rtl] .sv-cons-d{line-height:1.5;max-width:34ch}
html[dir=rtl] .sv-cons-meta{line-height:1.8}
html[dir=rtl] .sv-cons-meta::before{top:.9em}
html[lang=ru] .sv-cons-d,html[lang=ru] .sv-jump-t{letter-spacing:-.015em}

/* =========================== responsive =========================== */
@media(max-width:1100px){
  .sv-grid[data-n]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv-grid[data-n="1"]{grid-template-columns:minmax(0,1fr)}
  .sv-grid[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .sv-cons{grid-template-columns:minmax(0,1fr)}
  .sv-cons-side{border-inline-start:0;border-top:1.5px solid var(--ink)}
}
@media(max-width:700px){
  .sv-grid[data-n="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:601px) and (max-width:900px){
  .sv-work .rel{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}   /* three case cards in a row on tablets (styles.css stacks them below 900px) */
  .sv-work .rel-card .t{font-size:17px;padding:12px 12px 4px;overflow-wrap:anywhere}
  .sv-work .rel-card .tag{padding:0 12px 14px;font-size:11px}
}
@media(max-width:760px){
  .sv-jump{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv-jump li:nth-child(odd){border-inline-start:0}
  .sv-jump li:nth-child(n+3){border-top:1.5px solid var(--ink)}
  .sv-jump a{gap:8px;padding:14px 14px 16px}
}
@media(max-width:600px){
  .sv-pillar .shead{flex-direction:column-reverse;align-items:flex-start;gap:8px}   /* "02 / 04" becomes a small label above the title */
  .sv-grid[data-n]{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:22px}
  /* the homepage card turns into "glyph on the side, text beside it" here (mod-home.css); the price joins the text column */
  .sv-card .sv-price,.sv-card .hp-pc-d{grid-column:2}
  .sv-card .hp-pc-d{margin-bottom:14px}
  .sv-card .sv-price{margin-top:4px}
  .sv-sites{padding:18px 16px}
  .sv-cons-main,.sv-cons-side{padding:20px 16px}
  .sv-cons-d{font-size:clamp(20px,6vw,26px)}
}
@media(max-width:520px){
  .sv .ph-acts .btn{flex:1 1 calc(50% - 5px);justify-content:center}
  .sv .ph-acts .btn-fill{flex-basis:100%}
}