/* ============================================================
   PROGRAMS — SHARED CSS (FULL MOBILE BACKGROUND FIX)
   ============================================================ */

.prog-hero {
  position: relative;
  padding: calc(var(--nav-h) + 100px) 40px 90px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #080B1F;
}

/* Ripples image — the side the text is not on */
.prog-hero::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  height: 100%;
  width: 75%;
  background-image: url('../images/Home/Ripples_Half (1).png');
  background-size: cover;
  background-position: left center;
  opacity: 0.95;
  z-index: 0;
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.4) 18%, rgba(0,0,0,0.9) 45%, black 65%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.4) 18%, rgba(0,0,0,0.9) 45%, black 65%);
}

/* Gradient overlays */
.prog-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, transparent 60%, rgba(8,11,31,0.55) 100%),
    linear-gradient(to right, #080B1F 0%, #0A0E28 30%, rgba(8,11,31,0.88) 48%, rgba(8,11,31,0.30) 70%, rgba(8,11,31,0.05) 100%);
  pointer-events: none;
}

/* Arabic: flip the ripples and the gradient so the artwork sits on the left
   and the dark, readable side lands under the right-to-left text */
html[dir="rtl"] .prog-hero::before,
html[dir="rtl"] .prog-hero::after {
  transform: scaleX(-1);
}

/* Hide old gradient elements */
.prog-hero-grid,
.prog-orb,
.prog-star { display: none; }

/* The hero column is one fixed measure, not one that shrinks around whatever
   the title happens to be.  As a plain flex item the box collapsed to the
   width of the longest line, so Arabic — whose titles are shorter — got a
   narrower column than English and the paragraph under it was squeezed to
   the width of the title.  Pinning the width keeps the tag, the title and
   the paragraph on the same centred measure in both languages. */
.prog-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 700px;
  margin-inline: auto;
  text-align: center;
}

.prog-area-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 15px;
  background: rgba(0,194,255,0.10);
  border: 1px solid rgba(0,194,255,0.22);
  border-radius: 50px;
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 22px;
}

.prog-hero-inner h1 {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
  margin-inline: auto;
  text-align: center;
  /* A title that breaks into even lines sits visibly centred; the default
     break leaves a short last line that reads as an off-centre block. */
  text-wrap: balance;
  background: linear-gradient(135deg, #fff 40%, var(--cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.prog-hero-inner p {
  font-size: clamp(0.95rem,1.6vw,1.08rem);
  color: var(--gray-light);
  line-height: 1.78;
  margin-bottom: 30px;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  text-wrap: balance;
}

.prog-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: var(--g-cyan);
  color: var(--navy);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.88rem;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 22px rgba(0,194,255,0.30);
  transition: opacity var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}

.prog-hero-cta:hover {
  opacity: 0.88;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,194,255,0.45);
}

.prog-body {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 40px 96px;
}

/* Overview */
.prog-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  padding: 80px 0 72px;
  border-bottom: 1px solid rgba(0,194,255,0.08);
}

.prog-ov-text h2 {
  font-family: var(--font-head);
  font-size: clamp(1.7rem,3vw,2.3rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 24px;
  padding-inline-start: 18px;
  border-inline-start: 3px solid var(--cyan);
  letter-spacing: -0.01em;
}

.prog-ov-text p {
  font-size: 0.935rem;
  color: var(--gray-light);
  line-height: 1.86;
  margin-bottom: 16px;
}

.prog-ov-text p:last-child { margin-bottom: 0; }
.prog-ov-text strong { color: var(--cyan); font-weight: 600; }

.prog-ov-img {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(0,194,255,0.13);
  box-shadow: var(--shadow-md);
  background: var(--navy-2);
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prog-ov-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.prog-ov-img.contain img {
  object-fit: contain;
  padding: 32px;
}

/* Benefits */
.prog-benefits {
  padding: 80px 0 72px;
  border-bottom: 1px solid rgba(0,194,255,0.08);
}

.prog-section-head {
  text-align: center;
  margin-bottom: 52px;
}

.prog-section-head h2 {
  font-family: var(--font-head);
  font-size: clamp(1.7rem,3vw,2.3rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.01em;
  margin-top: 10px;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 18px;
}

.benefit-card {
  padding: 28px 24px;
  background: var(--g-card);
  border: 1px solid rgba(0,194,255,0.09);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  transition: border-color var(--t-mid), transform var(--t-mid), box-shadow var(--t-mid);
}

.benefit-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--g-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid);
}

/* Arabic: the accent bar grows from the right, the side reading starts on */
html[dir="rtl"] .benefit-card::before { transform-origin: right; }

.benefit-card:hover {
  border-color: rgba(0,194,255,0.25);
  transform: translateY(-4px);
  box-shadow: 0 12px 38px rgba(0,0,0,0.28);
}

.benefit-card:hover::before { transform: scaleX(1); }

.benefit-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  background: rgba(0,194,255,0.09);
  border: 1px solid rgba(0,194,255,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 16px;
  transition: background var(--t-mid), box-shadow var(--t-mid);
}

.benefit-card:hover .benefit-icon {
  background: var(--cyan);
  color: var(--navy);
  box-shadow: 0 6px 18px rgba(0,194,255,0.28);
}

.benefit-card h3 {
  font-family: var(--font-head);
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 9px;
}

.benefit-card p {
  font-size: 0.86rem;
  color: var(--gray);
  line-height: 1.72;
}

/* Gallery */
.prog-gallery {
  padding: 80px 0 72px;
  border-bottom: 1px solid rgba(0,194,255,0.08);
}

.prog-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
}

.prog-gallery-item {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid rgba(0,194,255,0.08);
  height: 220px;
  position: relative;
  transition: border-color var(--t-mid), transform var(--t-mid), box-shadow var(--t-mid);
}

.prog-gallery-item:hover {
  border-color: rgba(0,194,255,0.24);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.prog-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.prog-gallery-item:hover img { transform: scale(1.06); }

/* Testimonials */
.prog-testimonials {
  padding: 80px 0;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
}

.testimonial-card {
  padding: 28px 26px 26px;
  background: var(--g-card);
  border: 1px solid rgba(0,194,255,0.09);
  border-radius: var(--r-lg);
  position: relative;
  transition: border-color var(--t-mid), transform var(--t-mid);
}

.testimonial-card:hover {
  border-color: rgba(0,194,255,0.20);
  transform: translateY(-3px);
}

.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: 10px;
  inset-inline-start: 20px;
  font-size: 3.5rem;
  color: rgba(0,194,255,0.13);
  font-family: Georgia, serif;
  line-height: 1;
}

.testimonial-card p {
  font-size: 0.895rem;
  color: var(--gray-light);
  line-height: 1.82;
  font-style: italic;
  padding-top: 6px;
}

/* Arabic has no italic form — the browser would slant Cairo artificially,
   which reads as a rendering fault rather than emphasis. */
html[lang="ar"] .testimonial-card p { font-style: normal; }

.t-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,194,255,0.08);
}

.t-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0,194,255,0.12);
  border: 1px solid rgba(0,194,255,0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--cyan);
  flex-shrink: 0;
}

.t-name {
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cyan);
}

/* ============================================================
   ARABIC — SECTIONS READ FROM THE RIGHT EDGE
   Only the hero stays centred.  Below it, every section is
   written the way the Arabic text under it is: the tag label
   and the heading of "عن البرنامج" (About the Program),
   "فوائد البرنامج" (Program Benefits), "معرض البرنامج"
   (Program Gallery) and "ماذا يقول أعضاؤنا" (What Our Members
   Say) all start at the right edge of the section, so a heading
   and its content share one edge instead of the heading floating
   in the middle of the column.
   ============================================================ */
html[lang="ar"] .prog-section-head { text-align: right; }

/* The small pill above each heading ("ما ستكتسبه", "الفوائد",
   "أبرز اللحظات", "آراء الأعضاء") stays centred over the section,
   while the heading beneath it keeps the right edge it shares with
   the cards below. */
html[lang="ar"] .prog-section-head .tag-label {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
html[lang="ar"] .prog-section-head h2 { text-align: right; }

html[lang="ar"] .prog-ov-text,
html[lang="ar"] .prog-ov-text h2,
html[lang="ar"] .prog-ov-text p { text-align: right; }

/* Every card of the benefits grid — "فوائد البرنامج" on the programme pages
   and "كورسات الماستركلاس" on the masterclass page — reads from its own right
   edge: the icon holds the right corner and the title sits directly under it
   on that same edge, with the description below starting there too.  The
   document direction lays the card out this way on its own, so these rules
   state the result rather than compute it: a card that reaches the browser
   before the direction is applied kept the icon on the right while the title
   dropped to the left, which is the split this pins shut. */
html[lang="ar"] .benefit-card {
  direction: rtl;
  text-align: right;
}

html[lang="ar"] .benefit-card h3,
html[lang="ar"] .benefit-card p {
  text-align: right;
}

/* The Arabic run inside the title is an inline span, and text-align does not
   reach inside an inline box — as a block it takes the card's right edge. */
html[lang="ar"] .benefit-card h3 > .lang-ar,
html[lang="ar"] .benefit-card p > .lang-ar {
  display: block;
  text-align: right;
}

/* The icon is a 46px box in a full-width card: the auto margin on the free
   side is what keeps it in the right corner, whichever way the card is laid. */
html[lang="ar"] .benefit-icon {
  margin-left: auto;
  margin-right: 0;
}

/* ============================================================
   MOBILE FIX: Force background image to appear on phones
   ============================================================ */
@media (max-width: 768px) {
  .prog-hero {
    padding: calc(var(--nav-h) + 64px) 20px 64px;
  }

  /* Override the pseudo-element for mobile: full width, no mask, ensure visibility */
  .prog-hero::before {
    width: 100% !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    opacity: 0.85 !important;
    background-position: center center !important;
    background-size: cover !important;
  }

  /* Lighten the gradient overlay so the image is clearly visible */
  .prog-hero::after {
    background:
      linear-gradient(to bottom, transparent 40%, rgba(8,11,31,0.75) 100%),
      linear-gradient(135deg, rgba(8,11,31,0.7) 0%, rgba(8,11,31,0.4) 60%, rgba(8,11,31,0.2) 100%) !important;
  }

  /* Ensure text remains readable */
  .prog-hero-inner h1,
  .prog-hero-inner p {
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  }

  .prog-body {
    padding: 0 20px 72px;
  }

  .prog-overview {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .prog-ov-img {
    min-height: 220px;
  }

  .prog-gallery-grid {
    grid-template-columns: 1fr;
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .benefits-grid {
    grid-template-columns: 1fr;
  }
}

/* Extra small devices (below 480px) – ensure background doesn't break */
@media (max-width: 480px) {
  .prog-hero::before {
    opacity: 0.8 !important;
  }
  .prog-hero::after {
    background:
      linear-gradient(to bottom, transparent 30%, rgba(8,11,31,0.8) 100%),
      linear-gradient(135deg, rgba(8,11,31,0.8) 0%, rgba(8,11,31,0.5) 100%) !important;
  }
}