/* Grillandia – „Egyedi tervezésű konyhák” folyamat-szekció (2026-10-12)
   A régi award-section helyett, csak a főoldalon. Sötét háttérkép, előtte 3 lépés (Tervezés – Gyártás – Telepítés)
   sötét üvegkártyákon (körvonal nélkül, 14 px sarok). A rézszínű vonalikonok belépéskor „kirajzolódnak”,
   a kártyák alulról „kinyílnak” (clip-path, mint a kategória-kártyák) – csak ha a JS bekapcsolja (.gf-js).
   Tipó: H2 Fira Sans 700 40/48 −0,5px nagybetűs (mobil 28px), szöveg Barlow 500 17px/1,65, szekció padding 100px.
   Rács: ≥900 px 3 oszlop; alatta egy oszlop, a kártyán belül ikon balra, szöveg jobbra. */

.gf { position:relative; padding:100px 0; color:#fff; overflow:hidden; isolation:isolate;
    background:#0f0c09 url("../images/background/bg-egyedi-tervezes.webp") center / cover no-repeat; }
/* finom sötétítés: a szöveg kontrasztja minden szélességen biztos */
.gf::before { content:""; position:absolute; top:0; right:0; bottom:0; left:0; z-index:-1; pointer-events:none;
    background:linear-gradient(180deg, rgba(15,12,9,.55) 0%, rgba(15,12,9,.35) 50%, rgba(15,12,9,.6) 100%); }
.gf-in { max-width:1200px; margin:0 auto; padding:0 15px; }

/* fejléc: cím balra, bevezető jobbra */
.gf-head { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:48px; align-items:end; margin-bottom:48px; }
.gf-title { margin:0; font:700 40px/48px "Fira Sans", sans-serif; letter-spacing:-.5px; text-transform:uppercase; color:#fff; }
.gf-lead { margin:0; font:500 17px/1.65 "Barlow", sans-serif; color:rgba(255,255,255,.78); }

/* lépések */
.gf-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px; counter-reset:gf; }
.gf-step { margin:0; padding:0; display:flex; min-width:0; }
.gf-card { position:relative; width:100%; padding:34px 30px 32px; border-radius:14px;
    background:rgba(255,255,255,.07); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    transition:background-color .45s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
.gf-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.gf-ico { display:block; width:50px; height:50px; color:#D39459; }
.gf-ico :is(path, rect, circle, line, polyline) { fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
/* lépésszám a cím előtt („01. Tervezés”): rézszínű, a címmel azonos méretben */
.gf-num { color:#D39459; font-weight:700; font-variant-numeric:tabular-nums; margin-right:2px; }
/* ikon-keret; a JS hoverre egy halvány „vázlat” másolatot tesz az ikon alá, erre rajzolódnak rá a vonalak */
.gf-icowrap { position:relative; display:block; width:50px; height:50px; flex:none; }
.gf-icowrap .gf-ico { position:relative; z-index:1; width:100%; height:100%; overflow:visible; }
.gf-icowrap .gf-ghost { position:absolute; top:0; left:0; z-index:0; opacity:.22; }
.gf-step h3 { margin:0 0 10px; font:600 22px/1.3 "Fira Sans", sans-serif; letter-spacing:-.1px; text-transform:none; color:#fff; }
.gf-step p { margin:0; font:500 16px/1.6 "Barlow", sans-serif; color:rgba(255,255,255,.72); }
@media (hover:hover) {
    .gf-card:hover { background:rgba(255,255,255,.11); transform:translateY(-4px); }
}

/* belépő animáció (csak ha a JS bekapcsolja: .gf-js; mozgáscsökkentésnél nincs) */
.gf-js .gf-step { opacity:0; }
.gf-js .gf-card { clip-path:inset(100% 0 0 0 round 14px); }
.gf-js .gf-ico :is(path, rect, circle, line, polyline) { stroke-dasharray:var(--len, 200); stroke-dashoffset:var(--len, 200); }
.gf-js.gf-in-view .gf-step { opacity:1; }
.gf-js.gf-in-view .gf-card { clip-path:inset(0 0 0 0 round 14px); transition:clip-path 1s cubic-bezier(.7, 0, .2, 1), background-color .45s ease, transform .45s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i, 0) * 70ms), 0s, 0s; }
.gf-js.gf-in-view .gf-ico :is(path, rect, circle, line, polyline) { stroke-dashoffset:0; transition:stroke-dashoffset 1.4s cubic-bezier(.65, 0, .35, 1); transition-delay:calc(.45s + var(--i, 0) * 120ms); }

/* tablet / mobil */
@media (max-width:991px) {
    .gf { padding:80px 0; }
    .gf-head { grid-template-columns:minmax(0, 1fr); gap:16px; margin-bottom:36px; }
    .gf-lead { max-width:680px; }
}
@media (max-width:899px) {
    .gf-steps { grid-template-columns:minmax(0, 1fr); gap:14px; }
    .gf-card { display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:22px; padding:26px 24px; align-items:start; }
    .gf-top { flex-direction:column; align-items:flex-start; gap:12px; margin:0; }
    .gf-step h3 { font-size:20px; margin-bottom:6px; }
}
@media (max-width:767px) {
    .gf-title { font-size:28px; line-height:1.2; }
    .gf-lead { font-size:16px; line-height:1.6; }
}
@media (max-width:599px) {
    .gf { padding:64px 0; }
    .gf-in { padding:0 16px; }
    .gf-card { column-gap:16px; padding:22px 18px; }
    .gf-icowrap { width:42px; height:42px; }
    .gf-step h3 { font-size:18px; }
    .gf-step p { font-size:15px; }
}

/* tartalék: blur nélküli böngésző */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) { .gf-card { background:rgba(40,36,32,.85); } }
@media (prefers-reduced-motion:reduce) {
    .gf-card { transition:none; }
}