/* ========================================
   EWA (EARNED WAGE ACCESS) PAGE STYLES
   Mobile-first hero with background image
   Requires: header.css (for variables)
   ======================================== */

/* ========================================
   HEADER COLOR OVERRIDES
   Dark text theme for light hero background
   Same as new landing page
   ======================================== */
:root {
  --header-nav-list-bg: rgba(237, 245, 255, 0.5);
  --header-nav-list-border: var(--color-white);
  --header-nav-link-color: var(--color-dark);
  --header-dropdown-arrow-color: var(--color-dark);
  --header-lang-bg: var(--color-dark);
  --header-btn-login-color: var(--color-dark);
  --header-btn-login-bg: transparent;
  --header-btn-login-border: rgba(15, 23, 42, 0.3);
  --header-btn-login-hover-bg: rgba(15, 23, 42, 0.08);
}

/* Header lang text: dark before scroll */
.header-lang-text {
  color: var(--color-dark);
}


/* ========================================
   HERO SECTION
   Two-column layout with background image
   ======================================== */

.ewa-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-height) + 40px);
  padding-bottom: 40px;
  margin-top: calc(var(--header-height) * -1);
  overflow: hidden;
}


/* ----------------------------------------
   Background Image
   ---------------------------------------- */

.ewa-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ewa-hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

/* Mobile-first: show mobile, hide desktop */
.ewa-hero-bg-img--mobile {
  display: block;
}

.ewa-hero-bg-img--desktop {
  display: none;
}


/* ----------------------------------------
   Content Container
   ---------------------------------------- */

.ewa-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
}


/* ----------------------------------------
   Grid Layout
   Mobile: title → image → content
   Desktop: Two columns (65% / 35%)
   ---------------------------------------- */

.ewa-hero-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Title - direct child of grid */
.ewa-hero-title {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-text);
  margin: 0;
}

/* Content wrapper: subtitle + body + CTA */
.ewa-hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.ewa-hero-subtitle {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-primary);
  margin: 0;
}

/* Body Text */
.ewa-hero-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ewa-hero-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0;
}

.ewa-hero-text strong {
  font-weight: 600;
}

/* CTA Button */
.ewa-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  gap: 8px;
  padding: 16px 24px;
  background: var(--color-primary);
  border-radius: 32px;
  transition: background var(--transition-fast);
}

.ewa-hero-cta:hover {
  background: var(--color-primary-hover);
}

.ewa-hero-cta-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-white);
}

.ewa-hero-cta svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-white);
}

/* RTL: Flip arrow icon */
[dir="rtl"] .ewa-hero-cta svg {
  transform: scaleX(-1);
}


/* ----------------------------------------
   Column 2: Product Image
   ---------------------------------------- */

.ewa-hero-image {
  display: flex;
  justify-content: flex-end;
  margin-inline-end: -15px; /* Bleed to edge of screen */
}

.ewa-hero-img {
  max-width: none;
  height: auto;
}

/* Mobile-first: show mobile, hide desktop */
.ewa-hero-img--mobile {
  display: block;
  width: auto;
  max-height: 400px;
}

.ewa-hero-img--desktop {
  display: none;
}


/* ========================================
   DESKTOP BREAKPOINT (992px+)
   Two-column layout with overflow image
   ======================================== */

@media (min-width: 992px) {

  /* Background: Switch to desktop */
  .ewa-hero-bg-img--mobile {
    display: none;
  }

  .ewa-hero-bg-img--desktop {
    display: block;
  }

  /* Hero section padding */
  .ewa-hero {
    padding-top: calc(var(--header-height) + 80px);
    padding-bottom: 80px;
  }

  /* Grid: Two columns with named areas */
  .ewa-hero-grid {
    display: grid;
    grid-template-columns: 65% 35%;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "title image"
      "content image";
    gap: 28px 0;
    align-items: start;
  }

  .ewa-hero-title {
    grid-area: title;
    font-size: 46px;
    line-height: 1.15;
    max-width: 760px;
    padding-bottom: 4px;
  }

  .ewa-hero-image {
    grid-area: image;
  }

  .ewa-hero-content {
    grid-area: content;
    gap: 22px;
  }

  .ewa-hero-subtitle {
    font-size: 20px;
  }

  .ewa-hero-body {
    gap: 18px;
    max-width: 580px;
  }

  .ewa-hero-text {
    font-size: 15px;
    line-height: 1.75;
  }

  .ewa-hero-cta {
    padding: 14px 24px;
  }

  .ewa-hero-cta-text {
    font-size: 16px;
  }

  /* Image column: Push to edge with overflow */
  .ewa-hero-image {
    position: relative;
    justify-content: flex-end;
    margin-inline-end: -232px;
  }

  .ewa-hero-img--mobile {
    display: none;
  }

  .ewa-hero-img--desktop {
    display: block;
    max-width: none;
    width: auto;
    height: auto;
    max-height: 700px;
  }
}


/* ========================================
   LARGE DESKTOP (1400px+)
   Fine-tune spacing for larger screens
   ======================================== */

@media (min-width: 1400px) {
  .ewa-hero-title {
    font-size: 52px;
    max-width: 820px;
  }

  .ewa-hero-subtitle {
    font-size: 22px;
  }

  .ewa-hero-body {
    max-width: 620px;
  }

  .ewa-hero-text {
    font-size: 16px;
  }

  .ewa-hero-image {
    margin-inline-end: -280px;
  }
}


/* ========================================
   EMPLOYEE BENEFITS SECTION
   5 glassmorphic cards with centered layout
   ======================================== */

.ewa-benefits {
  padding: 60px 0;
}

.ewa-benefits-inner {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

/* Section Title */
.ewa-benefits-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  text-align: center;
  margin: 0;
  max-width: 600px;
}

/* Cards Grid */
.ewa-benefits-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

/* Individual Card */
.ewa-benefit-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 24px;
  outline: 1px solid rgba(226, 232, 240, 0.8);
  outline-offset: -1px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  width: 100%;
}

/* Card Icon */
.ewa-benefit-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

/* Card Text */
.ewa-benefit-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0;
}

/* ----------------------------------------
   Benefits Section - Tablet (768px+)
   ---------------------------------------- */

@media (min-width: 768px) {
  .ewa-benefits {
    padding: 80px 0;
  }

  .ewa-benefits-title {
    font-size: 32px;
    max-width: 700px;
  }

  .ewa-benefits-grid {
    gap: 12px;
  }

  .ewa-benefit-card {
    width: calc(50% - 6px);
  }
}


/* ----------------------------------------
   Benefits Section - Desktop (992px+)
   ---------------------------------------- */

@media (min-width: 992px) {
  .ewa-benefits {
    padding: 100px 0;
  }

  .ewa-benefits-inner {
    gap: 40px;
  }

  .ewa-benefits-title {
    font-size: 32px;
  }

  .ewa-benefit-card {
    padding: 24px;
    width: calc(33.333% - 8px);
  }
}


/* ----------------------------------------
   Benefits Section - Large Desktop (1400px+)
   ---------------------------------------- */

@media (min-width: 1400px) {
  .ewa-benefits-title {
    font-size: 36px;
  }
}


/* ========================================
   WHY EWA SECTION
   Gradient background with parallax sun
   Mobile-first, RTL-friendly
   ======================================== */

.why-ewa {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 60px 0 0;
  overflow: hidden;
  background: linear-gradient(180deg, #ADD6DC 0%, #DFEBF1 100%);
}


/* ----------------------------------------
   Background Layer (mountains + sun)
   ---------------------------------------- */

.why-ewa-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Sun element - parallax animated */
.why-ewa-sun {
  position: absolute;
  z-index: 1;
  bottom: 30%;
  inset-inline-end: -5%;
  will-change: transform;
}

/* Mobile: show mobile, hide desktop */
.why-ewa-sun--mobile {
  display: block;
}

.why-ewa-sun--desktop {
  display: none;
}

/* Mountains - edge to edge, absolute positioned */
.why-ewa-mountains {
  position: absolute;
  z-index: 2;
  bottom: 0;
  inset-inline-start: 0;
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: fill;
}

/* RTL: Flip mountains horizontally */
[dir="rtl"] .why-ewa-mountains {
  transform: scaleX(-1);
}

/* Mobile: show mobile, hide desktop */
.why-ewa-mountains--mobile {
  display: block;
}

.why-ewa-mountains--desktop {
  display: none;
}


/* ----------------------------------------
   Content Container
   ---------------------------------------- */

.why-ewa-inner {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  gap: 260px;
}


/* ----------------------------------------
   Header: Title + Subtitle + Lead
   ---------------------------------------- */

.why-ewa-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 700px;
}

.why-ewa-title {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-dark);
  margin: 0;
}

.why-ewa-subtitle {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-dark);
  margin: 0;
}

.why-ewa-subtitle strong {
  font-weight: 600;
}

.why-ewa-lead {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-dark);
  margin: 0;
}


/* ----------------------------------------
   Cards Grid
   Mobile: Horizontal scroll, one card + partial visible
   ---------------------------------------- */

.why-ewa-cards {
  display: flex;
  flex-direction: row;
  gap: 12px;
  width: 100%;
  padding-bottom: 20px;

  /* Horizontal scroll */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  /* Scroll snap for modern feel */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.why-ewa-cards::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.why-ewa-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  outline: 1px solid rgba(255, 255, 255, 0.2);
  outline-offset: -1px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

  /* Mobile: Fixed width to show 1 card + partial */
  flex-shrink: 0;
  width: 85%;
  scroll-snap-align: start;
}

/* Mobile: Add padding via margins on first/last cards */
.why-ewa-card:first-child {
  margin-inline-start: 15px;
}

.why-ewa-card:last-child {
  margin-inline-end: 15px;
}

.why-ewa-card-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--color-white);
}

.why-ewa-card-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-white);
  margin: 0;
}


/* ========================================
   WHY EWA - TABLET (768px+)
   ======================================== */

@media (min-width: 768px) {
  .why-ewa {
    padding: 80px 0 0;
  }

  .why-ewa-inner {
    gap: 100px;
  }

  .why-ewa-header {
    gap: 20px;
  }

  .why-ewa-title {
    font-size: 36px;
  }

  .why-ewa-subtitle {
    font-size: 20px;
  }

  .why-ewa-lead {
    font-size: 20px;
  }

  /* Cards: 2 columns, reset scroll */
  .why-ewa-cards {
    flex-wrap: wrap;
    gap: 12px;
    overflow-x: visible;
    scroll-snap-type: none;
    width: 100%;
  }

  .why-ewa-card {
    width: calc(50% - 6px);
    padding: 28px;
    scroll-snap-align: unset;
  }

  .why-ewa-card:first-child {
    margin-inline-start: 0;
  }

  .why-ewa-card:last-child {
    margin-inline-end: 0;
  }

  .why-ewa-card-text {
    font-size: 16px;
  }
}


/* ========================================
   WHY EWA - DESKTOP (992px+)
   ======================================== */

@media (min-width: 992px) {
  .why-ewa {
    padding: 100px 0 0;
  }

  /* Background: Switch to desktop images */
  .why-ewa-sun--mobile {
    display: none;
  }

  .why-ewa-sun--desktop {
    display: block;
    bottom: 45%;
    inset-inline-end: 8%;
  }

  .why-ewa-mountains--mobile {
    display: none;
  }

  .why-ewa-mountains--desktop {
    display: block;
    max-height: 350px;
  }

  .why-ewa-inner {
    gap: 120px;
  }

  .why-ewa-header {
    max-width: 800px;
  }

  .why-ewa-title {
    font-size: 46px;
  }

  .why-ewa-subtitle {
    font-size: 22px;
  }

  .why-ewa-lead {
    font-size: 22px;
  }

  /* Cards: 4 columns */
  .why-ewa-cards {
    flex-wrap: nowrap;
    gap: 10px;
    padding-bottom: 20px;
  }

  .why-ewa-card {
    width: calc(25% - 7.5px);
    flex-shrink: 1;
  }

  .why-ewa-card-text {
    font-size: 16px;
  }
}


/* ========================================
   WHY EWA - LARGE DESKTOP (1400px+)
   ======================================== */

@media (min-width: 1400px) {
  .why-ewa {
    padding: 112px 0 0;
  }

  .why-ewa-inner {
    gap: 160px;
  }

  .why-ewa-title {
    font-size: 48px;
  }

  .why-ewa-subtitle {
    font-size: 24px;
  }

  .why-ewa-lead {
    font-size: 24px;
  }

  .why-ewa-sun--desktop {
    bottom: 45%;
    inset-inline-end: 10%;
  }

  /* RTL: Adjust sun position */
  [dir="rtl"] .why-ewa-sun--desktop {
    bottom: 40%;
  }

  .why-ewa-cards {
    padding-bottom: 20px;
  }

  .why-ewa-card {
    padding: 28px;
  }

  .why-ewa-card-text {
    font-size: 18px;
  }
}


/* ========================================
   HOW EWA WORKS SECTION
   Step-by-step process with glassmorphic cards
   Mobile-first, RTL-friendly
   ======================================== */

.how-ewa {
  position: relative;
  padding: 60px 0;
  overflow: hidden;
}


/* ----------------------------------------
   Background Images
   ---------------------------------------- */

.how-ewa-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.how-ewa-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile: show mobile, hide desktop */
.how-ewa-bg-img--mobile {
  display: block;
}

.how-ewa-bg-img--desktop {
  display: none;
}


/* ----------------------------------------
   Content Container
   ---------------------------------------- */

.how-ewa-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 32px;
}


/* ----------------------------------------
   Header: Title + Subtitle
   ---------------------------------------- */

.how-ewa-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 700px;
}

.how-ewa-title {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-dark);
  margin: 0;
}

.how-ewa-subtitle {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-dark);
  margin: 0;
}


/* ----------------------------------------
   Steps Cards Container
   ---------------------------------------- */

.how-ewa-steps {
  position: relative;
  width: 100%;
}


/* ----------------------------------------
   Cards Row
   Mobile: Horizontal scroll
   ---------------------------------------- */

.how-ewa-cards-row {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  width: 100%;

  /* Horizontal scroll */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  /* Scroll snap */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  /* Hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.how-ewa-cards-row::-webkit-scrollbar {
  display: none;
}


/* ----------------------------------------
   Step Card
   ---------------------------------------- */

.how-ewa-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 32px;
  outline: 1px solid rgba(226, 232, 240, 0.8);
  outline-offset: -1px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

  /* Mobile: Fixed width for scroll */
  flex-shrink: 0;
  width: 280px;
  scroll-snap-align: start;
}

/* Mobile: Add padding via margins on first/last cards */
.how-ewa-card:first-of-type {
  margin-inline-start: 15px;
}

.how-ewa-card:last-of-type {
  margin-inline-end: 15px;
}

.how-ewa-card-step {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-primary);
  margin: 0;
}

.how-ewa-card-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-dark);
  margin: 0;
}

.how-ewa-card-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-dark);
  margin: 0;
}


/* ----------------------------------------
   Arrows (inline on mobile, absolute on desktop)
   ---------------------------------------- */

.how-ewa-arrow {
  flex-shrink: 0;
  align-self: center;
  width: 48px;
  height: 48px;
  margin-inline-start: -10px;
  margin-inline-end: -10px;
  z-index: 5;
}

/* RTL: Flip arrows */
[dir="rtl"] .how-ewa-arrow {
  transform: scaleX(-1);
}


/* ----------------------------------------
   Note Text
   ---------------------------------------- */

.how-ewa-note {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-dark);
  margin: 0;
}

.how-ewa-note strong {
  font-weight: 700;
}


/* ========================================
   HOW EWA WORKS - TABLET (768px+)
   ======================================== */

@media (min-width: 768px) {
  .how-ewa {
    padding: 80px 0;
  }

  .how-ewa-inner {
    gap: 40px;
  }

  .how-ewa-header {
    gap: 20px;
  }

  .how-ewa-title {
    font-size: 36px;
  }

  .how-ewa-subtitle {
    font-size: 20px;
  }

  /* Cards Row: 2x2 grid */
  .how-ewa-cards-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    overflow-x: visible;
    scroll-snap-type: none;
    margin-inline-start: 0;
    padding-inline-start: 0;
    padding-inline-end: 0;
    width: 100%;
  }

  .how-ewa-card {
    width: auto;
    scroll-snap-align: unset;
  }

  .how-ewa-card:first-of-type {
    margin-inline-start: 0;
  }

  .how-ewa-card:last-of-type {
    margin-inline-end: 0;
  }

  /* Hide arrows on tablet (2x2 grid doesn't work well with arrows) */
  .how-ewa-arrow {
    display: none;
  }

  .how-ewa-card-step {
    font-size: 13px;
  }

  .how-ewa-card-title {
    font-size: 16px;
  }

  .how-ewa-card-text {
    font-size: 14px;
  }

  .how-ewa-note {
    font-size: 16px;
  }
}


/* ========================================
   HOW EWA WORKS - DESKTOP (992px+)
   ======================================== */

@media (min-width: 992px) {
  .how-ewa {
    padding: 100px 0;
  }

  /* Background: Switch to desktop */
  .how-ewa-bg-img--mobile {
    display: none;
  }

  .how-ewa-bg-img--desktop {
    display: block;
  }

  .how-ewa-inner {
    gap: 48px;
  }

  .how-ewa-header {
    max-width: 800px;
  }

  .how-ewa-title {
    font-size: 46px;
  }

  .how-ewa-subtitle {
    font-size: 22px;
  }

  /* Cards Row: Grid for cards */
  .how-ewa-cards-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    position: relative;
  }

  .how-ewa-card {
    gap: 14px;
    padding: 28px;
  }

  /* Position arrows absolutely on desktop */
  .how-ewa-arrow {
    display: block;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
  }

  .how-ewa-arrow:nth-of-type(1) {
    inset-inline-start: 25%;
  }

  .how-ewa-arrow:nth-of-type(2) {
    inset-inline-start: 50%;
  }

  .how-ewa-arrow:nth-of-type(3) {
    inset-inline-start: 75%;
  }

  /* RTL: Flip centering direction + flip arrow icon */
  [dir="rtl"] .how-ewa-arrow {
    transform: translate(50%, -50%) scaleX(-1);
  }

  .how-ewa-card-step {
    font-size: 14px;
  }

  .how-ewa-card-title {
    font-size: 18px;
  }

  .how-ewa-card-text {
    font-size: 15px;
  }

  .how-ewa-note {
    font-size: 18px;
  }
}


/* ========================================
   HOW EWA WORKS - LARGE DESKTOP (1400px+)
   ======================================== */

@media (min-width: 1400px) {
  .how-ewa {
    padding: 112px 0;
  }

  .how-ewa-title {
    font-size: 48px;
  }

  .how-ewa-subtitle {
    font-size: 24px;
  }

  .how-ewa-cards-row {
    gap: 10px;
  }

  .how-ewa-card {
    gap: 16px;
    padding: 32px;
  }

  .how-ewa-arrow {
    width: 48px;
    height: 48px;
  }

  .how-ewa-card-step {
    font-size: 15px;
  }

  .how-ewa-card-title {
    font-size: 20px;
  }

  .how-ewa-card-text {
    font-size: 16px;
  }

  .how-ewa-note {
    font-size: 20px;
  }
}


/* ========================================
   BENEFITS FOR COMPANIES SECTION
   Cards grid with image showcase
   ======================================== */

.benefits-companies {
  position: relative;
  padding: 60px 0;
  background: var(--color-surface);
}


/* ----------------------------------------
   Content Container
   ---------------------------------------- */

.benefits-companies-inner {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}


/* ----------------------------------------
   Title
   ---------------------------------------- */

.benefits-companies-title {
  font-size: 32px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-dark);
  margin: 0;
  text-align: center;
  width: 100%;
}


/* ----------------------------------------
   Content: Cards + Image
   Mobile: Stack vertically, image first (column-reverse)
   ---------------------------------------- */

.benefits-companies-content {
  display: flex;
  flex-direction: column-reverse;
  gap: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 32px;
  outline: 1px solid rgba(226, 232, 240, 0.8);
  outline-offset: -1px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}


/* ----------------------------------------
   Cards Grid
   Mobile: 2 columns, overlaps image with negative margin
   ---------------------------------------- */

.benefits-companies-cards {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
  padding: 12px;
  margin-top: -40px;
}

.benefits-companies-card {
  display: flex;
  justify-content: center;
  align-items: start;
  /* Padding: 24px creates balanced text breathing room */
  padding: 24px;
  background: rgba(255, 255, 255, 0.6);
  /* Inner card radius: 24px (32px outer - 8px visual offset) */
  border-radius: 24px;
  outline: 1px solid rgba(226, 232, 240, 0.8);
  outline-offset: -1px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.benefits-companies-card-text {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-dark);
  margin: 0;
}

.benefits-companies-card-text strong {
  font-weight: 700;
}


/* ----------------------------------------
   Image Wrapper
   Mobile: Edge to edge, no border radius
   ---------------------------------------- */

.benefits-companies-img-wrapper {
  position: relative;
  z-index: 2;
  width: calc(100% + 30px);
  margin-inline-start: -15px;
  margin-inline-end: -15px;
  overflow: hidden;
}

.benefits-companies-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Mobile-first: show mobile, hide desktop */
.benefits-companies-img--mobile {
  display: block;
}

.benefits-companies-img--desktop {
  display: none;
}


/* ========================================
   BENEFITS FOR COMPANIES - TABLET (768px+)
   ======================================== */

@media (min-width: 768px) {
  .benefits-companies {
    padding: 80px 0;
  }

  .benefits-companies-inner {
    gap: 40px;
  }

  .benefits-companies-title {
    font-size: 36px;
  }

  /* Cards: 2 columns */
  .benefits-companies-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .benefits-companies-card-text {
    font-size: 17px;
  }
}


/* ========================================
   BENEFITS FOR COMPANIES - DESKTOP (992px+)
   ======================================== */

@media (min-width: 992px) {
  .benefits-companies {
    padding: 100px 0;
  }

  .benefits-companies-inner {
    align-items: center;
    gap: 48px;
  }

  .benefits-companies-title {
    font-size: 46px;
  }

  /* Content: Side by side */
  .benefits-companies-content {
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
  }

  /* Cards: ~57% width (668/1170) */
  .benefits-companies-cards {
    width: 57%;
    flex-shrink: 0;
    gap: 10px;
    padding: 12px;
    margin-top: 0;
  }

  .benefits-companies-card {
    /* Increased vertical padding for larger screens */
    padding: 32px 24px;
  }

  .benefits-companies-card-text {
    font-size: 18px;
  }

  /* Image: Reset to normal for side-by-side layout */
  .benefits-companies-img-wrapper {
    flex: 1;
    width: auto;
    margin-inline-start: 0;
    margin-inline-end: 0;
  }

  .benefits-companies-img {
    height: 100%;
    object-fit: cover;
    /* RTL-friendly: rounds start-side corners */
    border-start-start-radius: 24px;
    border-end-start-radius: 24px;
    /* GPU acceleration to prevent repaints/shaking */
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  /* Switch to desktop image */
  .benefits-companies-img--mobile {
    display: none;
  }

  .benefits-companies-img--desktop {
    display: block;
  }
}


/* ========================================
   BENEFITS FOR COMPANIES - LARGE DESKTOP (1400px+)
   ======================================== */

@media (min-width: 1400px) {
  .benefits-companies {
    padding: 112px 0;
  }

  .benefits-companies-title {
    font-size: 48px;
  }

  .benefits-companies-card {
    /* Larger padding for 1400px+ screens */
    padding: 40px 28px;
  }

  .benefits-companies-card-text {
    font-size: 18px;
    line-height: 1.7;
  }
}


/* ========================================
   WHY CHOOSE ZENEWA SECTION
   Feature cards grid with glassmorphic design
   Mobile-first, RTL-friendly
   ======================================== */

.choose-ewa {
  padding: 60px 0;
  background: rgba(255, 255, 255, 0.6);
  outline: 1px solid #fff;
  outline-offset: -1px;
  backdrop-filter: blur(62px);
  -webkit-backdrop-filter: blur(62px);
}


/* ----------------------------------------
   Content Container
   ---------------------------------------- */

.choose-ewa-inner {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}


/* ----------------------------------------
   Section Title
   ---------------------------------------- */

.choose-ewa-title {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-dark);
  margin: 0;
}


/* ----------------------------------------
   Cards Grid
   Mobile: Single column
   ---------------------------------------- */

.choose-ewa-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}


/* ----------------------------------------
   Feature Card
   Glassmorphic style with icon and content
   ---------------------------------------- */

.choose-ewa-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 32px;
  padding: 32px;
  background: rgba(224, 231, 255, 0.6);
  border-radius: 32px;
  outline: 1px solid rgba(203, 213, 225, 0.6);
  outline-offset: -1px;
  backdrop-filter: blur(48px);
  -webkit-backdrop-filter: blur(48px);
}


/* ----------------------------------------
   Card Icon
   Fixed dimensions to prevent CLS
   ---------------------------------------- */

.choose-ewa-card-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 118px;
  height: 98px;
  flex-shrink: 0;
}

.choose-ewa-card-icon img {
  width: 118px;
  height: 98px;
  object-fit: contain;
}


/* ----------------------------------------
   Card Content
   ---------------------------------------- */

.choose-ewa-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.choose-ewa-card-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-dark);
  text-align: center;
  margin: 0;
}

.choose-ewa-card-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-dark);
  text-align: center;
  margin: 0;
  min-height: 44px;
}

[dir="rtl"] .choose-ewa-card-text {
  min-height: 56px;
}


/* ========================================
   WHY CHOOSE ZENEWA - TABLET (768px+)
   2 columns grid
   ======================================== */

@media (min-width: 768px) {
  .choose-ewa {
    padding: 80px 0;
  }

  .choose-ewa-inner {
    gap: 32px;
  }

  .choose-ewa-title {
    font-size: 36px;
  }

  .choose-ewa-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .choose-ewa-card {
    gap: 28px;
    padding: 28px;
  }

  .choose-ewa-card-title {
    font-size: 18px;
  }

  .choose-ewa-card-text {
    font-size: 14px;
  }
}


/* ========================================
   WHY CHOOSE ZENEWA - DESKTOP (992px+)
   3 columns x 2 rows grid
   Layout: Title | Card | Card
           Card  | Card | Card
   ======================================== */

@media (min-width: 992px) {
  .choose-ewa {
    padding: 100px 0;
  }

  .choose-ewa-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  /* Title as first grid item */
  .choose-ewa-title {
    font-size: 42px;
    line-height: 1.3;
    display: flex;
    align-items: center;
  }

  /* Cards grid becomes a display:contents to place cards directly in parent grid */
  .choose-ewa-grid {
    display: contents;
  }

  .choose-ewa-card {
    gap: 32px;
    padding: 32px;
    min-height: 280px;
  }

  .choose-ewa-card-title {
    font-size: 20px;
  }

  .choose-ewa-card-text {
    font-size: 14px;
  }
}


/* ========================================
   WHY CHOOSE ZENEWA - LARGE DESKTOP (1400px+)
   ======================================== */

@media (min-width: 1400px) {
  .choose-ewa {
    padding: 112px 0;
  }

  .choose-ewa-inner {
    gap: 36px;
  }

  .choose-ewa-title {
    font-size: 48px;
  }

  .choose-ewa-card {
    gap: 40px;
    padding: 40px;
    min-height: 320px;
  }

  .choose-ewa-card-title {
    font-size: 24px;
  }

  .choose-ewa-card-text {
    font-size: 14px;
  }
}