/*
  ELEMENTOR REBUILD TOKENS
  Site Settings > Layout: content width 1200px, widgets gap 24px.
  Global colors and type stay in brand-overrides.css.
*/
:root {
  --el-content: 1200px;
  --el-gutter: 24px;
  --el-section-y: 96px;
  --el-radius: 24px;
}

/* One predictable boxed-container rule for every full-width section. */
.section {
  padding: var(--el-section-y) max(var(--el-gutter), calc((100vw - var(--el-content)) / 2));
}

.hero,
.quick-paths,
.conversion-ribbon,
.site-header,
footer {
  padding-left: max(var(--el-gutter), calc((100vw - var(--el-content)) / 2));
  padding-right: max(var(--el-gutter), calc((100vw - var(--el-content)) / 2));
}

/* Standard Elementor container patterns: 50/50, 60/40 and equal thirds. */
.hero { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
.hero-visual img {
  /* Keep the three women as the focal point when the desktop column becomes square. */
  object-position: 100% center;
}
.section-heading { grid-template-columns: 3fr 2fr; gap: 48px; align-items: end; }
.destination-layout { grid-template-columns: 3fr 2fr; gap: 48px; }
.journey,
.consultation { grid-template-columns: 2fr 3fr; gap: 64px; }
.service-grid,
.opportunity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

/* Avoid a sticky behaviour that needs custom Elementor CSS. */
.journey-title { position: static; top: auto; }

/* Shared card geometry can be set once as an Elementor Global Style. */
.service-card,
.opp,
.destination-feature,
.prep-visual,
.registration-strip,
.consultation-form { border-radius: var(--el-radius); }

.service-card,
.opp { min-width: 0; }
.opp { display: flex; flex-direction: column; }
.opp-image { aspect-ratio: 4 / 3; min-height: 0; }
.opp > div:last-child { flex: 1; display: flex; flex-direction: column; }
.opp a { margin-top: auto; }

/* This wide card becomes a simple nested horizontal container in Elementor. */
.service-card.language {
  grid-column: 1 / -1;
  grid-template-columns: 1fr 1.25fr 1.75fr auto;
  gap: 24px;
  align-items: center;
}

@media (max-width: 1024px) {
  :root { --el-section-y: 72px; --el-gutter: 32px; }
  .hero { gap: 36px; }
  .hero-visual img { object-position: 78% center; }
  .section-heading,
  .destination-layout,
  .journey,
  .consultation { gap: 40px; }
  .service-grid,
  .opportunity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-card.language { grid-column: 1 / -1; grid-template-columns: 1fr 2fr; }
  .service-card.language .mini-label,
  .service-card.language a { grid-column: auto; }
}

@media (max-width: 767px) {
  :root { --el-section-y: 56px; --el-gutter: 20px; --el-radius: 20px; }
  .hero,
  .section-heading,
  .destination-layout,
  .journey,
  .consultation,
  .service-grid,
  .opportunity-grid { grid-template-columns: 1fr; gap: 32px; }
  .service-card.language { grid-template-columns: 1fr; }
  .site-header,
  footer { padding-left: var(--el-gutter); padding-right: var(--el-gutter); }
  .hero-visual img { object-position: 68% center; }
}