/* ============================================================================
   Reusable hardcoded device mockups  (.kd-*)
   ----------------------------------------------------------------------------
   MacBook Air + iPhone 14 Pro with live browser chrome (Safari).
   Two placeholders per device:
     .kd-shot   -> <img> screenshot of the site
     .kd-url    -> <a> live URL (href = full url, text = domain)
   Fully fluid: every device is its own container; all internal sizes use
   `cqw` (1cqw = 1% of the device width). Resize the device -> everything
   scales. No JS required (dynamic clock is progressive enhancement).
   ============================================================================ */

.kd-iphone, .kd-iphone *,
.kd-macbook, .kd-macbook *,
.kd-combo, .kd-combo * { box-sizing: border-box; }

.kd-iphone, .kd-macbook {
  -webkit-font-smoothing: antialiased;
  font-family: -apple-system, "SF Pro Text", "Helvetica Neue", system-ui, Arial, sans-serif;
}

/* shared screenshot placeholder */
.kd-shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* shared url placeholder (clickable, for future use) */
.kd-url {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================================
   iPhone 14 Pro   (frame 435 x 886, screen 390 x 844)
   ============================================================================ */
/* Mount holds the container context so the frame's OWN cqw values
   (rail padding, radius, side buttons) resolve against the phone width,
   not the viewport. An element can't be its own query container. */
.kd-iphone-mount {
  container-type: inline-size;
  width: 100%;
}
.kd-iphone {
  position: relative;
  width: 100%;
  aspect-ratio: 435 / 886;
  border-radius: 13cqw;
  padding: 2.1cqw;                         /* titanium rail */
  /* Deep Purple titanium */
  background: linear-gradient(138deg, #7c7589 0%, #574f61 34%, #433e4c 68%, #322e3a 100%);
  box-shadow:
    inset 0 0 0 .34cqw rgba(208, 198, 224, .55),   /* polished rail highlight */
    inset 0 0 0 1.05cqw rgba(0, 0, 0, .42),
    0 4.5cqw 8cqw -2.2cqw rgba(12, 14, 18, .6);
}
/* side buttons: left = volume up/down, right = side button */
.kd-iphone::before,
.kd-iphone::after { content: ""; position: absolute; border-radius: .7cqw; background: #4f4958; }
.kd-iphone::before { left: -.5cqw; top: 29%; width: .72cqw; height: 7cqw; box-shadow: 0 9.6cqw 0 0 #4f4958; }
.kd-iphone::after  { right: -.5cqw; top: 25%; width: .72cqw; height: 9.5cqw; }
.kd-iphone-bezel {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 2.9cqw;                         /* black bezel */
  background: #050507;
  border-radius: 10.8cqw;
}
.kd-iphone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 8.1cqw;
  background: #000;
}
.kd-iphone .kd-shot { position: absolute; inset: 0; }

/* --- iOS status bar (overlay, top) --- */
.kd-ios-status {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  height: 12.4cqw;
  display: flex;
  align-items: center;
  padding: 0 8.4cqw;
  color: #fff;
  font-size: 4.5cqw;
  font-weight: 600;
  letter-spacing: .02em;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .26), rgba(0, 0, 0, 0));
}
.kd-ios-time { position: relative; top: .4cqw; }
.kd-ios-island {
  position: absolute;
  top: 2.8cqw; left: 50%;
  transform: translateX(-50%);
  width: 28cqw; height: 7.8cqw;
  border-radius: 999px;
  background: #000;
}
.kd-ios-island::after {                     /* camera lens dot */
  content: "";
  position: absolute;
  top: 50%; right: 13%;
  transform: translateY(-50%);
  width: 3cqw; height: 3cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #36488a 0%, #11111c 58%, #050509 100%);
  box-shadow: inset 0 0 0 .22cqw rgba(70, 96, 165, .4);
}
.kd-ios-status-icons {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.5cqw;
}
.kd-ios-status-icons svg { display: block; height: 3.4cqw; width: auto; }
.kd-ios-status-icons .kd-ico-battery { height: 3.6cqw; }

/* --- iOS Safari bottom bar (overlay, bottom) --- */
.kd-ios-safari {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 2.6cqw;
  padding: 3cqw 3.4cqw 1.6cqw;
  /* light frosted bar to match the macOS Safari toolbar (was dark, vanished on dark shots) */
  background: linear-gradient(to top, rgba(230, 230, 232, .92) 60%, rgba(230, 230, 232, 0));
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.kd-ios-urlbar {
  display: flex;
  align-items: center;
  gap: 1.8cqw;
  height: 9.6cqw;
  padding: 0 3.4cqw;
  border-radius: 2.8cqw;
  background: #f4f4f6;                      /* matches .kd-mac-urlbar */
  color: #46464b;
  font-size: 3.9cqw;
  font-weight: 500;
}
.kd-ios-urlbar .kd-aa { display: flex; align-items: baseline; opacity: .82; font-weight: 600; }
.kd-ios-urlbar .kd-aa b { font-size: 4cqw; font-weight: 600; }
.kd-ios-urlbar .kd-aa small { font-size: 2.8cqw; }
.kd-ios-urlbar svg { height: 3.2cqw; width: auto; fill: currentColor; opacity: .85; flex: none; }
.kd-ios-urlbar .kd-url { flex: 1 1 auto; min-width: 0; text-align: center; }
.kd-ios-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.4cqw;
}
.kd-ios-toolbar svg { display: block; height: 5.3cqw; width: auto; fill: #5d5d63; opacity: .95; }
.kd-ios-toolbar .is-dim { opacity: .4; }
.kd-ios-home {
  width: 31cqw; height: 1.1cqw;
  margin: .4cqw auto 0;
  border-radius: 999px;
  background: #3c3c43;                      /* dark indicator, visible on the light bar */
  opacity: .9;
}

/* ============================================================================
   MacBook Air   (16:10 screen, thin bezel, silver deck + hinge)
   ============================================================================ */
.kd-macbook {
  container-type: inline-size;
  position: relative;
  width: 100%;
}
.kd-mac-lid {
  position: relative;
  width: 100%;
  aspect-ratio: 100 / 66;                  /* lid incl. bezel */
  padding: 1.5cqw 1.5cqw 1.5cqw;
  border-radius: 2cqw 2cqw 0 0;
  background: linear-gradient(150deg, #4a4d54 0%, #34363c 50%, #2a2c31 100%);
  box-shadow: inset 0 0 0 .18cqw rgba(255, 255, 255, .12);
}
.kd-mac-cam {
  position: absolute;
  top: .62cqw; left: 50%;
  transform: translateX(-50%);
  width: .62cqw; height: .62cqw;
  border-radius: 50%;
  background: #1b1d22;
  box-shadow: 0 0 0 .12cqw rgba(255, 255, 255, .06);
}
.kd-mac-screen {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  border-radius: .5cqw;
  background: #000;
  display: flex;
  flex-direction: column;
}
/* macOS Safari toolbar (light) */
.kd-mac-safari {
  flex: none;
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  height: 5.4cqw;
  padding: 0 1.8cqw;
  background: linear-gradient(to bottom, #e6e6e8, #d9d9dc);
  border-bottom: .12cqw solid rgba(0, 0, 0, .12);
  color: #5d5d63;
}
.kd-mac-safari svg { display: block; height: 2.3cqw; width: auto; fill: currentColor; flex: none; }
.kd-mac-nav { display: flex; align-items: center; gap: 1.4cqw; }
.kd-mac-nav .is-dim { opacity: .38; }
.kd-mac-urlbar {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1cqw;
  height: 3.5cqw;
  padding: 0 2cqw;
  margin: 0 auto;
  max-width: 58%;
  border-radius: 1cqw;
  background: #f4f4f6;
  box-shadow: inset 0 0 0 .1cqw rgba(0, 0, 0, .06);
  color: #46464b;
  font-size: 2.05cqw;
  font-weight: 500;
}
.kd-mac-urlbar .kd-aa { display: flex; align-items: baseline; opacity: .7; }
.kd-mac-urlbar .kd-aa b { font-size: 2.2cqw; }
.kd-mac-urlbar .kd-aa small { font-size: 1.5cqw; }
.kd-mac-urlbar svg { height: 1.9cqw; opacity: .7; }
.kd-mac-urlbar .kd-url { flex: 0 1 auto; }
.kd-mac-actions { display: flex; align-items: center; gap: 1.6cqw; margin-left: auto; }
.kd-mac-viewport { position: relative; flex: 1 1 auto; min-height: 0; background: #fff; }

/* silver deck + hinge */
.kd-mac-base {
  position: relative;
  width: 112%;
  margin-left: -6%;
  height: 3.5cqw;
  border-radius: 0 0 1.4cqw 1.4cqw;
  background: linear-gradient(to bottom, #b7bbc2 0%, #c9cdd3 18%, #aeb2b9 64%, #888d95 100%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.kd-mac-base::before {                     /* hinge shadow line under the lid */
  content: "";
  position: absolute;
  top: 0; left: 6%; right: 6%;
  height: .55cqw;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .32), rgba(0, 0, 0, 0));
}
.kd-mac-notch {                            /* lift groove, top-center of deck */
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 13%; height: 1.05cqw;
  border-radius: 0 0 1cqw 1cqw;
  background: linear-gradient(to bottom, #8c9198, #b3b7bd);
}
.kd-mac-label {
  margin-top: .95cqw;
  font-size: 1.95cqw;
  font-weight: 500;
  letter-spacing: .02em;
  color: #6f747c;
}

/* ============================================================================
   Combo: MacBook + iPhone paired (iPhone front-right, overlapping)
   ============================================================================ */
/* Combo: the EXISTING .mbp MacBook (with injected Safari toolbar) + the iPhone */
.kd-combo { position: relative; width: 100%; }
/* Laptop is the hero: shrink it and push it right so the phone has room to
   stand in front-left on the same ground line (classic device-combo layout). */
.kd-combo .mbp-mockup-wrapper { width: 76%; margin-left: auto; }
.kd-combo .kd-iphone-mount {
  position: absolute;
  left: 0;               /* phone stands to the front-left, beside the laptop */
  bottom: 0;             /* bottom-aligned: phone base lands on the laptop's base line */
  width: 19%;            /* ~laptop height; sits clear of the laptop, no overlap */
  z-index: 4;
}

/* Safari desktop toolbar slotted above the screenshot inside the existing MacBook.
   Scoped to .kd-has-safari so the case-study hero MacBooks stay untouched. */
.display-frame.kd-has-safari {
  display: flex;
  flex-direction: column;
  container-type: inline-size;
}
.display-frame.kd-has-safari .project-screen-image {
  position: relative;
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
  .kd-iphone, .kd-macbook { scroll-behavior: auto; }
}