/*
 * szolgaltatasaim.css — csak a tabos szolgáltatások oldal egyedi CSS-e
 * (forrás: szolgaltatasaim.html).
 */

/* Szekció-ritmus felülírások (szolgaltatasaim.html:78 — kisebb padding, mindkét glow látszik) */
/* A szekcio-ritmus a base.css --section-y tokenjebol jon (design audit P0-4);
   a korabbi egyedi clamp(56px,7vw,92px) felulras megszunt. */
.section::before { width: 560px; height: 560px; right: -220px; top: -200px; left: auto;
  background: radial-gradient(circle, rgba(58,63,214,.10), transparent 70%); }
.section::after { display: block; width: 440px; height: 440px; left: -170px; bottom: -180px; right: auto;
  background: radial-gradient(circle, rgba(19,179,154,.10), transparent 70%); }
.head-center { max-width: 52ch; margin-bottom: 40px; } /* szolgaltatasaim.html:82 (base: 46ch/54px) */

/* Gomb-variáns: "Hamarosan" (szolgaltatasaim.html:48) */
/* .btn-soft („Hamarosan" pill) TÖRÖLVE v0.21.0-ban: a Trader Identity kártya is élő
   linket kapott, így egyetlen sablon sem használta többé. (git őrzi) */

/* — Tabok (szolgaltatasaim.html:86) — */
.tabs { display: flex; justify-content: center; margin-bottom: 14px; }
.tablist { display: inline-flex; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 100px; padding: 6px; gap: 4px; box-shadow: var(--shadow-sm); }
.tab { border: 0; background: transparent; font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--ink-2); padding: 13px 28px; border-radius: 100px; cursor: pointer; transition: .2s ease; display: inline-flex; align-items: center; gap: 9px; }
.tab svg { width: 18px; height: 18px; }
.tab:hover { color: var(--blue); }
.tab[aria-selected="true"] { background: var(--grad-ink); color: #fff; box-shadow: 0 8px 20px rgba(47,80,180,.24); }
.tab[aria-selected="true"]:hover { color: #fff; }
/* Mobil: vízszintes szegmentált váltó (rövid címekkel: „Egyéni" / „Csoportos") — 2 egyenlő
   szegmens egy sorban, aktív = arculati gradiens „pill", inaktív lapos. Az ikonok maradnak,
   a bővebb kifejtés a panel leírásában. (Ha nem férne ki, a cím tördelhet, de rövid.) */
@media (max-width: 520px) {
  .tabs { display: block; }
  .tablist { display: flex; border-radius: 16px; }
  .tab { flex: 1; justify-content: center; padding: 13px 10px; }
}

.panel { display: none; }
.panel.active { display: block; animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .panel.active { animation: none; } }
/* Panel-bevezető („Neked való, ha…") — külön dizájn: halvány box, dőlt + kisebb leírás. */
.panel-intro { text-align: center; max-width: 62ch; margin: 0 auto 46px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 38px) clamp(22px, 5vw, 40px); }
.panel-intro h2 { font-size: clamp(19px, 2.2vw, 24px); }
.panel-intro p { color: var(--ink-2); margin-top: 12px; font-style: italic; font-size: 15.5px; line-height: 1.6; }

/* — Szolgáltatás-kártyák (szolgaltatasaim.html:103) — */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; align-items: stretch; }
.svc-grid.duo { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin: 0 auto; }
.svc-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: .24s ease; position: relative; }
/* A teljes kártya kattintható: a Bővebben-link lefedi a kártyát (a "Hamarosan"/# kártyákon nincs) */
.svc-card .btn[href]:not([href="#"])::before { content: ""; position: absolute; inset: 0; z-index: 1; }
/* VILLOGAS-JAVITAS. A fenti overlay az EGESZ kartyat lefedi, mert a gomb
   position: static, igy a ::before tartalmazo blokkja a .svc-card (position: relative).
   A .btn-primary:hover viszont transformot ES filtert is kap - mindketto
   TARTALMAZO BLOKKA teszi a gombot az abszolut pozicionalt gyereke szamara.
   Ettol az inset:0 hirtelen a GOMB dobozara vonatkozott (153x44) a kartya
   helyett (395x850), az overlay kicsuszott az eger alol, a hover megszunt,
   az overlay visszanott -> vegtelen hurok ~281 valtas/masodperccel. A kurzor
   ettol ugralt a kezikon es a szovegkijelolo I-betu kozott, es a szoveget
   nem lehetett kijelolni.
   A gombnak nincs szuksege sajat hover-visszajelzesre: az egesz kartya emelkedik.
   Az :active is kell, mert a translateY(0) sem "none" - az is tartalmazo blokk. */
.svc-card .btn[href]:not([href="#"]):hover,
.svc-card .btn[href]:not([href="#"]):active { transform: none; filter: none; }
.svc-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--grad); opacity: 0; transition: .24s ease; }
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.svc-card:hover::after { opacity: 1; }

.svc-cover { position: relative; aspect-ratio: 3/2; overflow: hidden; }
.svc-cover img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.08) brightness(1.04); }
.svc-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(19,179,154,.74) 0%, rgba(41,150,190,.66) 48%, rgba(58,63,214,.74) 100%); }

.svc-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3; width: 92px; height: 92px; border-radius: 50%; border: 2.5px solid #fff; display: grid; place-items: center; background: rgba(255,255,255,.10); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); box-shadow: 0 10px 26px rgba(20,22,60,.28); transition: .26s ease; }
.svc-badge svg { width: 40px; height: 40px; color: #fff; stroke: #fff; transition: .26s ease; }
.svc-card:hover .svc-badge { background: #fff; border-color: #fff; transform: translate(-50%,-50%) scale(1.08); box-shadow: 0 16px 34px rgba(20,22,60,.32); }
.svc-card:hover .svc-badge svg { stroke: url(#iconGrad); }

.svc-body { padding: 30px 30px 32px; text-align: center; display: flex; flex-direction: column; flex: 1; }
.svc-body h3 { font-size: 22px; }
.svc-sub { font-family: var(--font-head); font-weight: 500; font-size: 15px; color: var(--muted); margin-top: 8px; }
.svc-desc { color: var(--muted); font-size: 15px; line-height: 1.6; margin-top: 18px; flex: 1; }
.svc-price { display: inline-flex; align-items: center; gap: 9px; align-self: center; font-family: var(--font-head); font-weight: 600; font-size: 15.5px; color: var(--blue); background: rgba(58,63,214,.07); border: 1px solid rgba(58,63,214,.15); padding: 9px 17px; border-radius: 100px; margin-top: 22px; }
.svc-price svg { width: 17px; height: 17px; color: var(--teal-ink); flex: none; }
.svc-price .unit { color: var(--muted); font-weight: 500; } /* a design inline style-jának kiváltása */
.svc-body .btn { align-self: center; margin-top: 20px; }
@media (max-width: 900px) { .svc-grid, .svc-grid.duo { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

/* — Gradiens CTA-sáv (szolgaltatasaim.html:129) — */
/* A záró CTA a base.css közös .cta-band komponensét használja (v0.13.0). */