/* ==========================================================================
   WADI MATROUH — LAYOUT & SPACING SYSTEM
   Mobile-first. Every rule assumes phone, then scales up.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* ---- CONTAINERS ---- */
.wadi-container {
  width: 100%;
  max-width: var(--wadi-container);
  margin-inline: auto;
  padding-inline: var(--wadi-gutter);   /* never less than 16px on phones */
}
.wadi-container--wide { max-width: var(--wadi-container-wide); }
.wadi-container--text { max-width: var(--wadi-container-text); }
.wadi-container--flush { padding-inline: 0; }

/* ---- SECTION RHYTHM ----
   "Calm premium" is mostly whitespace discipline. The old homepage failed by
   addition; this system fails safe by spacing. */
.wadi-section { padding-block: var(--wadi-section-y); }
.wadi-section--tight { padding-block: var(--wadi-section-y-tight); }
.wadi-section--cream { background: var(--wadi-cream); }
.wadi-section--cream-soft { background: var(--wadi-cream-50); }
.wadi-section--olive { background: var(--wadi-olive); color: var(--wadi-cream-50); }
.wadi-section--olive :is(h1,h2,h3,h4) { color: var(--wadi-cream-50); }

.wadi-section__head { margin-bottom: var(--wadi-sp-6); }
.wadi-section__head--center { text-align: center; }
.wadi-section__title { margin-bottom: var(--wadi-sp-2); }
.wadi-section__sub { color: var(--wadi-ink-soft); font-size: var(--wadi-fs-md); margin: 0; }

/* ---- GRID ----
   2 columns on mobile is deliberate for product grids: one column wastes the
   viewport, three is too cramped for Arabic product names. */
.wadi-grid { display: grid; gap: var(--wadi-sp-4); }
.wadi-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.wadi-grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.wadi-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }

@media (min-width: 768px) {
  .wadi-grid { gap: var(--wadi-sp-5); }
  .wadi-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .wadi-grid--4 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 1024px) {
  .wadi-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* Split — media + text */
.wadi-split { display: grid; gap: var(--wadi-sp-5); align-items: center; }
@media (min-width: 900px) {
  .wadi-split { grid-template-columns: 1fr 1fr; gap: var(--wadi-sp-7); }
  .wadi-split--media-start > .wadi-split__media { order: -1; }
}

/* ---- FLOW ---- */
.wadi-flow > * + * { margin-block-start: var(--wadi-sp-4); }
.wadi-cluster { display: flex; flex-wrap: wrap; gap: var(--wadi-sp-3); align-items: center; }
.wadi-center { text-align: center; }

/* ---- IMAGE SLOTS ----
   Aspect ratios locked per the image slot specification so layout never shifts
   when a real photograph replaces a placeholder. This is what prevents CLS. */
.wadi-media { position: relative; overflow: hidden; background: var(--wadi-cream-50); border-radius: var(--wadi-r-lg); }
.wadi-media > img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wadi-media--square   { aspect-ratio: 1 / 1; }      /* product, category card */
.wadi-media--hero     { aspect-ratio: 16 / 9; }     /* hero desktop 2400x1350 */
.wadi-media--hero-m   { aspect-ratio: 4 / 5; }      /* hero mobile  1200x1500 */
.wadi-media--wide     { aspect-ratio: 2 / 1; }      /* origin/story 2400x1200 */
.wadi-media--edu      { aspect-ratio: 3 / 2; }      /* educational  1200x800  */
.wadi-media--banner   { aspect-ratio: 16 / 9; }     /* offer banner 1600x900  */

/* Product images sit on white — never on cream */
.wadi-media--product { background: var(--wadi-surface); }
.wadi-media--product > img { object-fit: contain; padding: var(--wadi-sp-3); }

/* ---- PLACEHOLDER ----
   Deliberate, branded, ~0 KB. Reads as "coming soon", not "broken". */
.wadi-placeholder {
  display: grid; place-items: center;
  background: var(--wadi-cream-50);
  border: 1px dashed var(--wadi-line);
  color: var(--wadi-ink-muted);
  font-size: var(--wadi-fs-sm);
  text-align: center;
  padding: var(--wadi-sp-4);
}
.wadi-placeholder::before {
  content: "";
  width: 34px; height: 34px; margin-bottom: var(--wadi-sp-2);
  background: currentColor;
  -webkit-mask: var(--wadi-leaf-icon) center/contain no-repeat;
          mask: var(--wadi-leaf-icon) center/contain no-repeat;
  opacity: .45;
}
:root {
  --wadi-leaf-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C7 6 4 10 4 14a8 8 0 0016 0c0-4-3-8-8-12zm0 3.6c3.2 3 5.2 6 5.2 8.4a5.2 5.2 0 01-10.4 0c0-2.4 2-5.4 5.2-8.4z'/></svg>");
}

/* ---- VISUALLY HIDDEN (a11y) ---- */
.wadi-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- SKIP LINK ---- */
.wadi-skip {
  position: absolute; inset-inline-start: var(--wadi-sp-4); top: -100px;
  background: var(--wadi-olive); color: #fff; padding: var(--wadi-sp-3) var(--wadi-sp-4);
  border-radius: var(--wadi-r-md); z-index: var(--wadi-z-modal);
  transition: top var(--wadi-dur) var(--wadi-ease);
}
.wadi-skip:focus { top: var(--wadi-sp-4); }