/* Small overrides and responsive behavior for the static portfolio. */
img {
  max-width: 100%;
  height: auto;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

/* Keep the homepage project thumbnails aligned in a shared 600 × 380 frame. */
.work-section .project-card > .link-block-work {
  flex: 1 1 50%;
  width: min(100%, 600px);
  min-width: 0;
}

.work-section .project-img-shadow,
.work-section .project-img-shadow-2,
.work-section .data-viz-cover,
.work-section .alexa-cover,
.work-section .vectors-wrapper-2 {
  width: 100%;
  aspect-ratio: 30 / 19;
  height: auto;
  overflow: hidden;
  border-radius: 20px;
}

.work-section .project-img-shadow img,
.work-section .project-img-shadow-2 img,
.work-section .data-viz-cover img,
.work-section .alexa-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-section .vectors-wrapper-2 {
  display: block;
  object-fit: cover;
}

[role="button"].w-nav-button {
  cursor: pointer;
}

@media screen and (max-width: 991px) {
  .w-nav[data-collapse="medium"] .w-nav-menu.is-open {
    display: flex !important;
    position: absolute;
    z-index: 1000;
    top: 100%;
    right: 1rem;
    left: auto;
    float: none;
    min-width: 13rem;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border: 1px solid #e5e5e5;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 10%);
    text-align: left;
  }

  .w-nav[data-collapse="medium"] .w-nav-menu.is-open .w-nav-link {
    display: block;
    padding: 0.5rem 0;
  }
}

@media screen and (max-width: 767px) {
  .w-container,
  .container,
  [class*="project-container"] {
    max-width: 100%;
  }

  .projects {
    padding: 2rem 1.25rem;
  }

  .project-card,
  .project-card-dark {
    gap: 1.5rem;
    padding: 2rem 0;
  }

  .work-section .project-card > .link-block-work {
    flex: 0 1 auto;
    width: 100%;
    max-width: 600px;
    align-self: stretch;
  }

  .work-section .project-img-shadow {
    position: relative;
    display: block;
  }

  .work-section .project-img-shadow .premera-cover-2 {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .project-card-title,
  .project-card-textbox,
  .project-card-dark .frame-83,
  .project-summary .column-16 {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .project-summary {
    padding: 2rem 1.25rem;
  }

  ._4-columns,
  ._4-columns-2,
  ._4-columns-3 {
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .paragraph-work,
  .heading-3,
  .frame-102,
  .frame-127,
  .frame-132,
  .dj-hmw {
    width: 100%;
    max-width: 100%;
  }

  .paragraph-work,
  .quotes,
  .quotes-2,
  .notes-2,
  .heading-1,
  .heading-2,
  .heading-3,
  .heading-2-next,
  .heading-3-next {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .footer,
  .footer-dark {
    padding: 2rem 1.25rem;
  }

  ._2-columns-3,
  ._2-columns-5,
  ._2-columns-8 {
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .column-5,
  .column-6,
  .column-7,
  .column-10,
  .column-11,
  .column-12,
  .column-20,
  .column-21,
  .column-22 {
    width: 100%;
    height: auto;
    align-items: flex-start;
  }

  .quotes {
    white-space: normal;
  }
}

@media screen and (max-width: 479px) {
  .navbarcontainer-3,
  .navbarcontainer-4 {
    position: relative;
    width: 100%;
    min-height: 76px;
    padding: 0.75rem 1rem;
  }

  .navbar-content-3,
  .navbar-content-4,
  .navbar-content-5 {
    width: 100%;
    min-height: 52px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 1.25rem;
  }

  .navbar-content-3 > a,
  .navbar-content-4 > a,
  .navbar-content-5 > a,
  .vectors-wrapper-6,
  .vectors-wrapper-18,
  .about-me-logo {
    margin: 0;
  }

  .frame-35,
  .frame-79,
  .frame-93,
  .frame-107 {
    margin: 0;
    gap: 1rem;
  }

  .w-nav-button {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    z-index: 1001;
    display: flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
  }

  .navbar-menu-3,
  .navbar-menu-4 {
    margin: 0;
  }

  .w-nav[data-collapse="medium"] .w-nav-menu.is-open {
    right: 1rem;
    left: 1rem;
    min-width: 0;
  }

  .w-nav-menu.is-open .w-nav-link,
  .w-nav-menu.is-open .nav-bar-15,
  .w-nav-menu.is-open .nav-bar-7,
  .w-nav-menu.is-open .nav-bar-7-dark {
    min-height: 44px;
    color: #222;
  }

  .project-card-title {
    text-align: left;
    align-items: flex-start;
  }

  .project-card-textbox {
    text-align: left;
  }

  .project-summary ._4-columns {
    gap: 1rem;
  }

  .picture {
    max-width: 100%;
  }

  .cta_link-block {
    margin-left: 0;
  }

  .ipg-cover-1 {
    margin-top: 0;
    margin-bottom: 0;
  }

  .leqvio-quotes-content-2 {
    width: 100%;
    max-width: 100%;
  }

  .column-next {
    width: 100%;
    padding: 0 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}