/* ============================================================================
   FIGEIT — Shared Responsive Foundation  (Step 1: FOUNDATION ONLY)
   File: public/css/front/figeit-responsive.css

   PURPOSE
   A single shared layer of responsive tokens + opt-in primitives for the 7
   PUBLIC pages (Main Home, Seller Home, Buyer Home, Franchise, Logistics,
   Investor, Login/Signup). Steps 2-6 migrate each page onto these helpers.

   NON-REGRESSION CONTRACT (critical for this step)
   - This file is ADDITIVE and must cause NO visible layout change on load.
   - Every layout rule is scoped under an opt-in `.fg-*` class, so it affects
     NOTHING until a page element explicitly adopts the class in a later step.
   - The only element/attribute-level rules here are box-model-neutral safety
     rules that are already standard in the existing pages (box-sizing reset,
     and media max-width which the pages already apply to their own images).
     They are intentionally conservative so no current page shifts.
   - No colors, fonts, branding, hero dimensions, card layouts, stats bars,
     JS, or dashboard styles are touched here.

   BREAKPOINT LADDER (shared, desktop-first — matches the approved audit)
     1536px  large desktop ceiling
     1280px  standard laptop
     1024px  small laptop / large tablet
      768px  tablet
      480px  mobile
   ========================================================================== */

/* ------------------------------------------------------------------ TOKENS */
:root {
  /* One shared content container width for all public pages. */
  --fg-container: 1280px;

  /* Fluid horizontal page gutter: 16px on mobile, growing to 24px on desktop. */
  --fg-gutter: clamp(16px, 4vw, 24px);

  /* Shared breakpoint reference values (for documentation / JS use; CSS media
     queries below use the literal px so older parsers are unaffected). */
  --fg-bp-xl: 1536px;
  --fg-bp-lg: 1280px;
  --fg-bp-md: 1024px;
  --fg-bp-sm: 768px;
  --fg-bp-xs: 480px;

  /* Reusable fluid spacing step for section padding (used opt-in). */
  --fg-space-section: clamp(32px, 6vw, 72px);
}

/* ----------------------------------------------------- NO GLOBAL RESET HERE
   Deliberate: this foundation adds NO unscoped `* { box-sizing }` reset.
   Six of the seven pages already declare their own border-box reset inline or
   in their page CSS; the Login/Signup page (register.blade.php) does NOT, so a
   global reset would change its box model and risk a visible shift. To honor
   the Step-1 non-regression contract, box-sizing is applied ONLY to the opt-in
   `.fg-*` primitives below (never to bare elements). Pages keep their existing
   box model untouched until they adopt the helpers in Steps 2-6. */

/* ----------------------------------------------------------- OPT-IN HELPERS
   Nothing below applies until an element adopts the class. Each primitive sets
   its own border-box so it behaves predictably without a global reset. */

/* Responsive container: capped width, centered, fluid gutters. */
.fg-container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--fg-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--fg-gutter);
  padding-right: var(--fg-gutter);
}

/* Narrower container variant for auth/forms and reading-width content. */
.fg-container--narrow {
  max-width: 720px;
}

/* Full-bleed utility: lets an element break out of a container to the full
   viewport width WITHOUT causing horizontal scroll (pairs with .fg-no-overflow
   on a wrapper or body). Opt-in replacement for ad-hoc 100vw break-out tricks. */
.fg-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Overflow protection: opt-in guard against horizontal scroll from bleed/
   wide children. Apply to a page wrapper during migration if needed. */
.fg-no-overflow {
  overflow-x: hidden;
}

/* Fluid section padding (vertical rhythm) — opt-in replacement for fixed
   px / vh section heights. */
.fg-section {
  padding-top: var(--fg-space-section);
  padding-bottom: var(--fg-space-section);
}

/* ------------------------------------------------- RESPONSIVE IMAGES / MEDIA
   Opt-in. Prevents images/video overflowing their box and preserves ratio. */
.fg-img,
.fg-media {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Aspect-ratio media box with cover fill (opt-in). Use on image/video
   wrappers so media scales fluidly instead of using fixed px heights. */
.fg-ratio {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.fg-ratio > img,
.fg-ratio > video,
.fg-ratio > iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Common ratios (opt-in modifiers). Uses aspect-ratio where supported with a
   padding-top fallback for very old engines. */
.fg-ratio--16x9 { aspect-ratio: 16 / 9; }
.fg-ratio--4x3  { aspect-ratio: 4 / 3; }
.fg-ratio--1x1  { aspect-ratio: 1 / 1; }
.fg-ratio--3x2  { aspect-ratio: 3 / 2; }

.fg-cover   { object-fit: cover; }
.fg-contain { object-fit: contain; }

/* --------------------------------------------------- RESPONSIVE FLEX / GRID
   Opt-in reusable layout helpers. */

/* Self-adjusting card grid: fills the row and reflows smoothly between
   viewports (no hardcoded per-breakpoint column snapping). --fg-min sets the
   minimum card width; override inline per section, e.g. style="--fg-min:240px". */
.fg-grid-auto {
  display: grid;
  gap: var(--fg-grid-gap, clamp(12px, 2vw, 24px));
  grid-template-columns: repeat(auto-fit, minmax(var(--fg-min, 220px), 1fr));
}

/* Explicit column helpers (opt-in) that collapse on the shared ladder. */
.fg-grid {
  display: grid;
  gap: var(--fg-grid-gap, clamp(12px, 2vw, 24px));
}
.fg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fg-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fg-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Simple flex row that wraps (opt-in). */
.fg-flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fg-flex-gap, clamp(12px, 2vw, 24px));
}
.fg-flex--between { justify-content: space-between; }
.fg-flex--center  { align-items: center; }

/* ------------------------------------------------------- SHARED BREAKPOINTS
   Column step-downs for the explicit grid helpers, on the shared ladder.
   These apply ONLY to the opt-in .fg-grid--* classes, so no existing page is
   affected until it adopts them. Desktop-first to match existing code. */

/* <= 1280px : 5-up becomes 4-up */
@media (max-width: 1280px) {
  .fg-grid--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* <= 1024px : step everything down one level */
@media (max-width: 1024px) {
  .fg-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fg-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fg-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* <= 768px : tablet — mostly 2-up */
@media (max-width: 768px) {
  .fg-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fg-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fg-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* <= 480px : mobile — single column */
@media (max-width: 480px) {
  .fg-grid--5,
  .fg-grid--4,
  .fg-grid--3,
  .fg-grid--2 { grid-template-columns: 1fr; }
}

/* ----------------------------------------------- SMALL RESPONSIVE UTILITIES
   Opt-in visibility helpers on the shared ladder (handy during migration). */
.fg-hide-sm { }
@media (max-width: 768px) {
  .fg-hide-sm { display: none !important; }
}
.fg-only-sm { display: none; }
@media (max-width: 768px) {
  .fg-only-sm { display: initial; }
}

/* ============================================================================
   END — figeit-responsive.css (foundation only; migration happens in Steps 2-6)
   ========================================================================== */