/* ========================================
   PASS 1: GLOBAL RESPONSIVENESS GUARANTEES
   ======================================== */

/* 
  RULES:
  - NO lazy vertical stacking of images above/below text
  - Preserve design hierarchy on mobile
  - Use adaptive grids, not column dumps
  - Carousels remain horizontal on mobile
  - Cards resize, not stack blindly
*/

/* BASE: Image scaling foundation */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Media queries: ensure images don't cause layout shifts */
figure,
picture {
  margin: 0;
  padding: 0;
}

/* ========================================
   FLEX-ROW → FLEX-COL MD:FLEX-ROW
   ======================================== */

/* For any section marked with adaptive flex */
[data-adaptive-flex] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  [data-adaptive-flex] {
    flex-direction: row;
    gap: 1.5rem;
  }
}

/* ========================================
   GRID-COLS-3 → GRID-COLS-1 MD:GRID-COLS-3
   ======================================== */

[data-grid-responsive] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  [data-grid-responsive] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

@media (min-width: 768px) {
  [data-grid-responsive] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

/* ========================================
   MOBILE OVERFLOW PREVENTION
   ======================================== */

body,
html {
  overflow-x: hidden;
}

section,
.section {
  overflow-x: hidden;
}

/* Ensure containers don't overflow on mobile */
[role="main"],
main {
  overflow-x: hidden;
}

/* ========================================
   CAROUSEL HORIZONTAL GUARANTEE
   ======================================== */

.carousel,
[data-carousel],
.slider,
[data-slider] {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
  .carousel,
  [data-carousel],
  .slider,
  [data-slider] {
    /* Force horizontal on mobile */
    flex-direction: row !important;
    flex-wrap: nowrap;
  }
}

/* ========================================
   CARD RESIZE, NOT STACK
   ======================================== */

.card,
[data-card] {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Cards in grid resize proportionally */
[data-card-grid] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  [data-card-grid] {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

@media (min-width: 1024px) {
  [data-card-grid] {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

/* ========================================
   MOBILE SPACING & PADDING
   ======================================== */

/* Ensure adequate touch targets on mobile */
button,
a[role="button"],
[role="button"] {
  min-height: 2.5rem;
  min-width: 2.5rem;
  padding: 0.75rem 1rem;
}

/* Reduce excessive spacing on small screens */
@media (max-width: 640px) {
  .gap-12,
  .gap-16 {
    gap: 1rem;
  }

  .p-8,
  .px-8,
  .py-8 {
    padding: 1rem;
  }

  .mb-24,
  .mb-20 {
    margin-bottom: 1.5rem;
  }

  .py-32,
  .py-24 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

/* ========================================
   HERO SECTION RESPONSIVE
   ======================================== */

[data-hero],
.hero {
  display: flex;
  flex-direction: column;
  min-height: auto;
  gap: 1.5rem;
}

@media (max-width: 767px) {
  [data-hero],
  .hero {
    min-height: 60vh;
  }
}

@media (min-width: 768px) {
  [data-hero],
  .hero {
    flex-direction: row;
    min-height: 70vh;
  }
}

/* ========================================
   TEXT HIERARCHY PRESERVED
   ======================================== */

h1 {
  font-size: clamp(1.5rem, 5vw, 3.75rem);
  line-height: 1.1;
}

h2 {
  font-size: clamp(1.25rem, 4vw, 2.25rem);
}

h3 {
  font-size: clamp(1rem, 3vw, 1.875rem);
}

/* ========================================
   ICON & BUTTON SIZING
   ======================================== */

.icon-small {
  width: 1.25rem;
  height: 1.25rem;
}

.icon-medium {
  width: 1.5rem;
  height: 1.5rem;
}

.icon-large {
  width: 2rem;
  height: 2rem;
}

@media (max-width: 640px) {
  .icon-small,
  .icon-medium {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* ========================================
   CONTENT WIDTH GUIDELINES
   ======================================== */

.content-max-width {
  max-width: 90vw;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .content-max-width {
    max-width: 80vw;
  }
}

@media (min-width: 1024px) {
  .content-max-width {
    max-width: 1200px;
  }
}

/* ========================================
   NO HORIZONTAL SCROLL
   ======================================== */

* {
  max-width: 100%;
}

body {
  width: 100%;
}