/*
  Nasar Design portfolio: full-bleed layout override
  Add this stylesheet AFTER styles.css in index.html.
  It keeps comfortable content gutters while removing the fixed 1440px wrapper
  and the inset margins on the hero and testimonial banner.
*/

:root {
  --page-gutter: clamp(18px, 3.2vw, 64px);
}

html,
body {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  overflow-x: clip;
}

main {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.topbar {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-left: clamp(16px, 2.4vw, 44px);
  padding-right: clamp(16px, 2.4vw, 44px);
}

/* Remove the 1428px hero cap and the outside inset. */
.hero {
  width: 100%;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0;
}

/* Every section wrapper can now use the complete viewport width. */
.section-wrap {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
}

.clients,
.work,
.experience,
.footer {
  width: 100%;
  max-width: none;
}

/* Keep portfolio cards fluid as the browser grows. */
.project-grid {
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-card,
.project-media {
  min-width: 0;
  width: 100%;
}

/* Full-bleed testimonial backdrop instead of the inset rounded panel. */
.thoughts-banner {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0;
}

.testimonials {
  width: 100%;
}

.testimonial-toolbar {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.footer {
  margin-left: 0;
  margin-right: 0;
}

@media (min-width: 1441px) {
  .section-wrap {
    padding-left: clamp(48px, 4vw, 88px) !important;
    padding-right: clamp(48px, 4vw, 88px) !important;
  }

  .hero-content {
    left: clamp(48px, 5vw, 100px);
    right: clamp(48px, 5vw, 100px);
  }

  .hero-nav-pill {
    left: clamp(48px, 5vw, 100px);
    right: clamp(48px, 5vw, 100px);
  }
}

@media (max-width: 680px) {
  :root {
    --page-gutter: 16px;
  }

  .hero {
    border-radius: 0;
    margin: 0 !important;
  }

  .thoughts-banner {
    border-radius: 0;
  }

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