/* CFB24 — section layout & component classes
 *
 * Extracted from inline styles. These classes replace the style={{...}} objects
 * in section JSX files. mobile.css targets these class names for responsive overrides.
 */

/* ===== Section backgrounds ===== */
.sec-white { background: #fff; }
.sec-light { background: var(--n-50); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sec-dark { background: var(--navy-800); }
.sec-dark-rel { background: var(--navy-800); position: relative; overflow: hidden; }

/* ===== Container ===== */
.container { max-width: var(--container); margin: 0 auto; }

/* ===== Section padding variants ===== */
.pad-y24 { padding: var(--space-24) var(--space-8); }
.pad-y20 { padding: var(--space-20) var(--space-8); }
.pad-y16 { padding: var(--space-16) var(--space-8); }
.pad-t16-b20 { padding: var(--space-16) var(--space-8) var(--space-20); }
.pad-t20-b24 { padding: var(--space-20) var(--space-8) var(--space-24); }
.pad-t0-b24 { padding: 0 var(--space-8) var(--space-24); }
.pad-t0-b20 { padding: 0 var(--space-8) var(--space-20); }

/* ===== Hero structure ===== */
.hero-section { position: relative; overflow: hidden; background: var(--navy-800); }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-content { position: relative; z-index: 2; pointer-events: none; max-width: var(--container); margin: 0 auto; display: flex; flex-direction: column; justify-content: center; }
.hero-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 var(--space-4); display: inline-flex; align-items: center; gap: 10px; }
.hero-eyebrow-line { width: 26px; height: 2px; background: currentColor; display: inline-block; }
.hero-buttons { display: flex; gap: var(--space-3); margin-top: var(--space-8); pointer-events: auto; flex-wrap: wrap; }

/* ===== Section header (title + description side by side) ===== */
.section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-12); }

/* ===== Typography ===== */
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.h2-section { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; color: var(--text-strong); margin: 0; text-wrap: balance; }
.h3-card { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; color: var(--text-strong); }
.text-balance { text-wrap: balance; }

/* ===== Body text ===== */
.body-lg { font-size: 17px; line-height: 1.65; color: var(--text-muted); }
.body-md { font-size: 16px; line-height: 1.65; color: var(--text-muted); }
.body-sm { font-size: 15px; line-height: 1.55; color: var(--text-muted); }
.body-xs { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }

/* ===== Flex utilities ===== */
.flex-col { display: flex; flex-direction: column; }
.flex-col-2 { display: flex; flex-direction: column; gap: var(--space-2); }
.flex-col-3 { display: flex; flex-direction: column; gap: var(--space-3); }
.flex-col-4 { display: flex; flex-direction: column; gap: var(--space-4); }
.flex-col-5 { display: flex; flex-direction: column; gap: var(--space-5); }
.flex-row { display: flex; }
.flex-row-3 { display: flex; gap: var(--space-3); }
.flex-center { display: inline-flex; align-items: center; justify-content: center; }
.flex-grow { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.m0 { margin: 0; }

/* ===== Grid utilities ===== */
.grid-1 { display: grid; grid-template-columns: 1fr; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-6); }

/* ===== Card patterns ===== */
.card-body { display: flex; flex-direction: column; gap: var(--space-3); padding: 40px var(--space-7) var(--space-7); flex-grow: 1; }
.card-img-wrap { position: relative; height: 196px; }
.card-gradient { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(10,31,53,.55), transparent 58%); }
.card-badge { position: absolute; top: 14px; left: 14px; padding: 5px 12px; border-radius: var(--radius-pill); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.card-icon-circle { position: absolute; bottom: -26px; left: 22px; width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-card); display: inline-flex; align-items: center; justify-content: center; }

/* ===== Icon boxes ===== */
.icon-box-48 { width: 48px; height: 48px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; }
.icon-box-50 { width: 50px; height: 50px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-box-52 { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; }
.icon-box-56 { width: 56px; height: 56px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; }

/* ===== Process diamonds ===== */
.diamond-68 { width: 68px; height: 68px; border-radius: 16px; transform: rotate(45deg); display: inline-flex; align-items: center; justify-content: center; }
.diamond-inner { transform: rotate(-45deg); }

/* ===== Process step columns ===== */
.proc-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.proc-label { text-align: center; max-width: 220px; }

/* ===== Sticky sidebar ===== */
.sticky-aside { position: sticky; top: 96px; }

/* ===== Kcard (lakossági highlights) ===== */
.kcard-inner { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }

/* ===== CTA section layout ===== */
.cta-grid { display: grid; grid-template-columns: 1fr auto; gap: var(--space-16); align-items: center; }