/* =====================================================
   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-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;
  align-items: stretch; /* Equal height: both columns fill the tallest card */
}

/* Card 1 and Cards 2&3 container: full width + fill grid cell height for equal-height desktop row */
.s-180, .s-204 {
  width: 100%;
  max-width: 100%;
  height: 100%;
}

/* 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(55px, 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);
}


/* =====================================================
   ≤1400px — App card image overflow fix
   ===================================================== */
@media (max-width: 1400px) {
  /* Fix 1: .s-360 has inline-size:365.862px fixed in components.css.
     Below 1400px grid columns narrow below that value, causing images to overflow cards. */
  .s-349 {
    min-width: 0;
    overflow: hidden;
  }
  .s-360, .s-392, .s-406, .s-417, .s-429, .s-440  {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  .s-360, .s-392, .s-406, .s-417, .s-429, .s-440 img {
    width: 100% !important;
    max-width: 100%;
    display: block;
  }
}

/* =====================================================
   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: hide image panel at tablet, expand text to full width */
  .s-40 {
    overflow: visible;
  }
  .s-41 {
    display: none !important;
  }
  .s-121 {
    width: 100%;
    padding-top: 48px;
  }

  /* Stories: stack feature above cards */
  .s-179 {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* Card 1 "Dating in South Korea": fix fixed 789px width → full width */
  .s-180 {
    width: 100%;
    max-width: 100%;
  }
  /* Cards 2&3 container: override fixed 526px grid → flex column */
  .s-204 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    height: auto;
  }
  /* Each card: full width when stacked */
  .s-205 {
    width: 100%;
    height: auto;
  }
  /* 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;
  }
}

/* ≤1025px: All 3 cards stacked — 1 per row, full width */
@media (max-width: 1025px) {
  .s-179 {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* Fix 2: App cards 3 → 2 columns at 1025px (≤1024px block handles 1024 and below) */
  .s-348 {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  /* Fix 1: Card 1 whitespace — clear the fixed ~789px height from components.css */
  .s-180 {
    width: 100%;
    max-width: 100%;
    height: fit-content;
  }
  /* Fix gap: .s-181 has block-size:470px from components.css — too tall when stacked.
     Capping it stops .s-180 from pushing .s-204 excessively far down. */
  .s-181 {
    height: 300px;
  }
  /* Cards 2&3 container: flex column, each card stacked */
  .s-204 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    height: auto;
  }
  /* Fix 2: Row layout — image left, text right, matching desktop card structure */
  .s-205 {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
  }
  /* Fix 2: Portrait image containers — 170×348 ratio matches desktop sidebar dimensions */
  .s-206 {
    position: relative;
    flex-shrink: 0;
    width: 170px;
    height: 348px;
    overflow: hidden;
    border-radius: 10px;
  }
  .s-225 {
    position: relative;
    flex-shrink: 0;
    width: 170px;
    height: 348px;
    overflow: hidden;
    border-radius: 10px;
  }
  /* Card text: auto height, safe wrapping */
  .s-215 {
    flex: 1;
    min-width: 0;
    height: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .s-217, .s-218, .s-235 {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

@media (max-width: 1200px) {
  /* Kéo .s-154 ra khỏi position:absolute để luôn nằm trong #home */
  .s-154 {
    position: static !important;
    display: block;
    width: 100%;
    padding: 12px clamp(16px, 4vw, 56px) 20px;
    overflow: hidden;
    bottom: auto !important;
    left: auto !important;
  }
  .s-155 {
    position: static !important;
    display: block;
    width: 100%;
    letter-spacing: clamp(2px, 0.4vw, 5.6px);
    white-space: nowrap;
    overflow: hidden;
    font-size: clamp(11px, 1vw, 14px);
  }
}


/* =====================================================
   === MOBILE OVERRIDES START ===
   Scope: max-width only. Zero impact on ≥769px desktop.
   ===================================================== */

/* --------------------------------------------------
   768px — Tablet / large mobile
   What was broken:
   - Hero right panel overlapping text content
   - Feature article image collapsed (absolute-image pattern with no height)
   - Sidebar items missing flex layout
   - Blog carousel viewport incorrectly set as CSS grid
   - Blog card images collapsed (same absolute-image issue)
   - App button row overflowing (fixed 365px width)
   - App card image using inline height:245px (too tall)
   - Multi-column sections not stacking
   - Footer 5-col overflowing
   -------------------------------------------------- */
@media (max-width: 768px) {

  /* Overflow prevention — use clip NOT hidden:
     overflow-x:hidden creates a scroll container which breaks position:sticky on the header.
     overflow-x:clip blocks horizontal scroll without creating a new scroll container. */
  html, body { overflow-x: clip; }

  /* ---- 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;
  }
  .s-12 { display: none; }

  /* ---- Hero ---- */
  .s-39 { padding: 24px 16px; }
  /* Hero inner container: block layout */
  .s-40 { height: auto; overflow: hidden; display: block; border-radius: 16px; }
  /* Image panel: hidden on mobile (already hidden via tablet rule) */
  .s-41 { display: none !important; }
  /* Hero text content: full width, safe text wrapping */
  .s-121 {
    width: 100%;
    position: static;
    height: auto;
    padding: 24px 16px 20px;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  /* FIX 1: "4,800+ stories" subtitle tag — prevent horizontal overflow */
  .s-122 {
    overflow: hidden;
    max-width: 100%;
  }
  .s-124 {
    max-width: 100%;
    height: auto;
    display: block;
  }
  .s-125 {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    display: block;
    max-width: 100%;
  }
  /* FIX 2: Hero h1 — improve line-height spacing between "Life & Work / in Korea, / made simple." */
  .s-126 {
    line-height: 1.15;
    margin-bottom: 12px;
  }
  /* Hero paragraph: natural wrapping, no overflow */
  .s-129, .s-130 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    white-space: normal;
  }
  /* FIX 4: "U·S·E·F·U·L·A·P·P" — pull out of absolute positioning, scale letter-spacing to fit */
  .s-154 {
    position: static !important;
    display: block;
    width: 100%;
    padding: 8px 16px 16px;
    overflow: hidden;
  }
  .s-155 {
    position: static !important;
    display: block;
    width: 100%;
    letter-spacing: 3px;
    white-space: nowrap;
    overflow: hidden;
    font-size: 12px;
  }

  /* Hero typography scale */
  .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 ---- */
  .s-156 { padding: 40px 16px 24px; }
  .s-157 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    gap: 8px;
  }
  .s-167 { height: auto; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .s-179 { grid-template-columns: 1fr; gap: 16px; }

  /* Feature article image — absolute-image pattern needs explicit height */
  .s-181 {
    position: relative;
    height: 220px;
    overflow: hidden;
    border-radius: 14px;
    flex-shrink: 0;
  }

  /* Feature article text */
  .s-187, .s-188, .s-189, .s-190, .s-192, .s-193, .s-194 {
    width: 100%;
    height: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Cards 2&3 container: ensure flex column stacking below 768px */
  .s-204 {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    height: auto;
  }
  /* Scale portrait image down for 768px — keep row layout, maintain 1:2 ratio */
  .s-206 { width: 130px; height: 260px; }
  .s-225 { width: 130px; height: 260px; }
  /* Sidebar article list */
  .s-200, .s-201 { display: flex; flex-direction: column; gap: 12px; }
  /* Sidebar text column */
  .s-215 {
    flex: 1;
    min-width: 0;
    height: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  /* Card text elements: safe wrapping */
  .s-217, .s-218, .s-235 {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Blog carousel viewport — override grid; used as overflow:hidden container by carousel JS */
  .s-241 { display: block; overflow: hidden; }
  /* Blog card */
  .s-242 { height: auto; display: flex; flex-direction: column; gap: 12px; }
  /* Blog card images — absolute-image pattern */
  .s-243, .s-272, .s-284, .s-295, .s-307, .s-320 {
    position: relative;
    height: 150px;
    overflow: hidden;
    border-radius: 12px;
  }
  /* Blog card text */
  .s-248 { width: 100%; height: auto; word-wrap: break-word; overflow-wrap: break-word; }

  /* ---- Apps ---- */
  .s-329 { padding: 40px 16px; }
  .s-330 { padding: 20px 16px 24px; overflow: hidden; border-radius: 20px; }
  .s-333 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    gap: 12px;
  }
  .s-334 { flex: 1; min-width: 0; height: auto; width: 100%; }
  .s-337, .s-338 { font-size: clamp(20px, 6vw, 32px); word-wrap: break-word; overflow-wrap: break-word; }
  .s-339 { align-self: flex-start; }

  /* App card image — justified !important: overrides inline style="height:245px" */
  .s-360 img { height: 200px !important; width: 100% !important; object-fit: cover; }
  /* App description */
  .s-375 { font-size: 13px; word-wrap: break-word; overflow-wrap: break-word; }

  /* App button row — kill fixed 365px computed width */
  .s-376 { display: flex; width: 100%; height: auto; gap: 10px; flex-wrap: nowrap; }
  /* Download button — flex-grow kills fixed 278px width */
  .s-377 { flex: 1; min-width: 0; width: auto; min-height: 44px; }
  /* Review button */
  .s-383 { flex-shrink: 0; white-space: nowrap; min-height: 44px; }
  /* Nav buttons: tap-friendly */
  .s-340, .s-345 { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }

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

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

  /* ---- Community ---- */
  .s-626 { padding: 32px 16px; }
  .s-627 { grid-template-columns: 1fr; padding: 16px; gap: 20px; }
  .s-629, .s-630, .s-632, .s-634, .s-636 { word-wrap: break-word; overflow-wrap: break-word; }

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


/* --------------------------------------------------
   630px — Apps heading text wrap
   -------------------------------------------------- */
@media (max-width: 630px) {
  /* .s-337 has inline-size:740px fixed in components.css — wider than viewport at ≤630px.
     Force it to shrink to fit so the heading text wraps naturally. */
  .s-337 {
    width: 100%;
    max-width: 100%;
    white-space: normal;
  }
  .s-338 {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    display: block;
  }
}

/* --------------------------------------------------
   550px — Card 1 overflow fix
   -------------------------------------------------- */
@media (max-width: 550px) {
  /* Card 1 "Dating in South Korea": 100% width, prevent horizontal scroll */
  .s-180 {
    width: 100% !important;
    max-width: 100%;
    height: fit-content;
  }
  .s-215 {
    padding: 10px 0px 0px 10px;
    width: 100%;
  }
  .s-217 {
    width: 100%;
  }
  .s-218 {
    width: 100%;
  }
  /* Switch to column layout — too narrow for row+portrait image at ≤550px */
  .s-205 {
    flex-direction: column;
    gap: 0;
  }
  /* Full-width image in column mode */
  .s-206 {
    width: 100%;
    height: 200px;
    border-radius: 10px 10px 0 0;
  }
  .s-225 {
    width: 100%;
    height: 200px;
    border-radius: 10px 10px 0 0;
  }
}

/* --------------------------------------------------
   480px — Small mobile
   What was broken:
   - Hero heading still too large
   - Sidebar thumbnail too wide to be useful
   - App image still large, buttons not stacked
   - Footer 2-col too tight
   -------------------------------------------------- */
@media (max-width: 480px) {

  .s-122 {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
  }
  /* ---- Navbar ---- */
  .s-4 { padding-left: 12px; padding-right: 12px; }

  /* ---- Hero ---- */
  .s-121 { padding: 20px 12px 24px; }

  /* ---- Stories ---- */
  .s-181 { height: 180px; }
  .s-243, .s-272, .s-284, .s-295, .s-307, .s-320 { height: 130px; }

  /* Cards 2&3: reduce column image height at 480px */
  .s-206 { height: 175px; }
  .s-225 { width: 100%; height: 175px; }

  /* ---- Apps ---- */
  .s-329 { padding: 32px 12px; }
  .s-330 { padding: 16px 12px 20px; border-radius: 16px; }
  .s-337, .s-338 { font-size: clamp(18px, 5.5vw, 28px); }
  .s-360 img { height: 180px !important; }

  /* Buttons: stack vertically */
  .s-376 { flex-wrap: wrap; gap: 8px; }
  .s-377 { flex-basis: 100%; width: 100%; justify-content: center; display: flex; align-items: center; }
  .s-383 { flex-basis: 100%; width: 100%; justify-content: center; display: flex; align-items: center; }

  /* ---- Footer ---- */
  .s-659 { grid-template-columns: 1fr; }
}


/* --------------------------------------------------
   344px — Smallest supported mobile
   What was broken:
   - Outer section padding consuming too much screen space
   - App card 22px padding eating into narrow card width
   - Headings still overflowing
   - Buttons not full-width
   -------------------------------------------------- */
@media (max-width: 344px) {

  /* ---- Navbar ---- */
  .s-4 { padding-left: 8px; padding-right: 8px; }

  /* ---- Hero ---- */
  .s-39 { padding: 16px 8px; }
  .s-121 { padding: 16px 10px 20px; }
  .s-192 { font-size: clamp(15px, 4.5vw, 20px); }
  /* USEFULAPP text: tighten further for narrowest screens */
  .s-154 { padding: 8px 10px 12px; }
  .s-155 { letter-spacing: 2px; font-size: 11px; }

  /* ---- Stories ---- */
  .s-156 { padding: 28px 10px 16px; }
  .s-181 { height: 160px; }
  .s-243, .s-272, .s-284, .s-295, .s-307, .s-320 { height: 110px; }

  /* ---- Apps ---- */
  .s-329 { padding: 24px 8px; }
  .s-330 { padding: 12px 10px 14px; border-radius: 14px; }
  .s-336 { font-size: 11px; }
  .s-337, .s-338 { font-size: 16px; line-height: 1.3; }
  .s-340, .s-345 { min-width: 36px; min-height: 36px; }
  /* App card padding — reduce from components.css 22px */
  .s-349 { padding: 12px; }
  .s-360 img { height: 150px !important; }
  .s-375 { font-size: 12px; }
  /* Buttons: always column-stacked at 344px */
  .s-376 { gap: 8px; }
  .s-377, .s-383 {
    width: 100%;
    flex-basis: 100%;
    min-height: 40px;
    justify-content: center;
    display: flex;
    align-items: center;
  }

  /* ---- Community ---- */
  .s-626 { padding: 24px 8px; }
  .s-627 { padding: 10px; }

  /* ---- Footer ---- */
  .s-658 { padding: 28px 10px 16px; }
  .s-659 { grid-template-columns: 1fr; gap: 20px; }

  /* ---- 2-col sections ---- */
  .s-445 { padding: 24px 8px; }
  .s-533 { padding: 24px 8px; }
  .s-534 { padding: 16px 10px; }
}

/* === MOBILE OVERRIDES END === */