/* ==========================================================================
   Yak Express — yak-hero widget (home + page layouts).
   The dark background, .yak-hero__title/__highlight/__lead/__actions and the page
   layout padding come from .yak-hero in theme.css; this file adds only the home
   layout grid, badge, meta row and the tracking mock-up (prototype lines 79–143).
   ========================================================================== */

/* ---------- Home layout: section + two-column grid ---------- */
.yak-hero--home { padding: clamp(56px, 8vw, 112px) 0 clamp(64px, 9vw, 120px); }
.yak-hero__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(40px, 5vw, 72px); align-items: center; }
.yak-hero--no-mockup .yak-hero__grid { grid-template-columns: 1fr; }
.yak-hero__copy { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; min-width: 0; }
.yak-hero__badge { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 10px; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); font-size: 13px; font-weight: 500; color: #E6EDF3; }
.yak-hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--support-teal); box-shadow: 0 0 0 4px rgba(91,199,178,.2); flex-shrink: 0; }
.yak-hero--home .yak-hero__title { font-size: clamp(34px, 5vw, 56px); line-height: 1.14; letter-spacing: -.01em; max-width: none; }
.yak-hero--home .yak-hero__lead { max-width: 540px; }
.yak-hero__meta { display: flex; flex-wrap: wrap; gap: 12px 28px; padding-top: 24px; margin-top: 4px; border-top: 1px solid rgba(255,255,255,.1); width: 100%; }
.yak-hero__meta-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #CFD8E1; }
.yak-hero__meta-item .yak-icon { font-size: 20px; color: var(--brand-yellow); }

/* ---------- Stage: glow + tilted browser mock-up + floating cards ---------- */
.yak-hero__stage { position: relative; padding: 32px 12px 48px; min-width: 0; }
.yak-hero__glow { position: absolute; inset: 8% 4%; background: radial-gradient(closest-side, rgba(247,205,15,.32), rgba(247,205,15,0)); filter: blur(40px); pointer-events: none; }
.yak-mock {
  position: relative; z-index: 1; background: var(--surface-white); border-radius: 20px; overflow: hidden; color: var(--ink-primary);
  box-shadow: 0 48px 96px -24px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
  transform: perspective(1800px) rotateY(-6deg) rotateX(3deg);
}
.yak-mock__bar { height: 40px; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: var(--surface-cloud); border-bottom: 1px solid var(--border-default); }
.yak-mock__dots { display: flex; gap: 6px; }
.yak-mock__dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--border-default); }
.yak-mock__url-wrap { flex: 1; display: flex; justify-content: center; min-width: 0; }
.yak-mock__url { font-size: 12px; color: var(--ink-secondary); padding: 3px 12px; border-radius: 8px; background: var(--surface-white); border: 1px solid var(--border-default); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.yak-mock__caption { font-size: 11px; color: var(--ink-secondary); white-space: nowrap; }
.yak-mock__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

/* Map pane */
.yak-mock__map {
  position: relative; min-height: 290px; background-color: #E9EEF1;
  background-image: linear-gradient(90deg, transparent 0 44px, #FFFFFF 44px 50px, transparent 50px), linear-gradient(0deg, transparent 0 44px, #FFFFFF 44px 50px, transparent 50px);
  background-size: 94px 94px, 94px 94px;
}
.yak-mock__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.yak-mock__route-done { filter: drop-shadow(0 0 6px rgba(247,205,15,.65)); }
.yak-mock__marker { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; font-size: 11px; font-weight: 700; line-height: 1; display: grid; place-items: center; }
.yak-mock__marker--start { left: 13.3%; top: 82.7%; width: 24px; height: 24px; background: var(--ink-primary); color: #FFFFFF; box-shadow: 0 0 0 4px rgba(255,255,255,.9); }
.yak-mock__marker--dest { left: 85%; top: 30.8%; width: 26px; height: 26px; background: var(--gradient-button-primary); color: var(--ink-primary); box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 0 18px rgba(247,205,15,.6); }
.yak-mock__rider { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: 50%; background: var(--surface-white); border: 2px solid var(--brand-yellow); display: grid; place-items: center; box-shadow: var(--shadow-s2); color: var(--ink-primary); }
.yak-mock__rider .yak-icon { font-size: 19px; }
.yak-mock__eta { position: absolute; left: 12px; top: 12px; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.92); box-shadow: var(--shadow-s1); font-size: 12px; font-weight: 600; white-space: nowrap; }
.yak-mock__eta .yak-icon { font-size: 16px; color: var(--status-in-transit); }

/* Info pane */
.yak-mock__info { padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 14px; border-left: 1px solid var(--surface-mist); min-width: 0; }
.yak-mock__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.yak-mock__ref { font-size: 12px; font-weight: 600; color: var(--ink-secondary); }
.yak-mock__status { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 8px; background: var(--chip-in-transit); color: #1F5E94; font-size: 12px; font-weight: 600; }
.yak-mock__status .yak-icon { font-size: 14px; }
.yak-mock__timeline { position: relative; }
.yak-mock__line { position: absolute; left: 6px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #F7CD0F 0%, #F7CD0F var(--yak-done, 38%), #DCE5EA var(--yak-done, 38%), #DCE5EA 100%); }
.yak-mock__step { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 13px; }
.yak-mock__step.is-pending { color: var(--ink-secondary); }
.yak-mock__node { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; position: relative; background: #FFFFFF; border: 2px solid var(--border-default); box-shadow: 0 0 0 3px #FFFFFF; }
.yak-mock__step.is-done .yak-mock__node { background: var(--brand-yellow); border: 0; }
.yak-mock__step.is-active .yak-mock__node { border: 3px solid var(--brand-yellow); box-shadow: 0 0 0 3px #FFFFFF, 0 0 14px rgba(247,205,15,.7); }
.yak-mock__step-label { flex: 1; font-weight: 500; min-width: 0; }
.yak-mock__step.is-active .yak-mock__step-label { font-weight: 700; }
.yak-mock__step-time { font-size: 12px; color: var(--ink-secondary); }
.yak-mock__rider-row { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--surface-cloud); }
.yak-mock__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ink-primary); color: #FFFFFF; display: grid; place-items: center; flex-shrink: 0; }
.yak-mock__avatar .yak-icon { font-size: 18px; }
.yak-mock__rider-text { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.yak-mock__rider-label { font-size: 13px; font-weight: 600; }
.yak-mock__rider-sub { font-size: 11px; color: var(--ink-secondary); }
.yak-mock__call { font-size: 18px; color: var(--ink-secondary); }

/* Floating cards */
.yak-hero__float { position: absolute; z-index: 2; display: flex; align-items: center; }
.yak-hero__float--a { left: 0; bottom: 0; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--surface-white); color: var(--ink-primary); box-shadow: 0 20px 40px -12px rgba(0,0,0,.45); }
.yak-hero__float-icon { width: 34px; height: 34px; border-radius: 10px; background: rgba(47,191,149,.16); display: grid; place-items: center; flex-shrink: 0; }
.yak-hero__float-icon .yak-icon { font-size: 20px; color: var(--status-success); }
.yak-hero__float-text { display: flex; flex-direction: column; gap: 1px; }
.yak-hero__float-title { font-size: 13px; font-weight: 700; }
.yak-hero__float-sub { font-size: 11px; color: var(--ink-secondary); }
.yak-hero__float--b {
  right: 0; top: 4px; gap: 8px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.1);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.18);
  color: #FFFFFF; font-size: 12px; font-weight: 600; box-shadow: 0 16px 32px -12px rgba(0,0,0,.5);
}
.yak-hero__float--b .yak-icon { font-size: 16px; color: var(--brand-yellow); }

/* ---------- Mascot layout (light "v1" hero: warm radial background + liquid-glass card) ---------- */
.yak-hero.yak-hero--mascot {
  color: var(--ink-primary); background-color: #FFFFFF; background-size: auto;
  background-image: radial-gradient(ellipse 70% 80% at 85% 0%, #FFF1A8 0%, rgba(255,241,168,0) 60%), radial-gradient(ellipse 60% 70% at 0% 100%, #FFF9E8 0%, rgba(255,249,232,0) 70%);
  padding: clamp(32px, 6vw, 72px) 0;
}
.yak-hero--mascot .yak-hero__glass {
  background: rgba(255,255,255,.88); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.68); border-radius: 28px; box-shadow: var(--shadow-s3), inset 0 1px 0 rgba(255,255,255,.72);
  padding: clamp(28px, 5vw, 64px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 32px; align-items: center;
}
.yak-hero--no-image .yak-hero__glass { grid-template-columns: 1fr; }
.yak-hero--mascot .yak-hero__copy { gap: 20px; }
.yak-hero--mascot .yak-hero__tagline { font-size: 15px; font-weight: 600; color: var(--ink-secondary); letter-spacing: .01em; }
.yak-hero.yak-hero--mascot .yak-hero__title { color: var(--ink-primary); font-size: clamp(30px, 4.4vw, 48px); line-height: 1.15; letter-spacing: 0; max-width: none; }
.yak-hero--mascot .yak-hero__lead { color: var(--ink-secondary); font-size: 18px; line-height: 1.6; max-width: 560px; }
.yak-hero--mascot .yak-hero__meta { border-top-color: var(--border-default); }
.yak-hero--mascot .yak-hero__meta-item { color: var(--ink-secondary); }
.yak-hero--mascot .yak-hero__mascot { display: flex; justify-content: center; min-width: 0; }
.yak-hero--mascot .yak-hero__mascot img { height: min(400px, 55vh); width: auto; max-width: 100%; object-fit: contain; display: block; }
@media (max-width: 767px) { .yak-hero--mascot .yak-hero__mascot img { height: min(280px, 45vh); } }

/* ---------- Responsive: one column + softer tilt below 1000px ---------- */
@media (max-width: 999px) {
  .yak-hero__grid { grid-template-columns: 1fr; }
  .yak-hero__stage { max-width: 640px; width: 100%; margin: 0 auto; }
  .yak-mock { transform: perspective(1800px) rotateY(-3deg) rotateX(1.5deg); }
}
@media (max-width: 480px) {
  .yak-hero__stage { padding: 28px 4px 44px; }
  .yak-mock__caption { display: none; }
}

/* ---------- Reduced motion: JS already skips, this is the belt to its braces ---------- */
@media (prefers-reduced-motion: reduce) {
  .yak-hero__float, .yak-hero__glow, .yak-mock__marker--dest { animation: none !important; }
  .yak-hero__copy, .yak-hero__stage, .yak-hero__float, .yak-hero__glow { translate: none !important; }
}