/* ============================================================
   RESPONSIVE STYLES — VisionForge Technologies
   Breakpoints only. No page-specific layout here.
   Mobile-first: defaults = mobile, override upward.

   Breakpoints:
     xs:  0px     (default/mobile)
     sm:  480px   (large phone)
     md:  768px   (tablet)
     lg:  1024px  (laptop)
     xl:  1280px  (desktop)
     2xl: 1536px  (large desktop)
   ============================================================ */

/* ─────────────────────────────────────────────
   MOBILE DEFAULTS (0px — all screens)
   These override desktop-first patterns if any.
───────────────────────────────────────────── */

/* Grid collapses to single column on mobile */
.grid--2,
.grid--3,
.grid--4 {
  grid-template-columns: minmax(0, 1fr);
}

/* Header: show mobile toggle, hide desktop nav.
   Scoped to an explicit max-width query (rather than relying on cascade
   order alone) so it can't be silently defeated by a later stylesheet
   or an equal-specificity rule added elsewhere. */
@media (max-width: 1023.98px) {
  .header__menu-toggle {
    display: flex;
  }

  .header__nav {
    display: none;
  }
}

/* Header: mobile height + logo */
.header__inner {
  height: 64px;
  gap: 16px;
}

.header__logo {
  margin-top: 0;
}

.header__logo img {
  width: 148px;
  height: auto;
}

/* Header actions: hide CTA on small screens, keep toggle */
.header__actions .btn--sm {
  display: none;
}

/* Container: tighter padding on mobile.
   max() with env(safe-area-inset-*) keeps the logo/toggle clear of the
   notch/Dynamic Island in landscape on modern iPhones. */
.site-header .container {
  padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right));
}

/* Footer: mobile — every other section reduces top padding on mobile;
   the footer previously had no override and kept the full desktop
   72px/80px block, feeling disproportionately padded on small screens. */
.footer-main {
  padding-block: var(--space-6) var(--space-8);
}

/* Footer: single column */
.footer-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}

.footer-bottom__inner {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

/* Page hero: smaller headings */
.page-hero__heading {
  font-size: var(--text-3xl);
}

.cta-section__heading {
  font-size: var(--text-3xl);
}

/* Section title */
.section-title__heading {
  font-size: var(--text-3xl);
}

/* Services: mobile — 1 column grid */
.services {
  padding-block: var(--space-5) var(--space-12);
}

/* Services heading: swap which line break is active below 768px so
   "For" doesn't wrap onto its own orphan line (was a 4-line wrap;
   this gives a clean 3-line wrap instead). */
@media (max-width: 767.98px) {
  .services__heading-break--mobile {
    display: inline;
  }

  .services__heading-break--desktop {
    display: none;
  }
}

.services__grid {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.services-cta {
  padding: var(--space-8) var(--space-4);
}

.service-card {
  padding: var(--space-4);
}

.services-cta__heading {
  font-size: var(--text-2xl);
}

/* CTA Final: mobile — full width, stacked buttons */
.cta-final {
  padding-block: var(--space-5) var(--space-12);
}

.cta-final__heading {
  font-size: clamp(1.875rem, 7vw, 2.5rem);
}

.cta-final__desc {
  font-size: 0.9375rem;
}

.cta-final__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  width: 100%;
  max-width: 340px;
}

.cta-final__btn-primary,
.cta-final__btn-secondary {
  min-width: unset;
  width: 100%;
  justify-content: center;
}

.cta-final__label-line {
  width: 20px;
}

/* Portfolio: mobile — 1 column, compact mockup */
.portfolio {
  padding-block: var(--space-5) var(--space-12);
}

.portfolio__grid {
  grid-template-columns: minmax(0, 1fr);
}

.pf-card__mockup {
  height: 224px;
}

.pf-card__body {
  padding: var(--space-5) var(--space-5);
}

/* Fintech mockup (stats + chart + allocation bars) is the densest of the
   four portfolio mockups — tighten its internal spacing on phones so the
   allocation rows aren't clipped by .pfm__screen's overflow:hidden. */
@media (max-width: 767.98px) {
  .pfm__screen {
    padding: 8px 10px;
    gap: 6px;
  }

  .pfm__alloc {
    gap: 3px;
  }
}

.portfolio-cta {
  padding: var(--space-6) var(--space-5);
  margin-top: var(--space-8);
}

.portfolio-cta__actions {
  flex-direction: column;
}

.portfolio-cta__actions .btn {
  width: 100%;
  max-width: 300px;
  justify-content: center;
}

/* About preview: mobile — single column, hide illustration */
.about-preview {
  padding-block: var(--space-5) var(--space-12);
}

.about-preview__container {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
}

.about-preview__visual {
  display: none;
}

.about-preview__heading {
  font-size: var(--text-3xl);
}

.about-cards {
  grid-template-columns: minmax(0, 1fr);
}

/* Stats row: 3 nowrap labels + dividers don't fit a narrow phone width
   as a flex row — lay them out as a proper 3-column grid instead so
   long labels wrap onto 2 lines rather than forcing overflow. */
@media (max-width: 767.98px) {
  .about-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2) var(--space-3);
  }

  .about-stat-divider {
    display: none;
  }

  .about-stat__label {
    white-space: normal;
  }

  /* Touch targets: bump below-44px controls up to the WCAG 2.5.5 minimum
     on phones, where they're the smallest tappable elements on the page. */
  .footer-social__link {
    width: 44px;
    height: 44px;
  }

  .mobile-nav__close {
    width: 44px;
    height: 44px;
  }
}

/* ─────────────────────────────────────────────
   SMALL PHONES (480px+)
───────────────────────────────────────────── */
@media (min-width: 480px) {

  .page-hero__heading {
    font-size: var(--text-4xl);
  }

  .cta-section__heading {
    font-size: var(--text-4xl);
  }

  .section-title__heading {
    font-size: var(--text-3xl);
  }

}

/* ─────────────────────────────────────────────
   LARGE PHONE / LANDSCAPE (576px+)
   Fills the gap between 480px and the 768px tablet
   tier — container padding otherwise jumps straight
   from 20px to 28px across a 288px range.
───────────────────────────────────────────── */
@media (min-width: 576px) {

  .site-header .container {
    padding-inline: max(24px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-right));
  }

  .about-cards {
    grid-template-columns: 1fr 1fr;
  }

}

/* ─────────────────────────────────────────────
   TABLET (768px+)
───────────────────────────────────────────── */
@media (min-width: 768px) {

  /* Services: 2 columns on tablet */
  .services {
    padding-block: var(--space-6) var(--space-10);
  }

  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-cta {
    padding: var(--space-8) var(--space-6);
  }

  /* Grid: 2 columns on tablet */
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer: 2 columns on tablet */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8) var(--space-6);
  }

  .footer-bottom__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  /* Page hero */
  .page-hero__heading {
    font-size: var(--text-4xl);
  }

  .cta-section__heading {
    font-size: var(--text-4xl);
  }

  .section-title__heading {
    font-size: var(--text-4xl);
  }

  /* CTA Final: tablet — buttons row, restore inline */
  .cta-final {
    padding-block: var(--space-6) var(--space-12);
  }

  .cta-final__actions {
    flex-direction: row;
    align-items: center;
    width: auto;
    max-width: none;
    gap: var(--space-3);
  }

  .cta-final__btn-primary,
  .cta-final__btn-secondary {
    width: auto;
  }

  .cta-final__label-line {
    width: 28px;
  }

  /* Portfolio: tablet — 2 columns */
  .portfolio {
    padding-block: var(--space-6) var(--space-12);
  }

  .portfolio__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pf-card__mockup {
    height: 220px;
  }

  .pf-card__body {
    padding: var(--space-5) var(--space-6);
  }

  .portfolio-cta {
    padding: var(--space-8) var(--space-8);
    margin-top: var(--space-10);
  }

  .portfolio-cta__actions {
    flex-direction: row;
  }

  .portfolio-cta__actions .btn {
    width: auto;
  }

  /* About preview: tablet — 2 columns, show illustration */
  .about-preview__container {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .about-preview__visual {
    display: block;
    height: 420px;
  }

  .about-preview__heading {
    font-size: var(--text-3xl);
  }

  .about-cards {
    grid-template-columns: 1fr 1fr;
  }

  .ap-panel {
    width: 240px;
  }

  .ap-team-card,
  .ap-milestone-card {
    left: 0;
    right: 0;
  }

  .ap-team-card  { left: -2%; }
  .ap-milestone-card { right: -2%; }
  .ap-status-pill { right: -2%; }

  /* Header actions: show CTA */
  .header__actions .btn--sm {
    display: inline-flex;
  }

}

/* Header CTA: tablet is touch-first but shares the desktop-sized (36px)
   small button — raise it to the 44px touch-target minimum only in the
   tablet band; laptop+ is mouse-driven so the compact size stays there. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .header__actions .btn--sm {
    height: var(--btn-h-md);
  }

  /* Header: tablet */
  .header__inner {
    height: 72px;
    gap: 24px;
  }

  .header__logo {
    margin-top: 1px;
  }

  .header__logo img {
    width: 172px;
    height: auto;
  }

  .site-header .container {
    padding-inline: max(28px, env(safe-area-inset-left)) max(28px, env(safe-area-inset-right));
  }

}

/* ─────────────────────────────────────────────
   LAPTOP (1024px+)
───────────────────────────────────────────── */
@media (min-width: 1024px) {

  /* Services: 3 columns on laptop */
  .services {
    padding-block: var(--space-6) var(--space-12);
  }

  .services__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Featured + editorial bento treatment — breaks the uniform-grid rhythm
     shared with the Portfolio section's 2×2 grid (Design Standards §9).
     Scoped to the home page's own .services section only — unscoped
     :first-child/:last-child selectors were bleeding into every individual
     service page's Key Features grid (.sp-features-section), which reuses
     the same .service-card/.services__grid components but never designed
     its content for this bento treatment. */
  .services .service-card:first-child {
    grid-column: span 2;
  }

  .services .service-card:last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: var(--space-5);
  }

  .services .service-card:last-child .service-card__icon {
    margin-bottom: 0;
  }

  .services .service-card:last-child .service-card__title,
  .services .service-card:last-child .service-card__desc,
  .services .service-card:last-child .service-card__footer {
    grid-column: 2;
  }

  .services .service-card:last-child .service-card__footer {
    margin-top: var(--space-2);
  }

  .services-cta {
    padding: var(--space-8) var(--space-8);
  }

  /* Grid: restore full columns */
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Header: show desktop nav, hide mobile toggle */
  .header__menu-toggle {
    display: none;
  }

  .header__nav {
    display: flex;
  }

  /* Header: laptop — desktop height, full nav */
  .header__inner {
    height: 86px;
    gap: 40px;
  }

  .header__logo img {
    width: 196px;
    height: auto;
  }

  .site-header .container {
    padding-inline: max(32px, env(safe-area-inset-left)) max(32px, env(safe-area-inset-right));
  }

  /* Footer: full 4-column grid */
  .footer-grid {
    grid-template-columns: minmax(240px, 1.7fr) minmax(110px, 0.75fr) minmax(170px, 1.15fr) minmax(200px, 1.4fr);
    gap: var(--space-6);
  }

  /* Page hero */
  .page-hero__heading {
    font-size: var(--text-5xl);
  }

  .cta-section__heading {
    font-size: var(--text-5xl);
  }

  .section-title__heading {
    font-size: var(--text-4xl);
  }

  /* CTA Final: laptop — tight top to match section rhythm */
  .cta-final {
    padding-block: var(--space-6) var(--space-12);
  }

  .cta-final__label-line {
    width: 32px;
  }

  /* Portfolio: laptop — 2×2 grid, full-height mockups */
  .portfolio {
    padding-block: var(--space-6) var(--space-12);
  }

  .portfolio__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .pf-card__mockup {
    height: 240px;
  }

  .pf-card__body {
    padding: var(--space-6);
  }

  /* About preview: laptop — full 2-column, full illustration */
  .about-preview {
    padding-block: var(--space-6) var(--space-12);
  }

  .about-preview__container {
    grid-template-columns: 52fr 48fr;
    gap: var(--space-14);
  }

  .about-preview__visual {
    height: 500px;
  }

  .about-preview__heading {
    font-size: var(--text-4xl);
  }

  .ap-panel {
    width: 280px;
  }

  .ap-team-card      { left: 2%; top: 4%; }
  .ap-milestone-card { right: 2%; bottom: 6%; }
  .ap-status-pill    { right: 2%; }

}

/* ─────────────────────────────────────────────
   DESKTOP (1280px+)
───────────────────────────────────────────── */
@media (min-width: 1280px) {

  /* Portfolio: desktop — taller mockups */
  .pf-card__mockup {
    height: 260px;
  }

  /* About preview: desktop */
  .about-preview {
    padding-block: var(--space-6) var(--space-12);
  }

  .about-preview__container {
    gap: var(--space-16);
  }

  .about-preview__visual {
    height: 520px;
  }

  .about-preview__heading {
    font-size: clamp(2.25rem, 1.6rem + 2.5vw, 3rem);
  }

  .ap-panel {
    width: 300px;
  }

  /* Page hero */
  .page-hero__heading {
    font-size: var(--text-6xl);
  }

  .cta-section__heading {
    font-size: var(--text-5xl);
  }

  .section-title__heading {
    font-size: var(--text-5xl);
  }

}

/* ─────────────────────────────────────────────
   LARGE DESKTOP (1536px+)
───────────────────────────────────────────── */
@media (min-width: 1536px) {

  /* Increase section padding at very large viewports */
  .section {
    padding-block: var(--space-24);
  }

  .page-hero__heading {
    font-size: var(--text-7xl);
  }

}

/* ─────────────────────────────────────────────
   HERO — MOBILE (0px, default)
───────────────────────────────────────────── */

/* Mobile: content-driven height — don't force full-viewport centering,
   or short content leaves large empty gaps above/below it. */
.hero {
  min-height: auto;
}

/* Single column, no illustration */
.hero__container {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding-block: calc(64px + var(--space-5)) var(--space-8);
  text-align: center;
}

.hero__content {
  align-items: center;
}

.hero__subtext {
  max-width: 540px;
  margin-inline: auto;
}

.hero__heading {
  font-size: var(--text-4xl);
}

.hero__ctas {
  justify-content: center;
}

.hero__btn-primary,
.hero__btn-secondary {
  width: 100%;
  max-width: 320px;
  justify-content: center;
}

.hero__chips {
  justify-content: center;
}

.hero__scroll {
  display: none;
}

/* Hide illustration on mobile */
.hero__visual {
  display: none;
}

/* ─────────────────────────────────────────────
   HERO — SMALL PHONES (480px+)
───────────────────────────────────────────── */
@media (min-width: 480px) {
  .hero__heading {
    font-size: var(--text-5xl);
  }

  .hero__btn-primary,
  .hero__btn-secondary {
    width: auto;
  }
}

/* ─────────────────────────────────────────────
   HERO — TABLET (768px+)
───────────────────────────────────────────── */
@media (min-width: 768px) {
  .hero {
    min-height: 100vh;
    min-height: 100svh;
  }

  .hero__container {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    padding-block: calc(var(--header-height) + var(--header-top-offset) + var(--space-10)) var(--space-7);
    text-align: center;
  }

  .hero__heading {
    font-size: var(--text-5xl);
  }

  .hero__ctas {
    justify-content: center;
  }

  /* Scroll cue was desktop-only before — tablet users had no scroll
     affordance either, even though the hero is full-viewport height here too. */
  .hero__scroll {
    display: flex;
    justify-content: center;
    margin-top: var(--space-4);
  }

  /* Show visual below content on tablet — scaled down */
  .hero__visual {
    display: block;
    height: 300px;
    margin-inline: auto;
    max-width: 400px;
  }

  .hero__visual-scene {
    height: 300px;
  }

  .hv-laptop {
    width: 260px;
  }

  .hv-laptop__screen {
    height: 170px;
  }

  .hv-pill--deploy {
    bottom: 4px;
    left: -8px;
  }

  .hv-pill--build {
    top: 4px;
    right: -8px;
  }
}

/* ─────────────────────────────────────────────
   HERO — LAPTOP (1024px+)
───────────────────────────────────────────── */
@media (min-width: 1024px) {
  .hero__container {
    grid-template-columns: 55fr 45fr;
    gap: var(--space-8);
    padding-block: calc(var(--header-height) + var(--header-top-offset) + var(--space-10)) var(--space-6);
    text-align: left;
  }

  .hero__content {
    align-items: flex-start;
  }

  .hero__subtext {
    margin-inline: 0;
  }

  .hero__ctas {
    justify-content: flex-start;
  }

  .hero__btn-primary,
  .hero__btn-secondary {
    width: auto;
  }

  .hero__chips {
    justify-content: flex-start;
  }

  .hero__scroll {
    display: flex;
  }

  .hero__heading {
    font-size: 2.625rem;
  }

  .hero__visual {
    display: block;
    height: 340px;
    max-width: none;
    margin-inline: 0;
  }

  .hero__visual-scene {
    height: 340px;
  }

  .hv-laptop {
    width: 300px;
  }

  .hv-laptop__screen {
    height: 195px;
  }

  .hv-pill--deploy {
    bottom: 10px;
    left: -10px;
  }

  .hv-pill--build {
    top: 10px;
    right: -10px;
  }
}

/* ─────────────────────────────────────────────
   HERO — DESKTOP (1280px+)
   Style.css defaults take over — these only
   override values that differ from 1024px.
───────────────────────────────────────────── */
@media (min-width: 1280px) {
  .hero__container {
    padding-block: calc(var(--header-height) + var(--header-top-offset) + var(--space-10)) var(--space-6);
  }

  .hero__heading {
    font-size: 3.25rem;
  }

  .hero__visual {
    height: 400px;
  }

  .hero__visual-scene {
    height: 400px;
  }

  .hv-laptop {
    width: 340px;
  }

  .hv-laptop__screen {
    height: 220px;
  }

  .hv-pill--deploy {
    bottom: 16px;
    left: -14px;
  }

  .hv-pill--build {
    top: 16px;
    right: -14px;
  }
}

/* ─────────────────────────────────────────────
   HERO — LARGE DESKTOP (1536px+)
───────────────────────────────────────────── */
@media (min-width: 1536px) {
  .hero__heading {
    font-size: 3.5rem;
  }

  .hero__container {
    padding-block: calc(var(--header-height) + var(--header-top-offset) + var(--space-10)) var(--space-6);
  }
}

/* ─────────────────────────────────────────────
   HERO — SHORT VIEWPORTS
   Full-viewport hero (768px+) must fit inside one
   screen with no scroll — compress vertical rhythm.
   The illustration is compact enough at every width
   tier that it no longer needs its own scaling here.
───────────────────────────────────────────── */
@media (min-width: 768px) and (max-height: 860px) {
  .hero__container {
    padding-block: calc(var(--header-height) + var(--header-top-offset) + var(--space-5)) var(--space-4);
    gap: var(--space-6);
  }

  .hero__heading {
    margin-top: var(--space-1);
  }

  .hero__subtext {
    margin-top: var(--space-1);
  }

  .hero__ctas {
    margin-top: var(--space-2);
  }

  .hero__proof {
    margin-top: var(--space-2);
  }

  .hero__scroll {
    display: none;
  }
}

@media (min-width: 768px) and (max-height: 700px) {
  .hero__heading {
    font-size: var(--text-4xl);
  }
}

/* ─────────────────────────────────────────────
   PRINT
───────────────────────────────────────────── */
@media print {

  .site-header,
  .mobile-nav,
  .footer-social,
  .btn,
  .scroll-progress {
    display: none !important;
  }

  body {
    background: white;
    color: #000;
    font-size: 12pt;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .container {
    max-width: 100%;
    padding-inline: 0;
  }

}

/* ─────────────────────────────────────────────
   HIGH CONTRAST MODE
───────────────────────────────────────────── */
@media (forced-colors: active) {

  .btn--primary {
    background: ButtonText;
    color: ButtonFace;
    forced-color-adjust: none;
  }

  .card {
    border: 1px solid ButtonText;
  }

  .badge--brand {
    border: 1px solid ButtonText;
  }

}

/* ─────────────────────────────────────────────
   REDUCED TRANSPARENCY
───────────────────────────────────────────── */
@media (prefers-reduced-transparency: reduce) {

  .site-header--scrolled {
    background: var(--color-bg-base);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .mobile-nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

}