/*
 * GrantFullen.com project content width + single icon repair
 * Version: grantfullen-card-content-v20-20260715
 *
 * One static SVG icon per card. All legacy media is hidden. Nested project
 * content wrappers are normalized to a single full-width column.
 */

:root {
  --grant-v20-green: rgb(45 255 92);
  --grant-v20-red: rgb(255 36 79);
}

:where(
  .services-grid,
  .service-grid,
  .grant-services-grid,
  .projects-grid,
  .project-grid,
  .portfolio-grid,
  .work-grid,
  .grant-projects-grid,
  .grant-skill-grid,
  .skills-grid,
  .capabilities-grid
) {
  align-items: start !important;
  align-content: start !important;
  grid-auto-rows: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

.grant-card-v20 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  align-content: start !important;
  align-items: start !important;
  align-self: start !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  box-sizing: border-box !important;
}

.grant-card-v20 > * {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.grant-static-icon-v20 {
  --grant-v20-accent: var(--grant-v20-card-accent, var(--grant-v20-red));

  display: grid !important;
  place-items: center !important;
  justify-self: start !important;
  align-self: start !important;

  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  flex: 0 0 auto !important;

  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  max-width: 54px !important;
  max-height: 54px !important;

  margin: 0 0 0.7rem !important;
  padding: 8px !important;

  color: var(--grant-v20-accent) !important;
  background:
    radial-gradient(
      circle at 42% 32%,
      color-mix(in srgb, var(--grant-v20-accent) 22%, transparent),
      transparent 62%
    ),
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(0,0,0,.28)) !important;

  border: 1px solid var(--grant-v20-accent) !important;
  border-radius: 13px !important;

  box-shadow:
    0 0 0 2px rgba(255,255,255,.05) inset,
    0 0 12px color-mix(in srgb, var(--grant-v20-accent) 72%, transparent),
    0 8px 22px rgba(0,0,0,.34) !important;

  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-sizing: border-box !important;
}

.grant-card-v20.grant-service-v20 > .grant-static-icon-v20 {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  max-width: 60px !important;
  max-height: 60px !important;
}

.grant-card-v20.grant-skill-v20 > .grant-static-icon-v20 {
  width: 45px !important;
  height: 45px !important;
  min-width: 45px !important;
  min-height: 45px !important;
  max-width: 45px !important;
  max-height: 45px !important;
  margin-bottom: 0.45rem !important;
  padding: 7px !important;
}

.grant-static-icon-v20 svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;

  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;

  filter:
    drop-shadow(0 0 3px currentColor)
    drop-shadow(0 0 7px color-mix(in srgb, currentColor 62%, transparent)) !important;
}

/* The key v20 repair: nested project/service content becomes one full column. */
.grant-content-region-v20,
.grant-content-path-v20 {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  justify-self: stretch !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;

  flex-basis: 100% !important;
  flex-grow: 1 !important;
  flex-shrink: 1 !important;

  box-sizing: border-box !important;
}

.grant-content-region-v20 {
  display: block !important;
}

.grant-content-region-v20 > :not(.grant-static-icon-v20),
.grant-content-path-v20 > :not(.grant-static-icon-v20) {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  box-sizing: border-box !important;
}

.grant-text-node-v20 {
  grid-column: 1 / -1 !important;
  justify-self: stretch !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;

  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  box-sizing: border-box !important;
}

.grant-old-media-hidden-v20,
.grant-empty-placeholder-hidden-v20,
.grant-orphan-icon-hidden-v20 {
  display: none !important;
}

.grant-card-v20 :where(
  .project-actions,
  .portfolio-actions,
  .card-actions
) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.65rem !important;
  width: 100% !important;
}

.grant-card-v20 :where(
  .project-actions,
  .portfolio-actions,
  .card-actions
) > *,
.grant-card-v20 a[href*="project"] {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 100% !important;
}

#contact a[href^="mailto:"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 8rem !important;
  max-width: 100% !important;
  color: #101218 !important;
  -webkit-text-fill-color: #101218 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  white-space: nowrap !important;
}

@media (max-width: 680px) {
  :where(
    .services-grid,
    .service-grid,
    .grant-services-grid,
    .projects-grid,
    .project-grid,
    .portfolio-grid,
    .work-grid,
    .grant-projects-grid,
    .grant-skill-grid,
    .skills-grid,
    .capabilities-grid
  ) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .grant-static-icon-v20,
  .grant-card-v20.grant-service-v20 > .grant-static-icon-v20 {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
  }
}