/* GENERATED by tools/gen.py from tools/services/services.css (only when tools/features.json services.on is true). Do not edit. */
/* copyzor.com: "Egyéb szolgáltatások" (services.html) and the index "nem csak flyer." section (tools/features.json services.on).
   Uses the "smooth" theme tokens (css/theme-smooth.css), with plain fallbacks. The quote form reuses css/order.css (.of-*). */

/* ── index: "nem csak flyer." (gen.py sv_teaser()), right under the packages (.sm-svc): the same title / lead / spacing; one card per
   service in the smooth card language (.how__step: dark gradient, --sm-r-md, hairline), the transparent PNG on a soft acid glow
   (like .sv-art::before). 4 columns from 1100 px, 2 below. ── */
.sv-more { padding: 104px 0 40px; }
.sv-more__head { display: grid; gap: 22px; justify-items: start; max-width: 760px; }
.sv-more__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 40px 0 0; padding: 0; list-style: none; }
.sv-card {
  position: relative; display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 22px 22px 24px; overflow: hidden;
  color: #fff; text-decoration: none; isolation: isolate;
  background: linear-gradient(180deg, #111 0%, #0a0a0a 100%); border-radius: var(--sm-r-md, 0);
  box-shadow: var(--sm-hi, none), inset 0 0 0 1px var(--sm-hair, rgba(255, 255, 255, 0.1)); transition: box-shadow 240ms;
}
.sv-card:hover { box-shadow: var(--sm-hi, none), inset 0 0 0 1px var(--acid, #d1fe17); }
.sv-card__art { position: relative; display: block; flex: none; aspect-ratio: 5 / 4; isolation: isolate; }
.sv-card__art::before {
  content: ""; position: absolute; inset: -6% -4%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(209, 254, 23, 0.22), rgba(209, 254, 23, 0.08) 50%, transparent);
}
.sv-card__art picture { display: contents; }
.sv-card__art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.sv-card__t { margin-top: auto; font-family: var(--font-disp, inherit); font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.sv-more__btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; }
@media (min-width: 1100px) { .sv-more__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 719.98px) { .sv-more { padding: 72px 0 24px; } }
@media (max-width: 599.98px) {
  .sv-card { gap: 10px; padding: 14px 14px 16px; }
  .sv-card__t { font-size: 16px; }
}

/* ── services.html ── */
.sv-hero { padding: 96px 0 40px; }
.sv-h1 { font-family: var(--font-disp, inherit); font-weight: 600; letter-spacing: -0.035em; text-transform: none; font-size: clamp(44px, 7vw, 96px); line-height: 1; }
.sv-lead { max-width: 46ch; margin-top: 24px; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.45; color: var(--sm-fg-2, #bbb); }
.sv-hero__btns { margin-top: 28px; }
.sv-sect { padding: 40px 0; scroll-margin-top: calc(var(--head-h, 64px) + 16px); }
.sv-sect__in { display: grid; gap: 28px; padding-top: 40px; border-top: 1px solid var(--sm-hair, rgba(255, 255, 255, 0.1)); }
.sv-sect__copy { display: grid; gap: 18px; justify-items: start; max-width: 760px; }
.sv-h2 { font-family: var(--font-disp, inherit); font-size: clamp(32px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 500; text-transform: none; }
.sv-text { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; color: var(--sm-fg-2, #bbb); max-width: 62ch; }
.sv-gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.sv-gal figure { margin: 0; }
.sv-gal img { display: block; width: 100%; height: auto; border-radius: var(--sm-r-md, 0); background: var(--sm-card, #0d0d0d); }
.sv-gal figcaption { margin-top: 8px; font-size: 14px; color: var(--sm-fg-3, #999); }
@media (max-width: 899.98px) { .sv-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599.98px) { .sv-gal { grid-template-columns: minmax(0, 1fr); } }

/* the section image (services.json "image"): the owner's transparent PNG mockup, no box behind it, on a soft acid glow
   (a static radial gradient a bit larger than the image, like .sm-glow__core in css/theme-smooth.css). Phones: under the copy,
   max 520 px, centred; from 900 px: copy left, image right, vertically centred. The glow may reach past the gutters: the
   section clips it sideways (overflow-x: clip, not hidden: no scroll container, so nothing sticky inside breaks). */
.sv-sect:has(.sv-art) { overflow-x: clip; }
.sv-art { position: relative; isolation: isolate; justify-self: center; width: 100%; max-width: 520px; }
.sv-art::before {
  content: ""; position: absolute; inset: -14% -12%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(209, 254, 23, 0.22), rgba(209, 254, 23, 0.08) 50%, transparent);
}
.sv-art picture, .sv-art img { display: block; width: 100%; height: auto; }
/* image.video (#motion): the loop over the laptop's After Effects viewer. js/services.js sizes the <video> to its width / height
   attributes and warps it onto data-quad (matrix3d from the box's top-left), then shows it; hidden without JS. */
.sv-vid { position: absolute; inset: 0; pointer-events: none; visibility: hidden; }
.sv-vid.is-on { visibility: visible; }
.sv-vid video { position: absolute; left: 0; top: 0; display: block; max-width: none; transform-origin: 0 0; object-fit: fill; background: #000; }
@media (min-width: 900px) {
  .sv-sect__in--art { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: clamp(32px, 4vw, 64px); }
  .sv-sect__in--art > .sv-art { max-width: 600px; }
  .sv-sect__in--art > .sv-gal { grid-column: 1 / -1; }
}

/* the quote form (#quote): css/order.css .of-email / .of-form, plus these */
.sv-quote { margin-top: 40px; scroll-margin-top: var(--head-h, 64px); }
.sv-quote .of-title { margin-bottom: 12px; }
.sv-qlead { margin-bottom: 32px; color: var(--sm-fg-2, #bbb); font-size: 17px; line-height: 1.5; }
.sv-hint { font-size: 13px; color: var(--sm-fg-3, #999); }
.sv-privacy { font-size: 14px; line-height: 1.5; color: var(--sm-fg-2, #bbb); }
.sv-privacy a { color: var(--acid, #d1fe17); }
.sv-quote select.of-in { width: 100%; }
.sv-quote input[type="file"] { padding: 10px 12px; }
/* css/order.css shows every span of .of-email .of-title (display: inline): keep the language switch working there */
html.lang-hu .sv-quote [data-only="en"], html:not(.lang-hu) .sv-quote [data-only="hu"] { display: none; }

/* services.html first section: party flyer design (fixed packages; min price + button to pricing.html, no package chips) */
.sv-flyer__from { font-size: clamp(18px, 1.8vw, 22px); font-weight: 600; color: var(--acid, #d1fe17); }
.sv-flyer__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.sv-flyer__link { color: var(--sm-fg-2, #bbb); text-decoration: underline; text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.sv-flyer__link:hover { color: #fff; }

/* pricing.html (services on): the "← Szolgáltatások" back link above the H1 */
.pricing__back { margin: 0 0 12px; font-size: 15px; }
.pricing__back a { color: var(--sm-fg-2, #bbb); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.pricing__back a:hover { color: #fff; }
/* the logo mockup reads loud next to the other images: shown a bit smaller (services.html section + index card) */
#logo .sv-art img, .sv-card[href$="#logo"] .sv-card__art img { transform: scale(0.78); }