/* project-cards-v03.css
   Interior Trades project cards, Option 3: photo overlay.
   Applies to the Projects page grid and to the v1 Project Card block placed by hand.
   Only the Interior Trades master template (Top Level) loads this file, so General Contracting cards are unaffected. */
body .card.project {
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  height: auto !important;
  aspect-ratio: 6 / 5;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #1f2225;
  box-shadow: none;
}
body .card.project .card-image { position: absolute; inset: 0; margin: 0; }
body .card.project .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}
body .card.project::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 70%;
  background: linear-gradient(180deg, rgba(31, 34, 37, 0) 0%, rgba(31, 34, 37, 0.75) 45%, #1f2225 88%);
  pointer-events: none;
  z-index: 1;
}
body .card.project .card-section {
  position: absolute;
  left: 24px; right: 80px; bottom: 22px;
  z-index: 2;
  padding: 0;
  background: none;
  text-align: left;
}
body .card.project .card-section .title {
  margin: 0 0 6px;
  font-family: UnitedSansCdBd, Arial, sans-serif;
  font-size: 24px;
  font-size: clamp(20px, 6.6cqi, 28px);
  line-height: 1.1;
  color: #ffffff;
}
body .card.project .card-section .content {
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: #e4e6e8;
}
/* The "View Project" bar becomes a round arrow button (text kept for screen readers) */
body .card.project .card-header {
  position: absolute;
  right: 20px; bottom: 22px;
  z-index: 2;
  width: 44px; height: 44px;
  margin: 0; padding: 0;
  border: 0;
  border-radius: 50%;
  background: #CD0202 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 18px no-repeat;
  transition: transform 250ms ease;
}
body .card.project .card-header span {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Narrow cards, such as the block placed three across in a two-thirds column */
@container (max-width: 320px) {
  body .card.project .card-section { left: 18px; right: 66px; bottom: 16px; }
  body .card.project .card-section .content { font-size: 14px; }
  body .card.project .card-header { right: 14px; bottom: 16px; width: 40px; height: 40px; }
}
/* Hover and keyboard focus */
a:hover > .card.project .card-image img,
a:focus-visible > .card.project .card-image img { transform: scale(1.04); }
a:hover > .card.project .card-header,
a:focus-visible > .card.project .card-header { transform: translateX(4px); }
a:has(> .card.project) { display: block; }
a:has(> .card.project):focus-visible { outline: 3px solid #CD0202; outline-offset: 3px; }

@media screen and (max-width: 39.9375em) {
  body .card.project .card-section { left: 20px; right: 72px; bottom: 18px; }
  body .card.project .card-header { right: 16px; bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  body .card.project .card-image img,
  body .card.project .card-header { transition: none; }
}