/* ==========================================================================
   Layout — page structure and section grids (mobile-first)
   Breakpoints: 48em (768px, tablet) · 64em (1024px, desktop)
   ========================================================================== */

/* The container is exactly --container wide (1280px), side padding included */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--space-section);
}

/* Full-screen sections — on desktop, each section fills the screen like its own
   page (as in the Canva designs) and its content is centered vertically.
   min-height (not height) so content is never cut off on short screens.
   Phones and iPads (touch screens, even in landscape) keep compact natural heights. */
@media (min-width: 64em) and (min-height: 37.5em) and (hover: hover) and (pointer: fine) {
  .hero,
  .section {
    display: flex;
    align-items: center;
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100svh - var(--header-height));
  }

  .hero > .container,
  .section > .container {
    flex: 1;
  }
}

/* Section heading: title block + lead text */
.section-head {
  display: grid;
  gap: var(--space-4);
  margin-block-end: var(--space-8);
}

.section-head__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
}

.section-head__title span {
  display: block;
  color: var(--color-primary);
}

.section-head__lead {
  max-width: 32rem;
  color: var(--color-muted);
}

@media (min-width: 64em) {
  .section-head--split {
    grid-template-columns: 1fr 1fr;
    align-items: end;
    column-gap: var(--space-12);
  }

  .section-head--split .section-head__lead {
    justify-self: end;
    padding-block-end: var(--space-2);
  }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

/* Solid background on purpose: a backdrop-filter blur is redrawn on every
   scroll frame and makes the sticky header flicker over moving content. */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: var(--color-bg);
  transition: box-shadow var(--duration) var(--ease);
}

.site-header.is-scrolled {
  box-shadow: 0 1px 0 var(--color-border), var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-height);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Mobile: hamburger at the start, logo next to it, language switch at the end */
.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-header .site-header__cta {
  display: none;
}

@media (min-width: 64em) {
  .site-header .site-header__cta {
    display: inline-flex;
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-block: var(--space-6) var(--space-4);
}

.hero__grid {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

.hero__content {
  display: grid;
  justify-items: start;
  gap: var(--space-5);
}

.hero__title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: 1.15;
}

.hero__title span {
  display: block;
}

.hero__title .hero__title-accent {
  color: var(--color-primary);
}

.hero__lead {
  max-width: 30rem;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--color-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
}

.hero__formats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-block-start: var(--space-3);
  padding: 0;
  list-style: none;
}

.hero__formats li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-muted);
}

.hero__formats .icon {
  color: var(--color-primary);
  width: 1.4em;
  height: 1.4em;
}

.hero__media {
  position: relative;
  /* Phones & tablets (single column): photo first, then the text */
  order: -1;
  margin-inline: var(--space-2);
  margin-block-start: var(--space-4); /* room for the floating card above it */
}

.hero__photo img {
  width: 100%;
  aspect-ratio: var(--hero-ratio);
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.hero__badge--top {
  position: absolute;
  inset-block-start: calc(var(--space-4) * -1);
  inset-inline-end: calc(var(--space-2) * -1);
}

.hero__badge--bottom {
  position: absolute;
  inset-block-end: calc(var(--space-4) * -1);
  inset-inline-start: calc(var(--space-2) * -1);
}

@media (min-width: 64em) {
  .hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: var(--space-4) var(--space-16);
  }

  /* Very soft brand-colored glow behind the photo, so the screen never feels empty */
  .hero::before {
    content: "";
    position: absolute;
    inset-block-start: -10%;
    inset-inline-end: -10%;
    z-index: -1;
    width: 60vw;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgb(45 63 242 / 0.08), transparent 65%);
    pointer-events: none;
  }

  .hero__grid {
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(3rem, 5vw, 6rem);
  }

  .hero__content {
    gap: var(--space-6);
  }

  .hero__lead {
    max-width: 34rem;
    font-size: clamp(1.125rem, 0.9rem + 0.35vw, 1.3125rem);
  }

  .hero__media {
    order: 0; /* desktop: text left, photo right */
    margin-inline: 0;
    margin-block-start: 0;
  }

  /* Taller photo that grows with the screen, like the Canva desktop design */
  .hero__photo img {
    aspect-ratio: auto;
    height: clamp(26rem, 68vh, 42rem);
    height: clamp(26rem, 68svh, 42rem);
  }

  .hero__badge--top {
    inset-block-start: var(--space-6);
    inset-inline-end: calc(var(--space-6) * -1);
  }

  .hero__badge--bottom {
    inset-block-end: var(--space-6);
    inset-inline-start: calc(var(--space-6) * -1);
  }
}

/* --------------------------------------------------------------------------
   About (Who we are)
   -------------------------------------------------------------------------- */

.about__grid {
  display: grid;
  gap: var(--space-8);
}

.about__intro {
  display: grid;
  justify-items: start;
  gap: var(--space-5);
  align-content: center;
}

.about__text {
  max-width: 30rem;
  color: var(--color-muted);
}

.about__groups {
  display: grid;
  gap: var(--space-6);
}

.card-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 48em) {
  .card-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64em) {
  .about__grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-12);
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   Offers (courses) & Ways to learn
   -------------------------------------------------------------------------- */

.courses__grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 48em) {
  .courses__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64em) {
  .courses__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.formats__grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 48em) {
  .formats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64em) {
  .formats__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact__panel {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

@media (min-width: 64em) {
  .contact__panel {
    grid-template-columns: 0.75fr 1fr;
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding-block: var(--space-8) var(--space-6);
  border-block-start: 1px solid var(--color-border);
}

.site-footer__top {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  padding-block-end: var(--space-8);
  text-align: center;
  border-block-end: 1px solid var(--color-border);
}

.site-footer__tagline {
  color: var(--color-muted);
}

.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
}

.site-footer__nav a {
  color: var(--color-text-soft);
  transition: color var(--duration-color) var(--ease-color);
}

.site-footer__nav a:hover {
  color: var(--color-primary);
}

.site-footer__copy {
  padding-block-start: var(--space-6);
  font-size: var(--fs-sm);
  color: var(--color-muted);
  text-align: center;
}

@media (min-width: 48em) {
  .site-footer__top {
    grid-template-columns: 1fr auto;
    justify-items: start;
    align-items: start;
    text-align: start;
  }

  .site-footer__right {
    display: grid;
    justify-items: end;
    gap: var(--space-4);
  }

  .site-footer__copy {
    text-align: start;
  }
}

.section-head .eyebrow + .section-head__title {
  margin-block-start: var(--space-4);
}

/* --------------------------------------------------------------------------
   404 page
   -------------------------------------------------------------------------- */

.not-found {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  text-align: center;
}

.not-found .section-head__lead {
  margin-inline: auto;
}

.not-found__code {
  font-size: clamp(5rem, 3rem + 10vw, 9rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-primary);
}

.not-found__ar {
  font-family: var(--font-arabic);
  line-height: 1.6;
}