/* =====================================================
   RESPONSIVE.CSS — foreignerskorea.html
   Converts fixed-px layout to fluid / responsive.
   Loaded after components.css to override as needed.
   ===================================================== */

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

html, body {
  overflow-x: clip;
  max-width: 100%;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* =====================================================
   BASE FLUID OVERRIDES  (all screen sizes)
   ===================================================== */

/* Page wrappers */
.s-2, .s-3 {
  width: 100%;
  max-width: 100%;
  height: auto;
  /* overflow:clip clips content without creating a scroll container,
     so position:sticky on the header still works */
  overflow: clip;
}

/* ---- NAVBAR (s-4) ---- */
.s-4 {
  width: 100%;
  max-width: 100%;
  padding-left: clamp(16px, 3.3vw, 48px);
  padding-right: clamp(16px, 3.3vw, 48px);
}

/* ---- HERO OUTER (s-39) ---- */
.s-39 {
  width: 100%;
  max-width: 100%;
  height: auto;
  padding-left: clamp(16px, 2.2vw, 32px);
  padding-right: clamp(16px, 2.2vw, 32px);
}

/* Hero inner container */
.s-40 {
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
}

/* Hero decorative right panel — keep proportional */
.s-41 {
  left: auto;
  right: 0;
  width: 52%;
  height: 100%;
}

/* Hero main content (left side) */
.s-121 {
  width: 55%;
  height: auto;
  padding-top: clamp(32px, 6.25vw, 90px);
  padding-left: clamp(24px, 3.9vw, 56px);
  padding-right: clamp(24px, 3.9vw, 56px);
  padding-bottom: clamp(24px, 3.9vw, 56px);
}

/* ---- FULL-WIDTH SECTION WRAPPERS (1440px) ---- */
.s-156, .s-329, .s-445, .s-533, .s-626, .s-658 {
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* ---- INNER CONTENT BLOCKS ---- */
.s-157, .s-167, .s-179, .s-180, .s-241, .s-330,
.s-333, .s-348, .s-534, .s-627, .s-659, .s-687 {
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* ---- STORIES SECTION (s-156) ---- */
.s-156 {
  padding-top: clamp(48px, 6.7vw, 96px);
  padding-left: clamp(16px, 3.3vw, 48px);
  padding-right: clamp(16px, 3.3vw, 48px);
}

/* Stories main grid: feature article | side list */
.s-179 {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 28px;
}

/* Feature article card */
.s-181, .s-182, .s-183 {
  width: 100%;
  height: auto;
}

.s-187, .s-188, .s-192, .s-193, .s-194 {
  width: 100%;
  height: auto;
}

/* Small article card list (4-col → fluid) */
.s-241 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.s-242 {
  width: 100%;
  height: auto;
}

/* ---- APPS SECTION (s-329) ---- */
.s-329 {
  padding-left: clamp(16px, 2.2vw, 32px);
  padding-right: clamp(16px, 2.2vw, 32px);
}
.s-330 {
  width: 100%;
  max-width: 100%;
  height: auto;
  overflow: visible;
  padding-left: clamp(24px, 3.3vw, 48px);
  padding-right: clamp(24px, 3.3vw, 48px);
}
.s-333 {
  width: 100%;
}
/* Apps 3-column grid */
.s-348 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: auto;
  width: 100%;
}
.s-349 {
  width: 100%;
  height: auto;
}
.s-350, .s-360 {
  width: 100%;
}

/* Hide overflow decorative large background numbers */
.s-331, .s-479 {
  display: none;
}

/* ---- 2-COLUMN SECTION (s-445) ---- */
.s-445 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding-left: clamp(16px, 3.3vw, 48px);
  padding-right: clamp(16px, 3.3vw, 48px);
}
.s-446, .s-478 {
  width: 100%;
  height: auto;
}

/* ---- APP DOWNLOAD SECTION (s-533) ---- */
.s-533 {
  padding-left: clamp(16px, 2.2vw, 32px);
  padding-right: clamp(16px, 2.2vw, 32px);
}
.s-534 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: auto;
  overflow: visible;
}
.s-535, .s-536, .s-537 {
  width: 100%;
  height: auto;
}

/* ---- COMMUNITY/TRENDING SECTION (s-626) ---- */
.s-626 {
  padding-left: clamp(16px, 3.3vw, 48px);
  padding-right: clamp(16px, 3.3vw, 48px);
}
.s-627 {
  display: grid;
  grid-template-columns: 6fr 5fr;
  height: auto;
  overflow: visible;
}
.s-628 {
  position: static;
  width: 100%;
  height: auto;
}
.s-629, .s-630, .s-632, .s-634, .s-636 {
  width: 100%;
  height: auto;
}

/* ---- FOOTER (s-658) ---- */
.s-658 {
  padding-left: clamp(16px, 3.3vw, 48px);
  padding-right: clamp(16px, 3.3vw, 48px);
  height: auto;
}
.s-659 {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 36px;
  height: auto;
}
.s-660, .s-661, .s-666, .s-668 {
  width: 100%;
  height: auto;
}
.s-687 {
  flex-wrap: wrap;
  height: auto;
}

/* ---- TYPOGRAPHY: scale down large headings ---- */
.s-126, .s-127, .s-128 {
  font-size: clamp(40px, 6.4vw, 92px);
}
.s-83, .s-95, .s-110 {
  font-size: clamp(28px, 3.9vw, 56px);
}
.s-161, .s-162, .s-184, .s-214, .s-233,
.s-247, .s-264, .s-276, .s-324, .s-537, .s-602 {
  font-size: clamp(28px, 3.9vw, 56px);
}
.s-192 {
  font-size: clamp(22px, 2.6vw, 38px);
}
.s-337, .s-338, .s-632, .s-633 {
  font-size: clamp(28px, 3.6vw, 52px);
}


/* =====================================================
   TABLET  769px – 1024px
   ===================================================== */
@media (max-width: 1024px) {

  /* Navbar */
  .s-4 {
    padding-left: 24px;
    padding-right: 24px;
  }
  .s-12 {
    flex-wrap: wrap;
    width: auto;
    gap: 4px;
  }

  /* Hero: shrink decorative panel */
  .s-40 {
    overflow: visible;
  }
  .s-41 {
    width: 40%;
  }
  .s-121 {
    width: 62%;
    padding-top: 48px;
  }

  /* Stories: stack feature above cards */
  .s-179 {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* Small article cards: 2 columns at tablet */
  .s-241 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Apps: 2 columns */
  .s-348 {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* 2-column sections: stack */
  .s-445 {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .s-534 {
    grid-template-columns: 1fr;
    overflow: visible;
  }
  .s-627 {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  /* Footer: 3 columns */
  .s-659 {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}


/* =====================================================
   MOBILE  ≤ 768px
   ===================================================== */
@media (max-width: 768px) {

  /* Navbar */
  .s-4 {
    padding-left: 16px;
    padding-right: 16px;
    height: auto;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  /* Hide horizontal nav links on mobile */
  .s-12 {
    display: none;
  }

  /* Hero section */
  .s-39 {
    padding: 24px 16px;
  }
  .s-40 {
    height: auto;
    overflow: visible;
    display: block;
  }
  /* Hide decorative right panel on mobile */
  .s-41 {
    display: none;
  }
  .s-121 {
    width: 100%;
    position: static;
    height: auto;
    padding: 24px 16px;
  }

  /* Larger headings scale */
  .s-126, .s-127, .s-128 {
    font-size: clamp(32px, 9vw, 52px);
  }
  .s-83, .s-95, .s-110,
  .s-161, .s-162, .s-184, .s-214, .s-233,
  .s-247, .s-264, .s-276, .s-324, .s-537, .s-602 {
    font-size: clamp(22px, 6.5vw, 36px);
  }
  .s-192 {
    font-size: clamp(18px, 5vw, 26px);
  }
  .s-337, .s-338, .s-632, .s-633 {
    font-size: clamp(22px, 6.5vw, 32px);
  }

  /* Stories section */
  .s-156 {
    padding: 40px 16px 24px;
  }
  .s-157 {
    flex-direction: column;
    height: auto;
    gap: 16px;
  }
  .s-167 {
    height: auto;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }
  .s-179 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .s-181 {
    height: auto;
    overflow: hidden;
  }
  .s-241 {
    grid-template-columns: 1fr;
  }

  /* Apps section */
  .s-329 {
    padding: 40px 16px;
  }
  .s-330 {
    padding: 24px 16px;
    overflow: visible;
  }
  .s-333 {
    flex-direction: column;
    height: auto;
    gap: 16px;
  }
  .s-348 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* 2-column section */
  .s-445 {
    padding: 32px 16px;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .s-446, .s-478 {
    height: auto;
  }

  /* App download section */
  .s-533 {
    padding: 32px 16px;
  }
  .s-534 {
    grid-template-columns: 1fr;
    overflow: visible;
    padding: 24px 16px;
  }
  .s-535 {
    height: auto;
    padding-bottom: 24px;
  }

  /* Community/trending section */
  .s-626 {
    padding: 32px 16px;
  }
  .s-627 {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 20px;
  }

  /* Footer */
  .s-658 {
    padding: 40px 16px 24px;
  }
  .s-659 {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .s-687 {
    flex-direction: column;
    height: auto;
    gap: 8px;
    align-items: flex-start;
  }
}


/* =====================================================
   EXTRA SMALL  ≤ 480px
   ===================================================== */
@media (max-width: 480px) {
  .s-4 {
    padding-left: 12px;
    padding-right: 12px;
  }
  .s-659 {
    grid-template-columns: 1fr;
  }
  .s-241 {
    grid-template-columns: 1fr;
  }
  .s-348 {
    grid-template-columns: 1fr;
  }
}