/*
 * Teky Hub 2.3 responsive hero patch.
 * Loaded after WordPress Custom CSS so the homepage hero keeps a stable,
 * non-squashed two-column layout even when older hero overrides remain.
 */

body.teky-front-page .hero-section {
  min-height: clamp(760px, 92svh, 900px) !important;
  padding-top: clamp(126px, 9vw, 154px) !important;
  padding-bottom: clamp(68px, 6vw, 96px) !important;
}

body.teky-front-page .hero-section > .container.hero-grid {
  width: min(calc(100% - 72px), 1380px) !important;
  max-width: 1380px !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.02fr) minmax(460px, .98fr) !important;
  gap: clamp(42px, 5vw, 78px) !important;
  align-items: center !important;
}

body.teky-front-page .hero-copy {
  min-width: 0 !important;
  max-width: 680px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.teky-front-page .hero-copy h1 {
  max-width: 680px !important;
  margin: 0 0 24px !important;
  font-size: clamp(56px, 4.55vw, 78px) !important;
  line-height: .99 !important;
  letter-spacing: -.045em !important;
  text-wrap: balance;
}

body.teky-front-page .hero-copy .eyebrow {
  margin: 0 0 24px !important;
}

body.teky-front-page .hero-lead {
  max-width: 610px !important;
  margin: 0 0 28px !important;
  font-size: clamp(16px, 1.25vw, 18px) !important;
  line-height: 1.65 !important;
}

body.teky-front-page .hero-lead p:last-child {
  margin-bottom: 0 !important;
}

body.teky-front-page .hero-actions {
  margin-top: 0 !important;
}

/* Keep the artwork column large enough to preserve the browser mockup ratio. */
body.teky-front-page .hero-visual {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 500px !important;
  margin: 0 !important;
  padding: 20px 22px 32px !important;
  display: grid !important;
  place-items: center !important;
  transform: none !important;
  overflow: visible !important;
}

body.teky-front-page .hero-visual .browser-card {
  width: 100% !important;
  max-width: 610px !important;
  min-width: 0 !important;
  height: auto !important;
  aspect-ratio: auto !important;
  margin: 0 auto !important;
  transform: perspective(1200px) rotateY(-4deg) rotateX(1deg) !important;
  transform-origin: center center !important;
}

body.teky-front-page .hero-visual .browser-body {
  height: auto !important;
  padding: clamp(20px, 2vw, 26px) !important;
}

body.teky-front-page .hero-visual .mini-hero {
  grid-template-columns: minmax(0, 1.12fr) minmax(120px, .88fr) !important;
  min-height: clamp(255px, 20vw, 300px) !important;
  padding: clamp(24px, 2.2vw, 32px) !important;
  gap: clamp(20px, 2vw, 28px) !important;
}

body.teky-front-page .hero-visual .mini-graphic {
  width: 100% !important;
  min-width: 0 !important;
  aspect-ratio: 1 / 1 !important;
}

body.teky-front-page .hero-visual .metric-card {
  z-index: 3 !important;
}

body.teky-front-page .hero-visual .metric-card-one {
  left: 0 !important;
  bottom: 18px !important;
}

body.teky-front-page .hero-visual .metric-card-two {
  right: 0 !important;
  top: 28px !important;
}

/* Uploaded hero artwork: preserve its natural proportion instead of stretching it. */
body.teky-front-page .hero-image-wrap {
  width: 100% !important;
  max-width: 610px !important;
  height: auto !important;
  min-height: 0 !important;
}

body.teky-front-page .hero-custom-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 590px !important;
  object-fit: contain !important;
}

/* Common laptop sizes. */
@media (min-width: 1181px) and (max-width: 1440px) {
  body.teky-front-page .hero-section > .container.hero-grid {
    width: min(calc(100% - 64px), 1280px) !important;
    grid-template-columns: minmax(0, .98fr) minmax(445px, 1.02fr) !important;
    gap: clamp(36px, 4vw, 58px) !important;
  }

  body.teky-front-page .hero-copy h1 {
    max-width: 610px !important;
    font-size: clamp(54px, 4.55vw, 68px) !important;
  }

  body.teky-front-page .hero-visual {
    min-height: 470px !important;
    padding-inline: 12px !important;
  }

  body.teky-front-page .hero-visual .browser-card {
    max-width: 560px !important;
  }
}

/* Smaller laptops: keep two columns, but protect the illustration width. */
@media (min-width: 981px) and (max-width: 1180px) {
  body.teky-front-page .hero-section {
    min-height: 730px !important;
  }

  body.teky-front-page .hero-section > .container.hero-grid {
    width: min(calc(100% - 48px), 1100px) !important;
    grid-template-columns: minmax(0, 1fr) minmax(400px, .9fr) !important;
    gap: 30px !important;
  }

  body.teky-front-page .hero-copy h1 {
    max-width: 540px !important;
    font-size: clamp(48px, 5vw, 58px) !important;
  }

  body.teky-front-page .hero-lead {
    max-width: 520px !important;
    font-size: 16px !important;
  }

  body.teky-front-page .hero-visual {
    min-height: 420px !important;
    padding: 10px 0 24px !important;
  }

  body.teky-front-page .hero-visual .browser-card {
    max-width: 500px !important;
    transform: perspective(1200px) rotateY(-2deg) !important;
  }

  body.teky-front-page .hero-visual .metric-card {
    min-width: 172px !important;
    padding: 11px 13px !important;
  }
}

/* Tablet and mobile stack cleanly instead of squeezing either column. */
@media (max-width: 980px) {
  body.teky-front-page .hero-section {
    min-height: auto !important;
    padding-top: 128px !important;
    padding-bottom: 72px !important;
  }

  body.teky-front-page .hero-section > .container.hero-grid {
    width: min(calc(100% - 48px), 760px) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 48px !important;
  }

  body.teky-front-page .hero-copy,
  body.teky-front-page .hero-copy h1,
  body.teky-front-page .hero-lead {
    max-width: 100% !important;
  }

  body.teky-front-page .hero-copy h1 {
    font-size: clamp(48px, 8vw, 66px) !important;
  }

  body.teky-front-page .hero-visual {
    width: min(100%, 650px) !important;
    min-height: 440px !important;
    margin-inline: auto !important;
    padding-inline: 18px !important;
  }

  body.teky-front-page .hero-visual .browser-card {
    max-width: 590px !important;
    transform: none !important;
  }
}

@media (max-width: 640px) {
  body.teky-front-page .hero-section {
    padding-top: 112px !important;
    padding-bottom: 58px !important;
  }

  body.teky-front-page .hero-section > .container.hero-grid {
    width: min(calc(100% - 32px), 600px) !important;
    gap: 34px !important;
  }

  body.teky-front-page .hero-copy h1 {
    font-size: clamp(40px, 12vw, 54px) !important;
    line-height: 1 !important;
  }

  body.teky-front-page .hero-lead {
    font-size: 16px !important;
  }

  body.teky-front-page .hero-visual {
    min-height: 330px !important;
    padding: 0 6px 24px !important;
  }

  body.teky-front-page .hero-visual .browser-card {
    width: calc(100% - 8px) !important;
    border-radius: 17px !important;
  }

  body.teky-front-page .hero-visual .browser-body {
    padding: 16px !important;
  }

  body.teky-front-page .hero-visual .mini-site-header {
    margin-bottom: 18px !important;
  }

  body.teky-front-page .hero-visual .mini-hero {
    min-height: 210px !important;
    padding: 20px !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(90px, .85fr) !important;
    gap: 16px !important;
  }

  body.teky-front-page .hero-visual .metric-card {
    min-width: 150px !important;
    padding: 9px 10px !important;
  }

  body.teky-front-page .hero-visual .metric-card-one {
    left: -2px !important;
    bottom: 2px !important;
  }

  body.teky-front-page .hero-visual .metric-card-two {
    right: -2px !important;
    top: 4px !important;
  }

  body.teky-front-page .hero-visual .metric-card strong {
    font-size: .88rem !important;
  }

  body.teky-front-page .hero-visual .metric-card small {
    font-size: .65rem !important;
  }
}