/* ============================================================
   IIOE Hong Kong — Design Tokens & Base Styles
   Mirrors the iioe.hk visual system:
   - Primary blue #0762CB / hover #0084CF
   - Accent gold #C49A67
   - Clean white bg, light gray surfaces #F6F7F8
   - Hairline borders #E7ECF2, 8px radii
   - Type: PingFang SC + Helvetica Neue
   ============================================================ */

:root {
  /* Palette — light mode */
  --ink:        #333333;     /* primary text */
  --ink-2:      #555a66;     /* secondary text */
  --ink-3:      #909399;     /* tertiary / meta */
  --rule:       #E7ECF2;     /* hairline dividers */
  --rule-2:     #eef1f5;
  --paper:      #ffffff;     /* page bg */
  --paper-2:    #F6F7F8;     /* surface for cards */
  --paper-3:    #FAFBFC;     /* lightest surface */
  --card:       #ffffff;
  --oxblood:    #0762CB;     /* primary blue (compat alias) */
  --oxblood-2:  #0084CF;     /* hover / active */
  --oxblood-3:  #4ab5e0;
  --un-blue:    #0762CB;
  --un-blue-2:  #0084CF;
  --un-blue-3:  #004090;     /* deep blue for banners */
  --hk-red:     #8e2b2b;
  --gold:       #C49A67;     /* accent gold */
  --gold-2:     #a8893f;
  --teal:       #1f4d4a;
  --muted:      #909399;
  --footer-bg:  #1D2236;
  --footer-bg-2:#292E40;
  --bg:         var(--paper);
  --text:       var(--ink);

  /* Type — clean sans-led system per iioe.hk */
  --serif-en:   "Cormorant Garamond", "Noto Serif HK", "Noto Serif TC", serif;
  --serif-cn:   "Noto Serif HK", "Noto Serif TC", "Source Han Serif TC", serif;
  --sans:       "Helvetica Neue", Helvetica, "PingFang SC", "PingFang HK", "PingFang TC",
                "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  --mono:       "JetBrains Mono", "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  /* Rhythm */
  --maxw: 1200px;
  --gutter: 24px;
  --rule-w: 1px;
  --r: 8px;       /* card radius */
  --nav-h: 72px;
}

.dark {
  --ink:        #f4f4f6;
  --ink-2:      #c8ccd6;
  --ink-3:      #8a8f9c;
  --rule:       #2a2f3a;
  --rule-2:     #1f2330;
  --paper:      #11141b;
  --paper-2:    #1a1e29;
  --paper-3:    #0c0e15;
  --card:       #1a1e29;
  --oxblood:    #4ab5e0;
  --oxblood-2:  #80c8e8;
  --oxblood-3:  #0077a8;
  --un-blue:    #4ab5e0;
  --un-blue-2:  #80c8e8;
  --un-blue-3:  #0a1b3a;
  --hk-red:     #d97a7a;
  --gold:       #d9b870;
  --gold-2:     #C49A67;
  --muted:      #8a8f9c;
  --footer-bg:  #0a0d15;
  --footer-bg-2:#15192a;
  --bg:         var(--paper);
  --text:       var(--ink);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .35s ease, color .35s ease;
}
h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* Container — 1200px wide */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.rule { height: 1px; background: var(--rule); width: 100%; }
.rule-thick { height: 2px; background: var(--ink); width: 100%; }

.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.num-marker {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--oxblood);
  letter-spacing: 0.04em;
}
.serif { font-family: var(--serif-en); }
.serif-cn { font-family: var(--serif-cn); }
.mono { font-family: var(--mono); }

/* Section header — iioe.hk pattern (title left, "View More" pill right) */
.section-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px;
}
.section-head h2 {
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
  line-height: 40px;
}
.section-head .view-more {
  height: 40px;
  padding: 0 22px;
  background: var(--oxblood-2);
  color: #fff;
  border: none;
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.section-head .view-more:hover {
  background: var(--oxblood);
  transform: translateY(-1px);
}

/* Buttons — iioe.hk style */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 22px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all .2s ease;
  font-family: inherit;
}
.btn:hover {
  background: var(--paper-2);
  border-color: var(--ink-3);
}
.btn.primary {
  background: var(--oxblood-2);
  border-color: var(--oxblood-2);
  color: #fff;
}
.btn.primary:hover {
  background: var(--oxblood);
  border-color: var(--oxblood);
  color: #fff;
}
.btn.ghost {
  background: transparent;
  border: 1px solid var(--oxblood-2);
  color: var(--oxblood-2);
}
.btn.ghost:hover {
  background: var(--oxblood-2);
  color: #fff;
}
.btn.gold {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}
.btn.gold:hover {
  background: var(--gold-2);
  border-color: var(--gold-2);
}
.btn.small {
  padding: 7px 16px;
  font-size: 13px;
}
.btn.big {
  padding: 14px 30px;
  font-size: 15px;
}
.btn .arrow {
  display: inline-block;
  transition: transform .2s ease;
}
.btn:hover .arrow {
  transform: translateX(3px);
}

/* Chip / pill */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 4px 12px;
  border-radius: 100px;
  letter-spacing: 0.02em;
}
.chip.blue {
  color: var(--oxblood);
  background: rgba(7, 98, 203, 0.08);
  border-color: rgba(7, 98, 203, 0.2);
}
.chip.gold {
  color: var(--gold);
  background: rgba(196, 154, 103, 0.1);
  border-color: rgba(196, 154, 103, 0.3);
}

/* Card — iioe.hk pattern (white bg, hairline border, 8px radius, subtle hover) */
.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
  transition: box-shadow .3s ease, transform .3s ease;
}
.card.hover:hover,
.card-hover:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.card.surface {
  background: var(--paper-2);
  border: none;
}

/* Image placeholder — for designs without real imagery */
.placeholder {
  background: linear-gradient(135deg, var(--paper-2) 0%, var(--paper-3) 100%);
  border: 1px dashed var(--rule);
  color: var(--ink-3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 16px;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.placeholder::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(
    45deg, transparent 0, transparent 14px,
    rgba(0,0,0,0.02) 14px, rgba(0,0,0,0.02) 15px
  );
  pointer-events: none;
}
.ar-16x9 { aspect-ratio: 16 / 9; }
.ar-4x3 { aspect-ratio: 4 / 3; }
.ar-1x1 { aspect-ratio: 1 / 1; }
.ar-3x4 { aspect-ratio: 3 / 4; }

/* Form fields */
.label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.input, .select, .textarea {
  width: 100%;
  padding: 11px 14px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  font-size: 14px;
  color: var(--ink);
  font-family: inherit;
  outline: none;
  transition: border-color .2s ease;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--oxblood-2);
}

/* Tabs */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 30px;
}
.tabs button {
  padding: 14px 22px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ink-3);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s ease;
  margin-bottom: -1px;
}
.tabs button:hover {
  color: var(--oxblood-2);
}
.tabs button.active {
  color: var(--oxblood-2);
  border-bottom-color: var(--oxblood-2);
}

/* Stamp — small framed label */
.stamp {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px;
  border: 1px solid var(--rule);
  border-radius: 100px;
  background: var(--paper-2);
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
  font-weight: 500;
}
.stamp .dot {
  display: inline-block; width: 6px; height: 6px;
  background: var(--oxblood); border-radius: 100px;
}

/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up {
  animation: fadeUp .5s ease both;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Hide iOS Safari native video play button overlay (looks broken on autoplay failure) */
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0 !important;
  pointer-events: none !important;
}
video::-webkit-media-controls {
  display: none !important;
}
video::-webkit-media-controls-panel {
  display: none !important;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* ============================================================
   H5 / Mobile responsive overrides
   Breakpoint: 768px and below = mobile
   ============================================================ */

@media (max-width: 768px) {
  :root {
    --gutter: 16px;
    --nav-h: 60px;
  }

  body { font-size: 14px; }

  /* Container */
  .wrap { padding: 0 var(--gutter); }

  /* Section header — stack title and View More */
  .section-head {
    flex-direction: row;
    align-items: center;
    margin-bottom: 18px;
    gap: 12px;
  }
  .section-head h2 {
    font-size: 22px;
    line-height: 1.35;
  }
  .section-head .view-more {
    height: 32px;
    padding: 0 14px;
    font-size: 12px;
    flex-shrink: 0;
  }

  /* Buttons — smaller on mobile */
  .btn {
    padding: 10px 18px;
    font-size: 13.5px;
  }
  .btn.big { padding: 12px 22px; font-size: 14.5px; }
  .btn.small { padding: 7px 14px; font-size: 12.5px; }

  /* Eyebrow / utility text */
  .eyebrow { font-size: 11px; }

  /* Tabs — horizontal scroll if many */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button {
    padding: 12px 14px;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Form controls — bigger tap targets */
  .input, .select, .textarea {
    padding: 12px 14px;
    font-size: 15px;
  }

  /* Card */
  .card { border-radius: 6px; }

  /* ====================================================
     Force common multi-column inline grids to single col
     ==================================================== */
  /* Generic responsive grid override — anything with style
     containing "grid-template-columns: repeat(2/3/4..." but
     inline styles can't be media-queried, so we add a class
     instead. Use `.m-stack` on the grid wrapper. */
  .m-stack { grid-template-columns: 1fr !important; gap: 16px !important; }
  .m-stack-2 { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .m-hide { display: none !important; }
  .m-block { display: block !important; }
  .m-flex { display: flex !important; }
  .m-text-sm { font-size: 14px !important; }
  .m-fullw { width: 100% !important; max-width: 100% !important; }
  .m-pad-sm { padding: 16px !important; }

  /* ============================================
     Home page mobile overrides
     ============================================ */
  /* Hero — shrink and adjust padding */
  .hero-carousel-frame {
    height: 360px !important;
    border-radius: 0 !important;
  }
  .hero-content-overlay {
    padding: 0 24px !important;
  }
  .hero-content-overlay h1 {
    font-size: 26px !important;
    line-height: 1.25 !important;
  }
  .hero-content-overlay p {
    font-size: 13.5px !important;
    margin-top: 14px !important;
  }
  .hero-content-overlay .hero-buttons {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-top: 22px !important;
    width: 100%;
    max-width: 280px;
  }
  .hero-content-overlay .hero-buttons button {
    width: 100%;
    justify-content: center;
    padding: 11px 18px !important;
    font-size: 14px !important;
  }
  .hero-arrow {
    width: 32px !important; height: 32px !important;
    top: auto !important;
    bottom: 14px !important;
    transform: none !important;
    background: rgba(0,0,0,0.5) !important;
  }
  .hero-arrow[aria-label="Previous slide"] {
    left: 14px !important;
  }
  .hero-arrow[aria-label="Next slide"] {
    right: 14px !important;
  }
  .hero-eyebrow { font-size: 10px !important; padding: 4px 10px !important; }

  /* Micro-cert section — stack image and text */
  .microcert-card {
    grid-template-columns: 1fr !important;
  }
  .microcert-card .microcert-img-cell {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    padding: 12px !important;
    padding-right: 12px !important;
  }
  .microcert-card .microcert-body {
    grid-template-columns: 1fr !important;
    padding: 4px 18px 18px !important;
    gap: 12px !important;
  }
  .microcert-card .microcert-body > div:first-child h3 {
    font-size: 17px !important;
  }
  .microcert-card .microcert-meta {
    border-left: none !important;
    border-top: 1px solid var(--rule);
    padding: 12px 0 0 !important;
    justify-content: flex-start !important;
  }

  /* Blockchain & FinTech grid — 1 col */
  .courses-2col { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Major events — 1 col */
  .events-3col { grid-template-columns: 1fr !important; gap: 16px !important; }
  .events-3col .event-img { height: 180px !important; }

  /* Enterprise banner — single column */
  .enterprise-banner {
    grid-template-columns: 1fr !important;
    padding: 30px 24px !important;
    gap: 20px !important;
  }
  .enterprise-banner h3 { font-size: 22px !important; }

  /* ============================================
     Courses page mobile overrides
     ============================================ */
  .courses-layout {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .courses-grid {
    grid-template-columns: 1fr !important;
  }
  .courses-sidebar {
    position: static !important;
    top: auto !important;
  }

  /* ============================================
     About page mobile overrides
     ============================================ */
  /* Who-we-are: video + intro stack */
  .about-who-we-are { grid-template-columns: 1fr !important; gap: 20px !important; }
  /* Speech card — less padding */
  .speech-card { padding: 22px 18px !important; }
  /* Why HK 4-cols → 1 col */
  .why-hk-grid { grid-template-columns: 1fr !important; }
  .why-hk-grid > div {
    border-left: 1px solid var(--rule) !important;
    border-right: 1px solid var(--rule) !important;
    border-top: 2px solid var(--ink) !important;
    margin-top: -1px;
  }
  /* Timeline 6 cols → 2 cols */
  .timeline-cols { grid-template-columns: repeat(2, 1fr) !important; }
  /* Parent body block: image + text stack */
  .parent-body { grid-template-columns: 1fr !important; padding: 18px !important; }
  .parent-body > div:first-child { width: 100% !important; max-width: 280px; margin: 0 auto; }
  /* Visit us */
  .visit-grid { grid-template-columns: 1fr !important; gap: 22px !important; }

  /* News page timeline — smaller and tighter */
  .news-timeline { padding-left: 18px !important; }
  .news-timeline-images.three-cols-mobile {
    flex-direction: column !important;
  }
  .news-timeline-images.three-cols-mobile > div {
    max-width: 100% !important;
  }

  /* Cart page */
  .cart-layout { grid-template-columns: 1fr !important; gap: 24px !important; }
  .cart-item-row {
    grid-template-columns: 80px 1fr !important;
    gap: 14px !important;
  }
  .cart-item-row > :nth-child(3) {
    grid-column: 1 / -1 !important;
    display: flex !important; justify-content: space-between; align-items: center;
    border-top: 1px solid var(--rule-2); padding-top: 10px; margin-top: 4px;
  }

  /* Solutions page */
  .solutions-form-layout { grid-template-columns: 1fr !important; gap: 24px !important; }
  .solutions-form { grid-template-columns: 1fr !important; }

  /* Blockchain course detail */
  .bc-detail { grid-template-columns: 1fr !important; gap: 28px !important; }
  .bc-detail-other { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .bc-detail-other h4 { font-size: 13px !important; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; padding: 30px 16px !important; }
  .footer-addresses { padding: 0 !important; border-left: none !important; border-right: none !important; }
  .footer-address-cols { grid-template-columns: 1fr !important; gap: 18px !important; }

  /* Generic h1 large headings — clamp tighter */
  h1 { font-size: 32px !important; }
  h2 { font-size: 22px !important; }
  h3 { font-size: 17px !important; }
}

/* Helper class — hide on mobile / show only on mobile */
.mobile-only { display: none; }
@media (max-width: 768px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: block; }
  .mobile-only-flex { display: flex; }
}