/* Webrakéta Esettanulmányok — pixel-pontos Lovable parity
   Asztali (≥1024) / Tablet (768–1023) / Mobil (<768)
*/

/* ============ FULL-WIDTH BREAKOUT ============ */
.wr-css-section,
.wr-css-cta {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  font-family: "Open Sans", system-ui, -apple-system, sans-serif !important;
  color: #1A1A1F !important;
}

.wr-css-section {
  background: #FAFAF7 !important;
  padding: 64px 24px !important;
}
@media (min-width: 768px) {
  .wr-css-section { padding: 96px 24px !important; }
}

.wr-css-container {
  position: relative !important;
  max-width: 1152px !important;
  margin: 0 auto !important;
}

/* ============ HEADER ============ */
.wr-css-header {
  max-width: 672px !important;
  margin: 0 0 80px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

/* Eyebrow chip — Open Sans 700 / 11px / lh 19px (mobil 15px) / uppercase 0.2em / rgb(30,90,142) */
.wr-css-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid rgba(30, 90, 142, 0.25) !important;
  background: rgba(30, 90, 142, 0.08) !important;
  border-radius: 9999px !important;
  padding: 6px 16px !important;
  font-family: "Open Sans", sans-serif !important;
  font-style: normal !important;
  font-size: 11px !important;
  line-height: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgb(30, 90, 142) !important;
  width: fit-content !important;
}
@media (min-width: 768px) {
  .wr-css-eyebrow { line-height: 19px !important; }
}
.wr-css-eyebrow-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 9999px !important;
  background: rgb(30, 90, 142) !important;
  display: inline-block !important;
}

/* H1 — Montserrat 700, mobil 39/41, desktop 68/71, rgb(1,80,146) */
.wr-css-h1 {
  font-family: "Montserrat", sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  color: rgb(1, 80, 146) !important;
  font-size: 39px !important;
  line-height: 41px !important;
  letter-spacing: -0.025em !important;
  margin: 0 !important;
  text-wrap: balance !important;
}
@media (min-width: 768px) {
  .wr-css-h1 { font-size: 68px !important; line-height: 71px !important; }
}
.wr-css-h1-accent { color: rgb(1, 80, 146) !important; }

/* Bevezető — Open Sans 400, mobil 20/32, desktop 23/37, rgb(91,100,112) */
.wr-css-sub {
  font-family: "Open Sans", sans-serif !important;
  font-style: normal !important;
  font-size: 20px !important;
  line-height: 32px !important;
  font-weight: 400 !important;
  color: rgb(91, 100, 112) !important;
  margin: 0 !important;
  max-width: 52ch !important;
}
@media (min-width: 768px) {
  .wr-css-sub { font-size: 23px !important; line-height: 37px !important; }
}

/* ============ CASES LIST ============ */
.wr-css-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 128px !important;
}

.wr-css-case {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 48px !important;
  align-items: start !important;
}
@media (min-width: 1024px) {
  .wr-css-case {
    grid-template-columns: repeat(12, 1fr) !important;
  }
  .wr-css-case .wr-css-text { grid-column: span 6 !important; }
  .wr-css-case .wr-css-media { grid-column: span 6 !important; }
  .wr-css-case.is-reverse .wr-css-text { order: 2 !important; }
  .wr-css-case.is-reverse .wr-css-media { order: 1 !important; }
}

/* Big index number — 180px Montserrat 700, primary 7% */
.wr-css-bignum {
  display: none !important;
  position: absolute !important;
  top: -64px !important;
  left: -16px !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 180px !important;
  line-height: 1 !important;
  color: rgba(30, 90, 142, 0.07) !important;
  user-select: none !important;
  pointer-events: none !important;
}
@media (min-width: 1024px) {
  .wr-css-bignum { display: block !important; }
}

/* Chips row */
.wr-css-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 20px 0 !important;
}

/* Location chip — 11px 700 lh 19px tracking-wider (0.05em), bg secondary */
.wr-css-loc {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: "Open Sans", sans-serif !important;
  font-size: 11px !important;
  line-height: 19px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  color: #7A7984 !important;
  background: #F3F3F4 !important;
  padding: 6px 12px !important;
  border-radius: 9999px !important;
}
.wr-css-loc svg { width: 12px !important; height: 12px !important; }

/* Case h2 — Montserrat 700, mobile 33/41 md 41/51, tracking-tight */
.wr-css-case-title {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  color: #015092 !important;
  font-size: 33px !important;
  line-height: 41px !important;
  letter-spacing: -0.025em !important;
  margin: 0 0 24px 0 !important;
  text-wrap: balance !important;
}
@media (min-width: 768px) {
  .wr-css-case-title { font-size: 41px !important; line-height: 51px !important; }
  .wr-css-block-text { line-height: 29px !important; }
  .wr-css-result-text { line-height: 29px !important; }
}

/* Blocks */
.wr-css-blocks {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}
.wr-css-block {
  border-left: 2px solid rgba(30, 90, 142, 0.2) !important;
  padding: 0 0 0 20px !important;
}
.wr-css-block-result {
  border-left-color: #1E5A8E !important;
  background: rgba(30, 90, 142, 0.05) !important;
  padding: 12px 16px 12px 20px !important;
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

/* Block label — 11px 700 uppercase 0.18em color heading */
.wr-css-block-label {
  font-family: "Open Sans", sans-serif !important;
  font-size: 11px !important;
  line-height: 19px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #015092 !important;
  margin: 0 0 8px 0 !important;
}
.wr-css-block-label-result {
  color: #1E5A8E !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.wr-css-block-label-result svg { width: 14px !important; height: 14px !important; }

/* Block body — 18px lh 28px (mobil) / 29px (desktop) muted */
.wr-css-block-text {
  font-family: "Open Sans", sans-serif !important;
  font-size: 18px !important;
  line-height: 28px !important;
  font-weight: 400 !important;
  color: #7A7984 !important;
  margin: 0 !important;
}

/* Result text — 18px lh 28px (mobil) / 29px (desktop) 600 heading */
.wr-css-result-text {
  font-family: "Open Sans", sans-serif !important;
  font-size: 18px !important;
  line-height: 28px !important;
  font-weight: 600 !important;
  color: #015092 !important;
  margin: 0 !important;
}

/* Duration */
.wr-css-duration {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 24px !important;
  font-family: "Open Sans", sans-serif !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #7A7984 !important;
}
.wr-css-duration-icon { width: 16px !important; height: 16px !important; color: #1E5A8E !important; flex-shrink: 0 !important; }
.wr-css-duration-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #7A7984 !important;
}
.wr-css-duration-value {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #015092 !important;
}

/* ============ MEDIA ============ */
.wr-css-media { position: relative !important; }
.wr-css-media-frame {
  position: absolute !important;
  inset: -16px !important;
  border: 1px solid rgba(30, 90, 142, 0.15) !important;
  border-radius: 24px !important;
  pointer-events: none !important;
}
.wr-css-media-circle {
  position: absolute !important;
  width: 96px !important;
  height: 96px !important;
  border-radius: 9999px !important;
  background: rgba(30, 90, 142, 0.10) !important;
  bottom: -32px !important;
  left: -32px !important;
  pointer-events: none !important;
}
.wr-css-case.is-reverse .wr-css-media-circle { left: auto !important; right: -32px !important; }

.wr-css-media-grid {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}
.wr-css-media-item { position: relative !important; }
.wr-css-media-item img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4/3 !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  outline: 1px solid rgba(26, 26, 31, 0.05) !important;
  outline-offset: -1px !important;
}

/* Badge — 10px 700 uppercase 0.05em */
.wr-css-badge {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  font-family: "Open Sans", sans-serif !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 4px 8px !important;
  border-radius: 9999px !important;
}
.wr-css-badge-before { background: rgba(250, 250, 247, 0.9) !important; color: #7A7984 !important; }
.wr-css-badge-after  { background: #1E5A8E !important; color: #FAFAF7 !important; }

/* ============ CTA ============ */
.wr-css-cta {
  background: #1A1A1F !important;
  color: #FAFAF7 !important;
  padding: 96px 24px !important;
}
.wr-css-cta-ring {
  position: absolute !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(250, 250, 247, 0.10) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}
.wr-css-cta-ring-1 { width: 700px !important; height: 700px !important; top: -160px !important; }
.wr-css-cta-ring-2 { width: 500px !important; height: 500px !important; top: -80px !important; }
.wr-css-cta-ring-3 { width: 300px !important; height: 300px !important; top: -40px !important; border-color: rgba(250, 250, 247, 0.15) !important; }

.wr-css-cta-inner {
  position: relative !important;
  max-width: 896px !important;
  margin: 0 auto !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  align-items: center !important;
}

.wr-css-cta-title {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 36px !important;
  line-height: 40px !important;
  letter-spacing: -0.025em !important;
  color: #FAFAF7 !important;
  margin: 0 !important;
  text-wrap: balance !important;
}
@media (min-width: 768px) {
  .wr-css-cta-title { font-size: 48px !important; line-height: 1.05 !important; }
}

.wr-css-cta-text {
  font-family: "Open Sans", sans-serif !important;
  font-size: 18px !important;
  line-height: 28px !important;
  font-weight: 400 !important;
  color: rgba(250, 250, 247, 0.70) !important;
  max-width: 52ch !important;
  margin: 0 !important;
}

.wr-css-cta-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 16px !important;
  padding-top: 8px !important;
}

.wr-css-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-family: "Open Sans", sans-serif !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  padding: 16px 32px !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  transition: background-color .2s, color .2s !important;
}
.wr-css-btn-primary { background: #1E5A8E !important; color: #FAFAF7 !important; }
.wr-css-btn-primary:hover { background: rgba(30, 90, 142, 0.9) !important; }
.wr-css-btn-ghost { border: 1px solid rgba(250, 250, 247, 0.30) !important; color: #FAFAF7 !important; gap: 8px !important; }
.wr-css-btn-ghost:hover { background: rgba(250, 250, 247, 0.10) !important; }
.wr-css-btn svg { width: 20px !important; height: 20px !important; }
.wr-css-btn-ghost svg { width: 16px !important; height: 16px !important; }

/* ============ MOBIL FINOMHANGOLÁS ============ */
@media (max-width: 767px) {
  .wr-css-list { gap: 80px !important; }
  .wr-css-header { margin-bottom: 56px !important; gap: 20px !important; }
  .wr-css-cta { padding: 64px 24px !important; }
  .wr-css-media-frame { inset: -8px !important; border-radius: 16px !important; }
  .wr-css-media-circle { width: 64px !important; height: 64px !important; bottom: -20px !important; left: -20px !important; }
  .wr-css-case.is-reverse .wr-css-media-circle { right: -20px !important; }
}