/* Hand-written fixes on top of the generated Webflow stylesheets. Kept
   separate so webflow.css and delta-vel-portfolio.webflow.css stay untouched
   generated output. Loaded last, after both, so these rules win the cascade
   without needing broad !important. */

/* .image.all-projects (two classes) overrides the base .image rule's
   width:100%/height:100% with width:auto/height:auto, so the <img> renders
   at its own natural pixel size instead of filling .project-item-image-wrapper.
   object-fit:cover then has no box to actually cover, leaving gaps that show
   the page's white background instead of the project's theme color. Restore
   an explicit fill so cover behaves as intended. Affects /projects/,
   /tags/*/, and /roles/*/, which all reuse this class. */
.image.all-projects {
  width: 100%;
  height: 100%;
}

/* Webflow's own template adds a white border around project thumbnails at
   very wide viewports (>=1920px) — remove it so the image sits flush with
   its theme-colored background at every width. */
@media screen and (min-width: 1920px) {
  .image.all-projects,
  .project-item-image-wrapper {
    border: none;
  }
}

/* Spacing for the subtitle/summary added under each project title on
   /projects/. h2 has margin: 0 on both sides (delta-vel-portfolio.webflow.css
   line 62-63), so text placed directly under it needs its own clearance. */
.project-card-subtitle {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  font-weight: 400;
  line-height: 130%;
}

.project-card-summary {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 300;
  line-height: 140%;
}

/* "What We DO": the border wraps just the heading/subtext/"View Projects"
   group (.we-make-bordered, added around them in index.njk), not the full
   card -- .we-make-block itself stays unbordered. Sized to its own content:
   .we-make-block is a flex column with align-items:center (not stretch), so
   a plain block child shrink-wraps instead of stretching full width, which
   is what keeps this snug around the text rather than spanning the card. */
.we-make-bordered {
  border: 1.75px solid #e2e2e2;
  border-radius: 16px;
  padding: 40px;
  /* Fixed size so all 4 cards match regardless of how long their own
     heading/subtext is -- shrink-to-fit sizing (the default before this)
     made each card a different width/height. box-sizing:border-box
     (webflow.css:41, global) keeps padding inside these dimensions. */
  width: 480px;
  height: 200px;
  /* .link-2 is float:left. It was a direct flex child of .we-make-block
     before, where float is ignored on flex items -- that's what centered
     it. Now that it's inside this plain block wrapper, mirror that same
     flex/center behavior so text and the link line up the same way. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* The page's shared .wrapper.all-projects caps content at 1000px, which on
   a 2-column grid leaves large blank margins on wide screens. Widen it to
   match the site's standard 1215px content width. :not(.blog) keeps
   /blog/, which shares this class, at its current width. */
.wrapper.all-projects:not(.blog) {
  max-width: 1215px;
}

/* /projects/ in a 2-column grid on tablet and up; single column stays on
   phones. :not(.blog) keeps this off the blog list, which reuses the same
   base wrapper class. /tags/ and /roles/ use a different wrapper class
   (.collection-list-wrapper) and are unaffected. */
@media screen and (min-width: 768px) {
  .all-projects-collection-list-wrapper:not(.blog) .w-dyn-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    row-gap: 40px;
    align-items: start;
  }

  .all-projects-collection-list-wrapper:not(.blog) .project-item-wrapper {
    margin-bottom: 0;
  }
}

/* Project/taxonomy card titles. The base h2 is 54px, sized for the old
   single-column full-width layout -- in the 2-column grid that wraps
   "Mary Ann's Fine Jewelry"-length titles onto 2 lines. Shrink it so
   typical project names fit on one line at this column width; the
   line-height/margin below still give a wrapped title (an unusually long
   one) comfortable room instead of looking cramped. */
.project-item-heading-wrapper h2 {
  font-size: 34px;
  line-height: 125%;
}

.project-item-heading-wrapper h4 {
  line-height: 125%;
}

.project-item-heading-wrapper {
  margin-bottom: 40px;
}

/* The 4 service cards' rows were being spread far apart vertically -- the
   grid itself was pinned to height:60vh (delta-vel-portfolio.webflow.css
   line 2526), so each row's cell was much taller than its actual content
   (the small bordered box), centered inside all that empty space. Let the
   grid size to its content instead, so the two rows sit close together. */
/* The grid had no width cap, so on a wide screen each of the 2 columns is
   very wide -- .we-make-block centers its (now fixed-width, 480px) card
   within that whole column, which leaves a large empty gap in the middle
   where the two columns meet. Cap the grid so the columns hug the cards. */
.grid-2 {
  height: auto;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  grid-column-gap: 40px;
  grid-row-gap: 40px;
}