/* Biogas page (extends styles.css) */
:root { --lap: 64px; }   /* how far the fact card reaches over the hero (above) and into the next section (below) */
.bg-hero { position: relative; display: flex; align-items: center; min-height: clamp(520px, 80vh, 720px); padding: calc(var(--header-h) + 40px) 0 120px; color: #fff;
  background: linear-gradient(90deg, rgba(0,24,72,.93) 0%, rgba(0,32,96,.72) 48%, rgba(0,32,96,.12) 100%), url("assets/img/biogas-tatabanya.jpg") center / cover no-repeat, var(--navy); }
.bg-hero h1 { max-width: 13ch; margin-bottom: .4em; font-size: clamp(2.4rem, 5vw, 4.2rem); }
.bg-lead { max-width: 52ch; font-size: 1.1rem; font-weight: 500; color: rgba(255,255,255,.92); margin: 0 0 2em; text-shadow: 0 1px 14px rgba(0,18,56,.6); }
.bg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; }
.bg-actions .btn-ghost { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 15px 0; border: 0; border-radius: 0; background: none; color: #fff; }
.bg-actions .btn-ghost::after { content: ""; width: 44px; height: 1.5px; background: currentColor; transform: scaleX(.45); transform-origin: left center; transition: transform .25s; }
.bg-actions .btn-ghost:hover, .bg-actions .btn-ghost:focus-visible { background: none; color: #fff; }
.bg-actions .btn-ghost:hover::after, .bg-actions .btn-ghost:focus-visible::after { transform: scaleX(1); }

/* The fact card straddles the hero edge. The facts box is pulled up by --lap over the hero; its lower part (below --lap) is painted
   in the next section's colour, so no strip of page background can show beside the card, whatever the card's height. */
.bg-facts { position: relative; z-index: 1; margin-top: calc(var(--lap) * -1); background: linear-gradient(to bottom, transparent var(--lap), var(--mist) var(--lap)); }
.bg-facts-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 0 28px; list-style: none; background: #fff; border-radius: var(--radius); box-shadow: 0 18px 48px rgba(0,24,72,.16); }
.bg-facts-in li { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 30px 24px 30px 0; }
.bg-facts-in li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.bg-facts-in b { font: 600 clamp(2.2rem, 4vw, 3.2rem)/1 var(--font); color: var(--navy); letter-spacing: -.02em; }
.bg-facts-in li > span { color: var(--muted); font-size: .92rem; line-height: 1.4; max-width: 24ch; }

.bg-flow { background: var(--mist); }
.bg-sub { max-width: 60ch; color: var(--muted); margin: 0 0 48px; }
/* How it works: a route map. Numbered stops on a line; the line forks after step 2 into two branches (neutralisation / utilization).
   Small screens: one vertical rail. Wide screens (>1080px): the rail runs left to right, the branches as two rows. */
:root { --chart-line: rgba(0,168,225,.55); }
.bg-chart { --cs: 40px; position: relative; width: 100%; max-width: 760px; }
.bg-common, .bg-lane ol { margin: 0; padding: 0; list-style: none; }
.bg-node { position: relative; padding: 0 0 24px 58px; }
.bg-node:last-child { padding-bottom: 0; }
.bg-node:not(:last-child)::before { content: ""; position: absolute; left: calc(var(--cs) / 2 - 1px); top: var(--cs); bottom: 0; width: 2px; background: var(--chart-line); }
.bg-num { position: absolute; left: 0; top: 0; z-index: 1; display: grid; place-items: center; width: var(--cs); height: var(--cs); border-radius: 50%; background: var(--cyan); color: #fff; font-weight: 600; box-shadow: 0 0 0 6px var(--mist); }
.bg-common .bg-num { background: var(--navy); }
/* the two branches have their own colour: neutralisation = brand cyan, utilization = green (green power) */
.bg-lane:first-child { --lc: var(--cyan); --lcl: rgba(0,168,225,.55); }
.bg-lane:last-child { --lc: #16a06b; --lcl: rgba(22,160,107,.55); }
.bg-lane .bg-num { background: var(--lc); }
.bg-lane .bg-node:not(:last-child)::before { background: var(--lcl); }
.bg-node > div { display: block; }
.bg-node b { display: flex; align-items: center; min-height: var(--cs); margin: 0 0 2px; font-size: 1.05rem; line-height: 1.3; color: var(--navy); }
.bg-node span:not(.bg-num) { display: block; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.bg-fork { display: flex; align-items: center; gap: 16px; margin: 38px 0 0; color: var(--navy); font-size: .85rem; font-weight: 500; }
.bg-fork::before, .bg-fork::after { content: ""; flex: 1; height: 2px; background: var(--chart-line); }
.bg-lane-t { display: flex; align-items: center; gap: 14px; margin: 30px 0 18px; font: 600 .78rem/1.3 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--navy); }
.bg-lane-t::before { content: ""; width: 32px; height: 2px; background: var(--lc); }

@media (min-width: 1081px) {
  .bg-chart { --fk: 72px; --g: 24px; --ly: 52px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; max-width: none; }
  /* the common steps are centred; biogas.js then nudges them so their line meets the fork bar exactly midway between the two branch lines (the branch rows are equal height) */
  .bg-common { grid-column: 1 / span 2; display: grid; grid-template-columns: 1fr 1fr; position: relative; z-index: 2; }
  .bg-fork { display: none; }
  .bg-lanes { grid-column: 3 / span 3; display: grid; grid-auto-rows: 1fr; gap: var(--g); margin-left: var(--fk); position: relative; }
  .bg-lane { position: relative; }
  .bg-lane-t { height: 20px; margin: 0 0 12px; line-height: 20px; }
  .bg-lane ol { display: flex; }
  .bg-node { padding: calc(var(--cs) + 12px) 24px 0 0; }
  .bg-node span:not(.bg-num) { font-size: .9rem; line-height: 1.5; }
  .bg-lane .bg-node { flex: 0 0 33.3333%; }
  .bg-node b { min-height: 0; display: block; margin-bottom: 6px; }
  .bg-node:not(:last-child)::before { left: calc(var(--cs) / 2); right: calc(var(--cs) / -2); top: calc(var(--cs) / 2 - 1px); bottom: auto; width: auto; height: 2px; }
  .bg-common .bg-node:last-child::before { content: ""; position: absolute; left: calc(var(--cs) / 2); right: calc(var(--fk) / -2); top: calc(var(--cs) / 2 - 1px); height: 2px; background: var(--chart-line); }
  /* the fork: each branch gets a rounded elbow from the bar into its line (top branch turns down-right, bottom branch up-right); the two colours meet exactly under the junction pill; a small "or" marks the junction */
  .bg-lane::after { content: ""; position: absolute; left: calc(var(--fk) / -2 - 1px); width: calc(var(--fk) / 2 + var(--cs) / 2 + 1px); border: 0 solid var(--lcl); border-left-width: 2px; pointer-events: none; }
  .bg-lane:first-child::after { top: calc(var(--ly) - 1px); height: calc(50% + var(--g) / 2 + 1px); border-top-width: 2px; border-top-left-radius: 18px; }
  .bg-lane:last-child::after { top: calc(var(--ly) - 50% - var(--g) / 2); height: calc(50% + var(--g) / 2 + 1px); border-bottom-width: 2px; border-bottom-left-radius: 18px; }
  .bg-common .bg-node:last-child > div::before { position: absolute; left: calc(100% + var(--fk) / 2 - 20px); top: calc(var(--cs) / 2 - 12px); z-index: 2; width: 40px; height: 24px; border: 2px solid var(--navy); border-radius: 12px; background: var(--mist); color: var(--navy); font-size: .68rem; font-weight: 600; line-height: 20px; text-align: center; }
  html[lang="hu"] .bg-common .bg-node:last-child > div::before { content: "vagy"; }
  html[lang="en"] .bg-common .bg-node:last-child > div::before { content: "or"; }
}


/* White sections carry the grey, faded site photo (same recipe as solar): 80% white veil + sideways fade to white */
.bg-offer { background: linear-gradient(to right, #fff 0%, #fff 30%, rgba(255,255,255,0) 100%) no-repeat, linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.8)), url("assets/img/biogas-bg.jpg?v=1") center / cover no-repeat, #fff; }
.bg-end { background: #fff; }
.bg-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.bg-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px 28px; display: flex; flex-direction: column; }
.bg-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--cyan); color: #fff; margin-bottom: 20px; }
.bg-ico svg { width: 26px; height: 26px; }
.bg-card h3 { font-size: 1.3rem; }
.bg-card > p { color: var(--muted); margin: 0 0 20px; font-size: .95rem; }
.bg-ticks { display: grid; gap: 10px; margin: auto 0 0; padding: 18px 0 0; list-style: none; border-top: 1px solid var(--line); }
.bg-ticks li { position: relative; padding-left: 30px; font-size: .92rem; font-weight: 500; }
.bg-ticks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain; }

/* #why also exists on the home page, where styles.css gives it a faded photo; the dark section here is plain navy (the id selector is needed to win) */
#why.bg-why { background: var(--navy); }
.bg-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; margin: 44px 0 0; padding: 0; list-style: none; }
.bg-why-grid li { padding: 24px 0 0; border-top: 1px solid rgba(255,255,255,.25); }
.bg-why-grid h3 { color: #5fd0f5; font-size: 1.35rem; line-height: 1.3; margin-bottom: 10px; }
.bg-why-grid p { margin: 0; color: rgba(255,255,255,.85); font-size: .95rem; }

.bg-end-in { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(28px, 6vw, 80px); align-items: center; }
.bg-end h2 { max-width: 20ch; }
.bg-end p { color: var(--muted); margin: 0; max-width: 52ch; }
.bg-end-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.bg-mail { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }


@media (max-width: 1080px) {
  .bg-facts-in { grid-template-columns: repeat(2, 1fr); }
  .bg-facts-in li:nth-child(3) { padding-left: 0; border-left: 0; }
  .bg-facts-in li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .bg-card { padding: 26px 22px 24px; }
  .bg-end-in { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .bg-why-grid { grid-template-columns: 1fr; row-gap: 28px; }
  .bg-cards { grid-template-columns: 1fr; }
  .bg-card { padding: 30px 28px 28px; }
}
@media (max-width: 700px) {
  :root { --lap: 48px; }
  .bg-hero { padding-bottom: 96px; background: linear-gradient(180deg, rgba(0,24,72,.88) 0%, rgba(0,32,96,.7) 100%), url("assets/img/biogas-tatabanya.jpg") center / cover no-repeat, var(--navy); }
  .bg-facts-in { padding: 0 20px; grid-template-columns: 1fr; }
  .bg-facts-in li, .bg-facts-in li + li { padding: 20px 0; border-left: 0; }
  .bg-facts-in li + li { border-top: 1px solid var(--line); }
  .bg-facts-in li, .bg-facts-in li + li, .bg-facts-in li:nth-child(3) { flex-direction: row; align-items: baseline; gap: 18px; }
  .bg-facts-in li:nth-child(n+2) { border-top: 1px solid var(--line); }
  .bg-why-grid { grid-template-columns: 1fr; row-gap: 28px; }
}

/* Own header: back to Promexa, logo + business-line tag, in-page menu, Contact us */
.biogas-page .header-inner { gap: 18px; }
.bg-back { margin-right: auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; color: #fff; text-decoration: none; font: 600 .74rem/1 var(--font); letter-spacing: .1em; text-transform: uppercase; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); transition: background-color var(--hover), color var(--hover); white-space: nowrap; }
.bg-back:hover, .bg-back:focus-visible { background: #fff; color: var(--navy); }
.bg-tag:hover, .bg-tag:focus-visible { color: #fff; }
.bg-back > span:first-child { font-size: 1rem; line-height: 1; transition: transform var(--hover); }
.bg-back:hover > span:first-child { transform: translateX(-3px); }
.biogas-page .brand { margin-right: 0; }
.bg-tag { text-decoration: none; transition: color var(--hover); margin-right: 6px; padding-left: 16px; border-left: 1px solid rgba(255,255,255,.3); font: 600 .8rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: #5fd0f5; white-space: nowrap; }
@media (max-width: 700px) {
  .bg-back { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .bg-back-t, .bg-tag { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bg-back > span:first-child { transition: none; } }