/* HK Art School — unified mobile + visual layer (gold standard: art-class-listing / art-career-mentoring) */

:root {
  --mal-bg: #f7f5f0;
  --mal-ink: #1f2a2d;
  --mal-muted: #5c6668;
  --mal-gold: #b99a5e;
  --mal-gold-soft: #d8c08b;
  --mal-turquoise: #4fa7a0;
  --mal-turquoise-deep: #2f7f7a;
  --mal-line: rgba(31, 42, 45, 0.08);
  --mal-shadow: 0 16px 38px rgba(46, 58, 61, 0.08);
  --mal-radius: 22px;
  --mal-content-max: 1170px;
}

/* —— All pages: iPhone / small-screen baseline —— */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: transparent;
}

.hl_page-preview--content img,
.hl_page-preview--content video,
.hl_page-preview--content iframe,
.hl_page-preview--content embed,
.hl_page-preview--content object,
.hl_page-preview--content .wistia_embed,
.hl_page-preview--content .wistia_responsive_wrapper {
  max-width: 100% !important;
  height: auto;
}

.hl_page-preview--content img[style*="width"] {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
}

.hl_page-preview--content table {
  border-collapse: collapse;
  width: 100%;
}

.hl_page-preview--content .mal-table-scroll,
.hl_page-preview--content .table-wrap {
  -webkit-overflow-scrolling: touch;
  margin: 0.6rem 0;
  overflow-x: auto;
  width: 100%;
}

/* Blog grid: single column on phone (GHL default is 33% columns) */
@media (max-width: 768px) {
  .hl_page-preview--content .blog-items.standard .blog-column,
  .hl_page-preview--content .blog-row .blog-column {
    float: none !important;
    width: 100% !important;
  }

  .hl_page-preview--content .blog-item {
    padding: 0.75rem !important;
  }
}

/* —— GHL-native pages: match listing / mentoring shell —— */
body.mal-site-unified {
  color: var(--mal-ink);
  font-family: "Helvetica Neue", Helvetica, Arial, "PingFang TC", "Microsoft JhengHei", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(216, 192, 139, 0.16), transparent 30%),
    radial-gradient(circle at 85% 20%, rgba(79, 167, 160, 0.14), transparent 26%),
    radial-gradient(circle at 80% 80%, rgba(216, 167, 177, 0.1), transparent 24%),
    linear-gradient(180deg, #faf8f3 0%, #f2f1eb 100%);
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

body.mal-site-unified .hl_page-preview--content {
  position: relative;
  z-index: 1;
}

body.mal-site-unified .hl_page-preview--content > .inner,
body.mal-site-unified .hl_page-preview--content .c-section > .inner,
body.mal-site-unified .hl_page-preview--content [id^="section-"] > .inner {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--mal-content-max);
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  width: 100%;
}

body.mal-site-unified .hl_page-preview--content h1,
body.mal-site-unified .hl_page-preview--content h2,
body.mal-site-unified .hl_page-preview--content h3 {
  color: var(--mal-ink);
  line-height: 1.25;
  word-wrap: break-word;
}

body.mal-site-unified .hl_page-preview--content h1 {
  font-size: clamp(1.35rem, 5vw, 2rem);
}

body.mal-site-unified .hl_page-preview--content h2 {
  font-size: clamp(1.15rem, 4vw, 1.5rem);
}

body.mal-site-unified .hl_page-preview--content h3 {
  font-size: clamp(1rem, 3.5vw, 1.2rem);
}

body.mal-site-unified .hl_page-preview--content p,
body.mal-site-unified .hl_page-preview--content li {
  color: var(--mal-muted);
  font-size: clamp(0.95rem, 2.8vw, 1.05rem);
  line-height: 1.65;
}

body.mal-site-unified .hl_page-preview--content a:not(.mal-wa-float):not(.nav-menu-item a) {
  color: var(--mal-turquoise-deep);
}

body.mal-site-unified .hl_page-preview--content .c-button button,
body.mal-site-unified .hl_page-preview--content .c-button a,
body.mal-site-unified .hl_page-preview--content .button-element button {
  border-radius: 980px !important;
  font-size: clamp(0.9rem, 2.5vw, 1rem) !important;
  min-height: 44px;
  padding: 12px 22px !important;
}

/* Nav section stays full width */
body.mal-site-unified #section-HKTHsZRbM > .inner {
  max-width: 100% !important;
  padding-left: 0;
  padding-right: 0;
}

/* Footer band */
body.mal-site-unified #section-xnBGWp74c {
  border-top: 1px solid var(--mal-line);
  margin-top: 1.5rem;
}

@media (max-width: 768px) {
  body.mal-site-unified .hl_page-preview--content .c-row .inner,
  body.mal-site-unified .hl_page-preview--content .c-column .vertical.inner {
    padding-left: max(8px, env(safe-area-inset-left)) !important;
    padding-right: max(8px, env(safe-area-inset-right)) !important;
  }

  body.mal-site-unified .hl_page-preview--content .branding .logo img {
    height: auto !important;
    max-width: min(160px, 42vw) !important;
    width: auto !important;
  }
}

/* Custom landing pages: only light touch (avoid overriding inline theme) */
body.mal-site-custom .hl_page-preview--content .custom-code-container,
body.mal-site-custom .hl_page-preview--content .mal-aa-page {
  max-width: 100%;
  width: 100% !important;
}

/* Hide GHL blog blocks accidentally crawled below listing-style custom code */
body.mal-site-custom .hl_page-preview--content .section-tCoqsaoNhT,
body.mal-site-custom .hl_page-preview--content .section-fxcb1FmTSt,
body.mal-site-custom .hl_page-preview--content .section-gqd4IsHU2r,
body.mal-site-custom .hl_page-preview--content .section-n9WIHbPNlg,
body.mal-site-custom .hl_page-preview--content .section-mk9N3E4tWT,
body.mal-site-custom .hl_page-preview--content .section-4tbzjXL3S,
body.mal-site-custom .hl_page-preview--content .section-R-iszz9iVl {
  display: none !important;
}

@media (max-width: 480px) {
  body.mal-site-custom {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0));
  }
}