/*
 * Samsung Innovation Campus — Shared Responsive Utilities
 * Mobile-first: base = mobile, then tablet (≥600px), desktop (≥1024px)
 *
 * Usage: Add <link rel="stylesheet" href="responsive.css"> after Tailwind config.
 * These classes supplement (not replace) Tailwind utility classes.
 */

/* ─────────────────────────────────────────────
   1. Fluid Typography (clamp)
   ───────────────────────────────────────────── */
/*   min    preferred   max   */
.fluid-text-xs   { font-size: clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem); }
.fluid-text-sm   { font-size: clamp(0.8125rem, 0.75rem + 0.3vw,  1rem);     }
.fluid-text-base { font-size: clamp(0.875rem,  0.8rem  + 0.35vw, 1.125rem); }
.fluid-text-lg   { font-size: clamp(1rem,      0.9rem  + 0.5vw,  1.25rem);  }
.fluid-text-xl   { font-size: clamp(1.125rem,  1rem    + 0.6vw,  1.5rem);   }
.fluid-text-2xl  { font-size: clamp(1.25rem,   1rem    + 1vw,    1.75rem);  }
.fluid-text-3xl  { font-size: clamp(1.5rem,    1.1rem  + 1.5vw,  2.25rem);  }
.fluid-text-4xl  { font-size: clamp(1.875rem,  1.2rem  + 2vw,    2.75rem);  }
.fluid-text-5xl  { font-size: clamp(2.25rem,   1.5rem  + 2.5vw,  3.5rem);   }
.fluid-text-hero { font-size: clamp(2rem,      1rem    + 4vw,    4.5rem);   }

/* ─────────────────────────────────────────────
   2. Fluid Spacing
   ───────────────────────────────────────────── */
.fluid-py-section { padding-block: clamp(2rem,  1rem + 4vw,  6rem); }
.fluid-py-card    { padding-block: clamp(1rem,  0.5rem + 2vw, 2.5rem); }
.fluid-gap-sm     { gap: clamp(0.5rem, 0.25rem + 0.5vw, 1rem); }
.fluid-gap-md     { gap: clamp(1rem,   0.5rem  + 1vw,   2rem); }
.fluid-gap-lg     { gap: clamp(1.5rem, 1rem    + 1.5vw, 3rem); }

/* ─────────────────────────────────────────────
   3. Touch Targets (min 44×44 px)
   ───────────────────────────────────────────── */
.touch-target {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.touch-target-padding {
  padding: 10px 16px; /* ~44px min height with text */
}

/* ─────────────────────────────────────────────
   4. Responsive Media Queries
   ───────────────────────────────────────────── */

/* --- Mobile (< 600px) --- */
@media (max-width: 599px) {
  /* Force single-column grids on mobile */
  .mobile-stack { grid-template-columns: 1fr !important; }

  /* Reduce large section spacing on mobile */
  .mobile-compact-section { margin-block: 1.5rem !important; }

  /* Ensure images scale */
  .responsive-media {
    max-width: 100%;
    height: auto;
  }
}

/* --- Tablet (600px–1024px) --- */
@media (min-width: 600px) and (max-width: 1023px) {
  .tablet-two-col { grid-template-columns: repeat(2, 1fr) !important; }
}

/* --- Mobile + Tablet (below 1024px) --- */
@media (max-width: 1023px) {
  /* LMS sidebar: hidden by default, slide-in drawer */
  .lms-sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
  }
  .lms-sidebar.is-open {
    transform: translateX(0);
  }

  /* LMS sidebar overlay */
  .lms-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99;
    -webkit-tap-highlight-color: transparent;
  }
  .lms-sidebar-overlay.is-visible {
    display: block;
  }

  /* LMS main content: no sidebar offset */
  .lms-main {
    margin-left: 0 !important;
  }

  /* Show hamburger toggle */
  .lms-sidebar-toggle {
    display: flex !important;
  }
}

/* --- Desktop (≥1024px) --- */
@media (min-width: 1024px) {
  /* LMS sidebar: always visible, fixed */
  .lms-sidebar {
    transform: translateX(0);
  }

  /* Hide hamburger toggle on desktop */
  .lms-sidebar-toggle {
    display: none !important;
  }

  /* Hide overlay on desktop */
  .lms-sidebar-overlay {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────
   5. Flexible Media
   ───────────────────────────────────────────── */
img, video, svg, iframe {
  max-width: 100%;
  height: auto;
}

/* ─────────────────────────────────────────────
   6. Safe Area (notch devices)
   ───────────────────────────────────────────── */
@supports (padding: env(safe-area-inset-top)) {
  .safe-area-top { padding-top: env(safe-area-inset-top); }
  .safe-area-bottom { padding-bottom: env(safe-area-inset-bottom); }
}