/* ==========================================================================
   Elken Africa — sections
   One block per page section. Each name is the same in Figma, here, and in
   Elementor, so a section maps onto exactly one template.
   ========================================================================== */

.sec-pad { padding-block: var(--ek-section-pad); }

/* sec-products — Figma "Sec - ContentCardsSection" ------------------------ */
.sec-products { background: var(--ek-ground-light); }
.sec-products__foot { margin-top: 44px; }

/* sec-about — Figma "Sec - StatsIntroSection" ----------------------------- */
.sec-about { background: var(--ek-white); }
.sec-about__foot { margin-top: 44px; }

/* sec-locations — full-bleed Deep Vital Blue band ------------------------- */
.sec-locations { background: var(--ek-blue); color: var(--ek-white); }
.sec-locations .ek-h2 { color: var(--ek-white); }
.sec-locations .ek-lead { color: var(--ek-grey-light); }
.sec-locations__grid { display: grid; grid-template-columns: 561px 762px; align-items: start; }
.sec-locations__copy { display: flex; flex-direction: column; gap: 22px; max-width: 470px; }
.sec-locations__actions { display: flex; gap: var(--ek-16); margin-top: 14px; flex-wrap: wrap; }
.sec-locations__note {
  margin-top: 64px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.16);
  display: flex; align-items: center; gap: var(--ek-12); flex-wrap: wrap;
  font-size: 16px; color: var(--ek-steel);
}
@media (max-width: 1439px) { .sec-locations__grid { grid-template-columns: 40% 1fr; column-gap: var(--ek-56); } }
@media (max-width: 1023px) {
  .sec-locations__grid { grid-template-columns: 1fr; }
  .sec-locations__copy { max-width: none; }
  .sec-locations__actions { flex-direction: column; }
  .sec-locations__note { margin-top: 34px; padding-top: 24px; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 14px; }
}

/* sec-closing ------------------------------------------------------------- */
.sec-closing { padding-block: 110px; }
.sec-closing .ek-h2 { color: var(--ek-blue); }
@media (max-width: 767px) { .sec-closing { padding-block: 56px; } }

/* sec-footer — Figma "Sec-Footer" ---------------------------------------- */
/* The footer sits below dark sections on the product pages, so it needs its own
   ground a clear step darker than Charcoal Core — otherwise the two read as one
   continuous band. Same relationship as the Elken corporate site. */
.sec-footer { background: var(--ek-charcoal-deep); color: var(--ek-white); }
.sec-footer__inner {
  display: grid; grid-template-columns: 1fr 315px 238px 231px;
  gap: var(--ek-40); padding-block: 93px 80px;
}
.sec-footer__logo { height: 26px; width: auto; display: block; }
.ek-fcol h2 { font-size: 15px; font-weight: 700; color: var(--ek-white); margin: 0 0 22px; }
.ek-fcol ul { display: flex; flex-direction: column; gap: 14px; }
.ek-fcol li { display: flex; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--ek-grey-light); }
.ek-fcol li::before { content: ""; flex: 0 0 auto; width: 4px; height: 4px; background: var(--ek-pink); margin-top: 8px; }
.ek-fcol a { color: var(--ek-grey-light); }
.ek-fcol a:hover { color: var(--ek-pink); }
.ek-faddr { font-style: normal; font-size: 14px; line-height: 1.7; color: var(--ek-grey-light); }
.ek-faddr strong { color: var(--ek-white); font-weight: 700; }
.ek-faddr a { color: var(--ek-grey-light); text-decoration: underline; }
.ek-faddr a:hover { color: var(--ek-pink); }

.sec-footer__bar {
  border-top: 1px solid rgba(255,255,255,.10); padding-block: 24px 34px;
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--ek-32);
}
/* The whole bottom bar is fine print, at the Figma fill. Deliberately
   recessive: 1.83:1 on the footer ground, which is the design's intent here and
   is well below the 4.5:1 a reader needs. Flagged to Elken BC, applied as drawn. */
.sec-footer__bar p, .sec-footer__bar a { font-size: 12px; line-height: 1.6; color: var(--ek-footer-fine); }
.sec-footer__bar a:hover { color: var(--ek-pink); }
.ek-social { display: flex; gap: var(--ek-8); }
.ek-social a {
  width: 44px; height: 44px; background: rgba(255,255,255,.10);
  display: flex; align-items: center; justify-content: center;
  transition: background-color var(--ek-fast) var(--ek-ease);
}
.ek-social a:hover { background: var(--ek-pink); }

@media (max-width: 1199px) {
  .sec-footer__inner { grid-template-columns: 1fr 1fr; gap: var(--ek-40); padding-block: 56px 40px; }
  .sec-footer__bar { grid-template-columns: 1fr; gap: var(--ek-16); }
}
@media (max-width: 767px) {
  .sec-footer__inner { grid-template-columns: 1fr; gap: var(--ek-32); padding-block: 48px 32px; }
}