/* ═══════════════════════════════════════════════════════════════
   IBRAHIM FASHION — Layout System
   Containers, grids, sections, spacing.
   Loaded after base.css.
   ═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   1. CONTAINERS
   Every section wraps its content in one of these.
   ───────────────────────────────────────────────────────────── */
.if-container {
  width: 100%;
  max-width: var(--if-container);
  margin-inline: auto;
  padding-inline: var(--if-gutter);
}

.if-container--wide {
  max-width: var(--if-container-wide);
}

.if-container--narrow {
  max-width: var(--if-container-narrow);
}

.if-container--full {
  max-width: none;
  padding-inline: var(--if-gutter);
}

.if-container--flush {
  max-width: none;
  padding-inline: 0;
}


/* ─────────────────────────────────────────────────────────────
   2. MAIN CONTENT AREA
   ───────────────────────────────────────────────────────────── */
.if-main {
  display: block;
  min-height: 50vh;
}


/* ─────────────────────────────────────────────────────────────
   3. SECTIONS
   Consistent vertical rhythm across the whole site.
   ───────────────────────────────────────────────────────────── */
.if-section {
  padding-block: clamp(48px, 6vw, 96px);
  position: relative;
}

.if-section--sm {
  padding-block: clamp(32px, 4vw, 56px);
}

.if-section--lg {
  padding-block: clamp(64px, 8vw, 128px);
}

.if-section--xl {
  padding-block: clamp(80px, 10vw, 160px);
}

.if-section--flush {
  padding-block: 0;
}

.if-section--ivory {
  background: var(--if-ivory);
}

.if-section--champagne {
  background: var(--if-champagne);
}

.if-section--gold-wash {
  background: var(--if-gold-wash);
}

.if-section--charcoal {
  background: var(--if-charcoal-bg);
  color: var(--if-champagne);
}

.if-section--charcoal h1,
.if-section--charcoal h2,
.if-section--charcoal h3,
.if-section--charcoal h4 {
  color: var(--if-white);
}

.if-section--charcoal p {
  color: #B9B2A6;
}


/* ─────────────────────────────────────────────────────────────
   4. SECTION HEADER
   The eyebrow + title + optional description pattern.
   ───────────────────────────────────────────────────────────── */
.if-section__head {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: clamp(32px, 4vw, 56px);
  text-align: center;
}

.if-section__head--left {
  margin-inline: 0;
  text-align: left;
}

.if-section__head h2 {
  margin-bottom: var(--if-s4);
}

.if-section__head p {
  font-size: var(--if-fs-body-lg);
  color: var(--if-muted);
  max-width: 56ch;
  margin-inline: auto;
}

.if-section__head--left p {
  margin-inline: 0;
}

.if-section__head .if-rule {
  display: block;
  width: 56px;
  height: 2px;
  background: var(--if-gold);
  margin: var(--if-s4) auto;
}

.if-section__head--left .if-rule {
  margin-inline: 0;
}


/* ─────────────────────────────────────────────────────────────
   5. GRID SYSTEM
   Use these instead of writing grid-template-columns everywhere.
   ───────────────────────────────────────────────────────────── */
.if-grid {
  display: grid;
  gap: var(--if-s5);
}

/* Fixed column grids */
.if-grid--2 { grid-template-columns: repeat(2, 1fr); }
.if-grid--3 { grid-template-columns: repeat(3, 1fr); }
.if-grid--4 { grid-template-columns: repeat(4, 1fr); }
.if-grid--5 { grid-template-columns: repeat(5, 1fr); }

/* Auto-fit — fills as many columns as fit at min-width */
.if-grid--auto-240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.if-grid--auto-280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.if-grid--auto-320 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* Auto-fill — keeps empty tracks (better for product grids) */
.if-grid--products {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--if-s6) var(--if-s4);
}

/* Asymmetric grids for editorial layouts */
.if-grid--editorial {
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}

.if-grid--editorial-reverse {
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}

/* Sidebar + content */
.if-grid--sidebar {
  grid-template-columns: 280px 1fr;
  gap: var(--if-s7);
  align-items: start;
}

/* Gap modifiers */
.if-grid--gap-sm  { gap: var(--if-s3); }
.if-grid--gap-md  { gap: var(--if-s4); }
.if-grid--gap-lg  { gap: var(--if-s7); }
.if-grid--gap-xl  { gap: var(--if-s8); }


/* ─────────────────────────────────────────────────────────────
   6. FLEX UTILITIES
   Small helpers that save a lot of CSS.
   ───────────────────────────────────────────────────────────── */
.if-flex         { display: flex; }
.if-flex-col     { display: flex; flex-direction: column; }
.if-inline-flex  { display: inline-flex; }

.if-items-start    { align-items: flex-start; }
.if-items-center   { align-items: center; }
.if-items-end      { align-items: flex-end; }
.if-items-stretch  { align-items: stretch; }

.if-justify-start   { justify-content: flex-start; }
.if-justify-center  { justify-content: center; }
.if-justify-end     { justify-content: flex-end; }
.if-justify-between { justify-content: space-between; }

.if-flex-wrap  { flex-wrap: wrap; }
.if-flex-nowrap{ flex-wrap: nowrap; }
.if-flex-1     { flex: 1 1 auto; }
.if-flex-none  { flex: none; }

.if-gap-1 { gap: var(--if-s1); }
.if-gap-2 { gap: var(--if-s2); }
.if-gap-3 { gap: var(--if-s3); }
.if-gap-4 { gap: var(--if-s4); }
.if-gap-5 { gap: var(--if-s5); }
.if-gap-6 { gap: var(--if-s6); }


/* ─────────────────────────────────────────────────────────────
   7. ASPECT RATIO HELPERS
   For image wrappers so nothing jumps while loading.
   ───────────────────────────────────────────────────────────── */
.if-ratio {
  position: relative;
  overflow: hidden;
  display: block;
}

.if-ratio > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.if-ratio--product { aspect-ratio: 3 / 4; }
.if-ratio--portrait{ aspect-ratio: 4 / 5; }
.if-ratio--square  { aspect-ratio: 1 / 1; }
.if-ratio--wide    { aspect-ratio: 16 / 9; }
.if-ratio--hero    { aspect-ratio: 16 / 9; }
.if-ratio--editorial { aspect-ratio: 3 / 2; }


/* ─────────────────────────────────────────────────────────────
   8. SPACING UTILITIES
   Margins and paddings following the 4px scale.
   ───────────────────────────────────────────────────────────── */

/* Margin top */
.if-mt-0 { margin-top: 0; }
.if-mt-2 { margin-top: var(--if-s2); }
.if-mt-3 { margin-top: var(--if-s3); }
.if-mt-4 { margin-top: var(--if-s4); }
.if-mt-5 { margin-top: var(--if-s5); }
.if-mt-6 { margin-top: var(--if-s6); }
.if-mt-7 { margin-top: var(--if-s7); }
.if-mt-8 { margin-top: var(--if-s8); }
.if-mt-9 { margin-top: var(--if-s9); }

/* Margin bottom */
.if-mb-0 { margin-bottom: 0; }
.if-mb-2 { margin-bottom: var(--if-s2); }
.if-mb-3 { margin-bottom: var(--if-s3); }
.if-mb-4 { margin-bottom: var(--if-s4); }
.if-mb-5 { margin-bottom: var(--if-s5); }
.if-mb-6 { margin-bottom: var(--if-s6); }
.if-mb-7 { margin-bottom: var(--if-s7); }
.if-mb-8 { margin-bottom: var(--if-s8); }
.if-mb-9 { margin-bottom: var(--if-s9); }

/* Padding block */
.if-py-0 { padding-block: 0; }
.if-py-4 { padding-block: var(--if-s4); }
.if-py-5 { padding-block: var(--if-s5); }
.if-py-6 { padding-block: var(--if-s6); }
.if-py-7 { padding-block: var(--if-s7); }
.if-py-8 { padding-block: var(--if-s8); }
.if-py-9 { padding-block: var(--if-s9); }

/* Padding all sides */
.if-p-0 { padding: 0; }
.if-p-4 { padding: var(--if-s4); }
.if-p-5 { padding: var(--if-s5); }
.if-p-6 { padding: var(--if-s6); }
.if-p-7 { padding: var(--if-s7); }


/* ─────────────────────────────────────────────────────────────
   9. WIDTH / HEIGHT UTILITIES
   ───────────────────────────────────────────────────────────── */
.if-w-full    { width: 100%; }
.if-h-full    { height: 100%; }
.if-min-h-100 { min-height: 100vh; }
.if-max-w-full{ max-width: 100%; }
.if-max-w-prose{ max-width: 68ch; }
.if-max-w-narrow{ max-width: 480px; }


/* ─────────────────────────────────────────────────────────────
   10. POSITIONING
   ───────────────────────────────────────────────────────────── */
.if-relative  { position: relative; }
.if-absolute  { position: absolute; }
.if-sticky    { position: sticky; }
.if-fixed     { position: fixed; }

.if-overflow-hidden { overflow: hidden; }
.if-overflow-auto   { overflow: auto; }


/* ─────────────────────────────────────────────────────────────
   11. DISPLAY HELPERS
   ───────────────────────────────────────────────────────────── */
.if-block        { display: block; }
.if-inline-block { display: inline-block; }
.if-hidden       { display: none !important; }


/* ─────────────────────────────────────────────────────────────
   12. RESPONSIVE VISIBILITY
   Hide elements at certain breakpoints.
   ───────────────────────────────────────────────────────────── */

/* Desktop only — hidden below 1024px */
.if-hide-mobile {
  display: initial;
}

.if-hide-desktop {
  display: none;
}

@media (max-width: 1023px) {
  .if-hide-mobile  { display: none !important; }
  .if-hide-desktop { display: initial; }
}


/* ─────────────────────────────────────────────────────────────
   13. RESPONSIVE — TABLET (max 1023px)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {

  .if-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .if-grid--5 {
    grid-template-columns: repeat(3, 1fr);
  }

  .if-grid--products {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  .if-grid--sidebar {
    grid-template-columns: 1fr;
    gap: var(--if-s6);
  }

  .if-grid--editorial,
  .if-grid--editorial-reverse {
    grid-template-columns: 1fr;
    gap: var(--if-s6);
  }

  .if-grid--editorial-reverse > *:first-child {
    order: 2;
  }

  .if-section__head {
    max-width: 100%;
  }
}


/* ─────────────────────────────────────────────────────────────
   14. RESPONSIVE — MOBILE (max 767px)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  .if-container {
    padding-inline: var(--if-gutter);
  }

  .if-grid--2,
  .if-grid--3,
  .if-grid--4,
  .if-grid--5 {
    grid-template-columns: 1fr;
  }

  /* Product grids stay 2-column on mobile — that's the right density */
  .if-grid--products {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--if-s5) var(--if-s3);
  }

  .if-grid--auto-240,
  .if-grid--auto-280,
  .if-grid--auto-320 {
    grid-template-columns: 1fr;
  }

  .if-section {
    padding-block: clamp(40px, 8vw, 64px);
  }

  .if-section--lg {
    padding-block: clamp(48px, 10vw, 80px);
  }

  .if-section--xl {
    padding-block: clamp(56px, 12vw, 96px);
  }

  .if-section__head {
    margin-bottom: var(--if-s6);
  }
}


/* ─────────────────────────────────────────────────────────────
   15. RESPONSIVE — SMALL MOBILE (max 479px)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 479px) {

  .if-grid--products {
    gap: var(--if-s4) var(--if-s3);
  }
}


/* ─────────────────────────────────────────────────────────────
   16. WOOCOMMERCE STRUCTURAL OVERRIDES
   WooCommerce generates generic wrappers — we align them
   with our layout system.
   ───────────────────────────────────────────────────────────── */
.woocommerce,
.woocommerce-page {
  --if-gutter: clamp(16px, 4vw, 48px);
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
  margin-bottom: var(--if-s5);
  padding: var(--if-s4) var(--if-s5);
  border-left: 3px solid var(--if-gold);
  background: var(--if-gold-wash);
  font-size: var(--if-fs-sm);
  color: var(--if-ink);
  list-style: none;
}

.woocommerce .woocommerce-error {
  border-left-color: var(--if-error);
  background: #FBF2F2;
}

.woocommerce .woocommerce-message {
  border-left-color: var(--if-success);
  background: #F1F7F3;
}

.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-error .button {
  float: right;
  padding: 8px 16px;
  background: var(--if-charcoal);
  color: var(--if-white);
  font-size: var(--if-fs-xs);
  letter-spacing: var(--if-track-wide);
  text-transform: uppercase;
  border-radius: var(--if-r-sm);
  transition: background var(--if-dur-fast) var(--if-ease);
}

.woocommerce .woocommerce-message .button:hover,
.woocommerce .woocommerce-info .button:hover {
  background: var(--if-gold);
  color: var(--if-white);
}


/* ─────────────────────────────────────────────────────────────
   17. GUTENBERG ALIGNMENT
   Allow blocks to break out of the container.
   ───────────────────────────────────────────────────────────── */
.if-main .alignwide {
  width: min(100%, var(--if-container-wide));
  margin-inline: auto;
}

.if-main .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}