/* ==========================================================================
   GhazTech Design System — Responsive Overrides
   Breakpoint-specific tweaks layered on top of Bootstrap's grid.
   Ordered largest → smallest, then the desktop-only block last.
   ========================================================================== */

@media (max-width: 1199.98px) {
  :root {
    --container-gutter: 5vw;
  }
}

/* ---------- Tablet and below: mobile navigation takes over ---------- */
@media (max-width: 991.98px) {
  :root {
    /* One nav height for both states so the slide-out panel below always
       meets the bottom of the bar exactly, scrolled or not. */
    --nav-height: 64px;
    --nav-height-scrolled: 64px;
  }

  /* #mainNav is position:sticky, which establishes the containing block for
     any position:fixed descendant (per the CSS Positioned Layout spec) — a
     fixed .nav-links nested inside it would track the nav's own sticky box
     instead of the viewport once the page scrolls. nav.js portals this
     element out to a direct child of <body> at this breakpoint so it is
     fixed relative to the true viewport; here we just style that state. */
  .nav-links {
    position: fixed;
    z-index: var(--z-overlay);
    top: var(--nav-height-scrolled);
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: var(--space-md) var(--container-gutter) var(--space-xl);
    background: var(--glass-fill-strong);
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    transform: translateX(-100%);
    transition: transform var(--duration-base) var(--ease-premium);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav-links.is-open {
    transform: translateX(0);
  }
  .nav-links a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    font-size: 1.02rem;
    border-bottom: 1px solid var(--border-soft-2);
  }
  .nav-links a::after {
    display: none;
  }
  .nav-links a.is-active {
    color: var(--brand-primary-strong);
  }
  .nav-toggle {
    display: inline-flex;
  }
  .nav-cta-desktop {
    display: none;
  }
  .nav-links .btn-brand {
    width: 100%;
    justify-content: center;
    margin-top: var(--space-md);
    border-bottom: none;
  }

  .trust-strip__item {
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
  }
  .trust-strip__item:last-child {
    border-bottom: none;
  }

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

  /* The sticky aside has nowhere to stick once the layout is one column,
     so it becomes an ordinary block above the main content. */
  .workspace {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .workspace__aside {
    position: static;
  }
  .setup-steps {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem 1.2rem;
  }
  .legal-toc ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  .legal-toc a.is-current::before {
    display: none;
  }

  /* Auth split: there is no hover on a touch screen, so the two halves
     stack and the resting one collapses to a tappable header. Fixing the
     height here would cut the form off, so it grows with its content. */
  .auth-page {
    display: block;
    min-height: 0;
  }
  .auth-split,
  .auth-split[data-active="developer"],
  .auth-split[data-active="customer"] {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .auth-side {
    overflow: visible;
  }
  .auth-side + .auth-side {
    border-left: none;
    border-top: 1px solid var(--border-soft);
  }
  .auth-side:not(.is-active) .auth-why {
    display: none;
  }
  .auth-side:not(.is-active) {
    padding-block: var(--space-md);
  }
  .auth-side:not(.is-active) .auth-side__icon {
    margin-bottom: 0.6rem;
  }
  .auth-side__cue {
    /* "Hover" means nothing here. */
    font-size: 0;
  }
  .auth-side__cue::before {
    content: "Tap to sign in";
    font-size: 0.75rem;
  }
  /* The active side is always listed first, so the form is not buried
     under the other option. */
  .auth-side.is-active {
    order: -1;
  }

  /* The connectors run horizontally between four columns; once the steps
     wrap to two rows they would link the wrong pairs, so they come out. */
  .process-step + .process-step::before {
    display: none;
  }

  /* Services: the sticky side rail becomes a scrollable strip above the
     rows, since there is no longer a column to park it in. */
  .svc-layout {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .svc-rail {
    position: static;
    padding: var(--space-2xs);
  }
  .svc-rail__label {
    display: none;
  }
  .svc-rail ol {
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .svc-rail ol::-webkit-scrollbar {
    display: none;
  }
  .svc-rail a {
    white-space: nowrap;
    min-height: 42px;
  }
  .svc-rail a.is-current::before {
    top: auto;
    bottom: 2px;
    left: 0.7rem;
    right: 0.7rem;
    width: auto;
    height: 3px;
  }
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg) var(--space-md);
  }

  h1 {
    line-height: 1.16;
  }

  /* Developers: the five-step rail is unreadable once each column is under
     ~150px, so it becomes a vertical list with the rule running down the
     left of the markers instead of across them. */
  .flow-rail {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
  .flow-rail__step {
    padding: 0 0 var(--space-sm) calc(24px + var(--space-sm));
  }
  .flow-rail__step::before {
    top: 0;
    bottom: 0;
    left: 11px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .flow-rail__step:first-child::before { top: 12px; left: 11px; }
  .flow-rail__step:last-child::before { bottom: auto; height: 12px; right: auto; }
  .flow-rail__n {
    top: 0;
    left: 0;
    transform: none;
  }
  .flow-rail__step h3,
  .flow-rail__step p {
    text-align: left;
  }

  .intern-band {
    grid-template-columns: 1fr;
  }

  /* Two channel tiles side by side leave ~150px for three lines of text. */
  .svc-channels {
    grid-template-columns: 1fr;
  }

  /* Downloads: the four-column row cannot hold a 15rem metadata block and a
     button below ~1000px, so the metadata drops under the description and the
     action moves to the end of that line. */
  .dl-row {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: start;
  }
  .dl-row__meta {
    grid-column: 2 / -1;
    padding-left: 0;
    padding-top: var(--space-sm);
    margin-top: var(--space-sm);
    border-left: none;
    border-top: 1px solid var(--border-soft-2);
  }
}

/* ---------- Phones ---------- */
@media (max-width: 767.98px) {
  .dev-profile__meta li {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
  .dev-profile,
  .criteria {
    padding: var(--space-md);
  }

  /* Downloads on phones: the row becomes a stacked card, and the spec table
     stops being a table — a three-column grid at 375px is unreadable however
     small the type gets. */
  .dl-row {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: var(--space-sm);
  }
  .dl-row__icon {
    width: 44px;
    height: 44px;
  }
  .dl-row__meta {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
  .dl-row__action {
    grid-column: 1 / -1;
  }

  .specs,
  .specs tbody,
  .specs tr,
  .specs th,
  .specs td {
    display: block;
    width: auto;
  }
  .specs thead {
    display: none;
  }
  .specs tbody tr {
    padding-bottom: 0.9rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid var(--border-soft-2);
  }
  .specs tbody tr:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
  }
  .specs th,
  .specs td {
    border-bottom: none;
    padding: 0 0 0.25rem;
  }
  /* The column headers are gone, so each cell labels itself. */
  .specs td::before {
    content: attr(data-label) ": ";
    font-size: var(--fs-tiny);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  :root {
    --container-gutter: max(1.15rem, 5vw);
    --space-3xl: 4.5rem;
    --space-2xl: 3.5rem;
    --radius-lg: 22px;
  }

  /* Bootstrap rows use negative inline margins equal to half the gutter.
     At the default g-5 (3rem) that pushes rows ~5px past the viewport on
     phones, which only stays invisible because body clips overflow-x.
     A smaller horizontal gutter keeps rows inside the container for real. */
  .row {
    --bs-gutter-x: 1.5rem;
  }

  .section,
  .section-pad {
    padding-block: var(--space-2xl);
  }
  .section-pad-sm {
    padding-block: var(--space-xl);
  }
  .page-header {
    padding-block: calc(var(--nav-height) + var(--space-lg)) var(--space-xl);
  }

  :root {
    /* A 16px minimum stops iOS Safari auto-zooming when a field is focused.
       Setting it here rather than on the controls means the label, the
       derived --field-height and everything positioned against it all
       follow automatically. */
    --field-font: 1rem;
  }

  /* Comfortable tap targets */
  .btn-brand,
  .btn-ghost,
  .btn-brand-outline,
  .filter-chip {
    min-height: 46px;
  }
  .footer-col ul a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
  }
  .back-to-top {
    width: 52px;
    height: 52px;
    right: var(--space-sm);
    bottom: var(--space-sm);
  }

  .feature-card,
  .svc-detail,
  .dev-card,
  .form-card,
  .auth-side,
  .account-head,
  .panel {
    padding: var(--space-md);
  }

  .field-grid,
  .est__grid {
    grid-template-columns: 1fr;
  }
  .est {
    padding: var(--space-md);
  }
  .est__headline strong {
    font-size: 1.6rem;
  }
  .form-section,
  .setup-card,
  .legal-doc {
    padding: var(--space-md);
  }

  .account-head {
    align-items: flex-start;
  }
  .account-avatar {
    width: 62px;
    height: 62px;
    font-size: 1.4rem;
  }
  .account-head #logoutBtn {
    width: 100%;
    justify-content: center;
  }
  .metric__value {
    font-size: 1.5rem;
  }
  .photo-editor .btn-brand-outline {
    width: 100%;
    justify-content: center;
  }
  .section-dark {
    padding: var(--space-lg) var(--space-md) !important;
  }

  .auth-page {
    padding-top: calc(var(--nav-height) + var(--space-lg));
    padding-bottom: var(--space-2xl);
  }

  /* Sideways reveals translate 36px horizontally, which on a narrow screen
     nudges content past the viewport edge mid-animation. Fade up instead. */
  .reveal-left,
  .reveal-right {
    transform: translate3d(0, 24px, 0);
  }
  .reveal-left.is-visible,
  .reveal-right.is-visible {
    transform: translate3d(0, 0, 0);
  }

  .download-banner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .legal-badges {
    justify-content: flex-start;
  }
  .dashboard-mock {
    transform: none !important;
  }
  .trust-strip__item {
    padding: var(--space-sm) var(--space-md);
  }

  /* The floating badges hang outside the mock's box; at phone width that
     pushes them past the gutter, so they are pulled in and scaled down. */
  .mock-badge {
    max-width: 158px;
    padding: 0.55rem 0.7rem;
  }
  .mock-badge--tl {
    top: -10px;
    left: 0;
  }
  .mock-badge--br {
    bottom: -14px;
    right: 0;
  }
  .sector-pill {
    font-size: 0.9rem;
    padding: 0.6rem 1.1rem;
  }
  .faq-accordion .accordion-button {
    font-size: 0.95rem;
    padding: 1rem;
    min-height: 52px;
  }
  .faq-accordion .accordion-body {
    padding: 0 1rem 1rem;
  }
  .hero-chip {
    font-size: 0.76rem;
  }

  /* Services: the abstract square would eat half a phone screen, so the
     copy takes the full width and the visual drops to a banner above it. */
  .svc-row {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    padding: var(--space-md);
  }
  .svc-visual {
    order: -1;
    aspect-ratio: 16 / 7;
  }
  .svc-visual .icon {
    width: 44px;
    height: 44px;
  }

  /* Portfolio toolbar: chips above, count below. */
  .pf-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .filter-bar {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.3rem;
    scrollbar-width: none;
  }
  .filter-bar::-webkit-scrollbar {
    display: none;
  }
  .filter-chip {
    flex-shrink: 0;
  }

  .case-dialog {
    width: calc(100vw - 1.5rem);
    max-height: 88vh;
  }
  .case-dialog__body {
    max-height: calc(88vh - 140px);
  }

}

/* ---------- Small phones ---------- */
@media (max-width: 575.98px) {
  .dashboard-mock__kpis {
    grid-template-columns: 1fr 1fr;
  }
  .brand {
    font-size: 1.15rem;
  }
  .brand__mark {
    height: 34px;
  }
  .footer-logo {
    width: 200px;
  }
  /* Stack side-by-side hero actions so neither button gets squeezed. */
  .hero-actions .btn-brand,
  .hero-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }
  .legal-badges span {
    font-size: 0.68rem;
  }
  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .form-actions .btn-brand {
    width: 100%;
    justify-content: center;
  }
  .form-actions__note {
    text-align: center;
    max-width: none;
  }
  .process-steps {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .process-step__num {
    width: 46px;
    height: 46px;
    font-size: 1rem;
  }
}

/* ---------- Small desktops ---------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* The profile card is at its narrowest here: a 7.5rem label column leaves
     the value under 160px, so every entry wraps across three lines. Stack the
     label above the value instead. */
  .dev-profile__meta li {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

/* ---------- Desktop ---------- */
@media (min-width: 992px) {
  /* The logo sits hard against the left edge and the CTA against the right,
     with the links taking the space between and centring in it. */
  .nav-links {
    position: static;
    flex: 1;
    flex-direction: row;
    justify-content: center;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    transform: none;
  }
  /* The last nav-links item duplicates the CTA for the mobile menu only;
     the desktop CTA (.nav-cta-desktop) takes over at this breakpoint. */
  .nav-links > li:last-child {
    display: none;
  }
}